PhotoshopCS制作拼图小游戏.doc

使用Flash 8结合Photoshop CS制作拼图小游戏
牛晓灵,樊继
(平顶山工业职业技术学院,河南平顶山 467001)
摘要:文章主要介绍了Photoshop CS的切片工具和存储为Web格式…命令的使用,及Flash 8的复制到网格和hitTest()函数等命令的使用,对两者的结合制作出拼图小游戏的过程进行了详细的说明。
关键词:切片工具;hitTest();复制到网格
图2 未标题- 320×320像素
图1 完成效果图
拼图游戏是一种古老的游戏,相信大家都玩过拼图游戏,今天我就将拼图游戏的一种制作方法教给大家。完成效果如图1。
游戏规则:当在某个小图片上按下鼠标左键不松开鼠标进行拖动时,该小图片跟随鼠标移动,当松开鼠标时,如果是小图片的最后正确位置,该小图片就停留在正确位置,否则回到原来的位置。
制作步骤:
使用Photoshop进行图片处理
打开Adobe Photoshop CS;
使用“文件”菜单的“打开…”命令打开准备好的图片“未标题-”,如图2。
使用“视图”菜单的“显示”的“网格”命令,显示出网格。
使用切片工具将图像等分为36份。(每份3×3小格)
使用“文件”菜单的“存储为Web所用格式…”命令,单击“存储”按钮后,选择保存位置(本例选择“桌面”)和名称(本例为“未标题-”)后,保存即可。
关闭Adobe Photoshop CS。
使用Flash 8制作拼图游戏
打开Flash 8,新建一个“Flash 文档”。
设置文档大小为640×480像素。
使用“文件”菜单的“导入”下的“导入到库”命令,将桌面上的“images”文件夹中所有图片导入到库中。
从库中将“未标题-”拖入舞台中,按F8键将它转换为元件,名称为tu1,类型为影片剪辑,确定。
重复上一步操作,把“未标题-”转换为tu2,“未标题-”转换为tu3,……,“未标题-”转换为tu36。
将舞台中的36个影片剪辑打乱次序后进行排列。
方法:先将每行的左面一个和右边一个放好位置,再选中这一行的几个,使用对齐面板中的“垂直中齐”和“水平平均间隔”进行排列。之后再对每列的几个影片剪辑,使用对齐面板中的“水平中齐”和“垂直平均间隔”进行排列,如图3。
图3
将图层1命名为“图形”,并锁定。
在库面板中,右击tu1,选择“直接复制”,在弹出的“直接复制元件”对话框中,名称为bt,类型为按钮,确定。这时就有一个按钮元件bt。
双击bt按钮图标,进行按钮的编辑:将弹起帧的内容全选后,使用“修改”菜单的“分离”命令(或按Ctrl+B)把图像打散,使用墨水瓶工具给它添加黑色边框。在点击帧插入关键帧。在弹起帧将填充删除,只留边框。
返回场景1。新建一图层,将该图层拖到“图形”层的下面。
将按钮bt拖入舞台中,选择该按钮,执行“插入”菜单的“时间轴特效”的“帮助”下的“复制到网格”命令,在网格尺寸的行数和列数中填入6,在网格间距的行数和列数中都填入0像素数。单击确定按钮。
出现一个“复制到网格”的影片剪辑,将其分离(Ctrl +B),在属性面板,将分离后的元件的实例类型(默认的是图形)都转换为“按钮”。并按先行后列的顺序起名bt1,……,b