给大做一个拼图小游戏的教程.doc

给大做一个拼图小游戏的教程，有兴趣的朋友可以把MM的照片做成拼图，来搏MM一笑。
　　我们要做的拼图就是把一张大图片分成几个小图片，然后把小图片拼成原来的大图片。以前在这里发过一个拼图，是很早以前用FLASH5.0做的由于原文件找不到了，就重新用FLASHMX做一个，拼图的样式和以前的差不多，就是少做了几张小图片，里面用的方法和程序和以前的有所不同。
　　我们要用两种方法来做，一种是先把小图片按顺序先排好（这样看着整齐简单一些），另一种是让小图片随机排列。话不多说了，现在开始：
　　1、打开FLASHMX，新建一个影片剪辑（插入/新建元件/影片剪辑），然后在这个影片剪辑中导入一张图片（文件/导入/要导入的文件名）。
　　2、图片导入后进行打散（修改/分解组件或CTRL+B），然后把它放到一个新的影片剪辑中，并调整图片的大小，在放入新的影片剪辑时要注意图片的中心位置要对准原点。
　　3、把刚才新影片剪辑里的图片进行切割，切割后的小图片就是你要进行拼图的小图片。在切割时可以先用直线或铅笔工具做好要切割成的外形，这样可以方便的做任何形状。
　　4、将切割好的小图片一片片放入新的影片剪辑内。放入时要使小图片的位置和大图片中小图片的位置相一至，在大图片分割块里使用编辑/拷贝，在新建的剪辑里使用编辑/粘贴到当前位置。把元件的名称统一以“m_p“开头后里跟小图片的顺序，也就是m_p1,m_p2等等。然后设定与元件名称相同的链接ID（在库里面单击鼠标右键/连接/导出为动作脚本）这样做是因为小图片随机排列时要从库里复制。
　　好了，以上的小图片就全部做完了，下面开始做主场景了。
　　在做动画之前先来做个loading,这里做的是一个非常简单的。一共六帧，三个图层。
　　图层一、放入一个动态文本，在ar：连接为baifenbi，就是让这个动态文本显示baifenbi的内容。
　　图层二、放入进度条，制作进度条时，线框里面的进度条（也就是变大的那个条）要用一个影片剪辑（名为jindutiao_mc)，然后在进度条的上方写上请稍后……就行了。在制作影片剪辑时，如果想让进度条从左向右长，就要把左端放在中心点上。如果把进度条的中间放在中心点上就会从中间向两边长。
　　图层一（百分比）、图层二（进度条），的第一帧为空帧，第二帧为是关键帧，里面的内容是从第二帧到第五帧。
　　图层三是程序，1帧：play();
　　2帧：byt = int((_root.getBytesTotal())/1000);
　　down = int((_root.getBytesLoaded())/1000);
　　shuju = int((down/byt)*100);
　　baifenbi = shuju+“%“;
　　_root.jindutiao_mc._xscale = shuju;
　　5帧：if (shuju == 100) {
　　gotoAndPlay(5);
　　} else {
　　gotoAndPlay(2);
　　}
　　这样，一个简单的loading就完成了。
　　接下来是游戏名称和图片预览。
　　第四层是背景从第六帧开始，用张图片来做整个游戏的背景，可以使游戏美观一些。
　　第五层是游戏名称（这里是6~25帧）第六层是图片的预览（这里是25~50）
　　游戏名称和图片预览这里是用的渐现效果，你也可根据自己的需要来增减帧数，改变效果。
　　下面就是游戏的制作关键了，先做的是顺序排列，也就是先把小图片排好，这样游戏简单整齐一些，但每回小图片的位置都一样。
　　新建一影片剪辑（图框），把拼图的大图片放入，然后把它做成一个框（可把图片改变颜色），我们的目的是把小图片拼到这个框里来完成拼图。
　　新建一图层，也就是第七层，把图框放入第51帧也就是接着图片预览后的第一个帧影片剪辑名称frame_mc。建第八层，也是第51帧处把各个小图片放入适当的位置，不要档住图框（小图片和图框的位置可以随便安排）小图片的名为p1_mc~p12_mc这里共十二个小图片按顺序起名。第九层是计时器，就是控制游戏时间的。里面由一个动态文本和一个类似于进度条的显示时间长短的影片剪辑组成。动态文本ar：remnant,影片剪辑名为time_mc。
　　第十层为主程序：
　　第51帧：
　　var center_x = frame_mc._x;
　　var center_y = frame_mc._y;
　　var piece_num = 12;
　　var finish = 0;
　　第52帧：
　　p1_mc.onPress = function() {
　　this.startDrag(false);
　　};
　　p1_mc.onRelease = function() {
　　this.stopDrag();
　　dx = this._x-center_X;
　　dy = this._y-center_Y;
　　d = Math.sqrt(dx*dx+dy*dy);
　　if (d<10) {
　　finish++;
　　this._x = center_x;
　　this._y = center_y;
　　this.onPress = undefined;
　　this.onRelease = undefined;
　　if (finish == piece_num) {
　　_root.gotoAndPlay(“ok“);
　　}
　　}
　　};
　　for (i=2; i<=piece_num; i++) {
　　eval(“p“+i+“_mc“).onPress = p1_mc.onPress;
　　eval(“p“+i+“_mc“).onRelease = p1_mc.onRelease;
　　}
　　var hasTime = 50;
　　var startTime = (new Date()).getTime();
　　onEnterFrame = function () {
　　var now = (new Date()).getTime();
　　remnant = hasTime-Math.floor((now-startTime)/1000);
　　_root.time_mc._yscale = remnant*2;
　　if (this.remnant<=0) {
　　this.onEnterFrame = undefined;
　　gotoAndPlay(30);
　　}
　　};
　　stop();
　　以上就是顺序排列时所用的程序，52帧上的是设置一些参数。53帧是小图片拖动排列和计时器的程序。
　　ok帧为新游戏开始的帧，也可做为游戏的第二关。第30帧为预览图片的帧，是时间到了后反回来始。
　　下回再把随机排列的程序帖上，随机排列时，小图片拖动和第53帧一样，就是在小图片排列上有所不同。
拼图游戏是大家比较熟悉的一种游戏，小时候经常会玩到这个益智游戏，面前摆着一堆小方块，拼来拼去，今天我们就使用Flash重新演绎这个经典的游戏，可谓是老树开新花。（本例的.swf和.fla文件请点击这里下载）

　　游戏主界面如图1所示：

图1

　　游戏主界面的右方是已经被分割的图案碎块，并且已经被打乱排列，左边是拼图的目标区域，我们的任务就是将右边的小块图案分别放置到左边的小方格里，如果将所有小块图案全部放置完毕后，能成为一幅完整的图案，则游戏成功。

　　下面我们来进行此游戏的制作。

　　1．首先需要选择一幅合适的图片，我们选择文件/导入命令，从外部导入一副小熊的图片到影片中，然后使用Ctrl+b快捷键将图片打散，如图2所示：

图2

　　2．然后使用直线工具，在打散后的图形上横向绘制六条直线，纵向绘制两条直线，将图形分成3*7=21块，如图3所示：

图3

　　3．因为游戏中需要使用鼠标拖动小的图案，所以分别选择每一块被分割的图案，将其转换成Button元件，分别命名为o1到o21。

　　4．判断游戏是否胜利，需要借助于Action动作脚本，通过动作脚本判断每块小图案是否在其应在的位置，所以还需要将按钮o1到o21转换成Movie clip影片剪辑，转换方法基本上相似，下面就以将按钮o1转换成影片剪辑m1为例，进行说明。

　　新一个Movie clip影片剪辑，命名为m1,进入元件的编辑区后，将元件o1拖到图层layer1中，并在第5帧插入一个关键帧，然后添加图层layer2,分别在第1,2,5帧插入关键帧，然后给第1帧添加如下Action动作脚本：

x = getProperty("/1", _droptarget);

//取得主场景中实例名为1的影片剪辑的_droptarget属性值，并赋值给变量x，_droptarget属性用来表示MC被放下的绝对路径

if (x eq "/yer1") {

setProperty("/1", _x, getProperty("/yer1", _x));

setProperty("/1", _y, getProperty("/yer1", _y));

gotoAndStop(5);

}//如果x也就是小图案被放下的位置和其对应的矩形位置一致的话，说明小图案的位置正确，然后设置小图案的坐标值为小矩形的坐标值，然后执行第5帧

给第2帧添加如下Action动作脚本：

gotoAndPlay(1);

//返回到第一帧继续判断位置是否正确

给第5帧添加如下Action动作脚本：

stopDrag();

/:correct = Number(/:correct)+1;

//如果位置正确，停止拖动小图案

然后给元件o1添加AS:

on (press) {

startDrag("/1", true);

}

//按下鼠标，开始拖动小图案

on (release) {

stopDrag();

}

//释放鼠标，停止拖动小图案

　　最后时间线如图4所示：

图4

　　5．接下来制作游戏界面左边的接收图案的小方块，一共也需要21个，其制作方法完全相同，下面以其中一个yer1为例进行说明。

　　新建一个Movie clip影片剪辑元件，命名为yer1,然后使用矩形工具绘制一个大小适中，填充色为白色，无轮廓的矩形，如图5所示：

图5

　　如法炮制，制作出其余20个矩形即可。

　　6．回到主场景中，添加三个图层，由下自上分别命名为table,border和pic,首先选中table图层，将元件yer1到yer21共21 个矩形拖到舞台中，排列其位置到舞台左边，并将其排列成7*3的阵列，如图6所示：

图6

　　排列好后，在属性面板中设置其对应的实例名，分别为yer1到yer21.

　　7.选中图层border,使用直线工具给已排列好的矩形添加黑色的边线，如图7所式：

图7

　　8．最后选中图层pic,将元件m1到m21分别从库中拖到舞台上，也排列成7*3的阵列，然后放置到舞台靠右的位置，如图8所示：

图8

　　然后还需要给这21个小图案设置实例名，设置规则是m1设置为1,m2设置为2,依此类推，全部设置。

　　最后发布影片，游戏制作完成了，是不是很简单，如果你已经成功拼出了上面的小熊，完全可以按照上面讲解的方法，换一个图案自己做一个新的游戏，做到百玩而不厌。