资源简介

(共22张PPT)
任务 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”依次替换为“bot2”…“bot9”。
（5）重排影片剪辑元件“pic1”…“pic9”在舞台中的顺序，效果如图所示。
拼图游戏最终效果
6. 测试保存
执行【控制】→【测试影片】命令，观察动画效果。如果满意，执行【文件】→【保存】命令保存文件。(共44张PPT)
能综合应用动画技术制作动画短片。
本任务制作一个公益宣传片，以“保护环境，人人有责”为主题，倡导全社会共同行动，保护环境，效果如图所示。通过本任务的学习，学会综合应用动画技术制作动画短片。
公益宣传片效果图
1. 创建公益宣传片文档
新建一个 Flash 文件， 设置舞台大小为 550 像素 ×400 像素， 背景为深绿色（#669900），将文件保存为“公益宣传片 .fla”。
2. 复制公益宣传片库中的元件
打开“公益宣传片库 .fla”文件，将“库”面板中的“宣传片素材”文件夹复制到当前文档的“库”面板中备用。
3. 绘制场景 1 素材
（1）绘制“背景”图形元件
新建“背景”图形元件，绘制如图所示的背景。
背景
（2）绘制“树”图形元件
新建“树”图形元件，绘制如图所示的树。
（3）制作“树一排”图形元件新建“树一排”图形元件，将“树”图形元件拖动到编辑区，复制多个，排成一排，效果如图所示。
树
树一排
（4）绘制“站牌”图形元件
1）新建“站牌”图形元件，绘制如图所示的站牌。
2）将“妈妈正面”“小明正面”图形元件从“库”面板中拖动到编辑区中，摆放到站牌前面，效果如图所示。
站牌
摆放人物
（5）整理库元件
在“库”面板中新建“场景 1”文件夹，将“背景”“树”“树一排”“站牌”各元件拖进“场景 1”文件夹中。
4. 制作场景 1 动画
（1）返回场景 1 中，新建“镜头”图层，选择第 1 帧，绘制一个边框为黑色，无填充色的矩形，置于舞台中央，匹配舞台大小，锁定“镜头”图层。
（2）在“镜头”图层的下方新建“背景”图层，选择第 1 帧，将“背景”图形元件拖动到舞台中。
（3）新建“树”图层，选择第 1 帧，将“树一排”图形元件拖动到舞台中。
（4）新建“公交车”图层，选择第 1 帧，将“公交车”影片剪辑元件拖动到舞台中。
（5）调整各图层中对象的位置，效果如图所示。
　第 1 帧的背景、树、公交车
（6）在“背景”和“树”图层的第 80 帧插入关键帧，将“背景”元件和“树一排”元件向右拖动一段距离，效果如图所示。分别在两个图层的第 1～80 帧之间创建动画补间动画。
　第 80 帧的背景、树
（7）在“公交车”图层的第 60 帧插入关键帧，将“公交车”影片剪辑元件拖动到舞台中央，效果如图所示。在第 1～60 帧之间创建动画补间动画，在第 80 帧插入关键帧。
　第 60 帧公交车的位置
（8）为了让公交车停下载客，在第 81 帧插入关键帧，将“库”面板中“公交车 -组合”文件夹下的“车 - 车身”影片剪辑元件和“车 - 轮胎”图形元件拖动到舞台中，调整位置和大小，使其与“公交车”影片剪辑元件一致，然后删除“公交车”影片剪辑元件，得到静止的公交车效果。
（9）在“公交车”图层的下方，新建“站牌”图层。在“站牌”图层的第 60 帧插入关键帧，将“站牌”图形元件拖动到舞台中，如图所示。
　第 60 帧站牌的位置
（10）在“站牌”图层的第 80 帧插入关键帧，将“站牌”图形元件移到图所示位置。在第 60～80 帧之间创建动画补间动画。
第 80 帧站牌的位置
（11）分别在“背景”图层、“树”图层和“站牌”图层的第 95 帧和第 135 帧插入关键帧，将第 135 帧的“背景”图形元件、“树一排”图形元件和“站牌”图形元件向右移动，效果如图所示。在三个图层的第 95～135 帧之间创建动画补间动画。
第 135 帧的背景、树、站牌
（12）复制“公交车”图层的第 80 帧，将其粘贴到第 95 帧、第 115 帧和第 135 帧上。
（13）选中第 115 帧的“公交车”元件，在“属性”面板中，选择“颜色”下拉列表中的“色调”属性，设置颜色为白色，色彩数量为 0％，效果如图所示。
第 115 帧的公交车
（14）选中第 135 帧的“公交车”元件，适当放大，在“属性”面板中，选择“颜色”下拉列表中的“色调”属性，设置颜色为白色，色彩数量为 80％，效果如图所示。
第 135 帧的公交车
（15）在“公交车”图层的第 115～135 帧之间创建动画补间动画。
（16）场景 1 动画制作完毕，图层顺序如图所示。
场景 1 图层顺序
操作演示
5. 制作场景 2 动画
（1）在“库”面板中新建“场景 2”文件夹，将“车内场景”“车厢”“车座”“乘客”“饮料瓶”“母子递饮料瓶”元件拖进“场景 2”文件夹中。
（2）新建场景 2，将图层 1 重命名为“车窗”，将“库”面板中的“车内场景”元件拖动到“车窗”图层中。
（3）依次插入关键帧，共 37 帧，效果如图所示。
场景 2“时间轴”面板
（4）选中第 2 帧，将“车内场景”图形元件上移 10 像素。
（5）选中第 4 帧，将“车内场景”图形元件下移 10 像素。
（6）同样的方法，调整后面的各个关键帧，最终得到行进中的车窗动画效果。
6. 绘制场景 3 素材
（1）绘制“垃圾桶”图形元件
1）新建“垃圾桶”图形元件，分层分别绘制“身体”“嘴”“左胳膊”“右胳膊”，调整各图层位置，组合成垃圾桶，如图所示。
2）将图中的“垃圾桶 - 胳膊上”“垃圾桶 - 胳膊下”“垃圾桶 - 身体”“垃圾桶 - 微笑的嘴”转换为图形元件。
绘制垃圾桶
3）新建“垃圾桶 - 张开的嘴”图形元件，绘制张开的嘴，如图所示。
　绘制张开的嘴
（2）制作打字机文字效果
1）新建“倡议”图形元件，将图层 1 重命名为“文字”。选择文本工具，设置字体为 Times New Roman，字体大小为 27，字体颜色为白色，在编辑区中输入文字，效果如图所示。
　输入倡议文字
2）选中“文字”图层的第 1 帧，按【Ctrl+B】组合键打散文字，依次插入关键帧直到第 40 帧，效果如图所示。
　在“倡议”图形元件的“时间轴”面板中插入 40 个关键帧
3）选中第 1 帧，删除所有文字；选中第 2 帧，保留“垃”字，删除其他文字；选中第 3 帧，保留“垃”“圾”二字，删除其他文字，效果如图所示。
4）同样的方法，制作文字逐个显示效果。
　文字逐个显示
5）为了使两段话之间能有一个停顿，将第 21 帧以后的帧后移 2 帧，在第 80 帧插入帧，完成打字机文字动画效果。“时间轴”面板如图所示。
　“倡议”图形元件的“时间轴”面板
（3）绘制“口号”图形元件
新建“口号”图形元件，选择文本工具，设置字体为楷体，字体大小为 66，字体颜色为白色，在编辑区中输入文字，效果如图所示。
（4）整理库元件
在“库”面板中新建“场景 3”文件夹，将“垃圾桶”“倡议”“口号”元件拖进“场景 3”文件夹中。
　输入口号文字
7. 制作场景 3 动画
（1）新建场景 3，将图层 1 重命名为“镜头”，绘制黑框、无填充色的矩形，放置在舞台中央，匹配舞台大小。
（2）在“镜头”图层下方新建“背景”图层，将“库”面板中的“背景”元件拖动到舞台中。
（3）新建“树”图层，将“库”面板中的“树一排”元件拖动到舞台中。
（4）新建“公交车”图层，将“库”面板中的“公交车”元件拖动到舞台中。
（5）调整各图层中对象的位置，效果如图所示。
　第 1 帧的背景、树、公交车
（6）选中“背景”图层、“树”图层的第 25 帧，插入关键帧，向右拖动“背景”图形元件、“树一排”图形元件，效果如图所示。分别在两个图层的第 1～25 帧之间创建动画补间动画。
第 25 帧的背景和树
（7）选中“公交车”图层的第 40 帧，将“公交车”图形元件向左拖移出舞台，效果如图所示。在第 1～40 帧之间创建动画补间动画。
第 40 帧的公交车
（8）创建“引导层”图层，绘制引导路径，效果如图所示，在“引导层”图层的第 25 帧插入帧。
（9）创建“饮料杯”图层，将“库”面板中的“饮料杯”元件拖动到舞台中。在第25 帧插入关键帧，调整第 1 帧和第 25 帧中“饮料杯”元件的位置和方向，在第 1～25 帧之间创建动画补间动画，使“饮料杯”元件沿着引导路径运动，效果如图所示。
绘制引导路径
饮料杯沿路径运动
（10）创建“垃圾桶”图层，在第 41 帧插入关键帧，将“垃圾桶”元件拖动到舞台左侧，效果如图所示。
（11）在“垃圾桶”图层的第 55 帧插入关键帧，将“垃圾桶”元件向右拖移，效果如图所示。在第 41～55 帧之间创建动画补间动画。
第 41 帧的垃圾桶
第 55 帧的垃圾桶
（12）在“垃圾桶”图层的第 56 帧插入关键帧，按【Ctrl+B】组合键打散对象，调整动作，让垃圾桶右侧胳膊有向下运动的趋势。
（13）在第 57～67 帧逐帧插入关键帧，调整垃圾桶右侧胳膊的位置，使其落下后再抬起来，效果如图所示。
第 56～67 帧的垃圾桶动作
（14）选中“垃圾桶”图层第 68 帧，插入关键帧，将“库”面板中的“垃圾桶 - 张开的嘴”图形元件拖动到垃圾桶上，对齐嘴的位置后将微笑的嘴删除，效果如图所示。
第 68 帧嘴巴张开
（15） 在第 69 帧和第 70 帧插入关键帧， 调整垃圾桶右侧胳膊的位置，使其能接触到嘴巴，效果如图所示。
第 68～70 帧的垃圾桶动作
（16）选中第 71 帧，插入关键帧，将“库”面板中绘制好的“垃圾桶 - 微笑的嘴”图形元件拖动到垃圾桶上，对齐嘴的位置后将张开的嘴删除，效果如图所示。
第 71 帧嘴巴闭合
（17）在第 72～75 帧逐帧插入关键帧，调整垃圾桶右侧胳膊的位置，使其回到原位，效果如图所示。
第 72～75 帧的垃圾桶动作
（18）在“饮料杯”图层的第 61～70 帧逐帧插入关键帧，根据垃圾桶右侧胳膊的运动轨迹调整饮料杯的位置，效果如图所示。
第 61～70 帧的饮料杯位置
（19）分别在“背景”图层和“树”图层的第 76 帧和第 86 帧插入关键帧，选择第86 帧中的对象，将其 Alpha 值设为 0％。在第 76～86 帧之间创建动画补间动画。
（20）在“垃圾桶”图层的第 76 帧和第 86 帧插入关键帧，将第 86 帧中的垃圾桶右移一段距离，在第 76～86 帧之间创建动画补间动画，效果如图所示。
第 86 帧的垃圾桶
（21）新建“文字”图层，在第 87 帧插入关键帧，将“倡议”图形元件拖动到舞台中央。
（22）分别在“垃圾桶”图层和“文字”图层的第 145 帧和第 160 帧插入关键帧，然后在第 160帧将“垃圾桶”和“文字”图层中的图形元件的Alpha 值设为 0％，并在第 145～160 帧之间创建动画补间动画，效果如图所示。
图形元件逐渐消失
（23） 在“文字” 图层的第 161 帧插入关键帧，将“口号”图形元件拖动到舞台中央，如图所示。在第 170 帧插入关键帧，将第 161帧中的“口号”图形元件的 Alpha 值设为 0％，在第 161～170 帧之间创建动画补间动画。
将“口号”元件拖入舞台
（24）在“文字”图层的第 195 帧插入帧。
（25）场景 3 动画制作完毕，图层顺序如图所示。
　场景 3 图层顺序
8. 测试保存
执行【控制】→【测试影片】命令，观察动画效果。如果满意，执行【文件】→【保存】命令保存文件。

展开更多......

收起↑