第4章交互式动画

1第4章交互式动画4.1交互式动画原理所谓交互式动画是指用户可以参与控制、操作的动画。在Flash中，交互式动画是通过ActionScript脚本语言编程实现的。有以下三类交互动画：按钮动作：通过ActionScript在按钮上添加交互功能。帧动作：通过ActionScript在帧上添加交互功能。电影剪辑：通过ActionScript在电影剪辑（片段）上添加交互功能。4.2按钮动作4.2.1制作思路1、在符号库中创建一个“按钮类”的符号；2、将按钮拖到场景中；3、为按钮添加动作（ActionScript编程）。【例4.2-1】制作一个按钮，超级链接到某网站。要求：1、掌握按钮类符号的创建、编辑方法。2、初步了解为按钮添加动作（ActionScript编程）的方法。步骤：1、按Ctrl+L打开符号库，单击+按钮，新建一个“按钮类”符号。2、绘制按钮符号。按钮类符号一共只有4个关键帧，分别表示鼠标的3种状态：一般、经过、按下）和响应区。一般（Up）：按钮未被按下（抬起Up）时的状态。经过（Over）：鼠标划过按钮（但未按下）时的状态。按下（Press）：按下（单击鼠标左键）按钮时的状态。反应区：有效的点击区域（响应区、热区）。绘制按钮符号就是在这4帧中分别画出按钮的形状、改变其颜色等编辑工作。3、返回场景1，从符号库中将按钮拖到图层1的第1帧舞台上，创建一个按钮的2实例。将“图层1“重命名为“按钮层”。4、为按钮添加动作（ActionScript编程）：在按钮实例上单击鼠标右键，选取“动作”菜单项，按图4.2-1所示进行设置。图4.2-15、按下Ctrl+Enter键测试效果。6、在按钮上添加文字：在按钮层上新建一个“文字层”，并输入文字“我的网站”，调整好位置，使之位于按钮上。按下Ctrl+Enter键测试效果。7、按同样的方法，再创建一个按钮实例，命名为“我的邮箱”。在弹出的对象动作窗口中的URL栏中输入“mailto:[e-mail]”。按下Ctrl+Enter键测试效果。关于ActionScript语句说明：1、在按钮上单击鼠标时，在新窗口中打开网址为“12f.netroom.hbu.edu.cn”的网页。相应的ActionScript语句为：on(release){getURL();}2、在按钮上单击鼠标时，即启动OutLookExpress，并自动输入收件人的地址“[e-mail]”。相应的ActionScript语句为：on(release){getURL(mailto:[e-mail]);}4.2.1常见的按钮事件3事件含义Press按下时触发该事件Release单击、释放后触发该事件ReleaseOutside单击、在按钮外释放后触发该事件RollOver鼠标划过按钮时触发该事件RollOut鼠标移出按钮时触发该事件DragOver按下鼠标并拖动到按钮上时触发该事件DragOut按下鼠标并拖动到按钮外时触发该事件KeyPress按下键盘指定键时触发该事件4.3帧动作我们可以给关键帧、空白关键帧等添加动作（Action），让动画播放到此帧时执行指定的操作。【例4.3-1】要求：初步掌握为帧添加动作（ActionScript编程）的2种方法。步骤：1、制作或调入一个沿轨迹运动的动画，如：例3.4-1运动的小球。2、插入一个新的图层，命名为“动作层”。在第30帧插入一个关键帧（或空白关键帧）。8、为关键帧添加动作（ActionScript编程）：在按此关键帧上单击鼠标右键，选取“动作”菜单项，按图4.3-1所示进行设置。图4.3-13、按下Ctrl+Enter键测试效果。4、在第5帧插入关键帧，在“帧”面板中，设置其标签为“Start”，将第30帧4的动作gotoAndPlay(10)改为gotoAndPlay(start)。说明：1、当动画执行到第30帧时，表示转到并播放第10帧——gotoAndPlay(10)。2、帧有两种表示方法：数值，字符。使用gotoAndPlay（）语句时，应注意选择类型：帧编号——数值；帧标签——字符。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键测试效果。4.4电影剪辑动作4.4.1电影剪辑概念及其特点电影剪辑（MovieClip）是Flash中的一个独立的电影片段。电影剪辑存放在符号库中。电影剪辑具有如下特点：1、可以嵌套——一个电影剪辑中又可以包含另一个电影剪辑。52、拥有自己的时间轴，其播放可不受主时间轴的影响。具有很强的独立性。3、可以使用ActionScript脚本语言编程对电影剪辑进行控制。Flash5中新增的电影剪辑事件允许直接在电影剪辑上编写命令代码。4.4.2制作思路1、在符号库中创建一个“影片剪辑”类的符号；2、将其拖到场景中；3、为其添加动作（ActionScript编程）。【例4.4-1】设置鼠标指针的样式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”，勾选中其右侧“表达式”复选框。图4.4-2。（3）同样的方法，设置y轴坐标。属性栏中选取“_y(y轴)”；值栏中输入“_root._ymouse”。（4）隐藏鼠标指针：选择“对象”→“Mouse“→“hide”。图4.4-3。6图4.4-2图4.4-3说明：onClipEvent(enterFrame){//进入电影剪辑第1帧时响应事件setProperty(this,_x,_root._xmouse);//实例的横坐标=鼠标的横坐标setProperty(this,_y,_root._ymouse);//实例的纵坐标=鼠标的纵坐标Mouse.hide();//隐藏鼠标指针}4、按Ctrl+Enter测试效果。74.4.3常见电影剪辑事件事件含义Load此电影剪辑在时间轴线里显示、实践化时响应事件EnterFrame进入电影剪辑的第1帧时响应事件Unload电影剪辑从时间轴线上移去时响应事件MouseDown鼠标左键按下时触发事件MouseUp鼠标左键释放（抬起）时触发事件MouseMove鼠标移动时触发事件KeyDown按下键盘按键时触发事件。可用key.getcode()获得键值。KeyUp释放键盘按键时触发事件。Data使用LoadVariable或LoadMovie操作获取数据时触发事件。【例4.4-2】弹出菜单的制作——按钮动作、帧动作与电影剪辑综合运用1、创建或导入一个按钮类的符号，名为“按钮”。帧层一般鼠标经过文字层“导航菜单”，黑色“导航菜单”，白色按钮层120×25的浅灰色矩形120×25的深蓝色矩形2、创建一个图形类的符号，名为“矩形”。120×25的浅灰色矩形。3、创建一个电影剪辑类的符号，名为“菜单”。⑴创建菜单伸缩动画：①新建一层，将“矩形”图形符号从库中拖到电影剪辑符号编辑该层第1帧的舞台上。坐标（-300，-180）。将此图层重命名为“菜单层”。②在“菜单层”第5帧插入一关键帧，将“矩形”大小变为120×160，坐标为（-300，-180）。③将“菜单层”第1帧复制/粘贴到第10帧。④使用“帧”面板设置从第1帧到第5帧、从第5帧到第10帧两个移动渐变动画。⑤给帧添加动作：在“菜单层”上，给第1帧、第5帧添加Stop()动作，给第10帧添加gotoAndPlay(1)的动作。⑵创建按钮实例，并添加动作：①将按钮从库中拖到电影剪辑符号编辑第1帧的舞台上。坐标（-300，-180）。将此图层重命名为“按钮层”。②为“按钮层”中的按钮实例添加Play()的动作：on(release){play();}⑶将各层都扩展到第10帧。4、将电影剪辑类的符号拖到场景1第1帧的舞台上，测试播放效果。4.5ActionScript基本语句84.5.1ActionScript列表4.5.2ActionScript基本语句详解4.5.3Action简明解释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帧创建两个按钮实例：计算、清除。94、对按钮实例进行Action编程，进行除法计算。⑴“计算”按钮的Action：on(release){//单击按钮时if(aeq''orbeq''){//如果除数或被除数为空st=除数、被除数不能为空！;//在状态栏中给出提示}elseif(aeq除数orbeq被除数){//否则，如果未输入时st=请先输入除数、被除数！;//在状态栏中给出提示}elses=a/b;//计算商}on(rollOver){//鼠标划过按钮时st=除法计算;//在状态栏中给出提示}on(rollOut){//鼠标划出按钮时，在状态栏中给出提示st='请先输入被除数、除数，然后点击“计算”按钮。';}⑵“清除”按钮的Action：on(release){//单击按钮时a=除数;//设置a文本框显示内容b=被除数;//设置b文本框显示内容s=;//设置s文本框内容为空Selection.setFocus(a);//设置a文本框拥有焦点}5、按Ctrl+Enter键测试效果。【例4.6-2】20以内加法运算要点：输入文本框、随机函数、Action编程。4.7综合应用举例