9.2拼图游戏（课件）-《Flash动画设计与制作（第二版）》同步教学（劳动版）

任务 1　 猜拳游戏 任务 2　 拼图游戏 项目九 游戏制作 Flash 游戏以简单、操作方便、无须安装和文件体积小等优点被广大网友喜爱。Flash CS3 中使用的 ActionScript2.0 是一种面向对象编程的脚本语言，可以大大增强动画的交互性。利用 Flash 可以制作换装游戏、拼图游戏、射击游戏、猜拳游戏等各类游戏。 任务 2　拼图游戏 1. 掌握 onClipEvent（）、hitTest（）、startDrag（）和 stopDrag（）等函数的用法。 2. 能熟练地制作简单的 Flash 游戏。 本任务制作一个拼图游戏，用鼠标拖动小图到参考底图上，图片对应，小图留在底图上，否则回到原位置上。通过本任务的学习，掌握常用函数的用法，以及 Flash 游戏的制作方法和技巧。 拼图游戏效果图 一、影片剪辑事件 如前所述，影片剪辑事件可以通过鼠标、键盘、帧等的触发而引发一系列动作。在为影片剪辑元件指定动作时，必须将动作嵌套在“onClipEvent（）”处理函数中，并指定触发该动作的事件是影片剪辑。 二、碰撞检测函数 hitTest（） hitTest（）函数用来检测两个物体或目标是否重叠和相交，如果相交或重叠，就执行相应的动作，这对于一些互动的动画和游戏非常有用。 三、鼠标跟随函数 startDrag（） startDrag（）函数用于设置拖动影片剪辑实例。 四、停止鼠标跟随函数 stopDrag（） stopDrag（）函数是无参函数，用于停止鼠标拖曳影片剪辑实例。 1. 创建拼图游戏文档 新建一个 Flash 文档（ActionScript 2.0），设置舞台大小为 1 000 像素 ×750 像素，背景颜色为 #FFFFCC，将文件保存为“拼图游戏 .fla”。 2. 创建标题层 （1）将图层 1 重命名为“标题”，选择文本工具，设置字体为黑体，字体大小为88，字体颜色为 #996600，输入文字“拼图游戏”，效果如图所示。 （2）选中输入的文字，添加“投影”滤镜，设置颜色为 #999966，效果如图所示。 输入文字 添加“投影”滤镜 3. 制作参考底图 （1）新建“底图”图层，将素材库中名为“拼图游戏 .jpg”的图片导入到舞台中，效果如图所示。 导入图片 （2）选中导入的图片，执行【修改】→【转换为元件】命令，将图片转换为“参考图片”图形元件。在“属性”面板中将元件的 Alpha 值设为 30%，降低参考底图的透明度，锁定图层，效果如图所示。 降低透明度 4. 制作按钮组合 （1）新建“按钮”图层。新建按钮元件“bot”，在元件的编辑区中选中“弹起”关键帧，选择矩形工具，设置笔触颜色为黑色，填充为无，绘制一个矩形框。在“属性”面板中设置矩形框的大小为 185 像素 ×139 像素，效果如图所示。 制作矩形按钮 （2）返回场景中，选中“按钮”图层的第 1 帧，将“库”面板中的“bot”按钮元件拖动到舞台中，在“属性”面板中设置坐标 X和和 Y的值与“底图”图层中元件相同，效果如图所示。 第一个按钮元件位置 （3）选中“bot”按钮元件，执行【插入】→【时间轴特效】→【帮助】→【复制到网格】命令，弹出“复制到网格”对话框。设置“网格尺寸”中的“行数”和“列数”均为 3，设置“网格间距”中的“行数”和“列数”均为 0 像素数，如图所示。 “复制到网格”对话框 （4）单击“确定”按钮，返回场景中，图层名称自动更改为“复制到网格 1”，舞台中出现一个“复制到网格 1”影片剪辑元件，效果如图所示。 “复制到网格 1”影片剪辑元件 （5）选中舞台中的“复制到网格 1”影片剪辑元件，执行【修改】→【分离】命令，分离后的元件类型默认为“图形”，依次选中分离后的元件，打开“属性”面板，修改元件类型为“按钮”，实例名称分别为“bot1”“bot2”…“bot9”，效果如图所示。 （6）将“复制到网格 1”图层重命名为“按钮”。 “属性”面板 5. 制作小图片影片剪辑 （1）新建“小图片”图层，将素材库中的“小图片 1.gif”导入到舞台中，并将导入的图片转换为影片剪辑元件，重命名为“pic1”。在“属性”面板中设置元件的实例名称为“p1”，效果如图所示。 设置实例名称 （2）选中影片剪辑实例“p1”，执行【窗口】→【动作】命令，打开“动作 - 影片剪辑”面板，输入图所示代码。 影片剪辑实例“p1”的代码 （3） 仿照步骤（1）和（2）， 依次将“小图片 2.gif”～“小图片9.gif” 导入舞台，转换为影片剪辑元件，重命名元件名称，并在“属性”面板中设置实例名称依次为“p2”…“p9”。 （4）复制步骤（2）中的代码，依次粘贴到实例“p2”…“p9”的“动作 - 影片剪辑”面板中，并将代码中的“bot1”依次替换为“bo