第六节交互式动画

第六节交互式动画

交互式动画是指具有双向交流功能的动画。在交互式动画中，用户可以输入设备如通过键盘或鼠标等来实现多种交互功能，例如播放动画、使影片停止播放、跳到影片的不同部分、选择性观看影片、登陆网站等。交互式动画大大提高了Flash的娱乐性和实用性。在Flash 8中，交互式动画通过建立“动作”来实现，“动作”是使用Action Script(简称AS)编写的指令集，由特定事件触发运行。

一、交互式语言概述

用于创建交互式动画的计算机语言称为交互式语言。Action Script是Flash 8的脚本语言，Flash 8中的一切交互式动作通过Action Script实现。

(一)Action Script简介

Action Script(目前使用的版本是Action Script 2.0)是一种简单高效的交互式动画制作工具，它与通用的JavaScript有相似的结构，同样采用面向对象的编程思想，以动画中的帧、按钮、影片剪辑元件为对象进行定义和编写，通过特定事件触发运行。

Flash 8动画中加入用Action Script编写的程序后可以实现多种功能，如控制影片的播放与停止、在动画播放过程中跳到指定的帧、向影片发送命令、指定动画执行的内容等等，从而极大地推广了Flash 8在交互式动画制作方面的应用。

(二)Action Script类型

Action Script分为3类：帧中的Action Script、按钮中的Action Script和影片剪辑元件中的Action Script。

1.帧中的Action Script

在帧中添加Action Script后，当动画播放到该帧时Action Script程序被执行。帧中的Action Script常用于控制动画的播放与停止或跳到其他的帧进行播放。

2.按钮中的Action Script

按钮中的Action Script可实现的交互性更强。对按钮进行编程，必须通过一定的“事件”来触发程序的运行。常用的触发事件如下：

(1)onDragOut：在按钮上按下鼠标，并按住鼠标移动到按钮外，程序运行。

(2)onDragOver：在按钮上按下鼠标，并按住鼠标移动到按钮外，再移动到按钮上，程序运行。

(3)onPress：在按钮上按下鼠标时，程序运行。

(4)onRelease：在按钮上按下鼠标，鼠标释放时程序运行。

(5)onRelease Outside：在按钮上按下鼠标，按住鼠标移动到按钮外并释放后，程序运行。

(6)onRollOver：当鼠标移动到按钮上时，程序运行。

(7)onRollOut：当鼠标从按钮上移出时，程序运行。

3.影片剪辑元件中的Action Script

影片剪辑元件中的Action Script同样需要通过一定的事件来触发运行。常用的触发事件如下：

(1)Load：影片剪辑载入时，程序运行。

(2)Unload：影片剪辑移出时，程序运行。

(3)onMousedown：按下鼠标时，程序运行。

(4)onMousemove：鼠标开始移动，程序运行。

(5)onMouseup：按下鼠标，鼠标释放时程序运行。

二、语句参数

在使用Action Script之前，有必要对其语句参数作一定了解。下面介绍几个基本的语句参数：常量、变量、函数和表达式。

(一)常量

相对与变量而言，常量是固定不变的参数。例如“Key.TAB”始终代表键盘上的“Tab”键。

(二)变量

变量是可变参数，用于存储信息。变量由“变量名”和“变量值”两部分组成，中间通过“=”连接。例如：x=10，其中“x”是变量名，“10”是变量值。

变量名通常由英文26个字母组成，不区分大小写，其中可以包括数字、下划线等。但不能是Action Script内部定义的关键字(如“if”、“else”等)，并且多个变量在同一作用范围内不能重名。

根据变量值类型的不同，可以将变量分为：数值型变量、字符串型变量和逻辑型变量。例如：x=5，x是数值型变量；y=“Vivian”，y是字符串型变量；z=true，z是逻辑型变量。

(三)表达式

代表“值”的参数的任意合法组合都可称为表达式，用于通过运算得到结果。表达式由“操作数”和“运算符”组成。例如，在表达式“x+5”中，“x”和“5”是操作数，“+”是运算符。

在Flash 8中，可通过“动作”面板来用动作脚本撰写脚本。在标准编辑模式下使用该面板，可以通过从菜单和列表中选择选项来创建脚本。在专家编辑模式下使用该面板，可直接向脚本窗格中输入文本。在这两种模式下，代码提示都可帮助我们完成动作和插入属性及事件。一旦有了一个脚本，我们就可将其附加按钮、影片剪辑或者帧上，从而创建所需的交互性。

三、动作面板

在Flash 8中，Action Script在“动作”面板中编写。执行“窗口”菜单下的“开发面板”命令，在弹出的子菜单中执行“动作”命令，打开动作面板，该面板分为动作工具箱、对象显示框、动作编辑区和工具栏。

1.动作工具箱中罗列着所有的Action Script语句，可用鼠标拖入右边的动作编辑区直接使用。

2.对象显示框中显示着当前添加动作的对象。

3.动作编辑区用于书写动作语句，动作语句可以通过“动作工具箱”或“添加动作”按钮添加，也可以自行输入。

4.工具栏中提供了编程过程中常用到的工具。

(1)添加动作按钮：单击该按钮，弹出下拉菜单，与动作工具箱一样，其中罗列着所有的Action Script语句。使用该按钮添加语句较方便快捷。

(2)查找按钮：用于搜寻语句。

(3)替换按钮：用于替换语句。

(4)插入目标路径按钮：用于指定对象的名称并将对象插入程序。

(5)检查语法按钮：用于检查语句的语法。

(6)自动套用格式按钮：用于对语句进行自动排版。

(7)显示代码提示按钮：用于显示提示代码。

5.设计实例“开始”按钮的制作。

许多情况下，当动画播放完毕后停止，同时出现一个“开始”按钮，单击该按钮可重新播放动画6。本实例介绍“开始”按钮的制作方法。

语句注解：

①“stop()”：使动画停止播放。

②“on(release)”：鼠标事件。当鼠标释放时运行程序。

③“gotoAndPlay()”：使动画跳到某一帧播放，小括号内填入帧编号。

制作步骤：

(1)新建一个空白文件(550像素×400像素)。

(2)将填充色定义为绿色，打开混色器，并在中间双击，并将颜色调为白色。

(3)选择圆形工具，按住“Shift”键画一个圆，并将该圆放在工作区最左边，如图7－117所示。

图7－117　元件放在工作区最左边

(4)在第40帧上加入关键帧(如图7－118所示)，并在第1帧到第40帧的时间轴上的任意一位置点右键(如图7－119所示)，选择“创建补间动画”(如图7－120所示)。

图7－118　关键帧

图7－119　创建补间动画

图7－120　创建补间动画

(5)将第40帧选中，然后将球放在工作区的最右边(如图7－121所示)。

图7－121　将圆放在工作区的右下角

(6)新建一个按钮元件，交将元件名称改为“按钮”(如图7－122所示)。

图7－122　新建元件，并重命名

(7)将填充色调为蓝色，选择矩形工具，绘制作一个矩形(如图7－123所示)。

图7－123　蓝色矩形

(8)将矩形放在工作区的最中间。(提示：用对齐工具。)

(9)在矩形上写“开始”两个字，并将其放在工作区中间，字体颜色调为白色。

(10)在按钮设置中的指针经过上加关键帧(如图7－124所示)，并将“开始”颜色调为绿色。

图7－124　按钮

(11)在按钮设置中的按下上加关键帧，并将“开始”颜色调为红色。

(11)在按钮设置中的点击上加关键帧，并将“开始”颜色调为红色。

(12)返回场景，调出库(提示：可按“F11”快捷键。)，新建一个图层，在此图层的第40帧上增加关键帧，并将按钮从库中拖到工作区的右下角(如图7－125所示)。

图7－125　工作区图像

(13)在此图层的第40帧上点右键，在弹出的菜单中选择“动作”，如图7－126所示：

(14)在代码区写下“stop()；”

图7－126　选择“动作”对话框

(15)回到场景中，选中“开始”按钮，再次点动作，在代码区写上“on(release){gotoAndPlay(1)}”即可，如图7－127所示。

图7－127　复点“动作”对话框

(16)下面是时间轴图(如图7－128所示)。

图7－128　时间轴图

(17)测试影片，按“Enter”键或者按“Ctrl+Enter”或者选择控制菜单下的测试影片。

四、按钮及控制

“公用库”里有很多通用按钮，可供选用。执行“窗口→公用库→按钮”命令，就会在“库－按钮”面板上显示数百项通用按钮。你可以选中喜欢的按钮拖入舞台使用。当然，你也可以自己动手制作按钮，特别是如果你想使用一些“效果按钮”，那就必须自己动手制作了。

按钮制作

1.简单的图形按钮

(1)按下快捷键“Ctrl+F8”，打开“创建新元件”对话框，选择类型为“按钮”，在名称栏键入“停止”字样，单击“确定”按钮，打开停止按钮元件的编辑场景。

(2)按钮元件编辑场景中的时间轴是一种特殊的时间轴，总其只有四个帧，它们分别是“弹起”帧、“指针经过”帧、“按下”帧和“点击”帧。最简单的按钮，只要编辑好弹起帧即可。

(3)选中图层1的弹起帧，在舞台上绘制一个黑色正方形，成为常见的停止符号。

(4)返回场景1，把“停止”按钮元件拖入舞台，放置在适当位置。

(5)执行“控制→测试影片”命令，观看效果(注意，不能用按下回车键的方法看按钮效果)，当你把光标置于按钮图形上时，如果出现手形，就说明你的按钮制作成功了。

2.文字按钮

(1)按下快捷键“Ctrl+F8”，打开“创建新元件”对话框，选择类型为“按钮”，在名称栏键入“播放”字样，单击“确定”按钮，打开播放按钮元件的编辑场景。

(2)选中图层1的“弹起”帧，键入大小为“22”的黑色黑体“播放”两字，居中。

(3)在“点击”帧插入一个空白关键帧，单击“绘图纸外观”按钮，用“矩形工具”画一个能包围“播放”两字的无边框黄色矩形。这里需要说明的是：点击帧上的这个矩形，确定了按钮的作用范围；如果没有这个矩形，所作的按钮仅对有文字笔划的地方起作用，有了这个矩形，就能在整个矩形范围内起作用。

(4)返回场景1，把“播放”按钮元件拖入舞台，放置在适当位置。

(5)测试影片，观看效果。

3.动态按钮

动态按钮，不能像简单的图形按钮那样只编辑弹起帧，也不能像文字按钮那样只编辑弹起帧和点击帧，通常情况下，它需要同时编辑弹起帧、指针经过帧和按下帧。这三个帧上的对象，可以是直接绘制的图形，也可是键入的文本，还可以是元件实例，当你在这些帧上运用了影片剪辑元件，动态效果将更好。

(1)编辑帧动作

①选中你想让其停止播放的那一空白关键帧(或关键帧)，打开“动作—帧”面板。②在动作工具箱中单击“全局函数”，再单击“时间轴控制”，最后双击“stop”。③当你在时间轴帧面板上发现被选中的那一帧上出现一个字母“a”，则表明“停止播放”的帧动作编辑成功了。

(2)编辑按钮动作

①选中你想对其编辑动作的按钮，打开“动作—按钮”面板。

②在动作工具箱中单击“全局函数”，再单击“影片剪辑控制”，最后双击“on”。

③双击“release”。

④插入执行程序：把光标置于大括号中，换行；如果你选中的按钮是一个播放按钮，则应在“时间轴控制”里双击“play”；如果你选中的按钮是一个停止按钮，则应在“时间轴控制”里双击“stop”；如果你选中的按钮是一个跳转按钮，则应在“时间轴控制”里双击“gotoAnd-Play”或“gotoAndStop”，并把光标置于小括号内，输入你想跳转到的帧编号。

(3)示例

①打开已制作的“形状多变的几何图形”源文件，或重新该动画，执行“文件→另存为”命令，把文件名改写为“按钮控制示例”。

②分别制作“播放”、“暂停”、“返回”三个按钮元件。

③返回主场景，插入两个新图层，把三个图层自上而下分别重命名为“动作”、“按钮”、“动画”。

④动作图层第1帧，输入帧动作“stop”。

⑤选中按钮图层第1帧，从库(或公用库)中把三只按钮元件拖入舞台。

⑥选中“播放”按钮，在脚本编辑区输入如下代码：

on(release){play()；}。

⑦选中“暂停”按钮，在语句编辑区输入如下代码：

on(release){stop()；}。

⑧选中“返回”按钮，在语句编辑区输入如下代码：

on(release){gotoAndPlay(1)；}。