Flash动画及课件开发

第章简单的动画
本章要点：
●了解计算机动画原理。

●动画的分类。

●逐帧动画的制作。

●形状渐变动画的制作。

●移动渐变动画的制作。

计算机动画原理
当我们坐在电影院看电影时，我们仿佛感觉得演员就在银幕上表演——那不是真的！道理很简单：电影放映时，连续的静止画面在放映镜头前快速地更换，利用人眼的视觉暂留现象，使我们看电影的观众认为银幕上的演员动作起来。

理论证明，只要电影拷贝的连续画面每秒钟更换幅时，连续画面就会在人眼中产生没有闪烁的动画影像。

我们将组成动画的单幅静止画面称为“帧”。

一般情况下，连续的动画播放速度不得低于帧／秒。

不同国家和地区由于采用的视频制式不同，在电视上每秒钟播放的画面帧数也不同。

例如，美国和日本采用的是制式，每秒钟动画由帧画面组成，而中国和欧洲大部分国家和地区采用的是制式，一秒钟动画由帧画面组成。

如果制作的是电影动画片头或特技，那么每秒钟的动画是由帧画面组成的。

我们最早看见的动画影片是画师用手工绘制，再由摄影师拍摄而产生的。

笔者小时候最先看到的动画是高玉宝原作“半夜鸡叫”改变的影片，据说该影片前期绘画用了几年的时间，画面也多达十几万幅。

计算机动画的产生同手工制作动画的原理相同，每一个动画均是由多幅连续有序的静止画面构成。

手工制作动画时，先由有经验的画师绘出关键的画面，关键画面之间的过渡画面由年轻的画师来完成。

手工画完成后逐帧拍成电影胶片，通过放映机连续播放，就完成了动画。

计算机动画制作时，有经验的画师就是你，由你来制作关键的画面（也就是动画中的关键帧）。

计算机是年轻的画师，它不知疲倦地为你完成关键帧之间的画面，它的运算速度与精度使人们望尘莫及。

当它播放动画时，实际上就是一幅幅画面的产生和刷新过程。

在这一点上，计算机硬件受到了考验，因为每帧画面所包含的信息量非常大，要在很短的时间内刷新它，就需要计算机的速度足够快。

跟我做第个动画
梨子滋味怎么样，还必须亲口尝一尝。

动画究竟应该怎样制作，我们先通过一个简单的实例来了解它的关键所在。

我们做一个由圆变成矩形的动画，操作步骤如下：
①运行，打开的窗口就是新建的一个[无标题]的文件。

②先在工具箱中选择椭圆工具按钮，在舞台右侧绘出一个圆。

注意：由于默认第帧
是空白关键帧，故没有必要在第帧建立空白关键帧。

③选择第帧，点击鼠标右键，在随后弹出的快捷菜单中选择“插入关键帧”。

④紧接着上一步按键删除该帧（第帧）的圆形，在工具箱中选择矩形工具按钮，在
舞台左侧绘出一个矩形。

⑤选择第帧，点击鼠标右键，在随后弹出的快捷菜单下方选择“属性”，打开“属性”对话框。

在“属性”对话框中间，有一个选项“中间”，表示两关键帧之间动画的类别。

点击该栏右边列表按钮，从下拉列表中选择“形状”，如图所示。

图选择“形状”
这里，选择“形状”是为了制作一个形状渐变动画。

关于动画的类别在下一节中将会介绍。

⑥关闭“属性”对话框。

此时可以看到时间轴上起始关键帧与终点关键帧之间呈浅绿色背景，有一箭头指向终点关键帧——说明动画制作已经成功！
⑦保存文件后，按“”键测试影片并输出一个同名的电影。

从这个实例中，我们可以总结一下：
（）动画必须在两个不同画面的关键帧之间完成，中间的动画实际上是由计算机运算出来的。

如果只有一个关键帧，无法要求计算机制作出动画。

（）动画制作完成后，一定要测试动画。

测试动画的同时，会输出一个同名的电影。

读者可以从操作系统的窗口打开自己保存的该实例文件，会发现两个同名的文件：
●一个文件的图标是，相应的文件扩展名是“”——这是原程序文件。

●一个文件的图标是，相应的文件扩展名是“”——这是影片文件。

动画的分类
各种各样的动画五彩缤纷，动画的制作技巧也层出不穷，究竟怎样将动画进行分类呢？
我们将动画进行分类，一般是按动画创作的方法来区分的。

我们制作动画既可以一帧一帧的绘制，也可以只设定两个关键帧，由计算机运算逐渐改变的中间画面来完成。

因此，动画一般可分成两大类：逐帧动画与渐变动画。

渐变动画又可以根据两关键帧之间的变化对象分成形状渐变动画（变化对象是图形）和移动渐变动画（变化对象是元件），如图所示。

图动画分类
逐帧动画
逐帧动画的每一幅画面均是由关键帧构成。

如图所示是一个逐帧动画的时间轴示意，通过此图可以看到连续的画面都是关键帧。

图逐帧动画的时间轴
我们所做的逐帧动画可以去使用绘图工具在每一帧中绘制，也可以从外部逐帧导入图片。

这里就不演示逐帧绘制画面的逐帧动画，下面介绍从外部导入图片的两种逐帧动画制作方法。

逐帧动画方法一
这种方法是先建立连续空白关键帧，再逐帧从外部导入图片。

操作步骤如下：
①先选中第帧，接着按住键选定逐帧动画的最后帧点击鼠标右键，在弹出的快捷菜单中选择“转换为关键帧（）”命令，将所有选中的帧都转换成空白关键帧。

②逐次选中每一空白关键帧，执行菜单命令“文件”→“导入…”，从预定的目标位置导入图片。

逐帧动画方法二
这种方法是先将准备导入的图片放入同一文件夹中，然后依次将这些图片文件取同一文件名且加上图片出现的序号，最后导入到逐帧动画的起始帧。

操作步骤如下：
①将准备导入的图片放入同一文件夹中，然后依次将这些图片文件取同一文件名且加上图片出现的序号。

例如：“”、“”、“”、“”……，如图所示。

图图片文件的序号
②在的时间轴中，选定准备插入逐帧动画的起始帧，执行菜单命令“文件”→“导入…”，从预定的文件夹中导入图片，此时系统会弹出一个对话框如图所示。

图询问是否输入全部图像序列的对话框
③在上图的对话框中选定“是”，系统将按序号导入所有的图片形成逐帧动画，完成这部分的逐帧动画制作。

在后面综合实例中，笔者还会运用到逐帧动画的制作方法。

形状渐变动画
对象形状逐渐改变的动画叫做形状渐变动画。

在形状渐变动画中，对象的位置可以移动、对象的颜色可以改变，但这种变化是以矢量图形对象为动画主角。

舞台上的矢量图形，在没有转化为素材库中的元件之前，只是普通的图形，因此只能用来制作形状渐变的动画，不能用来制作移动渐变动画。

. 形状渐变动画
形状渐变动画发生在两个不同形状的矢量图形之间，我们只要在两个关键帧上绘制不同的图形就可以了。

例燃烧的蜡烛
①运行，新建的一个文件，保存文件名为“燃烧的蜡烛”。

②先在工具箱中选择矩形工具按钮，接着在颜色选项栏选定描绘颜色工具，再
点击下面的没有颜色按钮，随后在舞台上绘出一个没有轮廓线的矩形。

③执行菜单命令“窗口”→“调色板”，打开调色板面板。

选择“线性”填充方式，在色彩区域调整区设定左侧为白色，右侧为深红色，如图所示。

设置完成后关闭窗口。

图设置第③步的调色板图设置第⑧步的调色板
④选择工具箱的填充工具，在矩形中心单击，完成线性填充。

⑤为矩形所在图层取名为“蜡烛”，然后中第帧点击鼠标右键，从快捷菜单中选择“插入帧（）”命令。

这是为了使静止的蜡烛图像作为背景一直保持在场景中。

⑥点击时间轴左侧插入图层按钮，新建一个图层，取名为“火焰”。

⑦在“火焰”图层第帧，先在工具箱中选择椭圆工具按钮，接着在颜色选项栏选定描绘颜色工具，再点击下面的没有颜色按钮，随后在舞台上绘出一个没有轮廓线的
椭圆。

⑧再次执行菜单命令“窗口”→“调色板”，打开调色板面板。

选择“径向”填充方式，在色彩区域调整区设定左侧为白色，中间为红色，右侧为浅黄色，如图所示。

设置完成后关闭窗口。

⑨选择工具箱的填充工具，在椭圆下端单击，完成径向填充。

再用工具编辑椭圆，
使之成为火焰状。

⑩分别在“火焰”图层的第帧、第帧、第帧、第帧插入关键帧，并对每一帧的火焰形状进行修改，如图所示。

图各关键帧的火焰形状
分别选定“火焰”图层的第帧、第帧、第帧后点击鼠标右键，在随后弹出的快捷菜单下方选择“属性”，打开“属性”对话框。

在选项“中间”栏下拉列表中选择“形状”，依次形成形状渐变动画后关闭“属性”对话框。

再次保存文件，按“”键测试影片并输出一个同名的电影。

通过动画展示窗口可以看到蜡烛的火焰在微风中摇曳。

如果在这个实例中选择黑色作为背景，可以得到更真实地效果。

通过上面这个例子，我们可以看到要设计燃烧的酒精灯、篝火等都可以如法炮制。

它还给我们一个启示：凡是要制作一个动态的图形在静止的背景中变化，可以将它们分别放在动态图层与静止图层之中，这样便于编辑修改。

在图形渐变动画中，并不是要求起始帧与终点帧画面一定都只有一个图形。

如果要设计一个图形变成多个图形，也是可行的。

下面是一个图形分裂成多个图形的实例。

例分裂
①运行，新建的一个文件，保存文件名为“分裂”。

②先在工具箱中选择椭圆工具按钮，去掉轮廓线，任选一种填充色，在舞台上绘出一个没有轮廓线的圆。

选中圆，点击常用工具栏的复制按钮。

③在第帧插入关键帧，接着点击常用工具栏的粘贴按钮，将复制在舞台中心的圆拖
放到舞台下方。

按此操作连续复制三次。

④选定第帧后点击鼠标右键，在随后弹出的快捷菜单下方选择“属性”，打开“属性”对话框。

在选项“中间”栏下拉列表中选择“形状”后关闭“属性”对话框。

⑤再次保存文件，按“”键测试影片并输出一个同名的电影。

绘图纸功能
图形变化的中间过程也可以显示出来，这种显示需要使用绘图纸功能。

绘图纸功能不仅适用于形状类渐变动画，也适用移动类渐变动画。

绘图纸功能一般也称为洋葱皮窗口。

这种创作动画的过程模拟的是传统的动画片制作方式。

在传统的动画制作方式中，一般将一张张动作连贯的透明胶片固定叠加在灯箱上作画，由于灯箱可以清晰透出叠在下面的每张透明胶片的内容，所以绘制下一张时可以轻松地掌握图像位置关系。

以前面“例分裂”为例，在动画的时间轴上点击绘图纸外观按钮，帧数标尺上将显示出绘图纸起点标记符号和终点标记符号。

拖动起点标记符号或终点标记符号可以改变绘图纸描绘的起始位置，如图所示。

图绘图纸的起始位置图进入绘图纸状态的显示
这里介绍绘图纸功能的四个按钮：绘图纸外观、绘图纸边框、编辑多帧、修改标记。

●绘图纸外观：单击此按钮，动画进入绘图纸状态。

如图所示，即是“例分裂”进
入绘图纸状态的显示。

●绘图纸边框：以外框形式显示动画的绘图结果。

如图所示，即是“例分裂”显
示绘图纸边框的状态。

图显示绘图纸边框的状态图显示绘图纸边框和编辑多帧状态
●编辑多帧：当按下此按钮时，所有的关键帧的内容均会与原色的方式出现在舞台
上，并且显示的关键帧可以选取和进行编辑，此按钮最好与绘图纸边框按钮一起使用，以便观察得更清晰。

如图所示，即是“例分裂”同时按下绘图纸边框和编辑多帧的绘图纸状态。

●修改标记：当按下此按钮时，会弹出绘图纸设定的相关菜单。

. 颜色变化的形状渐变动画
在中，颜色变化的形状渐变动画在制作上与普通形状渐变动画没有什么差异，只要在动画的起始帧图形与终点帧图形上设定图形不同的颜色即可。

无论起始帧图形颜色与终点帧图形颜色有什么差别，也不管填充颜色采用的是纯色填充还是渐变填充（即线性填充或径向填充），计算机都会自动完成这种颜色变化的动画。

. 添加形状提示控制点的形状渐变动画
有时候我们在形状渐变动画中设定起始图形与终点图形，在测试结果的影片中，动画确实是由起始图形变成了终点图形，但我们却感觉失望，这是为什么呢？这是因为我们有时不仅要求图形变化由起始图形变成终端图形，同时还希望变化过程能按我们的设计进行。

这时，运用形状提示控制点能帮助我们来控制图形的变化过程
形状控制点是指在图形的起点关键帧设定控制点、、、、……，这些点设置在图形的某些重要位置上。

在终点帧，也会有相应的控制点，将这些点拖放到预先设计的特定位置上。

起始帧的控制点与终点帧的控制点一一对应：起始帧的点渐变到终点帧的点、起始帧的点渐变到终点帧的点、起始帧的点渐变到终点帧的点……，复杂的图形变化也能在控制点的控制下乖乖听话。

下面我们通过一个例子来研究形状提示控制点的使用方法。

例添加形状提示点的研究
①新建的一个文件，在工具箱中选择矩形工具按钮，在舞台左侧绘出一个矩形，去
掉填充色。

②在第帧插入关键帧，将矩形拖放到舞台右侧。

③选定第帧后点击鼠标右键，在随后弹出的快捷菜单下方选择“属性”，打开“属性”对话框。

在选项“中间”栏下拉列表中选择“形状”后关闭“属性”对话框。

④按“”键测试影片，可以看到图形渐变动画已经成功。

下面是研究形状提示控制点的使用。

⑤选定第帧，执行菜单命令“修改”→“外形”→“添加形状提示”，会在矩形中央出现一个红色的“”点。

接着按“”键多次，会依次出现“”、“”、“”。

将这些点拖放到四个角上。

此时分别选中起始帧与终点帧观察，会发现起始帧的红色形状提示点分布在四个角上，而终点帧的红色形状提示点还叠放图形中央。

显示结果如图所示。

图起始帧与终点帧形状控制点
下面将分别设置终点帧的形状提示控制点在图形的不同位置上，研究控制点的控制效果。

为了清晰地观察到变化过程，我们打开绘图纸功能的边框按钮和编辑多帧按钮，并设置绘图纸起点与动画起点一致、绘图纸终点与动画终点一致。

⑥设置终点帧形状提示控制点的位置与起点帧的形状提示控制点相同，敲运行结果如图所示。

图终点帧与起点帧的形状提示控制点位置相同的动画
⑦设置终点帧每一个形状提示控制点的位置依次逆时针移动一个角，敲运行结果如图所示。

读者可以清晰地看到图形逆时针逐渐变化。

图图形逆时针逐渐变化
⑧相对于步骤⑥，设置终点帧的“”点和“”点到对角线的角上（即交换两个点的位置），敲运行结果如图所示。

读者可以清晰地看到图形绕对角线进行了翻转。

图图形绕对角线进行翻转
⑨相对于步骤⑥，设置终点帧各形状提示控制点到对角，敲运行结果如图所示。

图终点帧各形状提示控制点到对角
关于形状提示控制点，还有两点要说明：
●的形状控制点共有个，即从英文字母至。

一般情况下，无论怎样复杂的图形变化都
能够控制。

●在起始帧与终点帧的形状提示控制点设置完毕时，起始关键帧的变形提示控制点呈现
为黄色，而终点关键帧中的形状提示控制点呈现为绿色。

如果控制点不在图形曲线上，则呈现红色。

利用形状提示控制点功能可以精确地控制变形方向和方式，并使变形效果趋于平滑。

具体的效果和妙用还需要读者在实际的应用中认真琢磨。

移动渐变动画
移动渐变动画是动画中的主力军，大量的创作作品，总是以移动渐变动画为主。

软件的开发者知道这个特点，因此在快捷菜单的最上面设定了建立移动渐变动画的命令“创建动画动作（）”。

请读者注意，这个命令只适用于建立移动渐变动画。

移动渐变动画基本操作过程
移动渐变动画与形状渐变动画的最大不同在于动画的对象：移动渐变动画的动画对象是元件；形状渐变动画的动画对象是矢量图形。

因此，凡是需要制作移动渐变动画时，必须先确认动画对象已是元件。

移动渐变动画的制作过程可以总结为下面的操作步骤：
⑴建立元件（含由图形转换成元件）。

⑵设定动画的起始关键帧与终点关键帧。

⑶设定动画动作。

⑷设定动画效果
下面以一个最简单的实例说明这种动画的基本操作步骤。

①运行，新建一个文件。

②选择矩形工具，在舞台左侧绘制出一个矩形。

接着使用箭头工具选择这个矩形，
执行菜单命令“插入（）”→“转换成元件（）”，随后在“转换成元件”对话框中选择“图形”素材，为元件取名为“矩形”，如图所示。

最后点击“确定”关闭对话框。

此时矩形中央出现一个符号（表示元件中心），矩形周围出现一个淡蓝色的边框，这说明矩形已经转换成了元件。

图转换为元件对话框
③在第帧点击鼠标右键，从快捷菜单中选择“插入关键帧”。

④选定第帧点击鼠标右键，从快捷菜单的最上面选择“创建动画动作（）”命令。

此时时间轴上起始关键帧与终点关键帧之间呈现淡青色，有一箭头由起始关键帧指向终点关键帧。

⑤按“”键测试影片——一个最简单的移动渐变动画已经完成，后面就可以为动画加了各种效果了。

导入动画作为影片剪辑元件，能够得到更有趣味的移动渐变动画。

例走动的小公鸡
①运行，新建一个文件。

②选择矩形工具，在舞台下方绘制出一个矩形，这个矩形将作为地面的背景存在。

双击该图层名称栏，为此图层取名为“地面”。

③选择第帧点击鼠标右键，从快捷菜单中选择“插入帧（）”。

这一操作步骤是为了使地面背景从第帧延伸到动画结束（动画共帧）。

④执行菜单命令“插入”→“新建元件（）”，随后在“创建新元件”对话框中选择“影片剪辑”素材，为元件取名为“公鸡”，如图所示。

最后点击“确定”关闭对话框，进入元件编辑窗口。

图为元件取名为“公鸡”
⑤在元件编辑窗口中，执行菜单命令“文件”→“导入”，从外部导入预先准备好的动画，在素材编辑窗口的时间轴上呈现出逐帧动画，如所示。

图时间轴上呈现出逐帧动画
⑥点击素材编辑窗口时间轴下方的“场景”，回到主场景中来。

⑦新建一个图层，取名为“公鸡”。

选定第帧，执行菜单命令“窗口”→“库”，打开元件库窗口，从元件库中拖放影片剪辑元件“公鸡”到舞台上，调整初始位置在舞台右侧的地面上。

⑧选择第帧点击鼠标右键，从快捷菜单中选择“插入关键帧”。

接着在该帧将公鸡拖放到舞台左侧的地面上，使得在动画移动过程中，公鸡从右侧走到左侧。

⑨按“”键测试影片，我们将看见小公鸡神气活现地从地面上走过去，如图所示。

图测试影片的效果
强调指出，在步骤⑨中应该按“”键测试影片。

如果只敲击检验效果，此时动画在播放状态下，动画不会动——公鸡只能从右侧滑向左侧！
旋转效果的动画
如果已经完成移动渐变动画，要为动画添加效果非常容易。

以前面例制作的简单动画为基础，我们接着添加旋转效果：
（紧接着例）①选定第帧点击鼠标右键，从快捷菜单中选择“属性”，打开帧属性面板。

从面板中设定旋转方向和旋转次数，如图所示。

关闭帧属性面板返回舞台。

图从面板中设定旋转方向和旋转次数
②为了清楚地看到旋转过程，打开绘图纸功能的边框按钮和编辑多帧按钮。

最后按“”键测试影片，将看到矩形旋转效果如图所示。

图矩形旋转效果
改变速度的移动渐变动画
在不作设定的情况下，动画对象的运动是匀速运动。

我们可以使动画对象运动越来越快或者越来越慢，这需要设置对象的属性。

下面我们设计一辆小汽车水平运动时，速度减慢到逐渐停止下来。

例减速停车
①运行，新建一个文件。

②选择矩形工具，在舞台下方绘制出一个矩形，这个矩形将作为地面的背景存在。

双击该图层名称栏，为此图层取名为“地面”。

③选择第帧点击鼠标右键，从快捷菜单中选择“插入帧（），使地面背景从第帧延伸到动画结束（动画共帧）。

④执行菜单命令“插入”→“新建元件（）”，随后在“创建新元件”对话框中选择“影片剪辑”素材，为元件取名为“小汽车”，最后点击“确定”关闭对话框。

⑤在元件编辑窗口中，执行菜单命令“文件”→“导入”，从外部导入预先准备好的动画，在素材编辑窗口的时间轴上呈现出逐帧动画。

⑥点击素材编辑窗口时间轴下方的“场景”，回到主场景中来。

⑦新建一个图层，取名为“汽车”。

选定第帧，执行菜单命令“窗口”→“库”，打开元件库窗口，从元件库中拖放影片剪辑元件“小汽车”到舞台上，调整初始位置在舞台右侧的地面上。

⑧选择第帧点击鼠标右键，从快捷菜单中选择“插入关键帧”。

接着在该帧将小汽车拖放到舞台左侧的地面上，使得在动画移动过程中，汽车从右侧运动到左侧并停下来。

⑨选定“汽车”图层第帧点击鼠标右键，从快捷菜单中选择“属性”，在“属性”面板“中间”栏先选择“移动”，再于“简易”栏点击右侧按钮显现出滑杆与指针。

用鼠标拖动指针可以使指针上下滑动：
●指针滑向上方，物体运动越来越慢。

●指针滑向下方，物体运动越来越快。

在这个示例中，我们将指针滑向上方，使小汽车减速运动并停下来，如图所示。

设置完毕后关闭属性面板回到舞台上。

图将指针滑向上方改变速度
⑩按“”键测试影片，我们将看见小汽车运动速度减慢并最后停止运动，如图所示。

图例动画效果
改变大小的移动渐变动画
动画对象在移动渐变过程中可以改变大小，这种操作也称为缩放对象的移动渐变动画。

例回家的小公鸡
①运行，新建一个文件。

②执行菜单命令“文件”→“导入”，从预先准备的文件夹中导入一幅有山、水、房子、树木的图片作为动画背景。

调整图片的大小和位置，然后双击该图层名称栏，取名为“背景”。

③在“背景”图层中选择第帧点击鼠标右键，从快捷菜单中选择“插入帧（）”。

使背景从第帧延伸到动画结束。

④执行菜单命令“插入”→“新建元件”，随后在“创建新元件”对话框中选择“影片剪辑”素材，为元件取名为“公鸡”。

⑤在元件编辑窗口中，执行菜单命令“文件”→“导入”，从外部导入预先准备好的小公鸡动画。

点击时间轴下方的“场景”，回到主场景中来。

⑥新建一个图层，取名为“公鸡”。

选定第帧，执行菜单命令“窗口”→“库”，打开元件库窗口，从元件库中拖放影片剪辑元件“公鸡”到舞台上，调整初始位置在舞台右侧。

⑦选择“公鸡”图层第帧点击鼠标右键，从快捷菜单中选择“插入关键帧”。

接着在该
帧将公鸡拖放到图片中小房子的门口，使用自由转换工具，改变小公鸡的大小，使得小
公鸡能走进小房子的门。

⑧选定第帧点击鼠标右键，从快捷菜单的最上面选择“创建动画动作（）”命令。

⑨为了清楚地看到动画对象的大小变化过程，打开绘图纸功能的绘图纸外观按钮和编辑多帧按钮。

按“”键测试影片，我们将看见小公鸡向小房子走去，体形越来越小（似乎越走越远），最后走进了小房子，如图所示。

图小公鸡向小房子走去
颜色变化的移动渐变动画
颜色变化也是动画的一种效果，使移动渐变动画呈现出颜色变化并不困难。

我们添加颜色效果主要是对动画起始帧与终点帧的动画对象改变颜色属性。

这里不妨改变动画对象在终点帧的颜色。

还是以前面例制作的简单动画为基础，我们。