用flash制作拼图游戏图解.doc

用flash+photoshop+Av Bros.puzzle2.0滤镜轻松制作拼图游戏
作者：王炳杰 素材：来自互联网 日期：2012/8/14
1、 素材制作:
(1) 先下载一张图片，打开Photoshop，在文件中打开图片，在滤镜菜单中点AV Rros.→AV Bros.puzzle Pro2.0(注：这是一个拼图滤镜，需要下载和安装AV Bros.puzzle Pro2.0)
上边是行下边是列
(2) 在滤镜中设置好拼图样式，行、列数，点“Cut”确定。

（3）全选分割后图片（用鼠标或在菜单上Select→Select All）,在MAIN中选Save Selected Pieces As PSD……，保存成PSD文件，命名后保存，点APPLY关闭滤镜。在Photoshop中关闭原始图片，不用保存，然后打开刚才保存的图片，图片已经分层显示了。
这里是MIAN菜单
这里可以全选图片

（4）选择移动工具，将“自动选择图层”打上对号，图片就可以自由选择了。
分层显示的图片
这里是移动工具

（5）要保存某一层图片（注意最好按顺序保存），先点击图片，就选中了图片所在的层，用右键击图片缩览图，单击“选择图层透明度”该图片就就选中了，复制（Ctrl+C）,新建一个Photoshop文件，粘贴（Ctrl+V）,保存为*.png文件，保存时注意，要选择好是透明的。这样把各层图片一个个保存成透明的文件（图片1，图片2，……）
右键单击这里

2、 游戏制作
（1） 打开Flash8.0，新建一个文件，大小、背景默认（白色、550×400），如图建立五个图层，并命名：背景、按钮、图片1、图片2、AS，背景层如图的两个矩形，和一个青绿填充矩形，按钮层放了五个按钮：初级、中级、高级、原图、刷新，一个影片剪辑提示框和游戏名《美女拼图》.五个按钮分别命名：cj_btn ,zj_btn, gj_btn ,yt_btn, cw_btn, 影片剪辑提示框命名：xz_mc.

给初级按钮名cj_btn

（2）在图片1层，把用Photoshop制作的图片导入到舞台上左边红色矩形框中，并按如图顺序排列好，然后将每个图片转化为影片剪辑（修改→转换为元件→影片剪辑，命名为t1,t2,……），再将每个影片剪辑命名（属性→名称分别为：tu1,tu2,……）
要选中影片剪辑
点击图片后，点此，转换为元件
这是给影片剪辑命名地方

（3）选中图片1层所有图片复制，粘贴到图片2层，重新命名为：mc1,mc2,……，然后打乱顺序，放到右边矩形框中，如图。（注意：一定要先命名完了再打乱）
这是给影片剪辑命名地方

（4）在AS层写入以下代码：var dj = 1;
var pices = 20;
for (i=1; i<=pices; i++) {
mymc_mc = this["mc"+i];
tumc_mc = this["tu"+i];
tumc_mc._visible = false;
td(mymc_mc,tumc_mc);

}

function td(my_mc, tu_mc) {
mymc_mc.onPress = function() {
this.startDrag(false,25,60,550,400);
};
mymc_mc.onRelease = function() {
stopDrag();
if (dj == 1) {
if (this.hitTest(tu_mc)) {
this._x = tu_mc._x;
this._y = tu_mc._y;

s=new Sound()
s.attachSound("ok");
s.start();
}
}
if (dj == 2) {
if (this._x<=(tu_mc._x+20) and this._x>=(tu_mc._x-20) and this._y<=(tu_mc._y+20) and this._y>=(tu_mc._y-20)) {
this._x = tu_mc._x;
this._y = tu_mc._y;
s=new Sound()
s.attachSound("ok1")
s.start()
}
}
if (dj == 3) {
if (this._x<=(tu_mc._x+6) and this._x>=(tu_mc._x-6) and this._y<=(tu_mc._y+6) and this._y>=(tu_mc._y-6)) {
this._x = tu_mc._x;
this._y = tu_mc._y;
s=new Sound()
s.attachSound("ok")
s.start()

}
}
var finish_num = 0;
for (m=1; m<=pices; m++) {
if (_root["mc"+m]._x == _root["tu"+m]._x and _root["mc"+m]._y == _root["tu"+m]._y) {
finish_num += 1;
}
if (finish_num == pices) {
finish._alpha = 100;
finish._x=412
finish._y=320
s=new Sound()
s.attachSound("end")
s.start()
} else {
finish._alpha = 0;
finish._x=1980
finish._y=123
}
}
};
}
cw_btn.onRelease = function() {
finish._alpha = 0;
for (j=1; j<=pices; j++) {
mymc_mc = eval("mc"+j);
mymc_mc._x = 325+random(170);
mymc_mc._y = 110+random(220);
}
};
yt_btn.onRollOver = function() {
for (k=1; k<=pices; k++) {
tumc_mc = eval("tu"+k);
tumc_mc._visible = true;
}
};
yt_btn.onRollOut = function() {
for (k=1; k<=pices; k++) {
tumc_mc = eval("tu"+k);
tumc_mc._visible = false;
}
};
yc_btn.onRelease = function() {
for (k=1; k<=pices; k++) {
tumc_mc = eval("tu"+k);
tumc_mc._visible = false;
}
};
cj_btn.onRelease = function() {
dj = 1;
xz_mc._x = 56;
};
zj_btn.onRelease = function() {
dj = 2;
xz_mc._x = 102;
};
gj_btn.onRelease = function() {
dj = 3;
xz_mc._x = 142;
};
（5）在舞台以外地方新建一个影片剪辑（拼图成功画面），命名为：finish如图所示.
（注意：宽度和高度小于右边区域）
影片剪辑finish
命名：finish

（6）插入音乐：导入三个音乐（格式mp3，或wav）,一个结束欢快的音乐（5秒左右），命名为：end，两个小音效（1到2秒时间）分别命名为：ok和ok1，命名方法如下图所示：
在flash中，由文件→导入→导入到库，打开音效文件（三个，可发一次导入也可以三次导入），完成后打开库，找到导入的音效，右键单击，选择链接……，勾选“为AS……导出（入）”，在标示符中填入：名称，如ok。
命名为：ok
右键单击，选择链接……

3、 成品：
保存文件（*.fla），发布为*.swf文件。
4、反馈：若测试中某按钮位置不太合适，要改一下AS中的坐标值。或变动按钮位置，达到满意为止。