12.2交互的实现(课件)-《Flash CC 2015动画制作案例教程》同步教学（哈尔滨工程大学出版社）

单元十二 ActionScript3.0的应用 单元12 ActionScript3.0的应用 高级动画离不开编程技术,在设计Flash动画作品时,合理运用ActionScript3.0脚本编程语言,可以实现更好、更具视觉效果的动画作品,同时实现交互动画。本单元主要介绍 ActionScript3.0的常用语法和函数,通过多个案例的讲解,掌握脚本语言与交互动画的设置方法。 学习目标 05 02 01 03 04 06 熟悉动作面板,了解动作脚本的写入方法。 掌握使用代码片断面板为动画添加程序代码的方法。 熟悉 ActionScript3.0的基本语法结构。 掌握 MovieClip类语句和Event类语句的使用方法。 掌握鼠标触发事件的应用方法。 掌握函数的定义和调用方法。 任务2 交互的实现 ActionScript3.0 中 主 要 是 通 过 关 联 一 个 事 件 处 理 函 数 与 一 个 事 件addEventListener方法来实现脚本控制。在FlashCC2015中,使用“代码片断”面板可以方便地调用相关事件代码。本任务重点掌握如何通过“代码片断”面板快速添加时间轴控制代码,从而实现各类交互操作。 任务2 交互的实现 1.代码片断面板的打开 执行菜单命令“窗口”→“代码片断”,或者在“动作”面板右上角单击“代码片断”按钮,如图12-13所示,均可打开“代码片断”面板。 图12-13 单击“代码片断”按钮 任务2 交互的实现 2.使用代码片段面板实现交互 执行菜单命令“窗口”→“代码片断”,弹出图12-14所示的“代码片断”面板。展开相应的事件选项,可看到事件的提示,如图12-15所示。 图12-14 打开“代码片断”面板 图12-15 “代码片断”面板中的事件提示 任务2 交互的实现 3.常用时间轴控制方法 常用时间轴控制方法及作用,见表12-1。 表12-1 常用时间轴的控制方法及作用 案例12-4 制作控制影片剪辑的交互动画 案例描述 本案例实际是把上个实例中的图形元件,改制成影片剪辑元件,用控制影片剪辑的方法来实现控制两球相撞,从而对时间轴导航事件的应用有初步了解。 案例12-4 制作控制影片剪辑的交互动画 制作步骤 (1)新建一个 ActionScript3.0的Flash文档。 (2)创建一个名称为“小球”的影片剪辑元件,再创建一个名称为“两球相撞”的影片剪辑元件,在该影片剪辑元件内制作两个小球水平碰撞的动画(共40帧),如图12-16所示。 图12-16 “两球相撞”影片剪辑元件的时间轴 案例12-4 制作控制影片剪辑的交互动画 制作步骤 (3)把“两球相撞”影片剪辑元件从“库”中拖到舞台中,单击“属性”面板中的“影片剪辑实例名称”,设置为“mc_ball”,双击“图层1”的名称,重命名为“小球”。 (4)在“小球”图层之上插入一个“按钮”图层,把“窗口”菜单下的“组件”面板中的“Button”按钮两次拖动到舞台内,再分别输入“播放”和“暂停”文字。为“播放”按钮设置实例名称为“btn_play”,为“暂停”按钮设置实例名称为“btn_pause” 案例12-4 制作控制影片剪辑的交互动画 制作步骤 (5)选中“播放”按钮,执行菜单命令“窗口”→“代码片断”,打开“代码片断”面板,双击时间轴导航下的“单击以转到帧并播放”,如图12-17所示。打开“动作”面板,在脚本窗口中修改代码为“this.mc_ball.play();”;同理选中“暂停”按钮,修改代码为“this.mc_ball.stop();”,如图12-18所示。 (6)保存文件为“控制两球相撞.fla”。 图12-17 时间轴导航事件 图12-18 修改按钮代码 案例12-5 制作下雨效果的动画 案例描述 下雨动画效果如图12-19所示,雨越下越大。此案例用到了影片剪辑的控制、随机函数的使用,以及动态加载影片剪辑的方法。 图12-19 下雨效果图 案例12-5 制作下雨效果的动画 制作步骤 (1)新建一个 ActionScript3.0的Flash文档,设置舞台大小为640像素×480像素,背景颜色为灰色。 (2)制作一个雨滴的影片剪辑元件。 ①执行菜单命令“插入”→“新建元件”,在“新建元件”对话框中设置名称为“drop”,类型为“影片剪辑”,单击“确定”按钮。 ②在图层1中单击工具箱中的“线条工具”,在舞台中绘制一个短竖线,颜色为白色。选定第20帧,执行菜单命令“插入”→“时间轴”→“关键帧”,插入一个关键帧,此时把短竖线移到屏幕下端,在第1帧到第20帧之间右击,在弹出的快捷菜单中选择“创建形状补间”命令。选定第21帧,执行菜单命令“插入”→“时间轴”→“空白关键帧”,插入一个空白关键帧,单击工具箱中的“椭圆工具”,设置