第8章创建交互动画

1、Flash动画制作动画制作 2 教学目标：教学目标： 第第8章章 创建交互动画创建交互动画 3 本章内容本章内容 4 v数据类型与变量数据类型与变量 v表达式和运算符表达式和运算符 v动作脚本概述动作脚本概述 8.1 8.1 动作脚本基础动作脚本基础 5 动作脚本概述动作脚本概述 6 动作脚本术语动作脚本术语 7 1.时间轴控制命令时间轴控制命令 8 1.时间轴控制命令时间轴控制命令 9 2.行为事件的设置行为事件的设置 10 2.行为事件的设置行为事件的设置 11 2.行为事件的设置行为事件的设置 12 动作脚本语法动作脚本语法 13 动作脚本语法动作脚本语法 14 动作脚本语法动作脚本语法

2、 15 动作脚本语法动作脚本语法 16 数据类型与变量数据类型与变量 17 数据类型与变量数据类型与变量 18 数据类型与变量数据类型与变量 19 表达式和运算符表达式和运算符 例例 滚动图片动画滚动图片动画 21 学习指导学习指导 1、学习使用、学习使用Action语句控制多幅图片的循环滚动。语句控制多幅图片的循环滚动。 2、学习对象位移属性的设置方法。、学习对象位移属性的设置方法。 3、学习、学习“_root”语句的用法。语句的用法。 4、学习、学习“if”条件判断语句的使用。条件判断语句的使用。 22 提示提示 1、文档名称、文档名称“滚动图片滚动图片”。宽。宽640，高，高120，帧频

3、，帧频30。 2、在图层、在图层1第第1帧，依次导入素材帧，依次导入素材guo1-guo4，利用，利用信息信息面板面板 将其横向排列在舞台上。与舞台重合。将其横向排列在舞台上。与舞台重合。 3、同时选择调整后的所有图像，转换为、同时选择调整后的所有图像，转换为“图片图片”影片剪辑元件。影片剪辑元件。 4、新建、新建“组合图片组合图片”影片剪辑元件，同时切换到该元件编辑窗影片剪辑元件，同时切换到该元件编辑窗 口。将口。将“图片图片”元件拖到当前舞台中，位置元件拖到当前舞台中，位置x:-320,y:0。将。将“图图 片片”水平向右复制一个，水平向右复制一个， x:320,y:0，与前者并列。，与前

4、者并列。 23 提示提示 5、返回、返回“场景场景1”，选择舞台中的，选择舞台中的“图片图片”实例，在实例，在“属性属性”面面 板中单击板中单击“交换交换”，与，与“组合图片组合图片”交换。交换。 6、选择舞台中的、选择舞台中的“组合图片组合图片”实例，在实例，在“属性属性”面板面板“实例名实例名 称称”中输入中输入“pic”。 7、将图层名称改为、将图层名称改为“滚动图片滚动图片”，在第，在第2帧帧“插入帧插入帧”。 8、上方插入图层、上方插入图层“动作脚本动作脚本”。在第。在第2帧帧“插入关键帧插入关键帧”。在。在 本层第本层第1帧，打开帧，打开“动作动作”面板。输入如下脚本：面板。输入如

5、下脚本： 24 提示提示 _root.pic._x-; if(_root.pic._x=0) _root.pic._x+=640; 在本层第在本层第2帧输入：帧输入：gotoAndPlay(1); 25 26 知识链接知识链接 要使图像能够循环滚动，必须有两组相同的图片，而且两要使图像能够循环滚动，必须有两组相同的图片，而且两 组相同的图片必须首尾紧密挨在一起。然后将其制成影片剪辑元组相同的图片必须首尾紧密挨在一起。然后将其制成影片剪辑元 件，并且通过设置影片剪辑的位移属性让图片循环滚动。件，并且通过设置影片剪辑的位移属性让图片循环滚动。 1._root语句的使用语句的使用 “_root”是是

6、Flash中比较特殊的用法，表示主场景中的绝对路径，中比较特殊的用法，表示主场景中的绝对路径， 使用使用“.”来连接后面的语句，如来连接后面的语句，如_root.pic代表主场景中的代表主场景中的pic实实 例。与其相似的语句还有：例。与其相似的语句还有： 27 知识链接知识链接 “_level”:对根时间轴的引用。可以用时间轴中层的概念来理解，对根时间轴的引用。可以用时间轴中层的概念来理解， 就好像影片中的层又可以分为好几层，就好像影片中的层又可以分为好几层，0就是最底层，越往高处就是最底层，越往高处 数值越大，默认值为数值越大，默认值为0。 “_parent”：表示你场景，也就是上一级影片

7、剪辑。：表示你场景，也就是上一级影片剪辑。 “this”：用于引用对象或实例的本身。执行脚本时，：用于引用对象或实例的本身。执行脚本时，this可以可以 替换包含该脚本的实例。替换包含该脚本的实例。 2.位移属性：位移属性：x、y轴坐标值的属性设置。轴坐标值的属性设置。 28 知识链接知识链接 3.If语句语法如下：语句语法如下： if (条件式条件式) 语句语句1；语句；语句2；语句；语句3 Else 语句语句1；语句；语句2；语句；语句3 实例实例28 计算器计算器 30 31 实例要求：制作计算器实例要求：制作计算器,弄懂弄懂ActionScript编程基础编程基础 知识。知识。 步骤：

8、步骤： 1、新建文档。舞台大小为、新建文档。舞台大小为200px 300px。背景：紫色。背景：紫色。 2、新建按钮元件，、新建按钮元件，“隐形按钮隐形按钮”。矩形工具，线条：无，填充：。矩形工具，线条：无，填充： 白色，白色，Alpha：0% 。“点击点击”帧插入普通帧。帧插入普通帧。 3、返回舞台，在舞台上绘制计算器背景框架。、返回舞台，在舞台上绘制计算器背景框架。 4、文本工具，顶部大背景建立、文本工具，顶部大背景建立“动态文本动态文本”，线条类型：单行，线条类型：单行， 选中选中“在文本周围显示边框在文本周围显示边框”按钮，变量：按钮，变量：cal。 5、使用文本工具，在下面按钮上输入

9、文字和符号。、使用文本工具，在下面按钮上输入文字和符号。 6、从库中将、从库中将“隐形按钮隐形按钮”拖入舞台，覆盖每一个文字符号。拖入舞台，覆盖每一个文字符号。 32 实例要求：制作计算器实例要求：制作计算器,弄懂弄懂ActionScript编程基础编程基础 知识。知识。 6、单击第、单击第1帧，打开帧，打开“动作动作”面板，在脚本编写区添加面板，在脚本编写区添加AS动作动作 语句：语句： var cal:String= var x:Number=0; var y:Number=0; var total:Number var operation:Number var mermory:Numbe

10、r 7、选择文字、选择文字“1”上面覆盖的隐形按钮，打开上面覆盖的隐形按钮，打开“动作动作”面板，添面板，添 加加AS动作语句：动作语句： on(release) cal=cal+1 33 实例要求：制作计算器实例要求：制作计算器,弄懂弄懂ActionScript编程基础编程基础 知识。知识。 8、重复步骤、重复步骤7，将其他数字和小数点加上类似语句。，将其他数字和小数点加上类似语句。 9、选择、选择“+”上的隐形按钮，添加上的隐形按钮，添加AS语句：语句： on(release) x=Number(cal) opertion=1 cal= 10、重复步骤、重复步骤9，减、乘、除的，减、乘、除

11、的opertion依次为依次为2、3、4。 11、M+的动作：的动作： on(release) mermory=Number(cal) 34 实例要求：制作计算器实例要求：制作计算器,弄懂弄懂ActionScript编程基础编程基础 知识。知识。 12、M-的动作：的动作：on(release) cal=mermory 13、Mc的动作：的动作：on(release) mermory=0 14、C的动作：的动作：on(release) cal= 15、“=”的动作：的动作： on(release) y=Number(cal) 35 实例要求：制作计算器实例要求：制作计算器,弄懂弄懂Action

12、Script编程基础编程基础 知识。知识。 if(opertion=1) total=x+y opertion= if(opertion=2) total=x-y opertion= if(opertion=3) total=x*y opertion= 36 实例要求：制作计算器实例要求：制作计算器,弄懂弄懂ActionScript编程基础编程基础 知识。知识。 if(opertion=4) total=x/y opertion= x= y= cal=total 37 v “动作动作”面板面板 v 基本动作命令基本动作命令 8.2 8.2 使用使用“动作动作”面板面板 38 “动作动作”面板面

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

14、。添 加图层加图层2，在，在“弹起帧弹起帧”输入文本输入文本“升旗升旗”。 5、创建按钮元件：、创建按钮元件：“按钮按钮2”，在，在“弹起帧弹起帧”绘制无边框暗绿色绘制无边框暗绿色 矩形。在矩形。在“指针经过指针经过”、“按下按下”、“点击点击”帧插入关键帧。添帧插入关键帧。添 加图层加图层2，在，在“弹起帧弹起帧”输入文本输入文本“降旗降旗”。 42 实例要求：应用动作面板升降旗实例要求：应用动作面板升降旗. 6、返回主场景。添加图层、返回主场景。添加图层2。在图层。在图层1拖入拖入3个图形元件个图形元件“底底 座座”，调整成旗杆和底座状。拖入，调整成旗杆和底座状。拖入“按钮按钮1”和和“按

15、钮按钮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 飘雪飘雪 44 4

16、5 实例要求：利用实例要求：利用ActionAcript的语法规则的语法规则,制作飘雪制作飘雪 动画动画. 步骤：步骤： 1、新建文档。舞台大小为、新建文档。舞台大小为540px 350px。背景：黑色。背景：黑色。 2、新建图形元件、新建图形元件“雪雪”。直线工具绘制雪花。直线工具绘制雪花。 3、创建影片剪辑元件、创建影片剪辑元件“下落下落”。单击第。单击第1帧，拖入帧，拖入“雪雪”。分。分 别在第别在第20帧和第帧和第40帧插入关键帧。依次改变各关键帧图形透明帧插入关键帧。依次改变各关键帧图形透明 度为度为0%、79%、0%，移动图形位置，创建补间动画，移动图形位置，创建补间动画,制作飘雪

17、制作飘雪 效果。效果。 4、创建影片剪辑元件、创建影片剪辑元件“文字文字”。输入文本。输入文本“飘雪飘雪”，分别在第，分别在第 5、10、15、20、25帧插入关键帧，改变各帧文本的颜色。帧插入关键帧，改变各帧文本的颜色。 46 实例要求：利用实例要求：利用ActionAcript的语法规则的语法规则,制作飘雪制作飘雪 动画动画. 5、创建影片剪辑元件、创建影片剪辑元件“动作动作1”，第，第2帧插入关键帧，选择文本帧插入关键帧，选择文本 工具，设置类型为工具，设置类型为“输入文本输入文本”。拉一个文本框。拉一个文本框426*269。单击。单击 第第1帧，加入语句：帧，加入语句：stop();

18、单击第单击第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_add n,n); 47 实例要求：利用实例要求：利用ActionAcript的语法规则的语法规则,制作飘雪制作飘雪 动画动画. 6、创建影片剪辑元件、创建影片剪辑元件“动作动作2”，单击第一帧输入语句：，单

19、击第一帧输入语句： 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_,add a,a); 7、返回场景、返回场景1，

20、添加一个新图层。单击图层，添加一个新图层。单击图层1第第1帧，拖入元件帧，拖入元件 “文字文字”。在第。在第2帧插帧插 入关键帧。单击图层入关键帧。单击图层2第第1帧，拖入元件帧，拖入元件“下落下落”并指定实例名为并指定实例名为“snow”,在该层第在该层第2 帧插入关键帧。帧插入关键帧。 48 基本动作命令基本动作命令 49 时间轴的控制时间轴的控制 实例实例31 转动的齿轮转动的齿轮 51 52 实例要求：制作转动的齿轮实例要求：制作转动的齿轮,体会控制播放效果。体会控制播放效果。 步骤：步骤： 1、新建文档。舞台大小为、新建文档。舞台大小为400px 300px。背景：蓝色。背景：蓝色。

21、 2、新建图形元件，、新建图形元件，“齿轮齿轮”。利用铅笔和椭圆绘制齿轮。利用铅笔和椭圆绘制齿轮。 3、将、将“齿轮齿轮”元件拖入舞台。第元件拖入舞台。第60帧插入关键帧。创建补间动帧插入关键帧。创建补间动 画，顺时针旋转画，顺时针旋转1次。次。 4、插入图层、插入图层2，将，将“齿轮齿轮”元件拖入舞台。第元件拖入舞台。第60帧插入关键帧。帧插入关键帧。 创建补间动画，逆时针旋转创建补间动画，逆时针旋转1次。次。 5、插入图层、插入图层3，“窗口窗口”-“公用库公用库”-“按钮按钮”，打开，打开playback rounded按钮，将所需要的按钮插入舞台中。在按钮下输入文字。按钮，将所需要的按

22、钮插入舞台中。在按钮下输入文字。 53 实例要求：制作转动的齿轮实例要求：制作转动的齿轮,体会控制播放效果。体会控制播放效果。 6、“窗口窗口”-“动作动作”，打开动作面板，单击某一按钮，添加，打开动作面板，单击某一按钮，添加AS 动作语句。动作语句。 on(release) play();/开始播放开始播放 nextFrame();/下一帧下一帧 stop();/停止播放停止播放 prevFrame();/前一帧前一帧 gotoAndStop(1);/跳转并停止在第一帧跳转并停止在第一帧 gotoAndPlay(1);/跳转并开始播放第一帧跳转并开始播放第一帧 54 影片剪辑的控制影片剪辑的

23、控制 实例实例32 怕鼠标的小球怕鼠标的小球 本例应用：本例应用：goto语句、语句、on语句、语句、 play、stop、stoAllSound语句等语句等 56 57 实例要求实例要求:利用基本动作语句利用基本动作语句,完成鼠标对小球的操作。完成鼠标对小球的操作。 1、新建文档。舞台大小为、新建文档。舞台大小为550px 400px。背景：黑色。背景：黑色。 2、创建图形元件、创建图形元件“圆圆”，线条：无，填充：放射性渐变。，线条：无，填充：放射性渐变。 3、创建按钮元件、创建按钮元件“btn”，在，在“弹起帧弹起帧”插入元件插入元件“圆圆”。 4、创建影片剪辑元件、创建影片剪辑元件“运

24、动运动”，在第，在第1帧拖入元件帧拖入元件“btn”，在，在 第第2和第和第15帧插入关键帧。单击第帧插入关键帧。单击第15帧，选中按钮，将其下移且帧，选中按钮，将其下移且 Alpha设置为设置为0% 5、创建第、创建第2帧到第帧到第15帧的运动渐变，单击第帧的运动渐变，单击第1帧，输入语句帧，输入语句 stop();单击第单击第15帧，输入语句帧，输入语句gotoAndStop(1);单击第单击第1帧按钮帧按钮 元件，输入元件，输入on(rollOver)play(); 6、将、将“运动运动”拖入舞台。拖入舞台。 58 浏览器浏览器/网络的控制网络的控制 实例实例33 旋转镜头旋转镜头 本例

25、应用：帧标签、为实例命名等本例应用：帧标签、为实例命名等 60 61 实例要求实例要求:制作旋转镜头的动画效果。制作旋转镜头的动画效果。 1、新建文档。舞台大小为、新建文档。舞台大小为220px 320px。背景：白色。背景：白色。 2、创建图形元件、创建图形元件“图图”，单击第，单击第1帧，从库中插入图像文件帧，从库中插入图像文件 “位图位图”。 3、创建影片剪辑元件、创建影片剪辑元件“动画动画”，在第，在第2帧插入关键帧，将元件帧插入关键帧，将元件 “图图”拖入。分别在拖入。分别在3、59、60帧插入关键帧。分别单击帧插入关键帧。分别单击3、59、 60帧，在属性面板中插入帧标签帧，在属性

26、面板中插入帧标签start,mid,end。将第。将第2和第和第3帧帧 图形向左平移，第图形向左平移，第59和第和第60帧图形向右同步平移，创建关键帧帧图形向右同步平移，创建关键帧 间的运动渐变。间的运动渐变。 4、添加图层、添加图层2。单击图层。单击图层1第第1帧，加入语句：帧，加入语句：gotoAndStop(start); 单击图层单击图层1第第60帧，加入语句：帧，加入语句：gotoAndStop(“end”);单击图层单击图层2第第1帧，加入语句：帧，加入语句： gotoAndStop(mid); 62 实例要求实例要求:制作旋转镜头的动画效果。制作旋转镜头的动画效果。 5、创建影片

27、剪辑元件、创建影片剪辑元件“按钮按钮”。单击第。单击第1帧执行帧执行“窗口窗口”-“公用公用 库库”-“按钮按钮”，拖入两个按钮。单击第，拖入两个按钮。单击第2帧插入关键帧。帧插入关键帧。 6、分别单击第、分别单击第1帧的按钮元件，加入语句：帧的按钮元件，加入语句： on(rollOver) tellTarget(/动画动画) nextFrame(); play(); on(rollOver) tellTarget(/动画动画) prevFrame(); play(); 7、返加主场景，先从库中拖入、返加主场景，先从库中拖入“动画动画”元件，并命名为元件，并命名为“动画动画”。然后拖入。然后拖

28、入“按按 钮钮”。 63 v 结构控制结构控制 v 对象属性对象属性 8.3 8.3 级动作脚本语言级动作脚本语言 64 结构控制结构控制 65 对象属性对象属性 实例实例33 跳跃的小球跳跃的小球 67 68 实例要求：小球在空间不停的跳跃、滚动，碰到边实例要求：小球在空间不停的跳跃、滚动，碰到边 缘后反弹，单击一下，小球跳跃，不停止。缘后反弹，单击一下，小球跳跃，不停止。 步骤：步骤： 1、新建文档。舞台大小为、新建文档。舞台大小为200px 200px。背景：默认色。背景：默认色。 2、绘制覆盖舞台的矩形，线条颜色：无，填充颜色：线性。、绘制覆盖舞台的矩形，线条颜色：无，填充颜色：线性。

29、 3、创建影片剪辑元件：、创建影片剪辑元件：“ball”，绘制一个立体感圆。，绘制一个立体感圆。 4、将、将“ball”拖入到舞台，修改实例名称为：拖入到舞台，修改实例名称为：ball。 5、选择图层、选择图层1第第1帧添加代码帧添加代码 69 v 给帧分配动作给帧分配动作 v 给按钮分配动作给按钮分配动作 v 给影片剪辑分配动作给影片剪辑分配动作 8.4 8.4 创建交互动画创建交互动画 70 给帧分配动作给帧分配动作 71 给帧分配动作给帧分配动作 72 给按钮分配动作给按钮分配动作 73 给按钮分配动作给按钮分配动作 74 给影片剪辑分配动作给影片剪辑分配动作 75 给影片剪辑分配动作给

30、影片剪辑分配动作 实例实例30 多图层动画多图层动画 77 78 实例要求：制作元件渐显渐隐的动画效果。实例要求：制作元件渐显渐隐的动画效果。 步骤：步骤： 1、新建文档。舞台大小为、新建文档。舞台大小为500px 375px。背景：白色。背景：白色。 2、将四张风景图片导入到库。名称为、将四张风景图片导入到库。名称为“风景风景1.jpg”等。等。 3、新建图形元件、新建图形元件“风景风景1”，将库中，将库中“风景风景1”拖到舞台中，以舞拖到舞台中，以舞 台为中心。其他相同。台为中心。其他相同。 4、场景、场景1中插入四个图层，图层中插入四个图层，图层1第第1帧插入关键帧，将帧插入关键帧，将“

31、风景风景1” 元件拖入舞台。图层元件拖入舞台。图层2第第20帧插入关键帧，将帧插入关键帧，将“风景风景2”元件拖入元件拖入 舞台。图层舞台。图层3第第40帧插入关键帧，将帧插入关键帧，将“风景风景3”元件拖入舞台。图元件拖入舞台。图 层层4第第60帧插入关键帧，将帧插入关键帧，将“风景风景4”元件拖入舞台。元件拖入舞台。 79 实例要求：制作元件渐显渐隐的动画效果。实例要求：制作元件渐显渐隐的动画效果。 步骤：步骤： 5、图层、图层1第第20帧，图层帧，图层2第第40帧，图层帧，图层3第第60帧，图层帧，图层4第第80帧帧 插入关键帧。插入关键帧。 6、图层、图层1第第1帧帧“风景风景1”元件

32、属性元件属性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帧创建补间动画帧创建补间动画 。 例例 时钟动画时钟动画 81 学习指导学习指导 1、学习使用动态文本框显示文本信息。、学习使用动态文本框显示文本信息。 2、学

33、习使用日期对象创建、学习使用日期对象创建Flash时钟的方法。时钟的方法。 3、学习、学习Flash中中_rotation旋转属性的应用。旋转属性的应用。 82 提示提示 1、文档名称、文档名称“钟表钟表”。宽。宽300，高，高300，背景为黑色，帧频，背景为黑色，帧频24。 2、在图层、在图层1命名为命名为“表盘表盘”。导入。导入“表盘表盘”图像。第图像。第2帧插入普帧插入普 通帧。通帧。 3、上方插入、上方插入“时针时针”图层，创建图层，创建“时针时针”影片剪辑元件，绘制影片剪辑元件，绘制 时针。时针。 4、返回舞台，将、返回舞台，将“时针时针”拖入舞台。选择拖入舞台。选择“时针时针”实例，实例，滤滤 镜镜添回滤镜添回滤镜“