第2章 Flash网站常用的ActionScript脚本

ActionScript是Flash的脚本编写语言，允许用户向影片剪辑添加交互功能。ActionScript由不同类型的元素组成，例如动作、运算符和对象等。将这些元素编写在一起，即构成脚本。用户可以对影片进行设置，通过事件触发脚本，例如，用鼠标单击或按下键盘上的某个键，然后由脚本控制影片要执行的操作。事件可以分为鼠标和键盘事件、影片剪辑事件和帧事件。

学习目的：

* 了解常用ActionScript脚本的应用

* 掌握循环脚本的应用

* 掌握缓动的应用

* 如何使用ActionScript脚本控制动画

2.1 Flash网站常用脚本

因特网技术的日益成熟，使得对Flash动画的要求更高了，除了要求效果精美外，对于制作技术也有更高的要求。因此使用ActionScript制作动画就显得更为重要了。

2.1.1 getBytesLoaded()和getBytesTotal()

getBytesLoaded()和getBytesTotal()都属于影片剪辑的属性。getBytesLoaded()是指当前取得的字节数，getBytesTotal()是指预载入影片或内容的总字节数。这两个属性用于显示加载影片或内容的进度。

2.1.2 getURL()

将来自特定URL的文档加载到窗口中，或将变量传递到位于所定义的URL的另一个应用程序中。如果需要测试该函数，确保要加载的文件位于指定的位置；如果需要使用绝对URL，则需要连接到因特网，例如，http://www.hehelove.com。

Window:Sting[可选]指定应将文档加载到其中的窗口或HTML帧中。可以输入特定窗口的名称，或从下面的保留目标名称中选择。

* _self:指定当前窗口中的当前帧。

* _blank:指定一个新窗口。

* _parent:指定当前帧的父级。

* _top:指定当前窗口的顶级帧。

method:Sting[可选]用于发送变量的GET或POST方法。如果没有变量，则省略该参数。

* GET方法:将变量附加到URL的末尾，它用于发送少量的变量。

* POST方法:在单独的HTTP标头中发送变量，它用于发送长字符串的变量。

在下面的脚本中，使用getURL()来发送电子邮件。

myBtn_btn.onRelease=function(){
      getURL("omendeyueding@163.com");
};

如果需要使用它结合JavaScript打开新窗口，需要在HTML中加入JavaScript函数来实现，脚本语言如下。

getURL("Javascript:window.open('http://www.wod
eyueding@163.com','win',300,300")
myBtn_btn.onRelease=function(){
    getURL("javascript:alert('单击打开新窗口)'")
};

也可以使用GET或POST发送变量。在与后端数据结合的过程中会经常使用这种方式，也就是常说的传递参数。当服务器处理完成后，Flash接收回需要的参数，然后做出相应的动作。下面的代码将使用GET变量追加到URL。

var firstName:String="ego";
var firstName:String="ley";
var age:Number=92;
myBtn_btn.onRelease=function(){
getURL("http://www.womendeyueding.com","_blank","G
ET");
};

下面的ActionScript使用POST在HTTP标头中发送变量。一定要在浏览器窗口中测试文档，因为变量可能是使用GET发送的。

var firstName:String="ego";
var firstName:String="ley";
var age:Number=92;
getURL("http://www.womendeyueding.com","_blank
","POST");

2.1.3 LoadMovie()和unLoadMovie()

LoadMovie和unLoadMovie通常用来载入和卸载影片，除了它们之外还有LoadMovieNum()和unLoadMovieNum()，这两者都可以实现对影片的载入和卸载，但相对来讲，使用LoadMovieNum()和unLoadMovieNum()是将影片载入相对于_root的层级的。例如_root的层级是0，在它之上的是1、2等层级，使用这种方式在控制层级的时候需要使用_leve10、_leve11、_leve12等来控制载入影片的播放和停止，并不是很方便。而使用LoadMovie和unLoadMovie时，操作对象是影片剪辑，可以为影片剪辑命名，这样更容易对它们进行控制。

2.1.4 attachMovie和removeMovieClip

1．attachMovie

attachMovie是用来将“库”中设置了“链接”属性的影片剪辑元件添加到场景中。

2．动态attachMovie

动态attachMovie可以通过“库”中的影片剪辑元件链接符号并动态地将多个影片剪辑元件的副本贴加到子场景中。

3．removeMovieClip

removeMovieClip(target:Objcet)用来删除指定的影片剪辑。

2.1.5 关于路径

在Flash的ActionScript的编写过程中要涉及两种路径，一种是绝对路径，另一种是相对路径。

1．绝对路径

绝对路径:_root（根或是主时间轴）

如果要表示主时间轴上的影片剪辑my_mc的位置，则应表示如下:

_root.my_mc.x=200;
_root.my_mc.y=300;
_root.my_mc.loadMovie("sub.swf");

上面的代码如果在独立的影片中使用是不会有任何问题的，但是如果在一个主影片中载入含有这样代码的SWF子影片时，就会出现路径不明而导致Flash无法找到相应对象的问题。例如主影片名为main.swf，子影片名为sub.swf，而上面的代码是书写在子影片的主时间轴上的，当在main.swf中的myload中载入sub.swf影片时，代码如下:

MovieMyload.loadMovie("sub.swf");

这时子影片中的一些设置或是载入的内容就不会生效，原因是在子影片载入到主影片后，_root是指主影片的根目录，而不是子影片的根目录。读者可能之前已多次遇到过这样的情况，解决的办法就是去掉绝对路径，例如在子影片中编写代码如下:

my_mc.x=200;
my_mc.y=300;
my_mc.loadMovie("sub.swf");

这样，当sub.swf在载入到子影片中时就不会因路径问题而失效。虽然也可以通过在main.swf中的主帧上写上this._lockroot=true;来解决一些问题，但它并不是每次都有效，因此在制作Flash网站的过程中如果遇到加载不生效的情况，第一个需要做的就是查看路径的问题。建议使用相对路径，这样可以在最大程度上避免这种情况的发生，这也是一种好的编程习惯。

2．相对路径

相对路径:this（当前对象）_parent（当前的上一级）

正确地使用相对路径，有助于提高开发效率。

this是指对当前对象的引用，this的位置不同则代表对不同的对象的引用，例如在主时间轴上的代码如下:

this.loadMovie("sub.swf");

下面的代码如下:

my_mc.onRelease=function(){
  this._alpha=10;
}

这里的this指的就是my_mc，如果将上面的代码变换为:

movieClipHold.my_mc.onrelease=function(){
      this._alpha=10;
      this._parent._alpha=10;
}

这样，在上面的代码中，如果要对movieClipHold进行操作，就要使用_parent来对上级进行引用，例如this._parent._alpha=10，其中this.指的是my_mc，this._parent指的则是movieClipHold，因为movieClipHold内包含my_mc，也就是说movieClipHold是my_mc的上级。

2.1.6 Array数组

数组是在编程中最常用的一种方法，特别是在编写动态内容方面。

1．创建索引数组

索引数组存储一系列值，可以是一个或多个，可以通过项目在数组中的位置查找它们。第一个索引始终是数字0，且添加到数组中的每个后续的元素的索引以1为增量递增。可以通过调用Array类构造函数，或使用数组文本初始化数组创建索引数组，在下面的示例中使用Array构造函数和数组文本创建数组。

var myArray:Array=new Array();

为数组赋值的方法有如下几种。

一种方法是可以直接在创建数组时为它赋值。

var myArray:Array=new Array("ceo","cto","cfo");

另一种方法是通过数组的索引为它赋值，数组的索引值是从0开始的。

var myArray:Array=new Array();
my Array[0]="ceo";
  my Array[1]="cto";
my Array[2]="cfo";
trace(myArray);

结果应输出为ceo,cto,cfo。

还有一种方法是使用数组的push方法为其赋值。

var myArray:Array=new Array();
my Array.push("ceo");
my Array.push("cto");
my Array.push("cfo");
trace(myArray);

输出结果仍是ceo,cto,cfo。

2．创建多维数组

在ActionScript中，可以将数组实现为嵌套数组，其实质上就是数组的数组。嵌套数组又称多维数组，可以被看做是矩阵或网格。因此，在编程时，可能要用多维数组来为以下类型的结构建模。例如，棋盘是一个由8行8列组成的网格，可以将该棋盘建模为包含8个元素的数组，而其中每个元素也是包含8个元素的数组。

2.1.7 实训:ActionScript脚本应用

【实训目的】

通过图2-1所示的效果图，利用脚本语言控制影片剪辑的播放，通过本实例的学习让读者了解脚本语言如何控制影片剪辑。

图2-1 效果图

【实训要点】

* 新建Flash文档并设置文档属性

* 新建元件并制作元件动画

* 为影片剪辑元件设置“实例名称”

* 通过ActionScript脚本代码对各影片剪辑实例进行控制

【制作步骤】

01　执行【文件】→【新建】命令，新建一个Flash文档，如图2-2所示，单击“属性”面板上的“大小”按钮，弹出“文档属性”对话框，设置“尺寸”为780像素×280像素，“背景颜色”为#FFCC00，“帧频”为30fps，如图2-3所示。

图2-2 新建Flash文档

图2-3 设置“文档属性”

02　执行【插入】→【新建元件】命令，新建一个“名称”为“背景动画”、“类型”为“影片剪辑”的元件，如图2-4所示。执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\21701.jpg”导入到场景中，如图2-5所示。

图2-4 “创建新元件”对话框

图2-5 导入图像

03　单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\21702.jpg”导入到场景中，如图2-6所示。按【F8】键将图像转换成一个“名称”为“背景”、“类型”为“影片剪辑”的元件，如图2-7所示。选中该元件，执行【窗口】→【动作】命令，在打开的“动作-影片剪辑”面板中输入图2-8所示的脚本语言。

图2-6 导入图像

图2-7 “转换为元件”对话框

图2-8 输入脚本语言

04　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，在第1帧的位置单击，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入stop();脚本语言，如图2-9所示，完成后的“时间轴”效果如图2-10所示。

图2-9 输入脚本语言

图2-10 “时间轴”效果

05　执行【插入】→【新建元件】命令，新建一个“名称”为“日出日落”、“类型”为“影片剪辑”的元件，如图2-11所示。执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\21707.png”导入到场景中，如图2-12所示。

图2-11 “创建新元件”对话框

图2-12 导入图像

06　单击“工具箱”中的“选择工具”按钮，选择刚刚导入的图像，按【F8】键将图像转换成一个“名称”为“月亮”、“类型”为“影片剪辑”的元件，设置其“属性”面板上的“实例名称”为moon，如图2-13所示。在第10帧的位置单击，按【F6】键插入关键帧，使用“选择工具”将第1帧场景中的元件垂直向下移动200像素，场景效果如图2-14所示，设置第1帧的“补间”类型为“动画”。

图2-13 “属性”面板

图2-14 将元件垂直向下移动

07　用制作“图层1”的方法，制作出“图层2”上的动画，完成后的场景效果如图2-15所示。单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，在第1帧的位置单击，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入stop();脚本语言，完成后的“时间轴”效果如图2-16所示。

图2-15 场景效果

图2-16 “时间轴”效果

08　执行【插入】→【新建元件】命令，新建一个“名称”为“云朵动画”、“类型”为“影片剪辑”的元件，如图2-17所示。执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\21704.png”导入到场景中，如图2-18所示。

图2-17 “创建新元件”对话框

图2-18 导入图像

09　使用“选择工具”选择刚刚导入的图像，按【F8】键将图像转换成一个“名称”为“云朵”、“类型”为“图形”的元件。在第10帧的位置单击，按【F6】键插入关键帧，使用“选择工具”将场景中的元件垂直向下移动120像素，场景效果如图2-19所示。设置第1帧的“补间”类型为“动画”，用制作“图层1”的方法，制作出“图层2”上的动画，完成后的场景效果如图2-20所示。

图2-19 将元件垂直向下移动

图2-20 场景效果

10　执行【插入】→【新建元件】命令，新建一个“名称”为“脚本控制”、“类型”为“影片剪辑”的元件，如图2-21所示。在第1帧的位置单击，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入图2-22所示的脚本语言。

图2-21 “创建新元件”对话框

图2-22 输入脚本语言

11　在第5帧的位置单击，按【F6】键插入关键帧，在打开的“动作-帧”面板中输入如图2-23所示的脚本语言，在第10帧的位置单击，按【F6】键插入关键帧，在打开的“动作-帧”面板中输入图2-24所示的脚本语言。

图2-23 输入脚本语言

图2-24 输入脚本语言

12　在第100帧的位置单击，按【F6】键插入关键帧，在打开的“动作-帧”面板中输入图2-25所示的脚本语言，在第105帧的位置单击，按【F6】键插入关键帧，在打开的“动作-帧”面板中输入图2-26所示的脚本语言。

图2-25 输入脚本语言

图2-26 输入脚本语言

13　在第160帧的位置单击，按【F6】键插入关键帧，在打开的“动作-帧”面板中输入图2-27所示的脚本语言。在第170帧的位置单击，按【F6】键插入关键帧，在打开的“动作-帧”面板中输入图2-28所示的脚本语言。单击“时间轴”面板上的“插入图层”按钮，在第230帧的位置单击，按【F5】键插入帧，完成后的“时间轴”效果如图2-29所示。

图2-27 输入脚本语言

图2-28 输入脚本语言

图2-29 “时间轴”效果

14　执行【插入】→【新建元件】命令，新建一个“名称”为“按钮1”、“类型”为“按钮”的元件，执行【文件】→【导入】→【导入到库】命令，将声音“第2章\素材\shengyin1.mp3”、“shengyin2.mp3”和“shengyin3.mp3”导入到“库”中，如图2-30所示，“库”面板如图2-31所示。

图2-30 “导入到库”对话框

图2-31 “库”面板

15　在“指针经过”状态上单击，按【F6】键插入关键帧，设置其“属性”面板上的“声音”名称为shengyin1.mp3，其他设置为默认，“属性”面板如图2-32所示，完成后的“时间轴”效果如图2-33所示。

图2-32 “属性”面板

图2-33 “时间轴”效果

16　分别在“按下”和“点击”状态上单击，依次按【F7】键插入空白关键帧，“时间轴”效果如图2-34所示。单击“工具箱”中的“矩形工具”按钮，在场景中绘制一个尺寸为255像素×275像素的矩形，场景效果如图2-35所示，用制作“按钮1”元件的方法，制作出“按钮2”元件和“按钮3”元件。

图2-34 “时间轴”效果

图2-35 绘制矩形

17　执行【插入】→【新建元件】命令，新建一个“名称”为“卡通动画1”、“类型”为“影片剪辑”的元件，执行【窗口】→【库】命令，打开“库”面板，将“按钮1”元件从“库”面板中拖入到场景中，场景效果如图2-36所示。选中元件，执行【窗口】→【动作】命令，在打开的“动作-按钮”面板中输入图2-37所示的脚本语言，在第10帧的位置单击，按【F5】键插入帧。

图2-36 拖入元件

图2-37 输入脚本语言

18　单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，在第2帧的位置单击，按【F6】键插入关键帧，执行【文件】→【导入】→【打开外部库】命令，将“第2章\素材\素材01.fla”打开，如图2-38所示。将“雪花动画”元件从“库-素材01.fla”面板中拖入到场景中，如图2-39所示。

图2-38 “库-素材01.fla”面板

图2-39 拖入元件

19　使用“选择工具”选择刚刚拖入的元件，设置其“属性”面板上的“实例名称”为fall，“属性”面板如图2-40所示。在第10帧的位置单击，按【F6】键插入关键帧，使用“选择工具”选择第2帧场景中的元件，设置其“属性”面板上的“颜色”样式下的Alpha值为0%，“属性”面板如图2-41所示。设置第2帧的“补间”类型为“动画”。

图2-40 “属性”面板

图2-41 “属性”面板

20　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\21708.png”导入到场景中，如图2-42所示。按【F8】键将图像转换成一个“名称”为“卡通1”、“类型”为“图形”的元件，如图2-43所示。

图2-42 导入图像

图2-43 “转换为元件”对话框

21　在第5帧的位置单击，按【F6】键插入关键帧，使用“选择工具”将场景中的元件水平向右移动，场景效果如图2-44所示。设置第1帧的“补间”类型为“动画”，单击“时间轴”面板上的“插入图层”按钮，新建“图层4”，在第1帧的位置单击，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入stop();脚本语言，完成后的“时间轴”效果如图2-45所示。

图2-44 将元件水平向右移动

图2-45 “时间轴”效果

22　用制作“卡通动画1”元件的方法，制作出“卡通动画2”元件和“卡通动画3”元件，完成后的元件效果如图2-46所示。

图2-46 完成后的元件效果

23　单击“编辑栏”上的“场景1”文字，返回到“场景1”编辑状态，打开“库”面板，将“背景动画”元件从“库”面板中拖入到场景中，如图2-47所示。设置其“属性”面板上的“实例名称”为bg，确定选中元件，执行【窗口】→【动作】命令，在打开的“动作-影片剪辑”面板中输入图2-48所示的脚本语言。

图2-47 拖入元件

图2-48 脚本语言

24　单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，将“日出日落”元件从“库”面板中拖入到场景中，如图2-49所示。设置其“属性”面板上的“实例名称”为sun，选中元件，执行【窗口】→【动作】命令，在弹出的“动作-影片剪辑”面板中输入图2-50所示的脚本语言。

图2-49 拖入元件

图2-50 脚本语言

25　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，将“云朵动画”元件从“库”面板中拖入到场景中，如图2-51所示，选中元件，执行【窗口】→【动作】命令，在弹出的“动作-影片剪辑”面板中输入图2-52所示的脚本语言。

图2-51 拖入元件

图2-52 脚本语言

26　单击“时间轴”面板上的“插入图层”按钮，新建“图层4”，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\21703.png”导入到场景中，调整图像在场景中的位置，如图2-53所示。

图2-53 导入图像

27　单击“时间轴”面板上的“插入图层”按钮，新建“图层5”，打开“库”面板，将“脚本控制”元件从“库”面板中拖入到场景中，如图2-54所示。设置其“属性”面板上的“实例名称”为main_control，如图2-55所示。

图2-54 拖入元件

图2-55 “属性”面板

28　单击“时间轴”面板上的“插入图层”按钮，新建“图层6”，打开“库”面板，将“卡通动画1”元件从“库”面板中拖入到场景中，如图2-56所示。并设置其“属性”面板上的“实例名称”为a，选中元件，执行【窗口】→【动作】命令，在打开的“动作-影片剪辑”面板中输入图2-57所示的脚本语言。

图2-56 拖入元件

图2-57 输入脚本语言

29　用制作“图层6”的方法，制作出“图层7”和“图层8”，完成后的场景效果如图2-58所示。

图2-58 完成后的场景效果

30　完成动画效果的制作，执行【文件】→【保存】命令，将动画保存为“第2章\2-1-7.fla”，按【Ctrl+Enter】组合键测试影片，预览动画效果如图2-59所示。

图2-59 预览动画效果

2.2 Flash动画中的循环

应用循环是编写任何语言的基础，可以在部分代码中应用循环。在Flash中有以下几种循环方式的比较，以便读者可以更好地理解循环，并在实际工作中应用。

2.2.1 帧循环

帧循环Flash 4时应用得比较多，也是比较有效的。帧循环的思路比较清晰，它的原理是利用时间轴上的帧的跳转来实现循环，如图2-60所示。

图2-60 “时间轴”效果

通常把这种循环称为三帧循环。一般在第1帧设置初始化的变量；在第2帧设置循环规则，也就是循环所要达到的目的；在第3帧设置条件，如果条件不满足则返回第2帧（gotoAndPlay），如果满足则停止循环。

2.2.2 For循环

for循环的基本结构如下。

for（初始变量:条件语句:命令语句）{

命令语句1;

命令语句2;

}

在日常工作中，for循环通常用来与索引数组配合，用来编辑影片剪辑的属性，如下面的代码所示。

var                             url:Array=new
Array("home","portfolio","about","info");
for(var i:Number=0;i<url.length;i++){
var link=url[i];
  trace(link);
}

输出的link的结果是home,portfolio,about, info。

在上面的代码中i是初始变量值，url.length代表数组的度，也就是条件语句，i++即是循环所要执行的命令。

假设场景中有一个球体，希望通过循环让它从0一步一步地移动到100的位置，那么按正常的思路应写成如下形式。

for(var i =0;i<100;i+=5){
ball._x=i;
}

如果此时测试结果，会发现ball并没有按预想的形式体现出来，而是一下子移动到了100的位置，也就是说使用for循环并不能在循环的每一步过程中更新屏幕。所以如果想达到这种效果，就要使用OnEnterFrame循环或是SetInterval()方法循环。

2.2.3 OnEnterFrame循环

OnEnterFrame循环是用当前影片的帧频不断地调用函数，也就是说帧频为12和31的执行速度是不同的。OnEnterFrame必须要定义一个执行时的调用函数，它的写法如下:

my_mc.onEnterFrame=function(){
tarce("onEnterFrame run");
}

2.2.4 SetInterval循环

SetInterval()的功能有些类似于日常生活中的定时器，每隔一段时间调用函数执行交给它的任务，它的基本用法如下。

SetInterval(函数名称,间隔时间,[参数1,参数2……]);

在它的小括号中至少要输入两个参数，一定要有的是定义的函数名，另一个就是间隔时间，是以微秒来计算的。使用它同样可以达到与onEnterFrame类似的效果。而它有自己独特的优点，就是不会受帧频的限制，而是取决于所定义的间隔时间。

下面先来看一个简单的应用。

//定义一个函数
function heelo World():Void{
  trace("hello World");
}
setInterval(hello World,500);

它会一直循环下去，那么如何停止它呢？需要使用与其相关的clearInterval()方法。如上面的代码所示。如果要停止它，代码如下:

Var loopId=setInterval(hello World,500);
Function hello World():Void{
trace("hello World");
}
onMouseDown=function(){
clearlnterval(loopid);
}

当单击光标时，它会执行clearInterval()方法，使循环停下来。

2.2.5 实训:ActionScript脚本在导航中的应用

【实训目的】

图2-61为效果图，本实例通过ActionScript脚本代码控制影片剪辑来制作网站导航。

图2-61 效果图

【实训要点】

* 新建Flash文档并设置文档属性

* 新建相应的元件并制作元件动画

* 在“属性”面板上设置“帧标签”

* 添加相应的ActionScript脚本代码对影片剪辑元件进行控制

【制作步骤】

01　执行【文件】→【新建】命令，新建一个Flash文档，如图2-62所示。单击“属性”面板上的“大小”按钮，弹出“文档属性”对话框，设置“尺寸”为595像素×180像素，“背景颜色”为#0099FF，“帧频”为30fps，如图2-63所示。

图2-62 新建Flash文档

图2-63 设置“文档属性”

02　执行【插入】→【新建元件】命令，新建一个“名称”为“小狗动画1”、“类型”为“影片剪辑”的元件，如图2-64所示。执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22502.png”导入到场景中，如图2-65所示。

图2-64 “创建新元件”对话框

图2-65 导入图像

03　单击“工具箱”中的“选择工具”按钮，选择刚刚导入的图像，按【F8】键将图像转换成一个“名称”为“小狗1”、“类型”为“图形”的元件，如图2-66所示。分别在第5帧和第10帧的位置单击，依次按【F6】键插入关键帧，“时间轴”效果如图2-67所示。

图2-66 “转换为元件”对话框

图2-67 “时间轴”效果

04　使用“选择工具”将元件垂直向上移动5像素，场景效果如图2-68所示。再次使用“选择工具”将第5帧的元件垂直向上移动15像素，场景效果如图2-69所示，分别设置第1帧和第5帧的“补间”类型为“动画”。

图2-68 将元件垂直向上移动

图2-69 再次将元件垂直向上移动

05　单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22507.png”导入到场景中，如图2-70所示。按【F8】键将图像转换成一个“名称”为“气泡”、“类型”为“图形”的元件，如图2-71所示。

图2-70 导入图像

图2-71 “转换为元件”对话框

06　在第10帧的位置单击，按【F6】键插入关键帧，使用“选择工具”将元件向左上角移动，场景效果如图2-72所示。单击“工具箱”中的“任意变形工具”按钮，按住【Shift】键将第1帧上元件等比例缩小，并调整元件在场景中的位置，场景效果如图2-73所示，设置第1帧的“补间”类型为“动画”。

图2-72 将元件向左上角移动

图2-73 将元件等比例缩小

07　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，在第10帧的位置单击，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入stop();脚本语言，如图2-74所示，完成后的“时间轴”效果如图2-75所示。

图2-74 输入脚本语言

图2-75 “时间轴”效果

08　用制作“小狗动画1”的方法，制作“小猪动画1”元件、“小猫动画1”元件、“小熊动画1”元件和“小老鼠动画1”元件，完成后的元件效果如图2-76所示。

图2-76 完成后的元件效果

09　执行【插入】→【新建元件】命令，新建一个“名称”为“小狗动画2”、“类型”为“影片剪辑”的元件，如图2-77所示。执行【窗口】→【库】命令，打开“库”面板，将“小狗1”元件从“库”面板中拖入到场景中，如图2-78所示。

图2-77 “创建新元件”对话框

图2-78 拖入元件

10　分别在第5帧、第10帧、第15帧和第20帧的位置单击，依次按【F6】键插入关键帧，使用“选择工具”将第5帧的元件垂直向下移动15像素，场景效果如图2-79所示。分别将第15帧和第20帧的元件垂直向下移动5像素，场景效果如图2-80所示。分别设置第1帧、第5帧、第10帧和第15帧的“补间”类型为“动画”。

图2-79 将元件垂直向下移动

图2-80 将元件垂直向下移动

11　单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，打开“库”面板，将“气泡”元件从“库”面板中拖入到场景中，如图2-81所示。分别在第3帧和和第5帧的位置单击，依次按【F6】键插入关键帧，在第6帧的位置单击，按【F7】键插入空白关键帧，使用“任意变形工具”并按住【Shift】键将第3帧场景中的元件等比例扩大，场景效果如图2-82所示。

图2-81 拖入元件

图2-82 将元件等比例扩大

12　再次使用“任意变形工具”并按住【Shift】键将第5帧场景中的元件等比例扩大，场景效果如图2-83所示。设置其“属性”面板上的“颜色”样式下的Alpha值为0%，分别设置第1帧和第3帧的“补间”类型为“动画”，完成后的“时间轴”效果如图2-84所示。

图2-83 将元件等比例扩大

图2-84 “时间轴”效果

13　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，在第3帧的位置单击，按【F6】键插入关键帧，执行【文件】→【导入】→【打开外部库】命令，将“第2章\素材\素材01.fla”打开，将“爆炸动画”元件从“库-素材01.fla”面板中拖入到场景中，调整元件大小后的效果如图2-85所示，“库-素材01.fla”面板如图2-86所示。

图2-85 拖入元件并调整大小

图2-86 “库-素材01.fla”面板

14　单击“时间轴”面板上的“插入图层”按钮，新建“图层4”，执行【文件】→【导入】→【导入到库】命令，将声音“第2章\素材\sound1.mp3和sound2.mp3”导入到“库”中，在第8帧的位置单击，按【F6】键插入关键帧，设置其“属性”面板上的“声音”名称为sound2.mp3，其他设置为默认，“属性”面板如图2-87所示。完成后的“时间轴”效果如图2-88所示。在第9帧的位置单击，按【F7】键插入空白关键帧。

图2-87 “属性”面板

图2-88 “时间轴”效果

15　单击“时间轴”面板上的“插入图层”按钮，新建“图层5”，在第10帧的位置单击，按【F6】键插入关键帧，设置其“属性”面板上的“帧标签”为re。“属性”面板如图2-89所示，完成后的“时间轴”效果如图2-90所示。

图2-89 “属性”面板

图2-90 “时间轴”效果

16　单击“时间轴”面板上的“插入图层”按钮，新建“图层6”，在第20帧的位置单击，按【F6】键插入关键帧，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入gotoAndPlay(10);脚本语言，如图2-91所示，完成后的“时间轴”效果如图2-92所示。

图2-91 输入脚本语言

图2-92 “时间轴”效果

17　用制作“小狗动画2”的方法，制作出“小猪动画2”元件、“小猫动画2”元件、“小熊动画2”元件和“小老鼠动画2”元件，完成后的元件效果如图2-93所示。

图2-93 完成后的元件效果

18　执行【插入】→【新建元件】命令，新建一个“名称”为“反应区”、“类型”为“按钮”的元件，如图2-94所示。在“指针经过”状态上单击，按【F6】键插入关键帧，设置其“属性”面板上的“声音”名称为sound1.mp3，其他设置为默认。完成后的“时间轴”效果如图2-95所示。

图2-94 “创建新元件”对话框

图2-95 “时间轴”效果

19　分别在“按下”和“点击”状态上单击，依次按【F7】键插入空白关键帧，“时间轴”效果如图2-96所示。单击“工具箱”中的“矩形工具”按钮，在场景中绘制一个尺寸为85像素×150像素的矩形，场景效果如图2-97所示。

图2-96 “时间轴”效果

图2-97 绘制矩形

20　单击“编辑栏”上的“场景1”文字，返回到“场景1”编辑状态，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22501.jpg”导入到场景中，如图2-98所示。在第40帧的位置单击，按【F5】键插入帧，“时间轴”效果如图2-99所示。

图2-98 导入图像

图2-99 “时间轴”效果

21　单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22508.png”导入到场景中，调整图像在场景中的位置，如图2-100所示。在第4帧的位置单击，按【F7】键插入空白关键帧，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22509.png”导入到场景中，调整图像在场景中的位置，如图2-101所示。用制作第4帧的方法，在“图层2”上插入其他空白关键帧，并将相应的图像导入到场景中。完成后的“时间轴”效果如图2-102所示。

图2-100 导入图像

图2-101 导入图像

图2-102 完成后的“时间轴”效果

22　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，打开“库”面板，将“小狗动画1”元件从“库”面板中拖入到场景中，场景效果如图2-103所示。在第11帧的位置单击，按【F6】键插入关键帧，在第4帧的位置单击，按【F7】键插入空白关键帧，“小狗动画2”元件从“库”面板中拖入到场景中，场景效果如图2-104所示。

图2-103 拖入元件

图2-104 拖入元件

23　用制作“图层3”的方法，制作出“图层4”、“图层5”、“图层6”和“图层7”上的动画，完成后的“时间轴”效果如图2-105所示，场景效果如图2-106所示。

图2-105 完成后的“时间轴”效果

图2-106 场景效果

24　单击“时间轴”面板上的“插入图层”按钮，新建“图层8”，打开“库”面板，将“反应区”元件从“库”面板中拖入到场景中，场景效果如图2-107所示，选中场景中的反应区元件，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入图2-108所示的脚本语言。

图2-107 拖入元件

图2-108 输入脚本语言

25　用制作“图层8”的方法，制作出“图层9”、“图层10”、“图层11”和“图层12”上的动画，完成后的“时间轴”效果如图2-109所示，场景效果如图2-110所示。

图2-109 完成后的“时间轴”效果

图2-110 场景效果

26　单击“时间轴”面板上的“插入图层”按钮，新建“图层13”，在第1帧的位置单击，设置其“属性”面板上的“帧标签”为BL，完成后的“时间轴”效果如图2-111所示。用第1帧的方法，在其他帧的位置插入关键帧，并设置“帧标签”，完成后的“时间轴”效果如图2-112所示。

图2-111 “时间轴”效果

图2-112 完成后的“时间轴”效果

27　单击“时间轴”面板上的“插入图层”按钮，新建“图层14”，在第3帧的位置单击，按【F6】键插入关键帧，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入stop();脚本语言，“时间轴”效果如图2-113所示，用制作第3帧的方法，新建其他关键帧，并在关键帧添加脚本语言，完成后的“时间轴”效果如图2-114所示。

图2-113 “时间轴”效果

图2-114 完成后的“时间轴”效果

28　完成动画效果的制作，执行【文件】→【保存】命令，将动画保存为“第2章\2-2-5.fla”，按【Ctrl+Enter】组合键测试影片，预览动画效果如图2-115所示。

图2-115 预览动画效果

2.3 Flash动画中的缓动

缓动（Tween easing）对于现在的Flash使用者来说已经不再陌生了。缓动的最大用处就是应用在设计的运动表现上，它可以结合物理和数学等原理真实地模拟现实生活中的运动现象。

对于Flash网站设计师来讲，缓动应该算得上是必会的一项技能。

2.3.1 在“属性”面板上设置静态缓动

这里把不需要通过编写ActionScript来实现的位于时间轴的缓动称为静态缓动。这种缓动形式在制作线性的Flash过场动画中应用非常广泛，它也是最简单的缓动之一，如图2-116所示。

图2-116 “时间轴”效果和“属性”面板

静态缓动的设置方法如下。

通常情况下，需要先创建补间动画，也就是确定影片剪辑元件开始帧的状态和结束帧的状态，如果只做到这一步，在测试动画的过程中，影片剪辑中动画的运动是匀速的。但在现实生活中物体的运动总是在加速度状态或称为变速状态下运动的，匀速运动只是一种理想的状态。假设要设计物体由快到慢的运动状态，则需要选定第1帧为关键帧，然后在“属性”面板中将“缓动”值设为100，测试影片的结果将是影片剪辑动画从快到慢直到最后停下来。当然也可以将第1帧设置为–100，那么它的效果将是由慢开始加速到结束位置停止。读者只要稍加实践就可以理解这部分的含义。

2.3.2 如何自定义缓动

自定义缓动是从Flash 8开始新增的一项非常实用的功能。它允许设计师自己编辑定义缓动，以模拟逼真的效果，达到与使用ActionScript缓动不相上下的效果，如图2-117所示。

图2-117 “自定义缓入/缓出”对话框

需要做的只是选中准备开始的缓动的第1帧，然后在“属性”面板上单击“缓动”右边的【编辑】按钮，就会弹出图2-117所示的对话框，然后用鼠标编辑这条曲线，最后测试，直到得到想要的效果为止。这个功能很实用，但在Flash MX 2004版本之前是没有这项功能的。

2.3.3 ActionScript控制缓动

动态缓动是指通过ActionScript脚本来控制的缓动。它与帧的静态缓动的区别是:它更易处理复杂对象的缓动效果，生成更细腻、更逼真的缓动效果。

基础缓动:所谓基础缓动就是“标准指数缓动”，这个缓动过程是向着目标运动的，并逐渐减慢速度直至停止，也将其称为“缓出”。

标准指数缓动的代码如下:

this.onEnterFrame=function(){
  var distance=this.targetX-this._x;
  this._x+=distance/2;
}

上面的公式就是一个标准的基础缓动公式，也是最常用的缓动公式，首先来看一下代码。

var distance=this.targetX-this._x;

定义当前位置与目标点之间的距离。

this._x+=distance/2;

这一句是指当前物体以递减的增量移动，直到移动到目标点。就像要移动100m的距离，第一次移动了50m，第二次移动了25m，第三次移动了12.5m一样。

上面只是介绍了一个公式，下面来看怎样来使用它。从上面的代码中得知，我们需要知道两个值，一个是当前物体的位置，另一个就是目标点。通常情况下，当前物体的位置，也就是常用的MovieClip，可以用this._x,this._y来表示，自然它可以是动态的，另外还需要知道的是targetX（目标点的位置）。

2.3.4 tween类和easing类

Flash MX 2004以后的版本都具备了tween类和easing类。使用这两个类的目的是制作更加逼真的缓动效果。可能读者对类并不是很熟悉，在本节中，读者不需要了解类的具体编写方法，只需要知道如何灵活地运用类就可以了。

1．tween类

tween类的构造函数如下:

someTweenID=new
mx.transitions.Tween(object,property,function,
begin,end,duration,useSeconds)

了解类的构造函数是必要的。因为在Flash中使用它，需要先建立类的实例，然后才能调用它的方法和属性，如同之前定义函数然后调用函数一样。

下面是对其中一些参数的解释。

* object:是指tween的对象，也就是目标。

* property:字符串，是指应用效果的对象属性，如_x、_y、_alpha等。

* function:easing缓动类型。

* begin:数值，对象属性的起始值。

* duration:数值，运动过程的时间。

* useSeconds:布尔值，决定使用秒数还是使用帧数值。

2．easing类

easing类提供了多种缓动类型，用于与tweens配合使用，也就是上面参数中的function，类别如下所示。

* back:在一个或两个结束点过渡范围之外的扩展动画，类似溢出效果。

* bounce:在一个或两个结束点过渡范围内加入回弹效果，回弹的多少取决于duration延迟时间的多少，长的延迟回弹的次数就相对多。

* elastic:发生在一个或两个结束点过渡范围之外的弹性效果，弹性的力度不受duration的影响。

* regular:在一个或两个结束点上加入减速动作。

* none:在开始点到结束点之间加入恒定的运动，没有效果。

以上6种easing class类，每个又包含3种easing method方法。

* easeIn:在过渡的开始阶段产生easing效果。

* easeOut:在过渡的结束阶段产生easing效果。

* easeInOut:在开始和结束阶段均产生easing效果。

上面已经列出了许多关键的位置，下面来研究一下如何把它们结合在一起使用。

假设有一个ball_mc的影片剪辑，想把它从X轴的20的位置移动到400的位置，类似上面的代码，并且希望它以一种弹性的缓动方式移动，运动时间为0.5s，使用秒计算时间。

那么，根据上面提到的构造函数的形式写成如下形式。

ballTween=new

mx.transitions.Tween(ball_mc,"_x",mx.transitions.easing.Bounce.easeOut,20,400,. 5,true);

2．3.5可扩展的缓动函数

定义的函数虽然可以实现不同的需求，但如果想随时更换缓动类型并不是很方便，现在对上面的函数进行优化。

function tweenball(easeType){
  //初始位置值
  var begin=20;
  //结束位置值
  var end=400;
  //运动周期时间
var time=0.5;
//定义mc为实例引用名
var mc=ball_mc;
//tween的构造函数，并设置ballTween为引用名
ballTween=new Tween(mc, "_x",easeType,begin,end,
time,true);
}

将原有函数内的easeType定义去除了，将它作为函数的参数来传递，这样会方便我们在外部使用它，在调用的时候要写成如下形式。

myBtn.onRelease=function(){
  //调用函数tweenball();
tweenball(mx.transitions.easing.Bounce.easeOut);
}

2.4 综合实训：脚本应用实训

【实训目的】

通过图2-118所示的效果图，利用添加的ActionScript脚本语言控制影片剪辑元件，当单击指定的元件后，就会跳转到相应的影片剪辑元件中。

【实训要点】

* 新建Flash文档并设置文档属性

* 导入相应的素材文件制作遮罩动画效果

* 使用“导入视频”对话框导入外部视频文件

* 制作动画，并使用ActionScript脚本代码控制动画的播放

图2-118 效果图

【制作步骤】

01　执行【文件】→【新建】命令，新建一个Flash文档，如图2-119所示。单击“属性”面板上的“大小”按钮，设置弹出的“文档属性”对话框“尺寸”为540像素×415像素，“背景颜色”为#CCCCCC，“帧频”为36fps，如图2-120所示。

图2-119 新建Flash文档

图2-120 设置“文档属性”

02　执行【插入】→【新建元件】命令，新建一个“名称”为“图像动画1”、“类型”为“影片剪辑”的元件，如图2-121所示。执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22515.jpg”导入到场景中，如图2-122所示。

图2-121 “创建新元件”对话框

图2-122 导入图像

03　单击“工具箱”中的“选择工具”按钮，选择刚刚导入的图像，按【F8】键将图像转换成一个“名称”为“图像1”、“类型”为“图形”的元件，如图2-123所示。单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“工具箱”中的“椭圆工具”按钮，在场景中绘制一个尺寸为190像素×190像素的圆，场景效果如图2-124所示，在第160帧的位置单击，按【F5】键插入帧。

图2-123 “转换为元件”对话框

图2-124 绘制圆

04　分别在“图层1”的第20帧、第115帧和第130帧的位置单击，依次按【F6】键插入关键帧，单击“工具箱”中的“任意变形工具”按钮，按住【Shift】键将元件等比例缩小，并向左上角移动，完成后的场景效果如图2-125所示。使用“选择工具”选择第1帧的元件，设置其“属性”面板上的“颜色”样式下的Alpha值为0%。完成后的元件效果如图2-126所示，“属性”面板如图2-127所示。

图2-125 场景效果

图2-126 元件效果

图2-127 “属性”面板

05　在第160帧的位置单击，按【F5】键插入帧，分别设置第1帧和第115帧的“补间”类型为“动画”，完成后的“时间轴”效果如图2-128所示。在“图层2”上单击鼠标右键，在弹出的菜单中选择【遮罩层】命令，如图2-129所示，完成后的“时间轴”效果如图2-130所示。

图2-128 “时间轴”效果

图2-129 选择【遮罩层】命令

图2-130 “时间轴”效果

06　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，在第45帧的位置单击，按【F6】键插入关键帧，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22520.png”导入到场景中，调整图像在场景中的位置，如图2-131所示。按【F8】键将图像转换成一个“名称”为“按钮”、“类型”为“按钮”的元件，如图2-132所示。在第55帧的位置单击，按【F6】键插入关键帧，使用“选择工具”选择第45帧的元件，设置其“属性”面板上的“颜色”样式下的Alpha值为0%，设置第45帧的“补间”类型为“动画”。

图2-131 导入图像

图2-132 “转换为元件”对话框

07　单击“时间轴”面板上的“插入图层”按钮，新建“图层4”，在第160帧的位置单击，按【F6】键插入关键帧，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入stop();脚本语言，如图2-133所示，完成后的“时间轴”效果如图2-134所示。

图2-133 输入脚本语言

图2-134 “时间轴”效果

08　用制作“图像动画1”元件的方法，制作出“图像动画2”元件和“图像动画3”元件，完成后的元件效果如图2-135所示。

图2-135 完成后的元件效果

09　单击“编辑栏”上的“场景1”文字，返回到“场景1”编辑状态，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22514.jpg”导入到场景中，如图2-136所示。按【F8】键将图像转换成一个“名称”为“背景图像”、“类型”为“图形”的元件，如图2-137所示。在第10帧的位置单击，按【F6】键插入关键帧，在第220帧的位置单击，按【F5】键插入帧，使用“选择工具”选择第1帧的元件，设置其“属性”面板上的“颜色”样式下的Alpha值为0%，设置第1帧的“补间”类型为“动画”。

图2-136 导入图像

图2-137 “转换为元件”对话框

10　单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，在第15帧的位置单击，按【F6】键插入关键帧，执行【文件】→【导入】→【导入视频】命令，在弹出的“导入视频”对话框中单击【浏览】按钮，浏览到需要导入的视频文件“第2章\素材\盒子动画.flv”，如图2-138所示。单击【下一步】按钮，进入视频部署选项设置，单击选中“在SWF中嵌入视频并在时间轴上播放”单选按钮，如图2-139所示。

图2-138 选择视频文件

图2-139 设置视频部署选项

11　单击【下一步】按钮，进入视频嵌入选项设置，在“符号类型”选项中选择“影片剪辑”，其他选项默认设置，如图2-140所示。单击【下一步】按钮，显示完成视频导入，单击【完成】按钮，完成视频的导入，场景效果如图2-141所示。

图2-140 “嵌入”对话框

图2-141 场景效果

12　使用“选择工具”将场景中的“盒子视频”元件向左下角移动，场景效果如图2-142所示。在第25帧的位置单击，按【F6】键插入关键帧，再次使用“选择工具”选择第15帧下场景中的元件，设置其“属性”面板上的“颜色”样式下的Alpha值为0%，完成后的元件效果如图2-143所示。设置第15帧的“补间”类型为“动画”。

图2-142 场景效果

图2-143 元件效果

13　单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22518.png”导入到场景中，调整图像在场景中的位置，如图2-144所示。按【F8】键将图像转换成一个“名称”为“边框”、“类型”为“图形”的元件，在第30帧的位置单击，按【F6】键插入关键帧，使用“选择工具”将第1帧的元件垂直向上移动。场景效果如图2-145所示，设置第1帧的“补间”类型为“动画”。

图2-144 导入图像

图2-145 垂直向上移动元件

14　分别在第50帧和第70帧的位置单击，依次按【F6】键插入关键帧，使用“选择工具”将第70帧的元件水平向左移动40像素，场景效果如图2-146所示。分别在第75帧和第95帧的位置单击，依次按【F6】键插入关键帧，再次使用“选择工具”将元件水平向右移动80像素，场景效果如图2-147所示，分别设置第50帧和第75帧的“补间”类型为“动画”。

图2-146 将元件水平向左移动

图2-147 将元件水平向右移动

15　用制作第70帧、第75帧和第95帧的方法，制作出其他帧的动画，完成后的“时间轴”效果如图2-148所示。

图2-148 完成后的“时间轴”效果

16　单击“时间轴”面板上的“插入图层”按钮，新建“图层4”，在第30帧的位置单击，按【F6】键插入关键帧，执行【文件】→【导入】→【导入到舞台】命令，将图像“第2章\素材\22519.png”导入到场景中，如图2-149所示。按【F8】键将图像转换成一个“名称”为“箭头”、“类型”为“影片剪辑”的元件，如图2-150所示。

图2-149 导入图像

图2-150 “转换为元件”对话框

17　使用“选择工具”选择“箭头”元件，设置其“属性”面板上的“实例名称”为btL，分别在第50帧和第70帧的位置单击，依次按【F6】键插入关键帧，使用“选择工具”将元件水平向左移动，场景效果如图2-151所示。将第30帧场景中的元件水平向右移动10像素，场景效果如图2-152所示，设置其“属性”面板上的“颜色”样式下的Alpha值为0%，分别设置第30帧和第50帧的“补间”类型为“动画”。

图2-151 将元件水平向左移动元件

图2-152 将元件水平向右移动

18　分别在第75帧和第95帧的位置单击，依次按【F6】键插入关键帧，使用“选择工具”将元件水平向右移动动，场景效果如图2-153所示。分别在第105帧和第125帧的位置单击，依次按【F6】键插入关键帧，再次使用“选择工具”将元件水平向左移动，场景效果如图2-154所示，分别设置第75帧和第105帧的“补间”类型为“动画”。

图2-153 将元件水平向右移动

图2-154 将元件水平向右移动

19　用制作第95帧、第105帧和第125帧的方法，制作出其他帧，完成后的“时间轴”效果如图2-155所示。

图2-155 完成后的“时间轴”效果

20　用制作“图层4”的方法，制作出“图层5”上的动画，完成后的“时间轴”效果如图2-156所示。

图2-156 完成后的“时间轴”效果

21　单击“时间轴”面板上的“插入图层”按钮，新建“图层6”，在第45帧的位置单击，按【F6】键插入关键帧，执行【窗口】→【库】命令，打开“库”面板，将“图像动画1”元件从“库”面板中拖入到场景中，场景效果如图2-157所示。在第50帧的位置单击，按【F7】键插入空白关键帧，“时间轴”效果如图2-158所示。

图2-157 拖入元件

图2-158 “时间轴”效果

22　在第70帧的位置单击，按【F6】键插入关键帧，打开“库”面板，将“图像动画2”元件从“库”面板中拖入到场景中，场景效果如图2-159所示。在第75帧的位置单击，按【F7】键插入空白关键帧，“时间轴”效果如图2-160所示。

图2-159 拖入元件

图2-160 “时间轴”效果

23　用制作第70帧和第75帧的方法，制作出其他帧的动画，完成后的“时间轴”效果如图2-161所示。

图2-161 完成后的“时间轴”效果

24　单击“时间轴”面板上的“插入图层”按钮，新建“图层7”，在第50帧的位置单击，按【F6】键插入关键帧，设置其“属性”面板上的“帧标签”为b_1，“属性”面板如图2-162所示，完成后的“时间轴”效果如图2-163所示。

图2-162 “属性”面板

图2-163 “时间轴”效果

25　用制作第50帧的方法，插入其他关键帧并设置“帧标签”，完成后的“时间轴”效果如图2-164所示。

图2-164 完成后的“时间轴”效果

26　单击“时间轴”面板上的“插入图层”按钮，新建“图层8”，在第45帧的位置单击，按【F6】键插入关键帧，执行【窗口】→【动作】命令，在打开的“动作-帧”面板中输入如图2-165所示的脚本语言。在第50帧的位置单击，按【F6】键插入关键帧，在打开的“动作-帧”面板中输入图2-166所示的脚本语言。

图2-165 输入脚本语言

图2-166 输入脚本语言

27　用制作第45帧和第50帧的方法，在其他帧的位置插入关键帧，并添加脚本语言，完成后的“时间轴”效果如图2-167所示。

图2-167 完成后的“时间轴”效果

28　完成动画效果的制作，执行【文件】→【保存】命令，将动画保存为“第2章\2-4.fla”，按【Ctrl+Enter】组合键测试影片，预览动画效果如图2-168所示。

图2-168 预览动画效果

2.5 本章小结

本章主要讲解了Flash动画中常用的ActionScript脚本语言，重点是Array数组和easing类的应用。要想编写非常有效的动态效果或动态内容，数组和缓动是必须要掌握的知识，并且您需要从根本上理解它们的应用。读者在完成本章内容的学习后，能够掌握Flash网站中各种常用ActionScript脚本语言的应用及技巧，而其他相关的ActionScript脚本语言在本章中都是有针对性地进行了介绍。

2.6 课后练习

一、选择题

1．getBytesLoaded()和getBytesTotal()都属于（　）的属性。

（A）影片剪辑

（B）按钮

（C）图形

（D）元件

2．（　）是用来将“库”中设置了“链接”属性的影片剪辑元件添加到场景中。

（A）getBytesTotal()

（B）getBytesLoaded()

（C）attachMovie

（D）LoadMovie()

3．（　）指定当前窗口中的当前帧。

（A）_blank

（B）_self

（C）_parent

（D）_top

二、填空题

1．路径可分为______________和______________。

2．在日常工作中，______________通常用来与索引数组配合，用来编辑影片剪辑的属性。

3．所谓动态______________就是指可以通过“库”中的影片剪辑元件链接符号动态地将多个影片剪辑元件的副本黏贴到子场景中。