PhotoshopCS制作拼图小游戏

admin管理员组

文章数量:1567918

2024年7月25日发(作者：)

使用Flash 8结合Photoshop CS制作拼图小游戏

牛晓灵，樊继

（平顶山工业职业技术学院，河南 平顶山 467001）

摘 要：文章主要介绍了Photoshop CS的切片工具和存储为Web格式„命令的使用，

及Flash 8的复制到网格和hitTest()函数等命令的使用，对两者的结合制作出

拼图小游戏的过程进行了详细的说明。

关键词：切片工具；hitTest()；复制到网格

图1 完成效果图

图

2

未标题

- 320×320像素

拼图游戏是一种古老的游戏，相信大家都玩过拼图游戏，今天我就将拼图游戏的一

种制作方法教给大家。完成效果如图1。

游戏规则：当在某个小图片上按下鼠标左键不松开鼠标进行拖动时，该小图片跟随

鼠标移动，当松开鼠标时，如果是小图片的最后正确位置，该小图片就停留在正确位置，

否则回到原来的位置。

制作步骤：

1． 使用Photoshop进行图片处理

1） 打开Adobe Photoshop CS；

2） 使用“文件”菜单的“打开„”命令打开准备好的图片“未标题-”，如图2。

3） 使用“视图”菜单的“显示”的“网格”命令，显示出网格。

4） 使用切片工具将图像等分为36份。（每份3×3小格）

5） 使用“文件”菜单的“存储为Web所用格式„”命令，单击“存储”按钮后，

选择保存位置（本例选择“桌面”）和名称（本例为“未标题-”）后，保

存即可。

6） 关闭Adobe Photoshop CS。

2． 使用Flash 8制作拼图游戏

1） 打开Flash 8，新建一个“Flash 文档”。

2） 设置文档大小为640×480像素。

3） 使用“文件”菜单的“导入”下的“导入到库”命令，将桌面上的“images”

文件夹中所有图片导入到库中。

4） 从库中将“未标题-”拖入舞台中，按F8键将它转换为元件，名称为tu1，

类型为影片剪辑，确定。

5） 重复上一步操作，把“未标题-”转换为tu2，“未标题-”转换为

tu3，„„，“未标题-”转换为tu36。

6） 将舞台中的36个影片剪辑打乱次序后进行排列。

方法：先将每行的左面一个和右边一个放好位置，再选中这一行的几个，使

用对齐面板中的“垂直中齐”和“水平平均间隔”进行排列。之后再对每列

的几个影片剪辑，使用对齐面板中的“水平中齐”和“垂直平均间隔”进行

排列，如图3。

图3

7） 将图层1命名为“图形”，并锁定。

8） 在库面板中，右击tu1，选择“直接复制”，在弹出的“直接复制元件”对话

框中，名称为bt，类型为按钮，确定。这时就有一个按钮元件bt。

9） 双击bt按钮图标，进行按钮的编辑：将弹起帧的内容全选后，使用“修改”

菜单的“分离”命令（或按Ctrl+B）把图像打散，使用墨水瓶工具给它添加

黑色边框。在点击帧插入关键帧。在弹起帧将填充删除，只留边框。

10） 返回场景1。新建一图层，将该图层拖到“图形”层的下面。

11） 将按钮bt拖入舞台中，选择该按钮，执行“插入”菜单的“时间轴特效”

的“帮助”下的“复制到网格”命令，在网格尺寸的行数和列数中填入6，

在网格间距的行数和列数中都填入0像素数。单击确定按钮。

12） 出现一个“复制到网格”的影片剪辑，将其分离（Ctrl +B),在属性面板，将

分离后的元件的实例类型（默认的是图形）都转换为“按钮”。并按先行后

列的顺序起名bt1，„„，bt36。位置如下图。将该层命名为“按钮”并锁

定。

13） 新建一图层，命名为“参考图”，将该图层拖到“按钮” 层的下面。

14） 将“未标题-”文件导入库， 将之拖入“参考图”层，转换为元件，位

置和按钮层的按钮相同，在属性面板，设置其颜色：Alpha，15%。

15） 使用文本工具，在图片的上方空白处输入文字“拼图游戏”：隶书、60、粗

体、颜色#996600；在滤镜面板，添加“投影”效果，阴影颜色#999966。锁

定该层。

16） 将“图形”层解锁，选中影片剪辑tu1，打开动作面板，输入代码：

onClipEvent (mouseDown) { //当按下鼠标左键时

if(t(_root._xmouse,_root._ymouse,false))

//判断鼠标指针在该对象上

{ rag(true); //进行鼠标跟踪

x=this._x; //用x存储原来的水平坐标

y=this._y; } //用y存储原来的垂直坐标

onClipEvent (mouseUp) { //当按下鼠标左键时

if (t (_1)) //判断该对象和按钮bt1有重叠，停留在正确位置

{ this._x=_1._x; //使该对象的水平坐标和按钮bt1的水平坐标相同

this._y=_1._y; } //使该对象的垂直坐标和按钮bt1的垂直坐标相同

else //否则返回原来位置

{ this._x=x;

this._y=y; }

stopDrag();

}

//_1可用this._1代替。

17） 将以上代码全选后复制，返回场景，再选择tu2，打开 动作面板，进行粘贴，

只用将bt1全部改为bt2即可。

方法：可在动作面板中单击查找和替换按钮，在弹出的“查找和 替换”对话框中，

查找内容：1，替换为：2，单击“全部替换”按钮。

18） 类似进行上步操作，为其它的影片剪辑都添加动作代码。

19） 使用“控制”菜单的“测试影片”（或按Ctrl+Enter），观看效果。

20） 使用“文件”菜单的“导出”的“导出影片”（或按Ctrl+Shift+Alt+s），输入

文件名“拼图游戏”，保存。

21） 可使用“文件”菜单的“发布设置..”命令进行发布设置后发布。也可使用

“文件”菜单的“发布”命令（Shift+F12)直接发布。

说明：

大家也可进行类似的制作，如改变文档的尺寸、改变图像的大小、改变小图片

的数目、改变布局、改变背景颜色等等，制作出具有自己特色的拼图游戏。

3、要掌握的知识点：

1) 掌握Photoshop CS的图像大小命令、网格、切片工具、存储为web格式..命令

的使用。

2) 掌握Flash 8的导入命令、库面板、影片剪辑、按钮、对齐面板、文本、滤镜、

动作面板、测试影片、导出影片等的使用。

3) 掌握复制到网格命令的使用。

4) 掌握影片剪辑的onClipEvent ()处理函数。

5) 掌握startDrag()、stopDrag()和hitTest()命令的使用。

6) _x，_y属性的使用，及if„else„语句的使用。

参考文献：

[1] 倪洋，苏峻，闻利群·Flash 中文版实用教程·人民邮电出版社，2006，251-254。

[2] 程风娟，徐帆，尹辉·中文版Flash 8实用教程·清华大学出版社，2006，210-214。

本文标签： 使用进行按钮命令影片