第三部分 交互动画

第三部分交互动画3.1脚本基本知识3.2交互动画技术1影片播放控制3.3交互动画技术1文本交互3.4交互动画技术2影片剪辑控制3.5交互动画技术3声音控制3.6交互动画技术4视频控制3.7交互动画技术6鼠标交互3.8交互动画技术7随机复制3.9交互动画技术8数学计算3.10综合实例13.11综合实例23.1ActionScript基础知识ActionScript是一种面向对象的脚本语言，利用ActionScript可以实现各种动画特效和动画控制及交互功能。

目前ActionScript主要有两个版本2.0和3.0。

3.0版本只有flash cs3支持，着重于满足程序开发人员的设计需求；2.0版本脚本直接作用于对象实例，容易理解和掌握，适合普通用户。

3.1.1ActionScript的编写环境“动作面板”是flash提供的用户编写ActionScript脚本的工具。

单击“窗口”|“动作”命令或按F9可以打开“动作面板”。

动作面板包括四个组成部分：1.动作工具箱按类别对ActionScript元素进行分组，可以通过双击或直接拖动的方式将所选元素插入到脚本窗格中。

2.脚本窗格可以在该窗格中输入ActionScript代码3.工具栏工具栏中包含了各种代码编写辅助功能，这些功能可以简化代码编写工作。

ActionScript 代码的编写有两种方式专家模式和标准模式，通过脚本助手可以切换编写模式。

4.脚本导航器将flash文档中的动作及其所在对象以导航的形式显示，单击脚本导航器的某一项目，该项目关联的脚本将显示在脚本窗格中。

3.1.2ActionScript基本语法1.区分大小写ActionScript区分大小写，但在对变量或标识符命名时要避免用大小写的不同来区别不同的变量或标识符。

否则，可能会导致意想不到的错误。

2.点语法可以用点语法访问舞台中对象或实例的属性或方法。

点语法表达式以对象或实例名称开头，后面跟着一个“.”，最后以要指定的属性、方法或变量等结尾。

如：my_mc.play();3.目标路径Flash动画中的对象具有层级结构，在使用代码控制对象时，需要指定对象的名称及其地址，这种在层级关系中表现对象位置的方法称为目标路径，指定对象的目标路径可以使用点语法。

如：myclip.myotherclip.stop();4.分号“；”语句的结束符，可以省略5.冒号“：”为变量指定数据类型。

例：var mydate:Date = new Date();6.注释使用简单易懂的句子对代码进行注解。

单行注释（//）；多行注释（/* */）7.常数常数据用固定值的属性，一般用大写字母表示。

ActionScript语言包含多个预定义的常数。

例如：BACKSPACE、ENTER、SPACE、TAB等常数是key类的属性，指代键盘的按键。

例如：如果需要测试用户是否按下了空格键，可以使用如下代码：var keyListener:Object = new Object( );keyListener.onKeyDown = function( ) {if (Key.getCode( ) == Key.SPACE) {trace(“你按下了空格键”);}};Key.addListener(keyListener);8.关键字关键字是ActionScript中用户执行某项特定的操作的单词，是具有特定含义的保留字。

例如var关键字用于声明变量。

关键字不能用作变量名、函数名等。

3.1.3ActionScript相关术语1.动作动作是指定flash动画在播放时执行某些操作的语句。

例如gotoAndPlay。

2.事件事件是flash动画文件播放时发生的动作。

事件发生时会执行相应的代码。

事件可以分为：鼠标键盘事件、影片剪辑事件和帧事件。

3.事件处理函数为使应用程序能够对事件作出反应，必须使用事件处理函数。

事件处理函数是用于与特定对象和事件关联的脚本代码。

事件处理函数主要有两种：“on（）”用于处理按钮事件；“onClipEvent（）”用于处理影片剪辑事件。

4.实例实例是属于某些类的对象，类的对象处于库中时称为元件，应用于场景中时则为实例。

每个类的实例都包含该类的所有属性和方法。

例如，影片剪辑的实例是MovieClip类的实例，因此可以将MovieClip类的方法或属性用户任何影片剪辑实例。

5.实例名实例名是在脚本中用于指向影片中实例的唯一名称。

为实例指定实例名称的方法有两种。

（1）当实例位于舞台上时，可以选中该实例，然后在“属性”面板的“实例名称”文本框中输入该实例的名称。

（2）使用脚本指令创建一个实例，并在创建该实例时为其分配一个实例名称。

例如：this.createEmptyMovieClip(“pic_mc”,this.getNextHighestDepth());pic_mc.loadMovie(“/flash/images/image1.jpg”);6.数据类型（1）数字（Number）:双精度浮点数，可以表示整数、无符号整数以及浮点数。

可以通过使用加、减、乘、除、求模、递加、递减等算术运算符来处理数据，也可以使用脚本内置的math和number类的方法来处理数据。

Math.sqrt(25);（2）字符串（String）：var my_string:String = “hello”;可以通过“+”连接两个字符串。

（3）布尔值（4）影片剪辑（MovieClip）（5）对象（Object）：对象是用于描述对象特性的属性的集合。

每个属性都有名称和值。

（6）空值（Null）（7）未定义（undefined）（8）无值（V oid）：用于在函数定义中指示函数不返回值。

7.变量（1）全局变量：在flash文档中的所有时间轴和作用域均有效。

声明全局变量需要在变量名前加_global。

如：_global.myname = “xiaoyang”。

（2）时间轴变量：可用于该时间轴上的任何脚本。

声明时间轴变量可以使用var语句，在时间轴的任一帧上初始化变量，改变量可以用户该帧后的所有帧。

（3）局部变量：在函数体内用var定义变量，只能作用于该函数体内。

8.运算符（1）数值运算符（2）比较运算符（3）赋值运算符（4）逻辑运算符9.表达式：flash可以计算并返回值的任何语句，有运算符和操作数组成。

10.类：类用于定义一类对象，并对该类对象的属性和方法进行描述。

类的属性和方法统称为类的成员。

若要使用类的属性和方法通常要先创建该类的一个实例。

可以通过new 运算符调用该类的构造函数来创建类的实例。

构造函数与类通常具有相同的名称。

如：var my_sound:Sound = new Sound( );flash大约包含65各顶级类和内置类。

11.函数：函数是可以重用的代码块，可以向其传递参数并能返回值。

12.方法：属于一类的函数称作该类的方法。

3.2交互动画技术1—影片控制3.2.1影片播放控制1.时间轴控制函数时间轴控制函数主要用来控制帧和场景的播放、停止及跳转等，这类函数包括如下几种：Play（）；stop（）；gotoAndPlay（）；gotoAndStop（）；nextFrame（）；prevFrame（）；nextScene（）；prevScene（）；stopAllSounds（）；2.实例制作本例中包含一个正方形移动的动画和五个按钮，将通过对五个按钮实例添加相应的动作来实现按钮对动画播放的各种控制。

具体步骤如下：步骤1：打开flash程序，新建flash文档并保存为“影片播放控制.fla”。

步骤2：打开“属性”面板，设置舞台尺寸为：(210px, 300px)，帧频为24fps。

步骤3：新建图形元件“box”，在元件编辑模式下编辑元件内容：利用矩形工具绘制边长为20px、笔触高1px、笔触颜色为黑色、填充颜色为#E7F2F6的、坐标值为（0，0）的正方形。

步骤4：返回场景1，将图层1重命名为“box”步骤5：打开“库”面板，将图形元件“box”拖动到图层“box”的舞台上，在“属性”面板中设置坐标值为（30，30）步骤6：分别在第2、第11帧插入关键帧，在第2和第11帧之间建立“动画”补间动画步骤7：在第21帧、31帧、41帧插入关键帧，并分别在11~21、21~31、31~41帧之间创建补间动画。

步骤8：选中2~11之间的任一帧，在“属性”面板中设置补间动画顺时针旋转1次。

步骤9：将11~21之间补间动画的缓动值修改为100，21~31帧之间补间动画逆时针旋转1次，31~41帧之间的补间动画缓动值修改为-100。

步骤10：选中第11帧上的box图形，设置其坐标为（160，30）；选中21帧上的box 图形设置其坐标为（160，160）；选中第31帧上的box图形设置其坐标为（30，160）；选中第41帧上的box图形设置其坐标为（30，30）步骤11：新建图层，图层名为“btn”步骤13：打开“公用库”面板，在“按钮”面板中展开playback flat文件夹，依次将文件夹中的flat blue play、flat blue pause、flat blue forward、flat blue back和flat blue stop按钮拖动到舞台上，在舞台下方成一行排列。

步骤14：在图层“btn”上方新建图层“AS”，在该图层第一帧添加“stop”动作。

步骤15：在图层“AS”的第41帧插入一个关键帧，在该帧添加动作“gotoAndPlay（2）；”步骤16：选中图层btn上的flat blue play按钮实例，在动作面板中添加动作：on(release) {play( );}步骤17：选中flat blue pause按钮实例，在动作面板中添加动作：on(release) {stop( );}步骤18：选中flat blue forward按钮实例，在动作面板中添加动作：on(release) {nextFrame( );}步骤19：选中flat blue back按钮实例，在动作面板中添加动作：on(release) {prevFrame( );}步骤20：选中flat blue stop按钮实例，在动作面板中添加动作：on(release) {gotoAndStop(1);}3.3文本交互3.3.1文本的类型1．静态文本2．动态文本3．输入文本3.3.2制作实例1填空题步骤1：新建文件，保存为“填空题.fla”步骤2：在舞台上用文字工具输入静态文字“1+1=”步骤3：在舞台上用文字工具添加输入文本，在“属性”面板设置“显示边框”、“变量名为answer”。

步骤4：在舞台上添加动态文本，不显示边框，变量名为feedback。