photoshopcs制作拼图小游戏

《photoshopcs制作拼图小游戏》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、使用Flash8结合PhotoshopCS制作拼图小游戏牛晓灵，樊继（平顶山工业职业技术学院，河南平顶山467001）摘要：文章主要介绍了PhotoshopCS的切片工具和存储为Web格式…命令的使用，及Flash8的复制到网格和hitTest()函数等命令的使用，对两者的结合制作出拼图小游戏的过程进行了详细的说明。关键词：切片工具；hitTest()；复制到网格图2未标题-1.jpg320×320像素图1完成效果图拼图游戏是一种古老的游戏，相信大家都玩过拼图游戏，今天我就将拼图游戏的一种制作方法教给大家。完成效果如图1。游戏规则：当在某个小图片上按下鼠标左键不松开鼠标进行拖动时，该小

2、图片跟随鼠标移动，当松开鼠标时，如果是小图片的最后正确位置，该小图片就停留在正确位置，否则回到原来的位置。制作步骤：1．使用Photoshop进行图片处理1）打开AdobePhotoshopCS；2）使用“文件”菜单的“打开…”命令打开准备好的图片“未标题-1.jpg”，如图2。3）使用“视图”菜单的“显示”的“网格”命令，显示出网格。4）使用切片工具将图像等分为36份。（每份3×3小格）5）使用“文件”菜单的“存储为Web所用格式…”命令，单击“存储”按钮后，选择保存位置（本例选择“桌面”）和名称（本例为“未标题-1.html”）后，保存即可。6）关闭AdobePhotoshopCS

3、。2．使用Flash8制作拼图游戏1）打开Flash8，新建一个“Flash文档”。2）设置文档大小为640×480像素。1）使用“文件”菜单的“导入”下的“导入到库”命令，将桌面上的“images”文件夹中所有图片导入到库中。2）从库中将“未标题-1.gif”拖入舞台中，按F8键将它转换为元件，名称为tu1，类型为影片剪辑，确定。3）重复上一步操作，把“未标题-2.gif”转换为tu2，“未标题-3.gif”转换为tu3，……，“未标题-36.gif”转换为tu36。4）将舞台中的36个影片剪辑打乱次序后进行排列。 方法：先将每行的左面一个和右边一个放好位置，再选中这一行的几个，使用

4、对齐面板中的“垂直中齐”和“水平平均间隔”进行排列。之后再对每列的几个影片剪辑，使用对齐面板中的“水平中齐”和“垂直平均间隔”进行排列，如图3。图35）将图层1命名为“图形”，并锁定。6）在库面板中，右击tu1，选择“直接复制”，在弹出的“直接复制元件”对话框中，名称为bt，类型为按钮，确定。这时就有一个按钮元件bt。7）双击bt按钮图标，进行按钮的编辑：将弹起帧的内容全选后，使用“修改”菜单的“分离”命令（或按Ctrl+B）把图像打散，使用墨水瓶工具给它添加黑色边框。在点击帧插入关键帧。在弹起帧将填充删除，只留边框。8）返回场景1。新建一图层，将该图层拖到“图形”层的下面。9）将按钮

5、bt拖入舞台中，选择该按钮，执行“插入”菜单的“时间轴特效”的“帮助”下的“复制到网格”命令，在网格尺寸的行数和列数中填入6，在网格间距的行数和列数中都填入0像素数。单击确定按钮。10）出现一个“复制到网格”的影片剪辑，将其分离（Ctrl+B),在属性面板，将分离后的元件的实例类型（默认的是图形）都转换为“按钮”。并按先行后列的顺序起名bt1，……，bt36。位置如下图。将该层命名为“按钮”并锁定。11）新建一图层，命名为“参考图”，将该图层拖到“按钮”层的下面。12）将“未标题-1.jpg”文件导入库，将之拖入“参考图”层，转换为元件，位置和按钮层的按钮相同，在属性面板，设置其颜色：

6、Alpha，15%。1）使用文本工具，在图片的上方空白处输入文字“拼图游戏”：隶书、60、粗体、颜色#996600；在滤镜面板，添加“投影”效果，阴影颜色#999966。锁定该层。2）将“图形”层解锁，选中影片剪辑tu1，打开动作面板，输入代码：onClipEvent(mouseDown){//当按下鼠标左键时if(this.hitTest(_root._xmouse,_root._ymouse,false))//判断鼠标指针在该对象上 {this.startDrag(true);//进行鼠标跟踪 x=this._x;//用x存储原来的水平坐标y=this._y;}//用y存储原来的垂

7、直坐标onClipEvent(mouseUp){//当按下鼠标左键时if(this.hitTest(_root.bt1))//判断该对象和按钮bt1有重叠，停留在正确位置 {this._x=_root.bt1._x;//使该对象的水平坐标和按钮bt1的水平坐标相同 this._y=_root.bt1._y;}//使该对象的垂直坐标和按钮bt1的垂直坐标相同 else//否则返回原来位置 {this._x=x;this._y=y;} stopDr