flash创建交互式动画

创建交互式动画
交互式动画是指影片播放时支持时间相应和交互功能，动画在播放时能够接受到某种控制，而不是像普通动画那样从头到尾进行播放。

它是通过按钮元件和动作脚本语言ActionScript实现的。

1 按钮元件
Flash元件分为3类：图形、影片剪辑和按钮，所有元件都被保存在“库”面板中，前面已经介绍过图形元件和影片剪辑元件，这里将介绍创建按钮元件的方法。

⑴按钮实际上是四帧的交互影片剪辑。

当为元件选择按钮行为时，Flash 会创建一个四帧的时间轴。

前三帧显示按钮的三种可能状态；第四帧定义按钮的活动区域。

时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳到相应的帧。

⑵要制作一个交互式按钮，可把该按钮元件的一个实例放在舞台上，然后给该实例指定动作。

必须将动作指定给文档中按钮的实例，而不是指定给按钮时间轴中的帧。

⑶按钮元件的时间轴上的每一帧都有一个特定的功能：
第一帧是弹起状态，代表指针没有经过按钮时该按钮的状态。

▪第二帧是指针经过状态，代表当指针滑过按钮时，该按钮的外观。

▪第三帧是按下状态，代表单击按钮时，该按钮的外观。

▪第四帧是"点击"状态，定义响应鼠标单击的区域。

此区域在SWF 文件中是不可见的。

1.1创建文字按钮
在创建按钮元件时，有时需要创建风格相同的一组按钮，例如要控制影片的播放需要创建：暂停、继续两个按钮，那末第2个按钮可以通过复制第1个按钮后修改得到，下面介绍创建、复制按钮的操作方法。

1.建立文字按钮
⑴启动Flash，新建影片文件。

⑵选择“插入”菜单→“新建元件”命令，弹出“创建新元件”对话框，输入按钮元件名称、选择元件类型。

⑶单击“确定”按钮，进入按钮元件的编辑窗口。

单击时间轴上的“弹起”帧，选择“文本”工具，设置：隶书、36号、蓝色，在舞台上输入文
本“暂停”；选择“任意变形”工具单击文本，用方向键移动文本使文本的中心点与元件的中心点重合。

⑷在“指针经过”帧，按F6键，复制“弹起”帧中的内容。

使用“选择”工具选中文本，将颜色改为“墨绿色”（#009900）。

⑸在“按下”帧，按F6键，复制“指针经过”帧中的内容。

使用“选择”工具选中文本，选择“滤镜”面板（在属性面板组中），单击“添加滤镜”
按钮，添加“投影”。

⑹在“点击”帧，按F7键，插入空白关键帧，使用“矩形”工具绘制比文本略大的矩形，定义响应鼠标指针的区域。

⑺单击舞台上方的“场景1”按钮，退出元件编辑窗口，返回到场景编辑窗口。

从“库”面板将“暂停”按钮元件拖到舞台上，创建一个实例，再添加相应的脚本（下一节介绍）即可。

2.复制、修改按钮
⑴打开“库”面板，在“库”面板中的“暂停”按钮上右击，在“快捷菜单”中选择“直接复制”命令，在弹出的“直接复制元件”对话框中修改元件名称为“继续”。

⑵在“库”面板中双击“继续”按钮，在按钮元件编辑窗口中将：弹起、鼠标经过、按下三个帧中“暂停”全部改为“继续”，单击舞台上方的“场景1”按钮，返回到场景编辑窗口。

1.2创建图形按钮
1.创建图形按钮
以创建立体效果的图形按钮为例，讲解图形按钮的创建方法，按钮三个帧中图形如图所示。

⑴启动Flash 8，新建影片文件。

⑵选择“插入”菜单→“新建元件”命令，弹出“创建新元件”对话框，输入按钮元件名称、选择元件类型。

⑶选择“椭圆”工具，在“颜色”面板设置填充为：绿黑线性渐变，在“弹起”帧绘制椭圆，在属性面板设置椭圆的宽度200、高度110，位置（-100，-55）。

⑷在“指针经过”、“按下”帧按F6键，复制“弹起”帧的内容；在时间轴面板上单击“插入图层”按钮，插入图层2、图层3，然后，在图层1
的“指针经过”帧上右击，选择“复制帧”命令，在图层2的“指针经过”帧上右击，选择“粘贴帧”命令。

⑸单击图层2“指针经过”帧上的椭圆，选择“修改”菜单→“变
形”→“缩放与旋转”命令，在“缩放与旋转”对话框中设置：缩放80%、旋转180度。

⑹在图层2的“按下”帧上按F6复制“指针经过”帧中内容。

在图层3的“按下”帧上按F7插入空白关键帧，选择“文本”工具，设置：字体Arial Black、字号45、白色，输入文本“PLAY”。

⑺单击舞台上方的“场景1”按钮，退出元件编辑窗口，返回到场景编辑窗口。

从“库”面板将“PLAY”按钮元件拖到舞台上，创建一个实例，再添加相应的脚本即可。

2.为按钮添加提示信息
当鼠标指针移到按钮上时，出现提示信息，为了节省篇幅我们在上面的“图形按钮”的基础上完成。

⑴打开“库”面板，双击“库”面板中的“PLAY”按钮，切换到按钮元件编辑窗口。

⑵选中图层1的“指针经过”帧，选择“文本”工具，设置：楷体、红色、30号，在椭圆的有下方输入“单击鼠标播放影片”。

单击舞台上方的“场景1”按钮，返回到场景编辑窗口。

⑶按钮运行时三种状态的效果，如图所示。

1.3 查看“公共库”中的按钮
前面介绍料创建按钮的几种方法，Flash还为用户准备了许多按钮。

选择“窗口”菜单→“公共库”→“按钮”命令，打开“库–按钮”面板。

2 Flash的动作脚本语言ActionScript
在简单的动画中，Flash播放器按顺序播放影片文件中的场景和帧。

在交互式影片文件中，观众可以用键盘和鼠标跳到影片文件中的不同部分、移动对象、在表单中输入信息，还可以执行许多其它交互操作。

使用ActionScript 可以创建脚本来通知Flash播放器在发生某个事件时应该执行什么动作。

当播放头到达某一帧，或当影片剪辑加载或卸载，或用户单击按钮或按下某个键时，就会发生一些能够触发脚本的事件。

脚本可以由单一命令组成，如指示影片文件停止播放的命令；也可以由一系列命令和语句组成。

1.动作面板
“动作”面板使您可以创建和编辑对象或帧的ActionScript 代码。

选择帧、按钮或影片剪辑实例可以激活“动作”面板。

取决于所选的内容，“动作”面板标题也会变为“动作- 按钮”、“动作- 影片剪辑”或“动作- 帧”。

▪要显示“动作”面板可以执行下列操作之一：
▪选择“窗口”菜单→“动作”命令。

▪按F9 键。

▪在要添加“动作”的对象上（元件实例、帧）右击，在
快捷菜单中选择“动作”命令。

2.最基本的动作
⑴gotoAndPlay()和gotoAndStop()函数将播放头发送到帧或场景。

这两个函数是您可以从任何脚本调用的全局函数。

⑵您还可以使用MovieClip.gotoAndPlay()和
MovieClip.gotoAndStop()方法来导航特定影片剪辑对象的时间轴。

⑶play() 和stop() 动作用于播放和停止影片文件。

⑷getURL() 动作用于跳到不同的URL。

例如，为“按钮”添加在新窗口打开“河北大学主页”的脚本。

3.常用的按钮事件
⑴press 当鼠标指针滑到按钮上时按下鼠标按钮。

⑵release 当鼠标指针滑到按钮上时释放鼠标按钮。

⑶releaseOutside 当鼠标指针滑到按钮上时按下鼠标按钮，然后在释放鼠标按钮前滑出此按钮区域。

press 和dragOut 事件始终在releaseOutside 事件之前发生。

⑷keyPress "< key > " 按下指定的键盘键。

⑸rollOver 鼠标指针滑到按钮上。

⑹rollOut 鼠标指针滑出按钮区域。

⑺dragOver 当鼠标指针滑到按钮上时按下鼠标按钮，然后滑出该按钮区域，接着滑回到该按钮上。

⑻dragOut 当鼠标指针滑到按钮上时按下鼠标按钮，然后滑出此按钮区域。

3 交互式动画的应用
Flash的动作脚本语言ActionScript可以添加到关键帧、按钮或影片剪辑实例上，下面分别进行介绍。

3.1 为关键帧添加脚本
我们可以在关键帧上添加脚本，如：Play、Stop、Goto。

下面先制作一个形状补间动画，两个圆变成一个大椭圆。

1.停止动画
⑴选择40帧，双击动作面板中：全局函数→时间轴控制→stop函数，为40帧添加停止动作。

⑵此时，在40帧上显示一个符号“α”，当动画播放到40帧时停止播放。

⑶要想让动画停在其它帧上，可以在要停止的位置上插入关键帧，然后，用上面的方法添加停止动作。

2.转到影片制定帧
如果想要动画播放到最后一帧（40帧）时不从头开始播放，而是在20帧到40帧之间循环播放，可以作如下操作：
⑴选中40帧，双击动作面板中：全局函数→时间轴控制→goto函数，为40帧添加转移动作。

⑵在动作面板中将帧号改为20。

3.2 用按钮控制动画的播放与停止
将脚本添加到关键帧上，虽然可以改变动画的播放顺序，但只有当播放到包含脚本的关键帧上才能执行脚本，不能达到交互的目的。

为了能更方便有效的控制动画的播放，需要较脚本添加到按钮或影片剪辑的实例上。

为了演示按钮的作用我们先制作一个使用引导层的“追逐”动画。

动画包括一个背景层、一个引导层和两个被引导层。

被引导的两个图层中分别包括豹子和天使，为了是他们在追逐的过程中产生距离的变化，在20帧处添加料关键帧，用来调整天使和豹子之间的距离。

下面介绍制作按钮和添加脚本的方法。

1.制作按钮
制作按钮的方法在上面已经介绍过，这里再重复一下：
⑴打开一已经做好的“追逐”动画。

选择“插入”菜单→“新建元件”命令，弹出“创建新元件”对话框，输入按钮元件名称：播放、选择元件类型：按钮。

⑵选择“矩形”工具，选中“绘制对象”选项，单击“矩形半径设置” 按钮，在弹出的对话框中设置“边角半径”为100。

⑶在“颜色”面板设置填充为：“红黑放射状渐变”，在“弹起”帧绘制圆角矩形，在属性面板设置矩形的宽度140、高度50，位置（-70，-25）。

使用“填充变形”工具修改渐变。

⑷并在“指针经过”帧中按F6插入关键帧，将“指针经过”帧中的圆角矩形的填充改为“绿黑放射状渐变”
⑸在时间轴上单击“插入图层”按钮，插入图层2。

然后，在图层1的“指针经过”帧上使用“文本”工具输入“播放”，在图层2的“指针经过”帧上按F7。

单击“场景1”退出元件编辑窗口。

⑹在“库”面板中右击“播放”元件，在“快捷菜单”中选择“直接复制”命令，在弹出的“直接复制元件”对话框中修改元件名称为“暂停”；双击“暂停”按钮，将图层2“弹起”帧中的“播放”改为“暂停”，单击“场景1”退出元件编辑窗口。

2.应用按钮
⑴将“库”面板中的“播放”、“暂停”按钮拖到“追逐”动画的背景层上。

⑵选中“播放”按钮, 双击动作面板中：全局函数→时间轴控制→play 函数，为“播放”按钮添加播放动作。

⑶选中“暂停”按钮, 双击动作面板中：全局函数→时间轴控制→stop 函数，为“播放”按钮添加停止动作。

⑷按Ctrl+Enter测试影片。