项目 10 ：鼠标特效动画任务 1 ：竞争

Flash动画设计与制作 项目10：鼠标特效动画任务1：竞争

教学目标 • 知识目标： • 熟悉Flash CS3鼠标特效的种类与原理 • 熟悉AS2中与鼠标特效相关函数的功能与参数设置。 • 能力目标： • 能熟练应用AS2制作简单的鼠标特效动画。 • 能熟练应用AS2制作一些高级效果的鼠标特效动画。 • 素质目标： • 培养学生的交流合作能力。 • 培养学生解决问题、自我学习、信息处理的能力。 • 挖掘学生潜在创造力。

知识点 • 鼠标特效的类别与原理。 • AS2中与鼠标特效相关函数的功能与参数设置。

重点技能 • 能熟练应用AS2制作鼠标特效动画。 • 能应用鼠标特效动画原理设计特色作品。

课堂练习 • 任务1：竞争 • 拓展练习： • 练习1：下落的小球

教学过程 • 任务1：竞争 • 效果描述 • 香蕉“上吊”啦！到底是怎么回事呢？拖动鼠标，就能知道答案，动画效果如图所示。

教学过程 • 设计思路 • 选取合适的图片并导入。 • 利用遮罩原理实现基本动画。 • 利用ACTIONSCRIPT实现交互效果。

教学过程 • Step1导入图片 • 1.1 新建一个空白文档，修改舞台的“大小”为“3 00×400像素“，”“背景颜色”为#000000”,其余用默认设置. • 1.2 在时间轴面板，将默认的“图层1”改名为“背景。 • 1.3 执行菜单栏上的“文件→导入→导入到舞台”命令，打开“导入”对话框，将需要的图片素材导入到当前场景舞台中。 • 1.4 选中舞台中的图片实例，在下方的“属性”面板中修改实例的尺寸，如图10—2所示。

教学过程 • Step2制作影片剪辑元件“灯光” • 2.1执行菜单栏上的“插入→新建元件”命令，或使用快捷键“ctri+f8”，打开“创建新元件”对话框。 • 2.2输入元件名称为“灯光”，然后选择元件类型为“影片剪辑”，最后单击“确定”按钮，进入元件编辑界面 • 2.3单击工具箱中的“椭圆工具”在舞台中绘制一个正圆，如图10—3所示。 • 2.4单击左上角的“场景1”按钮，返回场景。

教学过程 • Step3制作遮罩效果 • 3.1在时间轴面板，单击“插入图层”按钮，增加一个新图层，改名为“影片剪辑”。 • 3.2打开“库”面板，将影片剪辑元件“灯光”拖到“影片剪辑”图层的第1帧，并将该影片剪辑实例命名为“light”，如图10-4所 • 3.3在影片剪辑“图层上右击鼠标，在弹出的快捷键菜单中执行“遮罩层”完成遮罩效果的制作，如图10-5所示。

教学过程 • Step4添加作品主题 • 4.1在时间轴面板，单击“插入图层”添加一个图层，并改名为“标题”。 • 4.2单击工具箱中的“文本工具”，左下方的“属性”面板中设置文本工具的参数，如图10-6所示。 • 4.3在舞台中，输入文字“竞争”并移动到合适的位置。 • 4.4选中刚才输入的文字，然后添加滤镜效果，如图10-7所示。 • 4.5此时，时间轴面板如图10-8所示。

教学过程 • Step5给影片剪辑实例添加ActionScript • 5.1将“影片剪辑”图层解锁，然后在舞台中选中该图层的影片剪辑实例对象。 • 5.2按下“F9”键，打开“动作-影片剪辑”面板。 • 5.3在“专家”显示模式，输入如图10-9所示的ACTIONSCRIPT代码。 • Step6保存文件 • 6.1执行菜单栏上的“文件→保存”，命令，或使用快捷键“Ctrl+S,，保存文件。 • 6.2执行菜单栏上的“控制→测试影片”命令，或使用快捷键“ctrl+Enter”,可以导出并观看动画效果。

教学过程 • 注意事项 • 本例主要讲解如何直接对影片剪辑实例实现名添加路径，如“-root.light”表示主场景中的light对象实例，而“light”表示当前场景中的light对象实例。

教学过程 • 扩展尝试 • 如何实现每次单击鼠标左键的时候，不仅可以拖动影片剪辑实例，而且还能修改影片剪辑实例的大小呢？动画效果如图所示。

课后练习 • 如影随行

课后目标评价 • 通过本章节的学习，学生应基本掌握常见的鼠标特效动画的制作。鼠标特效是Flash最吸引人的效果之一，能强化用花交互的参与度，因此学好这个章节的内容，对Flash CS3的综合掌握有很大的好处。

谢谢大家

项目 10 ：鼠标特效动画 任务 1 ：竞争