第8章创建交互动画

陶颖Flash动画制作教学目标：了解Flash8交互动画基本概念掌握创建简单Flash交互动画、动作脚本、给对象分配动作等第8章创建交互动画动作脚本基础使用“动作”面板级动作脚本语言创建交互动画本章内容数据类型与变量表达式和运算符动作脚本概述8.1动作脚本基础动作脚本概述

动作脚本术语动作脚本语法动作脚本术语

动作运算符函数

类

构造函数标识符表达式

常数事件事件处理函数实例实例名称属性变量1.时间轴控制命令play()：用于播放已经停止的动画。stop();用于停止正在播放的动画，使影片停止在当前时间轴的当前帧中。gotoAndStop()：跳转到用帧标签或帧编号指定的某一特定帧并停止。

gotoAndPlay(场景，帧)：跳转到用帧标签或帧编号指定的某一特定帧并继续播放。nextFrame:使影片转到下一帧并停止。prevFrame:使影片回到上一帧并停止。nextScene:使影片转到下一场景并播放。prevScene:使影片回到上一场景并播放。stopAllSounds：停止播放时间轴上的所有声音。1.时间轴控制命令控制影片剪辑的播放与停止：tellTarget命令

如：tellTarget(“C1”)

{gotoAndStop(2)；}//跳影片剪辑实例C1的第2帧并停止。

2.行为事件的设置当为一个按钮或影片剪辑赋予动作后，Flash会自动生成一个特定的动作。这个动作被称为触发事件。Flash中的Ａction事件包括两个，即：按钮的鼠标事件与影片剪辑的事件。（1）按钮的鼠标事件都是以“On”开头，后面为触发按钮动作的鼠标事件。Press:表示将光标移到按钮上并按下鼠标左键时触发动作。Release:表示将光标移到按钮上单击鼠标时触发动作。这是一种标准的单击事件。KeyPress:表示当指定的按键被按下时触发动作。RollOver:表示光标滑过按钮时触发动作。2.行为事件的设置RollOut:表发光标悬浮在按钮上后再移到按钮外部时触发动作。DragOver:表示在按钮上按下鼠标左键，然后将光标移动到按钮区域外，片刻之后再将光标移回按钮上可以触发动作。DragOut:表示在按钮上按下鼠标左键，然后按住左键不放拖动到按钮之外触发动作。（2）而影片剪辑的事件则以“OnClipEvent”开头。Load:当电影剪辑实例被加载时激活事件。EnterFrame:在播放到某一帧时激活事件，在该帧中，OnEnterFrame将在其他任何事件之后才响应。2.行为事件的设置Unload:当电影剪辑实例被卸载时激活事件，和Load电影剪辑搭配使用。Mousedown:当按下鼠标左键时激活事件。Mouseup:当释放鼠标左键时激活事件。Mousemove:当光标在电影剪辑实例上移动时激活事件。此时，利用鼠标属性中的_x和_y来判断鼠标的位置。Keydown:当指定的按键被按下时激活事件。Keyup:当指定的按键被释入时激活事件。Data:利用Loadvariables动作获取数据并进行判断，如果条件成立，则激活事件。动作脚本语法

区分大小写点语法斜扛语法

大括号小括号

分号注释关键字

常数动作脚本语法

区分大小写

ActionScript2.0是一种区分大小写的语言。只是大小写不同的标识符会被视为不同。例如，下面的代码创建两个不同的变量：varnum1:Number;varNum1:Number;

点语法可以通过点运算符(.)来访问对象的属性和方法。使用点语法，可以使用后跟点运算符和属性名或方法名的实例名来引用类的属性或方法。

动作脚本语法斜扛语法

斜杠语法用于指示影片剪辑或变量的路径。分号可以使用分号字符(;)来终止语句。如果省略分号字符，则编译器将假设每一行代码代表一条语句。小括号可以使用小括号来更改表达式中的运算顺序；可以结合使用小括号和逗号运算符(,)来计算一系列表达式并返回最后一个表达式的结果；可以使用小括号来向函数或方法传递一个或多个参数。动作脚本语法注释单行注释和多行注释。关键字和保留字留给ActionScript

使用的，所以，不能在代码中将它们用作标识符。常量

const语句，该语句可用来创建常量。常量是指具有无法改变的固定值的属性。只能为常量赋值一次，而且必须在最接近常量声明的位置赋值。数据类型与变量数据类型：描述变量或动作脚本元素可以包含的信息的种类

字符串

数值布尔值影片剪辑对象空值与未定义类型

数据类型与变量变量：是指编写程序时可以变化的量，与常量相对应变量的命名规则必须是标识符不能是关键字或动作脚本文本，例如true、false、null或undefined

在其范围内必须是惟一的数据类型与变量确定变量的范围和声明变量。变量的范围是指变量在其中已知并且可以引用的区域。根据变量范围的不同，在动作脚本中有3种类型的变量范围：本地变量在声明它们的函数体（由大括号界定）内可用时间轴变量可用于该时间轴上的任何脚本全局变量和函数对于文档中的每个时间轴和范围均可见表达式：是Flash可以计算并返回值的任何语句

运算符：是指定如何组合、比较或修改表达式值的字符表达式和运算符运算的优先级和结合律数值运算符字符串运算符逻辑运算符赋值运算符点运算符和数组访问运算符

例

滚动图片动画学习指导1、学习使用Action语句控制多幅图片的循环滚动。2、学习对象位移属性的设置方法。3、学习“_root”语句的用法。4、学习“if”条件判断语句的使用。提示1、文档名称“滚动图片”。宽640，高120，帧频30。2、在图层1第1帧，依次导入素材guo1-guo4，利用[信息]面板将其横向排列在舞台上。与舞台重合。3、同时选择调整后的所有图像，转换为“图片”影片剪辑元件。4、新建“组合图片”影片剪辑元件，同时切换到该元件编辑窗口。将“图片”元件拖到当前舞台中，位置x:-320,y:0。将“图片”水平向右复制一个，x:320,y:0，与前者并列。提示5、返回“场景1”，选择舞台中的“图片”实例，在“属性”面板中单击“交换”，与“组合图片”交换。6、选择舞台中的“组合图片”实例，在“属性”面板“实例名称”中输入“pic”。7、将图层名称改为“滚动图片”，在第2帧“插入帧”。8、上方插入图层“动作脚本”。在第2帧“插入关键帧”。在本层第1帧，打开“动作”面板。输入如下脚本：提示_root.pic._x--;if(_root.pic._x<=0){_root.pic._x+=640;}在本层第2帧输入：gotoAndPlay(1);知识链接要使图像能够循环滚动，必须有两组相同的图片，而且两组相同的图片必须首尾紧密挨在一起。然后将其制成影片剪辑元件，并且通过设置影片剪辑的位移属性让图片循环滚动。1._root语句的使用“_root”是Flash中比较特殊的用法，表示主场景中的绝对路径，使用“.”来连接后面的语句，如_root.pic代表主场景中的pic实例。与其相似的语句还有：知识链接“_level”:对根时间轴的引用。可以用时间轴中层的概念来理解，就好像影片中的层又可以分为好几层，0就是最底层，越往高处数值越大，默认值为0。“_parent”：表示你场景，也就是上一级影片剪辑。“this”：用于引用对象或实例的本身。执行脚本时，this可以替换包含该脚本的实例。2.位移属性：x、y轴坐标值的属性设置。知识链接3.If语句语法如下：if(条件式){语句1；语句2；语句3……}Else{语句1；语句2；语句3……}实例28计算器实例要求：制作计算器,弄懂ActionScript编程基础知识。步骤：1、新建文档。舞台大小为200px×300px。背景：紫色。2、新建按钮元件，“隐形按钮”。矩形工具，线条：无，填充：白色，Alpha：0%。“点击”帧插入普通帧。3、返回舞台，在舞台上绘制计算器背景框架。4、文本工具，顶部大背景建立“动态文本”，线条类型：单行，选中“在文本周围显示边框”按钮，变量：cal。5、使用文本工具，在下面按钮上输入文字和符号。6、从库中将“隐形按钮”拖入舞台，覆盖每一个文字符号。实例要求：制作计算器,弄懂ActionScript编程基础知识。6、单击第1帧，打开“动作”面板，在脚本编写区添加AS动作语句：varcal:String=""varx:Number=0;vary:Number=0;vartotal:Numbervaroperation:Numbervarmermory:Number7、选择文字“1”上面覆盖的隐形按钮，打开“动作”面板，添加AS动作语句：on(release){ cal=cal+"1"}实例要求：制作计算器,弄懂ActionScript编程基础知识。8、重复步骤7，将其他数字和小数点加上类似语句。9、选择“+”上的隐形按钮，添加AS语句：on(release){ x=Number(cal) opertion=1 cal=""}10、重复步骤9，减、乘、除的opertion依次为2、3、4。11、M+的动作：on(release){ mermory=Number(cal)}实例要求：制作计算器,弄懂ActionScript编程基础知识。12、M-的动作：on(release){ cal=mermory}13、Mc的动作：on(release){mermory=0}14、C的动作：on(release){ cal=""}15、“=”的动作：on(release){ y=Number(cal)实例要求：制作计算器,弄懂ActionScript编程基础知识。

if(opertion==1){ total=x+y opertion="" }if(opertion==2){ total=x-y opertion="" } if(opertion==3){ total=x*y opertion="" }实例要求：制作计算器,弄懂ActionScript编程基础知识。

if(opertion==4){ total=x/y opertion="" } x="" y="" cal=total}“动作”面板

基本动作命令8.2使用“动作”面板

“动作”面板：主要包括动作工作箱、脚本导航器、脚本编辑窗口和工具条4部分“动作”面板“动作”面板动作工具箱脚本编辑区脚本导航器工具条动作面板的设置：向脚本添加语句

查找与替换插入目标路径检查语法和标点自动套用格式显示代码提示调试选项脚本助手

实例29升降旗实例要求：应用动作面板升降旗.步骤：1、新建文档。舞台大小为550px×400px。背景：蓝色。2、创建图形元件：“旗”，无边框红色矩形。3、创建图形元件：“底座”，无边框灰色线性渐变填充矩形。4、创建按钮元件：“按钮1”，在“弹起帧”绘制无边框暗绿色矩形。在“指针经过”、“按下”、“点击”帧插入关键帧。添加图层2，在“弹起帧”输入文本“升旗”。5、创建按钮元件：“按钮2”，在“弹起帧”绘制无边框暗绿色矩形。在“指针经过”、“按下”、“点击”帧插入关键帧。添加图层2，在“弹起帧”输入文本“降旗”。

实例要求：应用动作面板升降旗.6、返回主场景。添加图层2。在图层1拖入3个图形元件“底座”，调整成旗杆和底座状。拖入“按钮1”和“按钮2”放在舞台右侧。图层2第1帧，拖入“旗”。7、为“按钮1”添加动作：on(press){ gotoAndPlay(1);}为“按钮2”添加动作：on(press){ gotoAndPlay(10);}8、图层1第20帧插入关键帧。图层2第10帧、第20帧插入关键帧。移动第10帧的旗到顶端。创建各关键帧运动渐变。9、图层2第1帧和第10帧分别加入语句：stop();实例30飘雪实例要求：利用ActionAcript的语法规则,制作飘雪动画.步骤：1、新建文档。舞台大小为540px×350px。背景：黑色。2、新建图形元件“雪”。直线工具绘制雪花。3、创建影片剪辑元件“下落”。单击第1帧，拖入“雪”。分别在第20帧和第40帧插入关键帧。依次改变各关键帧图形透明度为0%、79%、0%，移动图形位置，创建补间动画,制作飘雪效果。4、创建影片剪辑元件“文字”。输入文本“飘雪”，分别在第5、10、15、20、25帧插入关键帧，改变各帧文本的颜色。实例要求：利用ActionAcript的语法规则,制作飘雪动画.5、创建影片剪辑元件“动作1”，第2帧插入关键帧，选择文本工具，设置类型为“输入文本”。拉一个文本框426*269。单击第1帧，加入语句：stop();单击第2帧，加入语句：a=random(10);while(Number(10)<=2){ a=Number(a)+1; setProperty("/one/snow",_x,random(500)); setProperty("/one/snow",_y,random(500)); n=number(n)+1; duplicateMovieClip("/one/snow","snow_"addn,n);}实例要求：利用ActionAcript的语法规则,制作飘雪动画.6、创建影片剪辑元件“动作2”，单击第一帧输入语句：a=random(100);while(Number(a)<=100){ a=Number(a)+1; setProperty("/snow",_x,random(500)); setProperty("/snow",_y,random(400)); setProperty("/snow",_xscale,random(50)); setProperty("/snow",_yscale,random(50)); setProperty("/snow",_rotation,random(360)); duplicateMovieClip("/snow","snow_",adda,a);}7、返回场景1，添加一个新图层。单击图层1第1帧，拖入元件“文字”。在第2帧插入关键帧。单击图层2第1帧，拖入元件“下落”并指定实例名为“snow”,在该层第2帧插入关键帧。基本动作命令在Flash中，动作是指可以在指定事件发生时运行的命令

时间轴的控制影片剪辑的控制浏览器/网络的控制

时间轴：包括场景和帧

在“动作”面板中，单击“全局函数”中的“时间轴函数”选项后，会显示若干用于控制影片中场景和帧的命令时间轴的控制时间轴控制动作实例31转动的齿轮实例要求：制作转动的齿轮,体会控制播放效果。步骤：1、新建文档。舞台大小为400px×300px。背景：蓝色。2、新建图形元件，“齿轮”。利用铅笔和椭圆绘制齿轮。3、将“齿轮”元件拖入舞台。第60帧插入关键帧。创建补间动画，顺时针旋转1次。4、插入图层2，将“齿轮”元件拖入舞台。第60帧插入关键帧。创建补间动画，逆时针旋转1次。5、插入图层3，“窗口”-“公用库”-“按钮”，打开playbackrounded按钮，将所需要的按钮插入舞台中。在按钮下输入文字。实例要求：制作转动的齿轮,体会控制播放效果。6、“窗口”-“动作”，打开动作面板，单击某一按钮，添加AS动作语句。on(release){play();}//开始播放nextFrame();//下一帧stop();//停止播放prevFrame();//前一帧gotoAndStop(1);//跳转并停止在第一帧gotoAndPlay(1);//跳转并开始播放第一帧在Flash8中，控制影片剪辑的命令如下图所示：影片剪辑的控制影片剪辑控制动作实例32怕鼠标的小球本例应用：goto语句、on语句、play、stop、stoAllSound语句等实例要求:利用基本动作语句,完成鼠标对小球的操作。1、新建文档。舞台大小为550px×400px。背景：黑色。2、创建图形元件“圆”，线条：无，填充：放射性渐变。3、创建按钮元件“btn”，在“弹起帧”插入元件“圆”。4、创建影片剪辑元件“运动”，在第1帧拖入元件“btn”，在第2和第15帧插入关键帧。单击第15帧，选中按钮，将其下移且Alpha设置为0%5、创建第2帧到第15帧的运动渐变，单击第1帧，输入语句stop();单击第15帧，输入语句gotoAndStop(1);单击第1帧按钮元件，输入on(rollOver){play();}6、将“运动”拖入舞台。在“动作”面板中，单击“全局函数”→“浏览器/网络”选项后，会出现如下图所示的界面浏览器/网络的控制

浏览器/网络的控制

实例33旋转镜头本例应用：帧标签、为实例命名等实例要求:制作旋转镜头的动画效果。1、新建文档。舞台大小为220px×320px。背景：白色。2、创建图形元件“图”，单击第1帧，从库中插入图像文件“位图”。3、创建影片剪辑元件“动画”，在第2帧插入关键帧，将元件“图”拖入。分别在3、59、60帧插入关键帧。分别单击3、59、60帧，在属性面板中插入帧标签start,mid,end。将第2和第3帧图形向左平移，第59和第60帧图形向右同步平移，创建关键帧间的运动渐变。4、添加图层2。单击图层1第1帧，加入语句：gotoAndStop("start");单击图层1第60帧，加入语句：gotoAndStop(“end”);单击图层2第1帧，加入语句：gotoAndStop("mid");实例要求:制作旋转镜头的动画效果。5、创建影片剪辑元件“按钮”。单击第1帧执行“窗口”-“公用库”-“按钮”，拖入两个按钮。单击第2帧插入关键帧。6、分别单击第1帧的按钮元件，加入语句：on(rollOver){ tellTarget("/动画"){ nextFrame(); } play();}on(rollOver){ tellTarget("/动画"){ prevFrame(); } play();}7、返加主场景，先从库中拖入“动画”元件，并命名为“动画”。然后拖入“按钮”。结构控制

对象属性8.3级动作脚本语言结构控制

if/else命令

for命令

dowhile命令

while命令

for…in命令

break命令

continue命令

switch与case命令结构控制的语句：对象属性属性：是动画或动画片段中对象的特征可通过GetProperty和SetProperty进行检索和设置。通过修改属性，可以方便地控制动画。实例33跳跃的小球实例要求：小球在空间不停的跳跃、滚动，碰到边缘后反弹，单击一下，小球跳跃，不停止。步骤：1、新建文档。舞台大小为200px×200px。背景：默认色。2、绘制覆盖舞台的矩形，线条颜色：无，填充颜色：线性。3、创建影片剪辑元件：“ball”，绘制一个立体感圆。4、将“ball”拖入到舞台，修改实例名称为：ball。5、选择图层1第1帧添加代码给帧分配动作

给按钮分配动作

给影片剪辑分配动作8.4创建交互动画给帧分配动作单击“文件”→“新建”命令，新建一个Flash文档，然后在图层1中设置从第1帧到第40帧的动画在时间轴中单击“插入图层”按钮，创建一个新图层。在图层2的第10帧处插入关键帧，选中该帧并打开“动作－帧”面板

帧事件：就是当影片播放到某一帧时所引发的动作。例如，用户可以设置当影片播放到第10帧时跳转到第20帧继续播放，然后到第40帧时停止播放影片，具体操作如下：

给帧分配动作在脚本编辑区添加如下图所示的代码选中图层2的第40帧，插入关键帧，然后打开“动作－帧”面板，输入以下代码：stop();按Ctrl+Enter组合键进行测试，即可看到当影片播放到第10帧处就会跳转到第20帧后继续播放，并且到第40帧时停止影片的播放给帧分配动作要给按钮分配动作，可按以下步骤进行：给按钮分配动作在舞台上单击按钮实例在“动作”面板中选中按钮，然后添加需要的动作

下面举一个实例说明：新建一个Flash文档，在图层1中设置一段20帧的补间形状动画新建一个图层，在图层中新建一个按钮双击按钮，进入元件编辑模式，选择文本工具，在按钮上边输入文字“运动”，命名为move，然后返回场景编辑模式在“动作”面板中为第一帧添加stop命令，即动画播放一开始，动画即停止播放在“动作”面板中选择刚才建立的按钮元件，“动作”面板的标题变为“动作-按钮”。然后添加play命令，并选择为释放事件按Ctrl+Enter组合键，测试影片。可以看到，动画是静止的。将鼠标移到按钮上单击后，动画开始播放，就可以欣赏下雪的场景了。给按钮分配动作给影片剪辑分配动作举例当用户在舞台上弹起鼠标左键时，影片剪辑元件实例跳转到第2帧开始播放，具体操作如下：选择“文件”→“新建”命令，创建一个新的影片元件按Ctrl+F8组合键，打开“创建新元件”对话框，在“行为”选项中选择“影片剪辑”单选项，以创建一个新的影片剪辑元件单击“确定”按钮进入该元件的编辑状态，制作一个影片片段在时间轴中单击“插入图层”按钮，新建“图层2”选中新图层的第1帧，打开“动作－帧”面板在该面板中添加如下代码：stop();单击舞台左上角的“场景”按钮，返回到场景编辑状态下

给影片剪辑分配动作打开“库”面板，将刚创建的影片剪辑元件拖入舞台

选中舞台上的影片剪辑元件实例，即可打开“动作－影片剪辑”面板，在脚本窗口中添加，如下图所示的代码设置完成后，可按Ctrl+Enter组合键进行测试，此时可看到舞台中该元件实例停在第1帧的画面处，当用户按下鼠标左键并弹起时，该元件实例将会跳转到第2帧开始播放

为影片剪辑添加动作实例30多图层动画实例要求：制作元件渐显渐隐的动画效果。步骤：1、新建文档。舞台大小为500px×375px。背景：白色。2、将四张风景图片导入到库。名称为“风景1.jpg”等。3、新建图形元件“风景1”，将库中“风景1”拖到舞台中，以舞台为中心。其他相同。4、场景1中插入四个图层，图层1第1帧插入关键帧，将“风景1”元件拖入舞台。图层2第20帧插入关键帧，将“风景2”元件拖入舞台。图层3第40帧插入关键帧，将“风景3”元件拖入舞台。图层4第60帧插入关键帧，将“风景4”元件拖入舞台。实例要求：制作元件渐显渐隐的动画效果。步骤：5、图层1第20帧，图层2第40帧，图层3第60帧，图层4第80帧插入关键帧。6、图层1第1帧“风景1”元件属性Alpha值为“10%”，图层2第20帧“风景2”元件属性Alpha值为“10%”，图层3第40帧“风景3”元件属性Alpha值为“10%”，图层4第60帧“风景4”元件属性Alpha值为“10%”。7、分别在图层1第1-20帧，图层2第20-40帧，图层3第40-60帧，图层4第60-80帧创建补间动画。例

时钟动画学习指导1、学习使用动态文本框显示文本信息。2、学习使用日期对象创建Flash时钟的方法。3、学习Flash中_rotation旋转属性的应用。提示1、文档名称“钟表”。宽300，高300，背景为黑色，帧频24。2、在图层1命名为“表盘”。导入“表盘”图像。第2帧插入普通帧。3、上方插入“时针”图层，创建“时针”影片剪辑元件，绘制时针。4、返回舞台，将“时针”拖入舞台。选择“时针”实例，[滤镜]—[添回滤镜]—“发光”-[模糊X/Y]均为3，颜色为“#000000”。命名