第4章交互式动画

1、第4章 交互式动画4.1 交互式动画原理所谓交互式动画是指用户可以参与控制、操作的动画。在Flash中，交互式动画是通过ActionScript脚本语言编程实现的。有以下三类交互动画：l 按钮动作：通过ActionScript在按钮上添加交互功能。l 帧 动 作：通过ActionScript在帧上添加交互功能。l 电影剪辑：通过ActionScript在电影剪辑（片段）上添加交互功能。4.2 按钮动作4.2.1制作思路1、在符号库中创建一个“按钮类”的符号；2、将按钮拖到场景中；3、为按钮添加动作（ActionScript编程）。【例4.2-1】制作一个按钮，超级链接到某网站。要求：1、掌握按

2、钮类符号的创建、编辑方法。2、初步了解为按钮添加动作（ActionScript编程）的方法。步骤：1、 按Ctrl+L打开符号库，单击+按钮，新建一个“按钮类”符号。2、 绘制按钮符号。按钮类符号一共只有4个关键帧，分别表示鼠标的3种状态：一般、经过、按下）和响应区。l 一般（Up ）：按钮未被按下（抬起Up）时的状态。l 经过（Over）：鼠标划过按钮（但未按下）时的状态。l 按下（Press）：按下（单击鼠标左键）按钮时的状态。l 反应区：有效的点击区域（响应区、热区）。绘制按钮符号就是在这4帧中分别画出按钮的形状、改变其颜色等编辑工作。3、 返回场景1，从符号库中将按钮拖到图层1的第1帧

3、舞台上，创建一个按钮的实例。将“图层1“重命名为“按钮层”。4、 为按钮添加动作（ActionScript编程）：在按钮实例上单击鼠标右键，选取“动作”菜单项，按图4.2-1所示进行设置。图4.2-15、 按下Ctrl+Enter键测试效果。6、 在按钮上添加文字：在按钮层上新建一个“文字层”，并输入文字“我的网站”，调整好位置，使之位于按钮上。按下Ctrl+Enter键测试效果。7、 按同样的方法，再创建一个按钮实例，命名为“我的邮箱”。在弹出的对象动作窗口中的URL栏中输入“mailto:12”。按下Ctrl+Enter键测试效果。关于ActionScri

4、pt语句说明：1、 在按钮上单击鼠标时，在新窗口中打开网址为“12”的网页。相应的ActionScript语句为：on (release) getURL (http:/12, _blank);2、 在按钮上单击鼠标时，即启动OutLook Express，并自动输入收件人的地址“12”。相应的ActionScript语句为：on (release) getURL (mailto:12);4.2.1 常见的按钮事件事件含义Press按下时触发该事件R

5、elease单击、释放后触发该事件Release Outside单击、在按钮外释放后触发该事件Roll Over鼠标划过按钮时触发该事件Roll Out鼠标移出按钮时触发该事件Drag Over按下鼠标并拖动到按钮上时触发该事件Drag Out按下鼠标并拖动到按钮外时触发该事件Key Press按下键盘指定键时触发该事件4.3 帧动作我们可以给关键帧、空白关键帧等添加动作（Action），让动画播放到此帧时执行指定的操作。【例4.3-1】要求：初步掌握为帧添加动作（ActionScript编程）的2种方法。步骤：1、 制作或调入一个沿轨迹运动的动画，如：例3.4-1运动的小球。2、 插入一个新

6、的图层，命名为“动作层”。在第30帧插入一个关键帧（或空白关键帧）。8、 为关键帧添加动作（ActionScript编程）：在按此关键帧上单击鼠标右键，选取“动作”菜单项，按图4.3-1所示进行设置。图4.3-13、 按下Ctrl+Enter键测试效果。4、 在第5帧插入关键帧，在“帧”面板中，设置其标签为 “Start”，将第30帧的动作gotoAndPlay(10)改为gotoAndPlay (start)。说明：1、当动画执行到第30帧时，表示转到并播放第10帧gotoAndPlay(10)。2、帧有两种表示方法：数值，字符。使用gotoAndPlay（）语句时，应注意选择类型：帧编号数

7、值；帧标签字符。3、一定要选中“转到并播放（G）”复选框（打“”的状态）。图4.3-25、 按下Ctrl+Enter键测试效果。【例4.3-2】按钮动作与帧动作综合运用1、 创建一个位移渐变动画。2、 在第1帧前插入一个关键帧，并为其添加动作：“stop ();”。3、 创建一个按钮类符号，新建一层，命名为“按钮层”。在其第1帧中创建两个该按钮的实例。一个叫“开始”按钮，一个叫“停止”按钮。4、 为按钮添加如下动作：按钮动作含义“开始” 按钮on (release) play ();点击时播放动画“停止”按钮on (release) stop ();点击时停止动画5、 按下Ctrl+Enter

8、键测试效果。4.4 电影剪辑动作4.4.1 电影剪辑概念及其特点电影剪辑（Movie Clip）是Flash中的一个独立的电影片段。电影剪辑存放在符号库中。电影剪辑具有如下特点：1、 可以嵌套一个电影剪辑中又可以包含另一个电影剪辑。2、 拥有自己的时间轴，其播放可不受主时间轴的影响。具有很强的独立性。3、 可以使用ActionScript脚本语言编程对电影剪辑进行控制。Flash5中新增的电影剪辑事件允许直接在电影剪辑上编写命令代码。4.4.2制作思路1、在符号库中创建一个“影片剪辑” 类的符号；2、将其拖到场景中；3、为其添加动作（ActionScript编程）。【例4.4-1】设置鼠标指针

9、的样式1、 绘制或导入一个鼠标“图形”符号。2、 按Ctrl+F8键，新建一个“影片剪辑”类的符号。将图形符号拖到该影片剪辑的第1帧舞台上。选取第20帧，按F6键插入一个关键帧，创建一个顺时针自旋转的移动渐变动画。3、 返回场景1中，将影片剪辑符号拖到第1帧舞台上，并其添加如下动作：（1）动作onClipEvent选取“导入帧”单选框。图4.4-1。图4.4-1（2）设置影片剪辑实例的x轴坐标：选取“动作”“setProperty”在属性栏中选取“_x (x轴)”；在目标栏中输入“This”，勾选中其右侧“表达式”复选框；在值栏中输入“_root._xmouse”，勾选中其右侧“表达式”复选框

10、。图4.4-2。（3）同样的方法，设置y轴坐标。属性栏中选取“_y (y轴)”；值栏中输入“_root._ymouse”。（4）隐藏鼠标指针：选择“对象” “Mouse“hide”。图4.4-3。图4.4-2图4.4-3说明：onClipEvent (enterFrame) /进入电影剪辑第1帧时响应事件 setProperty (this, _x, _root._xmouse); /实例的横坐标=鼠标的横坐标 setProperty (this, _y, _root._ymouse); /实例的纵坐标=鼠标的纵坐标 Mouse.hide(); /隐藏鼠标指针4、 按Ctrl+Enter测试效

11、果。4.4.3 常见电影剪辑事件事件含义Load此电影剪辑在时间轴线里显示、实践化时响应事件Enter Frame进入电影剪辑的第1帧时响应事件Unload电影剪辑从时间轴线上移去时响应事件Mouse Down鼠标左键按下时触发事件Mouse Up鼠标左键释放（抬起）时触发事件Mouse Move鼠标移动时触发事件Key Down按下键盘按键时触发事件。可用key.getcode()获得键值。Key Up释放键盘按键时触发事件。Data使用LoadVariable或LoadMovie操作获取数据时触发事件。【例4.4-2】弹出菜单的制作按钮动作、帧动作与电影剪辑综合运用1、 创建或导入一个按钮

12、类的符号，名为“按钮”。 帧层一般鼠标经过文字层“导航菜单”，黑色“导航菜单”，白色按钮层12025的浅灰色矩形12025的深蓝色矩形2、 创建一个图形类的符号，名为“矩形”。12025的浅灰色矩形。3、 创建一个电影剪辑类的符号，名为“菜单”。 创建菜单伸缩动画： 新建一层，将“矩形”图形符号从库中拖到电影剪辑符号编辑该层第1帧的舞台上。坐标（-300，-180）。将此图层重命名为“菜单层”。 在“菜单层”第5帧插入一关键帧，将“矩形”大小变为120160，坐标为（-300，-180）。 将“菜单层”第1帧复制/粘贴到第10帧。 使用“帧”面板设置从第1帧到第5帧、从第5帧到第10帧两个移动

13、渐变动画。 给帧添加动作：在“菜单层”上，给第1帧、第5帧添加Stop()动作，给第10帧添加gotoAndPlay(1)的动作。 创建按钮实例，并添加动作： 将按钮从库中拖到电影剪辑符号编辑第1帧的舞台上。坐标（-300，-180）。将此图层重命名为“按钮层”。 为“按钮层”中的按钮实例添加Play()的动作：on (release) play (); 将各层都扩展到第10帧。4、将电影剪辑类的符号拖到场景1第1帧的舞台上，测试播放效果。4.5 ActionScript基本语句4.5.1 ActionScript列表4.5.2 ActionScript基本语句详解4.5.3 Action 简

14、明解释4.6 键盘输入响应在交互动画中，有时需要用户从键盘输入信息，以控制动画过程。键盘输入响应是交互式动画的一个重要应用。【例4.6-1】除法运算思路：在输入文本框中输入除数和被除数；在动态文本框中输出商。分别设置变量，对按钮进行Action编程，进行计算。步骤：1、新建一“算式层”，使用文本工具A，按图4.6-1所示，在第1帧设置三个文本框。图4.6-12、在“文本选项”面板中，按图4.6-2所示，对除数、被除数文本框进行设置。其它均采用默认值。（注：文本框类型和变量名很关键。）图4.6-2选项文本框文本框类型变量名最大字符数除数输入文本a7被除数输入文本b7商动态文本s3、创建一个按钮类符号，在场景1中新建一个“按钮层”，在第1帧创建两个按钮实例：计算、清除。4、对按钮实例进行Action编程，进行除法计算。“计算”按钮的Action：on (release) /单击按钮时if (a eq or b eq ) / 如果除数或被除数为空st = 除数、被除数不能为空！; /在状态栏中给出提示else if (a eq 除数 or b eq 被除数) / 否则，如果未输入时 st=请先输入除数、被除数！ ; /在状态栏中给出提示 else s = a/b; / 计算商on (rollOver) /鼠标划过按钮时st = 除法计算; /在状态栏中给出提示on (rollOut)