12.3ActionScript3.0脚本的综合应用(课件)-《Flash CC 2015动画制作案例教程》同步教学（哈尔滨工程大学出版社）

单元十二 ActionScript3.0的应用 单元12 ActionScript3.0的应用 高级动画离不开编程技术,在设计Flash动画作品时,合理运用ActionScript3.0脚本编程语言,可以实现更好、更具视觉效果的动画作品,同时实现交互动画。本单元主要介绍 ActionScript3.0的常用语法和函数,通过多个案例的讲解,掌握脚本语言与交互动画的设置方法。 学习目标 05 02 01 03 04 06 熟悉动作面板,了解动作脚本的写入方法。 掌握使用代码片断面板为动画添加程序代码的方法。 熟悉 ActionScript3.0的基本语法结构。 掌握 MovieClip类语句和Event类语句的使用方法。 掌握鼠标触发事件的应用方法。 掌握函数的定义和调用方法。 任务3 ActionScript3.0脚本的综合应用 本任务进一步理解 ActionScript3.0中的变量、实例与实例名、属性、函数与方法、事件与事件侦听器、类等主要元素;掌握运用按钮事件来控制影片剪辑实例各种属性的方法。 认识 MovieClip类和Event类。 任务3 ActionScript3.0脚本的综合应用 1.MovieClip类 MovieClip类的属性、作用及应用见表12-3。 表12-3 MovieClip类的属性、作用及应用 任务3 ActionScript3.0脚本的综合应用 2.Event类 Event类事件类型及作用见表12-4。 表12-4 Event类事件类型及作用 案例12-7 制作“飞鹰翱翔”的动画 案例描述 苍鹰在天空翱翔,如图12-31所示,用户可以通过一组按钮,来控制对象的属性变化,完成苍鹰飞行时透明度、显示/隐藏、大/小、旋转和飞行方向的改变。这里要用到影片剪辑的控制。影片剪辑一旦创建到库,就会默认为是 MovieClip类,从而具有 MovieClip类的属性和方法。可以为影片剪辑实例命名,然后通过添加类的属性和方法代码来控制其不同的变化效果。 图12-31 飞鹰翱翔的效果图 案例12-7 制作“飞鹰翱翔”的动画 制作步骤 (1)新建一个 ActionScript3.0的 Flash文档,设置舞台大小为默认尺寸550像素×400像素。 (2)制作“云动”图形元件。 ①将“云.jpg”图片导入到库。 ②执行菜单命令“插入”→“新建元件”,在“新建元件”对话框中设置元件名称为“云动”,“类型”为“图形”。从库中将“云.jpg”图片拖放到第1帧中,在第90帧插入一个关键帧,向左水平移动到合适位置,在第1帧与第90帧之间右击,在弹出的快捷菜单中选择“创建补间形状”命令,即可创建云的飘移动画。 (3)返回“场景1”舞台,在“图层1”中拖入“云动”图形元件,并按F5键延长帧数至第90帧。双击“图层1”名称,重命名为“云”。 (4)新建“图层2”,重命名为“鹰”。使用前面做过的例子中的“大鹰”影片剪辑元件,导入库中,将其拖入“鹰”图层。 案例12-7 制作“飞鹰翱翔”的动画 制作步骤 (5)新建“图层3”,重命名为“按钮”。新建4个按钮元件,依次命名为“加按钮”“减按钮”“旋转按钮”“移动按钮”,外观如图12-32所示。 按照图12-33所示,依次把它们拖入“按钮”图层,对齐排布均匀,使用“文字工具”添加说明。为方便排布,可暂时把“云”图层隐藏起来。 图12-32 按钮元件 图12-33 实例按钮 案例12-7 制作“飞鹰翱翔”的动画 制作步骤 (6)舞台上选择“大鹰”实例,更改实例名称为“bird_mc”。依次选取各按钮实例,根据表12-5更改实例名称。 表12-5 实例及实例名称 案例12-7 制作“飞鹰翱翔”的动画 制作步骤 (7)实现动画控制。首先要确认时间轴滑块在舞台第1帧。 ①用键盘方向键控制“大鹰”上下左右飞行。选择“大鹰”实例,打开“代码片断”面板,执行菜单命令“动画”→“用键盘箭头移动”,然后单击面板左上角的“添加到当前帧”命令,系统会自动在时间轴上添加一个 Actions图层,在该图层的第1帧上添加一个关键帧,并出现一个“a”的图标。同时打开“动作”面板,发现系统自动添加了一段用键盘移动的代码,如图12-34和图12-35所示。 图12-34 用“键盘箭头移动”事件 图12-35 “键盘箭头移动”代码 案例12-7 制作“飞鹰翱翔”的动画 制作步骤 (7)实现动画控制。 ②用按钮控制“大鹰”上下左右飞行。选中向上按钮“up_btn”,在“代码片断”面板中双击“事件处理函数”中的 MouseClick事件”,在“动作”面板中,Actions图层的第1帧中自动添加了一段 MouseClick事件代码,将代码中的“trace("已单击鼠标");”修改为“bird_mc.y-=5;”,这句代码的