PhotoshopCS制作拼图小游戏.doc

图2 未标题- 320 × 320 像素使用 Flash 8 结合 Photoshop CS 制作拼图小游戏牛晓灵,樊继(平顶山工业职业技术学院,河南平顶山 467001 ) 摘要:文章主要介绍了 Photoshop CS 的切片工具和存储为 Web 格式…命令的使用, 及 Flash 8 的复制到网格和 hitTest() 函数等命令的使用,对两者的结合制作出拼图小游戏的过程进行了详细的说明。关键词:切片工具; hitTest() ;复制到网格图1 完成效果图拼图游戏是一种古老的游戏, 相信大家都玩过拼图游戏, 今天我就将拼图游戏的一种制作方法教给大家。完成效果如图 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 拖入舞台中,选择该按钮,执行“插入”菜单的“时间轴特效”的“帮助”下的“复制到网格”命令,在网格尺寸的行数和列数中填