用Flash 制作交互型课件

用 Flash 制作交互型课件

第一节 Flash 的基础知识

在网络高速发展的今天，越来越多的人们已经不再满意图文并茂的静态网页格式，动态网页应运而生，

Flash 正是在这一网络发展的大背景下应运而生的。 Flash 是由 Macromedia 公司推出的针对 Web 的交

互式矢量动画制作软件。 Flash1 ． 0 版本诞生于 1996 年， Flash 真正的火爆是从 Flash3 ． 0 版本

开始的，到了 2003 年推出的 Flash MX 2004 ， Flash 已经逐渐成为了网页交互多媒体动画设计最常用

的软件。

一、Flash 的工作界面

安装好 Flash MX 2004 后，双击应用程序图标启动 Flash MX 2004 的应用程序，工作窗口如图 12 - 1 所

示。

图 12-1 Flash MX 2004 的应用程序窗口

标题栏：窗口的最上面是蓝色的标题栏显示当前影片自动给了一个名称“ [ 未命名 -1] ”的文件，使用

标题栏右侧的三个按钮来最小化，窗口化和关闭 Flash 的工作窗口。

菜单栏：标题栏下面是菜单栏，可以进行各种基本的操作和设置选项。

常用工具栏：菜单栏下面是常用工具栏，工具栏中放的是最常用的用图标表示的菜单命令。

工具箱：它位于窗口的左侧，分成工具区、查看区、颜色区、选项区共四个区域。包括选择工具、直线工

具、文字工具、吸管工具等。在这些工具的下方有每个工具的属性可供选择。比如文字工具，可以在其下

面的属性面板中设置选中文字的字体、字号、颜色、对齐方式等文字格式。工具箱中各种工具的基本功能

如表 12 - 1 所示。

表 12-1 工具箱中各种工具的名称及功能

工具图标 工具名称

选择工具

工具的功能

选择图形，拖拽或改变图形的形状

部分选择工具 选择图形，拖拽或部分选取

线条工具

套索工具

钢笔工具

文本工具

椭圆工具

矩形工具

铅笔工具

刷子工具

制作直线条

不规则区域的对象选择

制作直线或曲线（包含闭合区域）

制作和修改文本

制作椭圆和圆形

制作矩形

制作线条和曲线

制作闭合区域图形或线条

任意变形工具 缩放、旋转、变换图形形状

填充变形工具 用于编辑图形渐变颜色或位图图像填充

墨水瓶工具

颜料桶工具

改变线条颜色、大小和类型

填充或改变封闭图形的颜色

滴管工具

橡皮擦工具

手形工具

放大镜工具

选取颜色

去除选定区域图形

移动视图

实现视图的缩放

笔触颜色工具 设置图形的线条颜色

填充色工具 设置图形的填充颜色

对齐对象工具等 根据所选取的对象显示不同的选项

时间轴：在工具箱右边上部是时间轴面板，它分成了两块，左边是图层面板，自动有一个“图层 1 ”，图

层顶部有三个按钮：一个眼睛一个小锁和一个方框。图层面板用来控制图层的添加、删除、选中等操作，

单击时间轴面板的标题栏可以折叠；右边是时间轴，上面有许多的小格子，每个格子代表一帧，帧上面的

数字序号为 5 的倍数，而且颜色也深一些，一帧可以放一幅图片，动画就是由许许多多的帧组成的。在某

帧的上面有一个红色的线，这是播放指针，表示当前的帧位置，同时下面的时间轴状态栏也有一个数字表

示当前帧的位置。

场景：工作区的中央是场景，又称舞台，所有的画图编辑和操作都在这个白色的区域中实现，也只有这个

区域的图像才能在动画中播放出来。

窗口的最下方是常用面板，单击它上边的白色下拉按钮可以展开和折叠所有面板；在窗口右边还有一块“项

目”区域，可以显示一些复杂的应用，暂时可以关闭，以便腾出一些空间来。

二、 Flash 的动画原理

（一）动画原理

制作 Flash 的原理同与拍摄电影的原理类同。 Flash 中的“时间轴”就相当于电影中的“剧本”， Flash

中的“库”就是电影中的“化妆间”，而“库”中的元件就相当“演员”， Flash 的“场景”相当于“舞

台”。

下面的例子虽然简单，但它却包含了 Flash 动画制作的基本原理：基于时间轴的元件属性变化，如位置、

颜色、透明度等等，就构成了动画的基础。即关键帧上的图形元素按照一定的速度连续播放就形成了动画。

很多多媒体软件的这个原理都是通用的，只是操作步骤不同而已。

（二）实例 12 - 1 ：移动的小球

在认识 Flash 的动画原理之前，我们先来制作一个简单的动画“移动的小球”，步骤如下：

（1）打开“文件”菜单单击“新建”选项，或单击常用工具栏的“新建”按钮，新建一个 Flash 文件。

（2）打开“插入”菜单单击“新建元件”，或按快捷键 Ctrl+F8 ，添加一个新的 元件，在 弹出的“组

件属性”窗口，把组件名称改为 ball ，行为属性设为“图形”。如图 12 - 2 所示。

图 12-2 创建新元件－ ball 图形元件

图 12-3 ball 图形元件编辑窗口 图 12-4 ball 图形元件属性面

板

（3）单击“确定”按钮后，进入元件编辑窗口。在这里面进行的所有操作，只会对本组件起作用，而不会

影响场景。菜单下的标示栏会变成如图 12 - 3 所示。

（提示：用鼠标点击标示栏中的选项，可以快速在各个场景中切换。）

（4）选取左端工具箱的椭圆工具，按下 shift 键，绘制一无边线红色圆形，绘制一个小球。在窗口下端

的属性面板中可以设置小球的大小、位置、轮廓颜色、填充颜色等属性。如图 12 - 4 所示。

（5）单击标示栏上的“场景 1 ”图标，工作场景即可返回到场景 1 。

（提示：这时会发现刚才画的球不见了，这是因为刚才的操作，只是针对组件 ball 所作的，场景里面当

然看不到。要看见刚才创建的组件，只需通过“窗口”菜单的“库”命令，或按 Ctrl+L 快捷键，就可调

出符号库并对所有组件进行查看。）

（6）按 Ctrl+L 快捷键，打开库编辑窗口，调出元件，选中元件 Ball ，图库中便出现了 ball 的预览。

如图 12-5 所示。

（7）确定当前在“时间轴”上是第一帧，用鼠标将 ball 元件从库编辑窗口中拖到场景 1 中。

（提示：将组件拖入场景后，你会发现时间轴第一帧中多了个黑色的小点。这个小黑点代表本帧已有内容

（即那个组件），没有小黑点的帧是“空帧”。）

（8）用鼠标在时间轴第二十帧处单击，选中此帧，然后单击鼠标右键，在右键快捷菜单中，选择“插入关

键帧”，添加一个新的关键帧，然后再将第二十帧中的圆向右拖动到另一个位置。

（9）点选第一帧，单击鼠标右键，在右键快捷菜单中，选择“创建补间动画”，现在的时间轴窗口中一至

二十帧之间出现了一条带箭头的直线，形成运动。结果如图 12 - 6 所示。

图 12-5 图库中便出现了ball的预览 图 12-6 创建补间

动画

（10）直接按回车键或者按住 Ctrl 键的同时再按回车键，就可预览最终效果。单击“文件”菜单的“保

存”，或工具栏的“保存”按钮保存为扩展名为“ .fla ”的 Flash 源代码文件。（“ . fla ”格式的

文件以后还可以打开再次编辑、保存，扩展名为“ .swf ”的 Flash 影片以后不可再次编辑。）

三、Flash 的常用术语

（一）时间轴

Flash 的时间轴是由一个个呈小格子状的帧组成的，用于记录动画中的画面出现的先后次序及相应的内容。

如图 12-7 所示。这种小格子就代表一个短的时间过程，缺省时间一般是 1/12 秒（可以在文件的属性面

板中改变帧的播放速度）。

图 12-7 Flash 时间轴及帧示意图

Flash 动画犹如一个舞台，不同时间（时间差异）、不同演员（元件的不同），共同完成一个统一的主题。

在这里，时间轴决定了演员（元件）出场的先后次序，对整个动画，起着决定性的作用。 Flash 的任务就

是要元件如何在场景中运动，而它的运动就是要在“时间轴”中设定的。

（二）帧、关键帧、空白关键帧和播放头

帧就是 Flash 动画中的每一画面，在时间轴上表现为一个个小的画格。帧分普通帧和关键帧。在时间轴上，

空白帧用白色的小方格表示，实帧用灰色的小方格表示。

关键帧就是在时间轴上有黑色的小圆点的一些帧。关键帧上有图形元素（或元件）。在动画的播放过程中，

关键帧对应场景中的元件对该动画的表现形式起决定作用。在动画制作时会经常用到关键帧。

时间轴上的白色带小黑圆圈的格子就是空白关键帧。如果我们在关键帧上不放置任何图形元素，那么这个

关键帧就是一个空白关键帧。

播放头就是在时间轴上有一个红色竖线和小方框组成的标志。播放头停在哪个帧上，场景中就显示该帧中

所对应的图形元素。播放头跳到另一帧，场景中就显示这个帧对应的图形元素，播放头连续在帧上跳动，

便形成了一个连贯的动画。

（三）图层

图层主要是为了方便制作复杂的 Flash动画而 引入的一种手段。每一个图层都包含一条独立的动画通道，

且都包含一系列的帧，各图层的帧位置是一一对应的。在动画播放时，舞台上任一时刻所展示的动画是由

所有图层中在播放指针所在位置的帧共同组合而成的。

图层分普通图层、引导图层、遮罩图层等。普通图层就像没有厚度的透明纸 ，上面的图层的图形覆盖在下

面的图层的图形上面。单击时间轴面板左下方的“插入图层”按钮，即可插入一个普通图层。选中某图层，

单击时间轴面板左下方的“删除图层”按钮，即可删除该图层。将光标置于要调整的图层上，按住左键拖

放到需要的位置后松开鼠标，即可调整图层的上下层关系。双击时间轴左侧的图层名称处，出现一个文本

框，在框内输入文字，即可给图层重命名。

在图层面板上方有三个切换图标，即眼睛、小锁和方框。分别代表显示 / 隐藏图层、锁定 / 解锁图层、

图层上的图形元素以轮廓形式出现。如图 12 - 8 所示。

图 12-8 图层面板上方的切换图标

（四）元件和库

元件又称为符号或组件。元件是 Flash 动画的脚色灵魂，是构成动画的基本单元，也是动画的基本图形元

素。制作网页上的动画时，一定要使文件的体积尽可能的小，这样下载的时间将会缩短，那么就需要使用

元件。

库是存放元件的地方，每个动画文件都对应一个存放元件的库。一般制作动画时创建的元件保存在库中，

系统自带的元件放在“共享库”里。需要使用元件时，直接将其从库面板窗口，拖入场景或元件的编辑区

即可。

1. 元件的创建和编辑

创建元件。一种是创建一个空元件：方法是选择“插入”菜单里的“新建元件”命令，此时将会弹出一个

对话框，输入元件名称，选择元件类型，单击“确定”即可打开一个工作场景，在场景里面进行元件的制

作即可。另一种是从舞台中选定某个对象来创建符号：方法是选择“修改”菜单里的“转化为元件”命令，

或按 F8 快捷键即可把选择的对象转化为元件。

编辑元件。可以在符号模式和当前场景模式下进行编辑。

复制元件。打开库面板选择所要复制的元件单击右键选择“复制”命令即可。

2. 元件的三种类型

Flash MX2004 中的元件分为三类：影片剪辑、按钮和图形。

影片剪辑。是一个独立的电影片段，它具有自身独立的时间轴。包括一帧或多帧，能自行播放。

图形。是由在电影中使用多次的静态（或不具有动画效果的）图形组成。

按钮。是一种特殊的符号。它只有四帧：弹起、指针经过、按下、点击。

第二节 Flash 动画制作及使用技巧

Flash 的内容很多，本节主要介绍 Flash 动画的制作过程及使用技巧。 Flash 动画包括逐帧动画、动作

补间动画、形状补间动画、遮罩动画、引导线动画等。

一、 Flash动画制作及使用技巧

（一）逐帧动画

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，即

在时间轴的每个关键帧上逐帧绘制不同的内容，使其连续播放而成动画。

逐帧动画具有非常大的灵活性，类似于电影的播放模式，几乎可以表现任何想表现的内容，很适合于表演

细腻的动画。但因每个关键帧上的内容不一样，增加了动画制作负担，且使最终输出的文件体积很大。

实例 12 - 2 ：打字效果

（1）新建一个 Flash 文件，展开 Flash 窗口下端的文档属性面板或在舞台上单击右键，在右键菜单中选

择“文档属性”，设置舞台的宽 500 像素、高 200 像素，背景色为黑色。如图 12 - 9 所示。

图 12-9 文档属性设置对话框

（2）选中第一帧，选取文本工具，在属性面板上设置字体为“楷体” 、字号“ 72 ”、颜色“白色”、

粗体，键入“教育技术学”六个字；并设置它的位置相对于舞台居中对齐（选择“窗口”主菜单的“设计

面板”，调出“对齐”面板。在“对齐”面板上先把“相对于舞台”五字下方的按钮单击成白色，再分别

单击“水平中齐”和“垂直中齐”）。

（3）选中文本，在按住 Ctrl 键的同时，单击 B 键，把组合在一起的文字分解，效果如图 12-10 所示，

并分别在第 10 、 20 、 30 、 40 、 50 帧插入一个关键帧 。若连续单击 B 键两次，则把文字打散，

效果如图 12-11 所示。

图 12-10 一次打散后的状态 图 12-11 两次打散后的状态

（4）选中第 1 帧，将五个文字全部删除。

（5）选中第 10 帧，将后四个文字删除，留下一个“教”字。选中第 20 帧，将后三个文字删除，留下“教

育”两字。选中第 30 帧，将后二个文字删除，留下“教育技” 三字。选中第 40 帧，将后一个文字删除，

留下“教育技术”四字。

（6）在第 60 帧插入普通帧。测试效果，观看效果。

使用技巧

（1） Flash 是一个矢量图形软件，通过图形工具得到的图形是矢量形式的图形。矢量图形是通过特殊的

数学计算得到的图形。这些图形可以群组化，执行“修改” -> “组合”操作，或者使用组合键 Ctrl+G ，

图形就被群组化，群组化后的图形作为一个整体对待。

（2）群组化的图形元素可以被打散。方法是选中群组化的图形，比如刚才群组化的图形，执行“修改” ->

“取消组合”操作，或者使用组合键 Ctrl+B ，这个图形就被打散了。图形元素上布满白色的小细点，就

表示该图形元素被打散了。

（二）动作补间动画

Flash 中的补间动画有两种：一种是动作补间动画；另一种是形状补间动画。首先介绍第一种动作补间动

画。

动作补间动画的制作流程一般是：先在一个关键帧中定义实例的大小、颜色、位置、透明度等参数，然后

创建出另一个关键帧并修改这些参数，最后创建补间动画，让 Flash 自动生成中间的过渡状态。过 渡帧

在帧面板上的标志是在浅篮色的背景下有一个向右的长箭头。 下面我们通过一个实例先来学习动作补间动

画的制作方法。

实例 12 - 3 ： 属性变化的矩形

（1）新建 Flash 文件，设置舞台的宽 500 像素、高 300 像素，背景色为黑色。

（2）用矩形工具在舞台左边画一个无边框的红色矩形。如图 12 -12 所示。选中矩形，右击，执行“转换

为元件”命令，如图 12 - 13 所示。在“创建新元件”对话框中选择类型为“图形”，确定。

（3）在第 30 帧插入关键帧，并把矩形拖到右边。

（4）用任意变形工具将其放大，并旋转。如图 12-14 所示。

（5）在属性面板中将矩形的“填充色”属性改为蓝色。

（6）用选择工具选中第 1 帧，单击属性面板“补间”里的“动作”即可创建补间动画。如图 12 - 15 所

示。

（7）播放影片，观看效果。

图 12-12 矩形工具属性设置 图 12-13 转换元件的菜单

图 12-14 调整矩形 图 12-15 设置补间动画的属性窗口

使用技巧

按下 Shift 键拖动图形元素时，该元素沿直线拖动。

（三）、形状补间动画

形状补间动画，只要编辑首尾两帧上的图形，中间的形变过程由过渡帧来完成。过渡帧在帧面板上的标志

是在浅绿色的背景下有一个向右的长箭头。

实例 12-4 ： 形状变化的矩形

（1）新建 Flash 文件，设置舞台的宽 500 像素、高 300 像素，背景色为黑色。

（2）在工具箱中选取矩形工具，在舞台左侧画一个红色矩形（如果在画矩形的过程中按住 shift 键，就

可以得到一个正方形）。

（3）在第 15 帧插入一个空白关键帧，如图 12 - 16 所示，在舞台右端画一个绿色五角星。

图 12-16 插入空白关键帧

（4）在第 30 帧插入一个空白关键帧，选取椭圆工具，在舞台右上侧画一个无边线的黄色圆形。

（5）单击“图层 1 ”，选中所有帧，单击底部属性面板“补间”两字右面白框后的黑三角按钮，再单击

“形状”。创建形状补间动画。

（6）测试影片，观看效果。

（提示：利用工具箱中的矩形工具组，向下拖动该工具组的矩形工具标志选择多边形工具，单击其属性面

板的“选项”按钮，在出现的“工具设置”对话框中设置要绘制的多边形的形状。）

使用技巧

动作补间动画与形状补间动画的区别和联系。动作补间动画与形状补间动画，都只需要编辑首尾两帧上的

对象，中间的形变过程由过渡帧来完成。但动作补间动画首尾两帧上的对象，必须是同一个元件的实例，

只能改变元件的大小和位置，不能改变形状。除了元件，组合体或文本也可作为制作动作补间动画的对象。

而形状补间动画不同的是，首尾两帧上可以不必是同一图形元素，而且形状也可以改变。

（四）遮罩动画

遮罩动画，至少应该设置两个图层，上边的图层叫遮罩层，下面的图层叫被遮罩层。被遮罩层可以有多个，

即多层遮罩动画。

遮罩动画的原理是：在遮罩层中的任何填充区域都是完全透明的，而任何非填充区域都是不透明的。换句

话说，遮罩层中如果什么也没有，被遮层中的内容都不会显示出来；如果遮罩层全部填满，被遮层的所有

内容都能显示出来；如果只有部分区域有内容，那么只有在有内容的部分才会显示被遮层的内容。

遮罩层中的内容可以是包括图形、文字、实例、影片剪辑等在内的各种对象，但是 Flash 会忽略遮罩层中

内容的具体细节，只关心它们占据的位置。每个遮罩层可以有多个被遮罩层，这样我们可以将多个图层组

织在一个遮罩层之下创建非常复杂的遮罩效果。

遮罩动画主要分为两大类：遮罩层运动产生的动画；被遮对象运动产生的动画。例 12-5 是遮罩层运动产

生动画的实例，例 12-6 是被遮对象运动产生动画的实例。

实例 12-5 ：百叶窗效果

（1）新建 Flash 文件，设置舞台的宽 550 像素，高 400 像素。

（2）选中图层 1 的第一帧，选择“文件” -> “导入” -> “导入到舞台”命令，导入一幅图片如 zhezhao1.

jpg ，调整成跟舞台一样大小，居中。如图 12 - 17 所示 。

（3）插入图层 2 ，在图层 2 的第 10 帧插入一个空白关键帧，导入另一幅图片如 zhezhao2. jpg ，也

调整成跟舞台一样大小后居中。如图 12 -1 8 所示 。（通过图片的属性面板可以精确图形的大小和位置，

有效的避免两幅图片交替出现时因位置不同而引起的视觉跳动）。

图 12-17 导入第一幅图片 图 12-18 导入第二幅图片

（4）插入图层 3 ，在图层 3 的第 10 帧插入一个空白关键帧，在舞台左面画一个比图片略高且宽度几乎

为一条线的无边框矩形。

（5）在按 Ctrl 键的同时，用选择工具按住矩形外拖的方法，再复制出两个矩形。调整三个矩形间隔相同

且水平排列在舞台上。

（6）在图层 3 的第 20 帧插入一个关键帧。选中第 10 帧，用任意变形工具把每个矩形的右边往右推，

让每个矩形都稍有间隔。如图 12 - 19 所示 。

图 12-19 调整三个矩形的大小 图 12-20 添加遮罩层

（7）选中图层 3 的第 10 帧，在属性面板上创建“形状”补间动画；在图层 3 的第 21 帧插入一个空白

关键帧。

（8）先选中图层 3 的第 10 帧，然后在按住 Shift 键的同时，单击第 20 帧，以同时选中第 10 至第 20

帧；在选中的任一帧上右击，执行“复制帧”命令，再在第 30 帧上右击，执行“粘贴帧”命令，把 10 至

20 帧间的形状补间动画复制到 30 至 40 帧上。

（9）把图层 2 的第 10 帧复制到图层 1 的第 20 帧上，把图层 1 的第 1 帧分别复制到本图层的第 40

帧和图层 2 的第 30 帧上。在图层 2 的第 40 帧插入一个普通帧。

（10）把光标置于图层 3 上右击，执行“遮罩（层）”命令，把图层 3 变为遮罩层。如图 12 - 20 所示 。

（11）测试影片，观看如图 12 - 21 所示 的变化效果。实际是两幅图片轮流出现的效果，在 29 帧停止

动画的运行，可以观察到第二幅图画逐渐出现的完整过程； 30 帧至 40 帧即是第一幅图片重新显示，第

二幅图片被遮罩的过程。

图 12-21a 百叶窗遮罩的时间轴最后效果

图 12-21b 遮罩最后效果

实例 12 - 6 ：文字填充内容变化的动画效果

（1）新建 Flash 文件，设置舞台的宽 400 像素、高 150 像素，背景色为黑色。

（2）在图层 1 的第一帧利用文字工具输入“遮罩动画”四个字，在其文字属性面板中设置字体为隶书，

字号为 87 。在第 10 帧插入普通帧。如图 12 - 22 所示 、图 12 - 23 所示 。

（3）新建图层 2 ，在第一帧上利用矩形工具绘制一无边矩形，高度比文字略高，宽度大约是文字宽度的

两倍。利用填充色工具将矩形填充为七彩渐变色。矩形右端与文字右端对齐。如图 12 - 24 所示 。

图 12-22 文字属性面板

图 12-23 文字对象图 12-24 绘制七彩矩形

（4）在图层 2 的第 10 帧插入关键帧，向右拖动矩形的位置，使矩形左端与文字左端对齐。在第 1 帧和

第 10 帧之间创建形状补间动画。

（5）交换图层 1 和图层 2 的位置，将图层 1 设为遮罩层。

（6）测试影片，观看效果。如图 12 - 25 所示 。

图12-25 七彩文字效果

使用技巧

（1）在例 12 - 5 中，遮罩层的遮罩图形为三个矩形，这三个矩形使两幅图片以百叶窗的显示形式交替出

现。如果想出现更为细致的百叶窗效果可以增加第五步中矩形的个数。

（2）在例 12 - 6 中，移动的渐变色矩形使遮罩的文字产生了颜色流动的效果。我们还可以将一幅色彩丰

富的图片导入作为被遮罩的图形使用。 Flash 的常见实例“探照灯效果”与例 12 - 6 的做法相类似。将

第三步中的矩形改为直径比文字字体略大的圆形即可。

（五）引导线动画

前面我们学习的 Flash 动画都是沿直线运动，下面我们来学习沿特殊路径运动的动画，即引导层动画。引

导线动画，至少应该设置一个引导层和一个被引导层两个图层，且引导层在上，被引导层在下。被引导层

上的对象，可以按照引导层指定的路径运动。被引导层可以有多个，即多层引导动画。

实例 12 - 7 ： 沿引导线移动的文字效果

（1）新建 Flash 文件，设置舞台的宽 550 像素、高 400 像素，背景色为黑色。

（2）在图层 1 的第 1 帧利用文字工具写入文字“ Flash ”，文字属性随意设置。

（3）在时间轴左下方单击“添加运动引导层”按钮，如图 12 - 26 所示，选中引导层的第 1 帧，用铅笔

工具在舞台上随意绘制一条曲线，注意不要有闭合区域，并且让曲线尽量平滑。在第 20 帧插入普通帧。

图 12-26 添加引导层

（4）在图层 1 的第 20 帧插入关键帧。使图层 1 的第 1 帧的文字中心与引导层的曲线起点重合，如图 12

- 27 所示；在第 20 帧，使文字中心与引导层的曲线终点重合，如图 12 - 28 所示。

（5）选中图层 1 第 1 帧，在属性面板上创建“动作”补间动画，并在属性面板上选中“调整到路径”选

项。如图 12-29 所示。

（6）测试影片，观看效果。

图 12-27 设置路径起点 图 12-28 设置路径终点

图 12-29 设置“调整到路径”

实例 12 - 8 ： 模拟地球公转动画效果

（1）新建 Flash 文件，设定默认大小的舞台，背景色设为深蓝色。

（2）在图层 1 的第 1 帧，用椭圆工具绘制一个较大无边框的红色圆形作为太阳。将太阳相对于舞台居中

对齐。在第 60 帧插入普通帧，锁定该层。

（3）新建图层 2 ，利用“窗口” -> “设计面板”命令，调出混色器面板，设置填充样式为“放射状”，

左色标为土褐色，右色标为白色，如图 12-30 所示，在舞台上画一个较小的正圆，以表示地球。将地球转

化为图形元件。

（4）单击“添加运动引导层”按钮，选中引导层的第 1 帧，用椭圆工具画一无填充色的白线条椭圆 , 居

中后用工具栏中的橡皮擦工具在椭圆左半部分擦出一个小缺口。在第 60 帧插入一个普通帧。

（5）选中“地球”图层的第 60 帧插入一个关键帧。在第 1 帧，将地球拖到椭圆小缺口的上边端点上，

并使地球的中心点紧扣在椭圆弧线上。在第 60 帧，把舞台上的地球拖移到小缺口的另一端点上，同样让

地球的中心点紧扣在椭圆弧线上。

（6）选中地球图层第 1 帧，创建“动作”补间动画。

（7）测试影片，观看效果。如图 12-31所示。

图 12-30 设置地球的颜色填充样式 图 12-31 地球绕太阳旋转的效果

使用技巧

（1）引导线可以利用钢笔工具、直线工具、铅笔工具、矩形工具、椭圆工具等进行绘制，无论是线条还是

图形都可以作为引导线来使用。但绘制的引导线不要闭合，否则无法形成从引导线起点到终点的动画效果。

（2）引导线在动画发布的时候是看不到的，所以引导线的颜色大家可以随意设置，只要与场景中的主体颜

色区分开就可以了。在实现引导线效果的时候，一定要注意元件与引导线的粘合问题。如果没有粘合，则

元件就会按照开始帧和结束帧的位置作直线运动。如果没有吸附感，可以单击工具栏中的“选项” -> “对

齐对象”命令。

（3）如果未将图形“地球”转化为元件，则地球层只能设置“形状”补间动画，其结果是使地球不是沿椭

圆路径运动，而是形成了从椭圆缺口的始端到终端的移动。

（4）如果要在最终效果中显示椭圆路径线，可以新建一普通层，并复制引导层的第 1 帧至该层的第 1 帧，

并在 60 帧插入普通帧即可。不显示路径时时间轴如图 12-32 所示，显示路径如图 12-33 所示。

图 12-32 不显示椭圆路径 图 12-33 显示椭圆路径

二、 Flash 动画的元件制作及使用技巧

（一）按钮

利用按钮可以实现很多的交互功能。执行“窗口” -> “ 公用库” -> “按钮”命令，就会在库的按钮面

板上显示大量的通用按钮。选中喜欢的按钮拖入舞台，即可调用“公用库”里的通用按钮。也可以通过“新

建元件”中的“按钮”选项自己定制按钮。

常用按钮类型有文本按钮、图像按钮和动画按钮等，下面我们分别通过实例来理解按钮的制作和使用。

图 12-34 创建“播放”按钮元件

图 12-35 按钮元件的编辑窗口

实例 12-9 ： 文本按钮

（1）新建 Flash 文件，设置舞台的宽 400 像素、高 150 像素，背景色设为黑色。

（2）利用“插入” -> “新建元件”选项，或利用快捷键 Ctrl+F8 ，打开“创建新元件”对话框，选择

类型为“按钮”，在名称栏键入“播放”字样，如图 12 - 34 所示，单击“确定”，进入按钮元件的编辑

场景，如图 12 - 35 所示。

（3）选中图层 1 的“弹起”帧，键入红色文字“ PLAY ” ,72 号，字体为 Arial Black ，居中。

（4）选中“指针经过”的关键帧，如果希望前两个状态文本效果完全一致，可以在此插入帧；如果希望效

果有所改变，则在此帧插入一个关键帧，改变文字效果即可。在此我们将文字颜色改为黄色。

（5）选中“按下”的关键帧，设置按下鼠标时按钮的效果。此步操作与第四步类同，将文字改为蓝色。

（6）选中“点击”帧，在此帧上插入一个空白关键帧，单击时间轴下方的“绘图纸外观”按钮绘制按钮的

激活范围。用“矩形工具”画一个能包围“ PLAY ” 文字的无边框矩形。如图 12-36 所示。

图 12-36 在“点击”帧绘制矩形框

（7）返回场景1，此时库中元件如图12 - 37所示，把“ PLAY ”按钮元件拖入舞台，放置在适当位置。

场景如图 12-38 所示。

（8）测试影片，观看效果。

图 12-37 库中的“ PLAY ”按钮 图 12-38 场景中的“ PLAY ”按钮

实例 12-10 ： 图形按钮

（1）新建 Flash 文件，设置舞台的宽 400 像素、高 150 像素，背景色设为黑色。

（2）按下快捷键 Ctrl+F8 ，打开“创建新元件”对话框，选择类型为“按钮”，在名称栏键入“播放”

字样，单击“确定”，打开播放按钮元件的编辑场景 。

（3）选中图层 1 的弹起帧，利用多边形工具在舞台上绘制一个无边红色指向右的三角形，成为常见的播

放符号。并分别在 “指针经过”、“按下”插入关键帧，将三角形分别填充为黄色和蓝色，在“点击”帧

插入关键帧。

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

（5） 测试影片， 观看效果。如图 12 -3 9 、 12 - 40 所示 。

图 12-39 按钮效果 1 图 12-40 按钮效果 2

使用技巧

（1）按钮元件编辑场景中可以看到时间轴有四帧，分别为“弹起”、“指针经过”、“按下”和“点击”。

其中“弹起”帧中的内容在正常状态下出现；“指针经过”中的内容在鼠标移到其上面时出现；“按下”

的内容在单击按钮时出现；“点击”则定义了激活按钮的区域。 最简单的按钮，只要编辑好“弹起”帧即

可。

（2）“点击”帧上的这个矩形，确定了按钮的作用范围；如果没有这个矩形，所作的按钮仅对有文字笔划

的地方起作用，有了这个矩形，就能在整个矩形范围内起作用。在编辑“点击”帧时，激活“绘图纸外观”

按钮可以方便的绘制按钮的激活范围。

（二）动作命令

Flash 中的“动作”面板可以让开发人员快速建立用于交互的脚本（ActionScript），输入脚本代码，可

以让帧、按钮和影片剪辑执行指定的动作命令。这里只介绍几个最简单、最常用的帧动作和按钮动作。

1 ． 编辑帧动作

（1）选中需停止播放的关键帧（或空白关键帧），打开动作 - 帧面板。如图 12-41 所示。

图 12-41 “帧 - 动作”面板

图 12-42 时间轴的控制命令

（2）在动作工具箱中单击“全局函数”，再单击“时间轴控制”，最后双击“ stop ”。动作帧面板显示

如图 12 - 42 所示。

（3）在时间轴帧面板上被选中的帧上出现一个字母“ a ”，如图 12 - 43 所示，则表明“停止播放”的

帧动作编辑成功。

2 ． 编辑按钮动作

（1）选中需要编辑动作的按钮，打开“动作 - 按钮”面板。

（2）在动作工具箱中依次单击“全局函数” ->“ 影片剪辑控制”，然后双击“ on ”。如图 12 - 44 所

示。

图 12-43 添加“帧动作”后的帧

图 12-44 影片剪辑的控制命令

（3）双击“ release ”或其他命令，即可在动作编辑窗口插入相应的执行程序。把光标置于大括号中，

换行；如果你选中的按钮是一个播放按钮，则应在“时间轴控制”里双击“ play ”；如果你选中的按钮

是一个停止按钮，则应在“时间轴控制”里双击“ stop ”；如果你选中的按钮是一个跳转按钮，则应在

“时间轴控制”里双击“ gotoAndPlay ” 或“ gotoAndStop ”，并把光标置于小括号内，输入你想跳转

到帧的编号，如图 12-45 所示。

图 12-45 “时间轴控制”中选择控制命令

实例 12 - 11 ： 按钮控制动画播放效果

（1）打开实例 12 - 源文件，执行“文件” -> “另存为”命令，把文件名改写为“ 12 - ”。

（2）分别制作“播放”、“暂停”、“返回”三个文本按钮元件。

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

（4）在动作图层第 1 帧，输入帧动作“ stop ”。

（5）选中按钮图层第 1 帧，从库中把三个按钮元件拖入舞台。在 20 帧插入关键帧。

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

on （release） { play （） ;}

图 12-46 输入“暂停”按钮动作代码

（7）选中“暂停”按钮，在语句编辑区输入如下代码（效果如图 12-46 所示）：

on （release） {stop （） ; }

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

on （release） { gotoAndStop （1） ; }

（9）测试影片， 观看效果。效果 如图 12 - 47 所示。

图 12-47 按钮控制动画效果截图

实例 12-12 ：为按钮添加超链接

超链接在网页中应用非常广泛，按钮的超链接是指当按下按钮时，将跳转到链接的站点或网页上，这样可

以大大方便用户的浏览。

（1）打开实例 ，将文件名另存为“ ”。

（2）打开“窗口” -> “开发面板” -> “行为”面板。单击“添加”按钮，添加行为“ Web ” -> “转

到 Web 页”。面板显示如图 12 - 48 所示。

（3）在打开的对话框中的“ URL ”选项中，输入单击该按钮要跳转到的网页链接地址，如 www .

sohu . com 。如果想链接到本机器的 HTML 文件，必须用 file 开头，如 File:///d:/12 . htm 。在此

输入 www . sohu . com 。如图 12 - 49 所示。

图 12-48 “行为”面板 图 12-49 “ URL ”和“打开方式”选项

（4）在图 12 - 49 中“打开方式”有四个选项。在本例中选择 _self 选项，单击“确定”按钮。此时在

Flash 窗口下端的“动作 - 按钮”面板中出现如下语句：

on （press） { getURL （"","_self"） ; }

（各选项的含义如下：

_self ：指定文件显示在当前窗口。 _blank ：指定文件显示在一个新的窗口。 _parent ：指定文件显示

在当前窗口的父窗口里。 _top ：指定文件显示在当前窗口的上一层窗口。）

（5）当单击按钮时，打开搜狐网站的首页页面。

（三）声音

Flash MX 2004 提供了许多使用声音的方式。可以使声音独立于时间轴连续播放，或使动画与一个声音同

步播放。也可以向按钮添加声音，使按钮具有更强的感染力。

能直接导入 Flash 应用的声音文件，主要包括 WAV 和 MP3 两种格式。另外，如果系统上安装了 QuickTime

4 或更高版本，则还可以导入 AIFF 格式和只有声音的 QuickTime 影片格式。下面通过一个实例讨论导入

声音、引用声音（给动画添加声音、给按钮添加声效）的方法。

实例 12 - 13 ：播放背景音乐

当动画开始播放时，伴随播放背景音乐，当把鼠标放在“返回”按钮上时，会听到提示的声效，当单击“返

回”按钮时，动画返回起点，当单击“暂停”按钮时，动画和背景音乐停止播放，当单击“播放”按钮时，

动画与背景音乐重新开始播放。在动画中应用声音的具体过程如下：

（1）打开实例 12 - ，将文件另存为“ 12 - ”。

（2）导入声音。 执行“文件” -> “导入” -> “导入到库”命令，将外部声音导入到当前影片文档的

“库”面板中。在“导入到库”对话框中，选择要导入的两个声音文件，如图 12 - 50 所示。然后单击“打

开”按钮，将声音导入，如图 12 - 51 所示。

图 12-50 声音文件“导入到库”对话框 图 12-51 库面板

的编辑窗口

（3）引用声音。新建一个图层，并重新命名为“声音”，选择这个图层的第 1 帧，然后将“库”面板中

的“背景音乐”声音对象拖放到场景中，即将声音引用到时间轴上，此时“声音”图层上出现了声音对象

的波形，如图 12 - 52 所示。这时按一下键盘上的回车键，就可以听到背景音乐了。

图 12-52 时间轴上的声音图层上的波形

（4）编辑声音。选择“声音”图层的第 1 帧，打开“属性”面板，设置和编辑声音对象的参数。在“同

步”选项后的下拉列表中选择“数据流”，更换声音同步类型，使得动画停止播放时音乐也一起停止播放。

如图 12 - 53 所示。设置声音的效果，或者单击“编辑”按钮对声音更进一步的编辑，这里就不再详述。

图 12-53 编辑声音的属性面板

（5）给按钮添加声音。打开“库”面板，用鼠标双击“返回”按钮元件，这样就进入到这个按钮元件的编

辑场景中。新插入一个图层，重新命名为“声效”。选择这个图层的第 2 帧，插入一个空白关键帧，然后

将“库”面板中的“按钮声音”拖放到场景中，“声效”图层从第 2 帧开始出现了声音的波形线，在第四

帧插入普通帧。打开“属性”面板，将“同步”选项设置为“事件”。当鼠标移动到按钮上时，声效就出

现了。如图 12 - 54 所示。

图 12-54 给按钮添加声音

使用技巧

（1）“同步”选项中“数据流”类型是一种很重要的声音同步类型，常用于背景音乐的使用。特别时在制

作一些如 MTV 作品时，这种声音同步类型是最常用的。

（2）制作按钮声效时必须将“同步”选项设置为“事件”，如果还是“数据流”同步类型，那么声效将听

不到。给按钮加声效时一定要使用“事件”同步类型。

综合实例：《静夜思》交互课件

本例是一个简单的交互课件，学习者可以通过课件自学完成教学任务。本例中主要用到了蒙板动画的制作，

按钮动作的设置等操作。其中的每一页内容实际上有一系列静态的画面组成的，通过为按钮设置动作可以

在各页面之间实现跳转，从而用户可以用交互的方式来学习。

课件制作步骤如下：

（1）新建一个Flash 文件，保存文件命名为“交互课件”。

（2）将第一层命名为“背景”，单击“文件”->“导入到舞台”，导入一幅背景图片。在背景上输入古诗

《静夜思》的内容。

（3）新建一层命名为“按钮”，从公用符号库中拖出四个按钮放在舞台上，分别命名为“按钮1”、“按

钮2”、“按钮3”、“按钮4”。

（4）选择“插入”->“新建元件”，打开“创建新元件”创建对话框，名称命名为“诗人简介”，“行为”

选择为“图形”，单击“确定”按钮，进入图形元件编辑窗口，创建静态文本“诗人简介”。

（5）单击编辑窗口上的“场景1”返回主场景，重复第（4）步，再分别创建“古诗鉴赏”、“学习步骤”、

“课堂练习”这三个图形元件。

（6）返回主场景，创建“椭圆”图形元件，内含一个椭圆图形。

（7）选择“插入”->“新建元件”，打开“创建建元件”创建对话框，名称命名为“按钮文本1诗人简

介”，“行为”选择为“影片剪辑”，单击“确定”按钮，进入影片剪辑元件编辑窗口。

（8）在影片剪辑元件编辑模式下，创建三层，从下向上分别命名为“文本1”、“椭圆运动”、“文本2”。

从符号库中拖出“诗人简介”图形元件放在“文本1”图层上，从符号库中拖出“椭圆”图形元件放在“椭

圆运动”图层上，将“文本1”的内容复制、粘贴在“文本2”图层上。在“文本1”层、“文本2”层的

第30帧插入帧，在“椭圆运动”层的第30帧插入关键帧。

（9）将“文本2”层设置为“遮罩层”，“椭圆运动”层设置为“被遮罩层”。将“椭圆运动”层中第1

帧、第30帧的“椭圆”实例分别放在文本“诗人简介”的两端，创建“补间动作”动画。

（10）返回主场景，重复（7）～（9）的操作，再分别创建“按钮文本2古诗鉴赏”、“按钮文本3学习

步骤”、“按钮文本4课堂练习”这三个影片剪辑元件。

（11）新建一层命名为“按钮文本”，从符号库中拖出“按钮文本1诗人简介”、“按钮文本2古诗鉴赏”、

“按钮文本3学习步骤”、“按钮文本4课堂练习”分别放在每个按钮下面。

（12）新建一层命名为“课程内容”，分别在第5、10、11、15、20、21帧插入“关键帧”，并且分别给

关键帧命名为“诗人简介”、“古诗鉴赏1”、“古诗鉴赏2”、“学习步骤”、“课堂练习1”、“课堂

练习2”。

（13）分别选中第5、10、11、15、20、21关键帧，在舞台上创建“诗人简介”、“古诗鉴赏1”、“古

诗鉴赏2”、“学习步骤”、“课堂练习1”、“课堂练习2”的具体文本内容。

（14）选中“课程内容”第1帧，按F9键打开“动作-帧”面板设置“Stop”动作：

Stop;

（15）选中“按钮1”，打开“动作-按钮”面板，添加动作命令，如图12-55所示：

On(press){gotoAndStop(5);}

图12-55 设置按钮动作

（17）同上操作，设置“按钮2”的动作如下：

On(press){gotoAndStop(10);}

设置“按钮3”的动作如下：On(press){gotoAndStop(15);}

设置“按钮4”的动作如下：On(press){gotoAndStop(20);}

当用户单击这些按钮时，动画自动回到第一帧的位置，即首页面。

（18）在第5、10、11、15、20、21关键帧页面上分别添加“返回”按钮，并添加动作命令：

On(press){gotoAndStop(1);}

（19）在第10帧、第20帧上分别添加“下一页”按钮，并添加动作命令，如图12-56所示：

on (release) {nextFrame();}

图12-56 “下一页”按钮添加动作命令

（20）在第11帧、第21帧添加“前一页”按钮，并添加动作命令：on (release) {prevFrame();}

（21）在主场景中新建一层，命名“背景音乐”。单击“文件”->“导入到舞台”，导入一段背景音乐，

打开“属性”面板，“同步”类型选择“事件”。

（22）这个简单的交互课件制作完成，按Ctrl+Enter键测试该课件。如图13-57所示。

图13-57课件运行效果

三、 Flash 的影片发布

做好的影片要发布出去才能被别人看到。在 Flash 中文件格式也分为两种：一种是原文件，后缀为

* ． fla ，也就是文件编辑时的格式，也称为源文件。还有一种打包以后的影片文件，后缀名为 * ． swf 。

前者可以再次被编辑，而后者不可再进行编辑。两种文件的默认图标分别如图 12 - 55 和图 12 - 56 所

示。

图 12-55 源文件图标 图 12-56 打包文件图标

在编辑 Flash 文件时，按下 Ctrl+Enter 键，可以在原 Flash 文件的同一目录下创建一个同名的 swf格

式文件。但要对影片发布的各种控制参数的进行精确设置，可选择“文件” -> “导出” -> “导出影片”。

此时用户可以根据需要将 Flash 文件保存为 .gif 、 .avi 、 .mov 等各种动画文件格式。由于课件的制

作大多数只用 Flash 来制作一些简单的素材，对于相应的设置，用户可以参照帮助自行研究。在这里就不

作详细的介绍。