4.2.5.3 FLASH 动画制作
Flash 是一个矢量图形和交互式动画的制作软件。其强大的图形和动画功能可以
制作开发出多种适用于教学课件中使用的形象生动的动画效果； 语言可以在
发人员编制复杂的
flash 应用程序。
内嵌的 ActionScript
Flash 动画中实现交互、数据处理以及其他多种程序功能，可以让高级开
Flash 不仅可以直接应用于交互式教学课件开发，
Authorware
和 Directory
以及
而且也可设计成教学积件在专业多媒体课件制作软件 Frangpage 中被导入。
Flash 的编辑对象主要是矢量图形，
对象， 如此大大减少了文件的数据量， 编写有用的工具。 1、 Flash 基础 一） Flash 8.0
Flash 8.0
界面介绍
Flash 只需用少量的矢量数据便可描述相当复杂的 使其在网络上的传输速度大大提高，
也是网络型课件
的默认界面包括：菜单栏、工具栏、舞台、时间轴窗口、属性面板、
颜色面板、库面板以及动作面板等，如图 4-155 所示。
菜单栏 颜色面板
时间轴窗口
库面板
工具面板
动作面板
舞台
属性面板
图 4-155 Flash 8.0 程序界面
（ 1）舞台
舞台是 Flash 动画中各个元素的表演平台，用于显示当前选择的帧的内容。 （ 2）场景
就像戏剧可以有几幕一样， 上部的场景切换按钮 件。
（ 3）时间轴窗口
时间轴窗口用于对 Flash 的两个基本元素 “层” 和“帧” 进行操作。 最重要的成分是帧、层和播放头。 时间轴控制窗口分为左右两个区域， 它们分别是和时间轴控制区与层控制区域。
（4）动作面板
动作面板可以创建和编辑对象或帧的 （ 5）库面板
在 Flash 里，素材库窗口起着存放、组织管理动画基本元素的作用。使得更容易对这些元素进行查找、编辑和设定和重复利用。
ActionScript
代码。
舞台上也可以放下几个场景。 舞台场景可以通过位于舞台右
切换。通过不同的场景之间的交互性，来创作出结构较为复杂的课
（ 6）菜单栏和工具面板
除了绘图命令以外的绝大多数命令都可以在菜单栏中实现。使用工具面板中的工 具可以绘图、上色、选择和修改插图，并可以更改舞台的视图。 二）元件与实例
元件是一种可重复使用的对象，包括图形、影片或者按钮，而实例是元件在舞台上的一次具体使用。一个元件可以在一个程序中重复使用，重复使用实例不会增加文件的大小，这是使文档文件保持较小的策略中很好的一部分。元件还简化了文档的编辑；当编辑元件时，该元件的所有实例都相应地更新以反映编辑。元件的另一个好处是使用它们可以创建完善的交互性。
Flash 中有三种元件，分别为影片剪辑元件（
在弹出的对话框中选择某类元件（如图 件转动时绕中心轴转动。
movie clip ）、按钮元件（ button ）和图
命令， 即该元
形元件 （ graphic ）。在舞台选中一个对象后， 选择利用 “修改” 菜单的 “转换为元件” 元件类型。 右边注册的网格点是选定的转动轴心位置，
如默认状态的注册点是中心，
4-156 所示），确定后就可以将此对象转换成选定的
图 4-156 “转换为元件”对话框
三） Flash 动画的基本类型
Flash 可以通过时间轴特效、 逐帧创建、 建立补间动画以及语言编写等方式创建动画。 中，补间动画又分为动作补间和形状补间两种方式。 实例十九：动态模糊文字
利用时间轴特效可以方便地为处于舞台或者影片剪辑元件中的对象创建动画效果。在
flash 8.0 中的时间轴特效包括分离、 展开、投影和模糊四种。 在一个时间轴上， 对同一对象，只能使用一种效果。 如果要对某一对象加载多个效果， 可以通过创建影片剪辑元件的办法来实现。本实例将采用此办法对创建的文字对象加载展开和模糊两种特效。
（ 1）启动 flash 8.0，建立新文档。使用“插入”菜单中的“新建元件 ⋯”命令，在弹出的对话框中选择“影片剪辑” ，确定后进入元件编辑窗口。
其
（ 2）使用“工具面板”中的文本工具 ，在元件编辑窗口中建立如图
4-157 所示的文
字对象。可利用文本工具属性面板对创建的文字外观进行调整。
（ 3）选中建立的文字对象，单击鼠标右键，在弹出的快键菜单中选择“时间轴特效
效果 — 展开”命令。如图
4-158 所示。
—
图 4-157 在元件编辑窗口建立文字对象
图 4-158 时间轴特效命令
（ 4）在弹出的如图 4-159 所示的“展开”特效属性设置窗口中，可对该特效的属性做 简单设置。在此，将“碎片移动”调整为 25 像素数，其余参数不变。确定后退出特效设置窗口。此时可以在时间轴上看到有多个帧被建立，使用“控制”菜单中的“播放”命令，可
以看到设置的效果。
（ 5）单击编辑窗口标题栏中的“场景”按钮，切换舞台。在库面板中，把刚建立的影片剪辑元件拖入舞台中央位置。
（ 6）选中该元件，单击鼠标右键，在弹出的快键菜单中选择“时间轴特效
—效果 — 模
糊”命令。在弹出的效果设置对话框中使用默认设置，确定后退出设置窗口。
图 4-159 “展开”特效设置窗口
（ 7）使用“控制 — 测试场景”命令，在弹出窗口中可以看到如图
效果。
4-160 所示的最终的
图 4-160 动态模糊文字效果
（ 8）选择“文件”菜单中的“导出 — 导出影片”命令，在弹出的对话框中选择保存的 目录并输入文件名，默认状态下以 框，使用默认设置，确定后即可生成 实例二十：弹簧振子
补间动画是 Flash 中最为常见的动画创建方式，
关键帧中的同一对象的属性做不同设置， 的变化过程就是动画。
此类动画一般是对时间轴上相邻的两个
这个属性
.swf 格式输出。确定后，弹出“导出
swf 格式动画文件。
flash player”对话
然后由计算机自动填补中间的变化过程，
Flash 中可以变化的属性有位置、角度、形状、颜色、透明度等。
本实例将通过制作模拟弹簧振子的往复运动的动画，学习补间动画制作的一般过程。
（ 1）启动 flash 8.0 ，建立新文档。双击图层左边的文字“图层 1”，改变成文本编辑状态，将图层标签改为“弹簧” 。
（ 2）在第一帧的场景中绘制如图 4-161 所示图形。该图形可由直线工具两个线段，然后拼接成弹簧一节，再通过复制粘贴形成多节弹簧。
图 4-161 弹簧效果图
（ 3）插入两个新图层，分别命名为“背景”和“球”
。在“背景”图层中绘制两个矩
形；在“球”图层中绘制一个圆形，选中该圆形，在右边颜色面板中选择填充类型为“放射 状”，在渐变色条中第一个色标为浅色，第二个色标为深色。然后将三组图形按图 示放置整齐。为了能够清楚地表示弹簧振子的运动过程， 志，如图 4-163 所示，该标志也可在新图层中添加。
4-162 所
可以在“背景” 图层中添加位置标
图 4-162 三组图形拼接后的效果
图 4-163 添加位置标志后的效果
（ 4）选择“背景”图层，在 60 帧的位置，单击鼠标右键，在弹出的快捷菜单中选择“插入帧”。若位置标志建立在一个新建图层中，也对该图层做相同的操作。
（ 5）选择“球”图层图层，在15 帧的位置，单击鼠标右键，在弹出的快捷菜单中选 择“插入关键帧” 。然后选中该图层中的所有帧（可以单击图层标签） 出的快捷菜单中选择“创建补间动画”
4-164 中的时间轴上所示。然后“弹簧”对也做同样操作。
（ 6）选中“球”图层的第二个关键帧，然后在场景中选择“球”对象，将其移动到中间“平衡位置” 。
（ 7）选中“弹簧”图层的第二个关键帧，在场景中选择“弹簧”对象，然后选择工具
，单击鼠标右键，在弹
。此时，在两个关键帧之间将会产生一个箭头，如图
面板中的 “变形工具”
，按住“ Alt ”键，然后调节右边的调节句柄， 将其压缩到中间 “平 4-164 所示。
衡位置”，和球相连，如图
图 4-164 步骤（ 4） -- （ 7）后的效果
（ 8）在“球”和“弹簧”图层的第30 帧位置分别插入关键帧，此时，补间的箭头将 自动产生。利用步骤（ 所示。
6）和（ 7）的方法，分别调节“球”和“弹簧”的位置，如图
4-165
图 4-165 步骤（ 8）后的效果
（ 9）在“球”和“弹簧”图层的第45 帧和 60 帧位置再次分别插入关键帧，并利用步 骤 6）和（ 7）的方法，分别调节“球”和“弹簧”到合适的位置。其中
45 帧在平衡位置，
60 帧在最右侧的位置。此时，弹簧振子的动画效果基本完成。
（ 10）为了真实模拟振子的运动效果，对弹簧振子的运动速度做进一步设置，使其到 平衡位子时速度最大，两端时速度最小。选择“球”图层的第 1 至第 15 帧，然后单击属性面板中的“编辑”按钮，弹出如图 4-166 所示的“自定义缓入 /缓出”对话框，在 11 帧的位置点图中直线，在线上添加了一个调节点（该点可以用 delete 键删除），将此点向下拖拉到 40%的位置，确定后退出。
（ 11）选择“球”图层的第 16 至第 30 帧，然后单击属性面板中的“编辑”按钮，在弹出的“自定义缓入 /缓出”对话框中，在 19 帧的位置在图中直线添加一个调节点，将此点向 上拖拉到 60%的位置，确定后退出。如图
4-167 所示。
图 4-166 1-15 帧的速度调节曲线
图 4-167 16-30 帧的速度调节曲线
（ 12）选择“球”图层的第 31 至第 45 帧，单击属性面板中的“编辑”按钮，对第 41 帧做如同第 11 帧的调节；再选择“球”图层的第 46 至第 60 帧，单击属性面板中的“编辑”按钮，对第 49
帧做如同第 19 帧的调节。
（ 13）用调节“球”运动速度的方法，调节“弹簧”的变化速度。为了使球和弹簧的
运动保持一致，其运动速度调节的具体参数可与“球”的完全相同。
（ 14）动画完成后，可用“控制”菜单中的“播放”命令观看最终的动画效果。满意后，按上一个实例输出成动画文件。
实例二十一：可控制的旋转文字
本实例通过一个应用程序，进一步阐明元件、实例的相关概念；并初步学习对影片剪辑元件控制播放的一般方法。
（ 1）启动 flash 后，选择“插入”菜单的“新建元件”命令，在“新建元件”对话框中 选择“影片剪辑”类型，将元件名命名为“旋转文字”，确定后进入元件编辑窗口。
（ 2）用文字工具在元件中心上方建立一个文字，然后选择工具面板的“任意变形”工
具
，点选刚建立的文字，使文字出现调节句柄，如图
4-168 所示。
（ 3）选择“任意变形工具”后，被选的对象出现
拉至与元件的中心十字重合，如图
4-169 所示。
9 个可调节点。 8 个矩形点是形状调
节，中心的圆点是旋转轴点， 一般位于对象中心。 现将处于文字中心的圆形旋转轴点向下拖
（ 4）在“窗口”菜单中选择“变形” ，显示“变形”面板，如图
（ 5）在“旋转” 栏中输入 “ 36”，然后单击变形窗口下方的
4-170 所示。
“复制并应用变形” 按钮
，
在元件编辑窗口中将出现一个文字的旋转
36 度后的副本，如图 4-171 所示。
图 4-168 元件窗口中建立文字
图 4-169 文字的旋转轴点与元件中心重合
图 4-170 变形窗口
图 4-171 旋转后的文字副本
（ 6）不改变旋转角度，连续点击“复制并应用变形”按钮
，可产生多个文字副本，
如图 4-172 所示效果。然后用文字工具将文字副本中的文字逐个修改成图
4-173 所示结果。
图 4-172 建立多个文字副本
图 4-173 修改后的文字内容
（ 7）在时间轴的第 25 帧处插入关键帧，选择所有的帧，在任意一帧上单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画” 。然后选择第 25 帧处的关键帧，在“变形”面板 的旋转角度输入栏中输入
180。如图 4-174 所示。
360 度等于不动，因此，使用旋转
-0.5
（ 8）在时间轴第 50 帧处再次插入关键帧，然后在“变形”面板的旋转角度输入栏中
输入 -0.5。注意：在 flash 8.0 中，对于一个对象旋转 度，相当于旋转 359.5 度。
图 4-174 文字旋转 180 度
（ 9）单击“场景” ，切换到“场景”编辑窗口。然后在“库面板”中把刚建立的旋转文字元件拖拉到舞台中。选择该元件，在“属性面板”中的影片剪辑下方的“实例名称”输入栏中输入“ xzwz ”，如图 4-175 所示。
图 4-175 给实例命名
（ 10）选择“窗口” 菜单下 “公用库” 中的“按钮”，打开按钮库。 选择“ classic buttons”
文件夹下的“ playback ”下的“ gel”系列按钮，如图 4-176 所示。将它们拖拉到舞台上，并 排列整齐，并添加上文字，如图 4-177 所示。注意排列一组对象可以使用“修改”菜单下的“对齐”中的一组命令。
（ 11）接下来给这些按钮及第一帧上添加命令，达到程序效果。
（ 12）选择时间轴上的第一个关键帧，单击鼠标右键，在弹出的快捷菜单中选择“动 作”命令。打开脚本编辑窗口，输入“xzwz.stop(); ”。注意输入的文字及符号需要用英文半 角符号。该命令的作用是在应用程序起始状态让“旋转文字”元件处于停止状态。
注意：“实例名 .方法（属性） ”是对某特定影片剪辑元件或按钮元件做方法或属性设置的基本格式。
（ 13）选择 “ play”文字对应的按钮， 单击鼠标右键， 在弹出的快捷菜单中选择
“动作”
命令。打开脚本编辑窗口，输入“ on (release) {xzwz.play();} ”。
on（）”的形式申明按钮状态，即定义按钮在
如在本实例中定义在按
注意：给按钮元件添加命令时，需要用“
钮释放（ release）时执行命令。
何种状态下执行相关的命令。 括号里填的是按钮执行命令时的状态，
图 4-176 按钮库
图 4-177 舞台上的按钮
（ 14）利用类似方法在各个按钮上添加代码如下：
replay 按钮： on （ release） { xzwz.gotoAndPlay(1);}
程序说明：从“旋转文字”元件的第一帧开始播放。
next 按钮： on （ release） { if (xzwz._currentframe>1) {
xzwz.prevFrame(); } else {
xzwz.gotoAndStop(xzwz._totalframes) ;
}
程序说明：单帧播放“旋转文字”元件，每单击按钮一次，往前进一帧，到最
后一帧时停止。
previous 按钮： on （ release） { if (xzwz._currentframe< xzwz._totalframes) {
xzwz.nextFrame(); } else {
xzwz.gotoAndStop(1); }
程序说明：单帧播放“旋转文字”元件，每单击按钮一次，往后退一帧，到第
一帧时停止。
pause 按钮： on （ release） { xzwz.stop();}
程序说明：单击按钮时， “旋转文字”元件停止在当前帧。
stop 按钮： on （ release） { xzwz.gotoAndStop(1); }
程序说明：单击按钮时， “旋转文字”元件停止并返回到第一帧。
实例二十二：绘制正弦曲线
Flash 具有强大的程序功能，利用程序可以做简单运算，以及编制出一些较好的动画效果。本实例将利用 flash 自带的数学函数以及简单的循环语句结构来编制一个绘制函数曲线
的动画效果。
（ 1）启动 flash 后，在图层 1 的第一帧中输入一个公式以 “振幅” 和“周期”，如图 4-178 所示。 在“振幅”右面输入“ 20”，并将此文字的类型设为“输入文本” ，同时在变量栏中输入“ al”；“周期”右面输入“ 2”，文字类型也设为“输入文本” ，变量栏中输入“ t ”。然后 在第三帧处单击鼠标右键，在弹出的快捷菜单中选择“插入帧”
。
图 4-178 第一帧界面
（ 2）插入一个新图层，在第一帧绘制如图
4-178 所示的一个坐标。在按钮库中选择一
。
个按钮拖拉到舞台，并在按钮后面输入文字“开始画线”
注意：单击坐标横线，可早属性面板找到此线段的起始点坐标，即为原点坐标。本实例中原点坐标为（ 50,283），此坐标值将作为绘制曲线的起点坐标。
（ 3）选择图层 2 的第二帧，插入一个关键帧，在此帧中将按钮即按钮后的文字删除。 （ 4）选择图层 2 的第三帧， 插入一个关键帧， 在按钮库中选择另一个按钮拖拉到舞台，并在按钮后面输入文字“返回” 。如图 4-179 所示。
图 4-179 第三帧的界面
图 4-180 振幅为 60，周期为 5 时的正弦曲线
（ 5）选择图层 2 的第一帧，单击鼠标右键，在弹出的快捷菜单中选择“动作” ，激活语言编辑窗口。在窗口中输入：
_root.x = 0; // 初始化变量；
_root.moveTo(50, 283); // 定位画线开始点，也就是坐标原点；
：
，激活
stop(); //执行程序后，停止在第一帧；
（ 6）选择第一帧中的“开始画线”按钮，给按钮添加“动作” on (release) { gotoAndPlay(2); }
语言编辑窗口。在窗口中输入：
a = _root.x+50;
b = 283-al*Math.sin(((_root.x)/180*Math.PI)*t);
（ 8）选择图层 2 的第二帧，单击鼠标右键，在弹出的快捷菜单中选择“动作”
语言编辑窗口。在窗口中输入：
if (x == 360) {
stop();
} else {
指定线条的粗度为
2，颜色为红色， 透明度为
100；
_root.lineTo(a, b);
间帧的触发。
x+=1; // 值越小画线的精度越高，但画线的速度也越慢 gotoAndPlay(2); }
（ 9）选择第三帧中的“返回”按钮，给按钮添加“动作” on(release) { _root.clear(); gotoAndPlay(1);
//清除场景中的绘制线
} 单击按钮后，开始执行第一帧
4-180 所示结果。
：
// 画线至 a,b 所在位置；
//定义画线的区间
，激活
//单击按钮后，开始执行第二帧；
（ 7）选择图层 2 的第二帧，单击鼠标右键，在弹出的快捷菜单中选择“动作”
_root.lineStyle(2, 0xff0000, 100); //
updateAfterEvent(); // 强制刷新； Flash 强制进行显示刷新工作。 该语句不依赖于时
（ 10）完成后，选择“控制”菜单的“测试场景”命令，可以看到程序结果。振幅输
入 60，周期输入 5，点击“开始画线”按钮，可看到如图 实例二十三：利用“测验”模板制作交互式练习题
利用 flash 的语言功能可以编制多种交互形式，但语言编写过程相对复杂。为了能让非
专业用户能够简单地开发和利用多种交互， flash 提供了一个“测验”模板。在此模板中有 6 种交互方式，分别为：拖放、填空、热物体、热区、多项选择以及是非，用户可以根据需要任意添加或删除其中的交互方式。本实例将利用该模板的多种交互方式制作一套测试题。
（ 1）启动 flash，选择“从模板创建”中的“测验”
，弹出如图 4-181 所示窗口。
图 4-181
“测验”模板样式选择窗口
（ 2）选择“测验 _样式 2”，确定后进入“测验”模板的初始界面，如图 4-182 所示。
图 4-182 “测验”模板初始界面
（ 3）选择第二帧， 进入“目标区域” 交互的界面。 点选“拖放交互操作” ，然后用“ ctrl+b ”
分离组合，使舞台中的组件相互独立，如图 4-183 所示。
图 4-183 “拖放交互”界面分离后的状态
（ 4）“ ctrl+shift+a ”取消选择后，点选舞台中的“拖这个
件，进入元件编辑窗口。删除元件中的数字，将文字改为“ 完毕返回场景编辑窗口。
1”元件（ drag1），双击该元
fish ”，如图 4-184 所示。修改
图 4-184 drag1 元件编辑后效果
（ 5）以同样方式编辑舞台中的其它元件，如图 4-185 所示。然后用文字工具将“您的
问题将显示在这里。 ”这句话改为如图中的问题。
图 4-185 编辑后的“拖放交互”界面
（ 6）点选左边“拖放交互操作”标签，在“窗口”菜单中选择“组件检查器”命令， 打开“拖放交互”的组件检查器对话框。在“开始”标签中，如图 “选项”标签中，将“尝试次数”改为“
2”，其余保持默认值。
4-186 所示进行设置。在
图 4-186 “拖放交互”组件检查器对话框
（ 7）选择第三帧， 进入“填空交互” 编辑界面。 点选“填空交互操作” ，然后用 “ ctrl+b ” 分离组合，“ ctrl+shift+a ”取消选择后，点选左边“填空交互操作”标签，在“窗口”菜单
中选择“组件检查器”命令，打开“填空交互”的组件检查器对话框。在对话框中“问题”
栏中输入问题， 在“响应” 栏中输入答案， 并勾选对应的 “正确”，如图 4-187 所示。 在“选 项”标签中，将“尝试次数”改为“
2”，其余保持默认值。
。
注意：若有多个正确答案，可在“响应”中输入多个值，并勾选相应放的“正确”
图 4-187 “填空交互”组件检查器对话框
（ 8）选择第四帧，进入“热件（热物体）交互”编辑界面。点选“热件交互操作”， 然后用“ ctrl+b ”分离组合， “ ctrl+shift+a ”取消选择后，点选舞台中的“热物体
（ HotObject1 ），双击该元件，进入元件编辑窗口。用“文件”菜单中的“导入”命令，激活“导入”对话框，从外部导入一幅图片，修改该图片到合适的大小后返回场景窗口。用相
1”元件
同的方式修改其他“热物体”元件，并修改界面中的问题，最终效果如图 4-188 所示。
图 4-188 “热物体交互”界面
（ 9）点选左边“热件交互操作”标签，在“窗口”菜单中选择“组件检查器”命令，打开“热件交互”的组件检查器对话框。 “开始”标签中的内容保持不变，在“选项”标签 中，将“尝试次数”改为“
2”，其余保持默认值。
shift 键不放，选择其它层的第五
（ 10）删除“热区交互” 。选择最上层的第五帧，按住
令，将这些帧删除。如图
4-189 所示。
帧，这样可以选择所有层次的同一帧，然后单击鼠标右键，在快捷菜单中选择“删除帧”命
图 4-189 删除“热区交互”的操作
（ 11）选择当前的第五帧， 进入“多项选择交互” 编辑界面。 点选“多项选择交互操作” ，然后用“ ctrl+b ”分离组合， “ ctrl+shift+a ”取消选择后，点选左边“多项选择交互操作”标 签，在“窗口”菜单中选择“组件检查器”命令，打开“多项选择交互”的组件检查器对话 框。在对话框的“开始”标签中做如图 4-190 所示的修改。在“选项”标签中，将“尝试次数”改为“ 2”，其余保持默认值。
图 4-190 “多项选择交互”组件检查器对话框
（ 12）增加一个 “多项选择交互” 。选择多项选择交互的最上层的帧， 按住 shift 键不放，选择其它层的对应帧，选择所有层次的同一帧，然后单击鼠标右键，在快捷菜单中选择 “插入帧”命令，在所有层中此帧后面同一增加了一帧，如图 4-191 所示。选择“ interaction ” 层中刚插入的帧，单击鼠标右键，在快捷菜单中选择“插入关键帧”命令，这样就复制了选择多项选择交互。
图 4-191 增加一个交互的操作
（ 13）对新增加的“选择多项选择交互” ，做类似步骤（ 11）的操作，在组件检查器对话框中的“开始”标签做如图 4-192 所示的修改。在“选项”标签中，将“尝试次数”改为“2”，其余保持默认值。
注：在多项选择中只有一个正确答案时即为单项选择。
图 4-192 新增的“多项选择交互”组件检查器对话框
（ 14）选择当前的第七帧，进入“是非交互”编辑界面。点选“是非交互操作”，然后
用“ctrl+b ”分离组合，“ ctrl+shift+a ”取消选择后，点选左边 “是非交互操作” 标签，在“窗口”菜单中选择“组件检查器”命令，打开“是非交互”的组件检查器对话框。在对话框的“开始”标签中作如图 4-193 所示的修改，其余标签保持不变。
15）完成后，选择“控制”菜单的“测试场景”命令，可以测试程序。图 4-193 “是非交互”组件检查器对话框
（
因篇幅问题不能全部显示，请点此查看更多更全内容