第5章 简单动画

第5章简单动画简单动画是FlashMX2004的基本动画形式，包括逐帧动画和补间动画，其中补间动画又分为运动补间动画、变形补间动画和颜色补间动画。

5.1逐帧动画5.2补间动画5.3小结综合习题五5.1逐帧动画逐帧动画又称作连续帧动画，指不需要计算机自动生成两个关键帧之间过渡的内容（即不需要计算机“补间”），而由人工来制作每一帧的动画内容的动画。就像传统的动画制作方法一样，但使用FlashMX2004制作的逐帧动画，在播放时会首尾相接地循环播放，所以可以用来生成一些特殊的效果。

实例：秒表效果的制作

秒表效果体现数字的跳动，如图5-1所示。这里仅仅用于说明逐帧动画的制作过程，实际上秒表中的数字并非1秒钟跳动一个，因为FlashMX2004在默认状态下动画播放的速度是12帧/秒，也就是说此动画中每跳动一个数字的时间是1/12秒。

图5-1实例效果

5.1逐帧动画制作步骤：

（1）新建一个文件。首先在第1帧中绘制秒表的轮廓，秒表轮廓如图5-2所示。图5-2秒表轮廓

（2）秒表轮廓绘制完毕后，有必要介绍一下将如何将对象放置到工作区的中央：5.1逐帧动画制作步骤：

1、选取箭头工具，用框选的方法选取整个轮廓。2、执行“窗口”菜单下的“设计面板”命令，在弹出的子菜单中执行“对齐”命令，如图5-10所示，打开“对齐”面板，如图5-11所示，对齐面板中提供了各种对齐方式。图5-10“对齐”命令图5-11“对齐”面板

5.1逐帧动画制作步骤：

3、按下“相对于舞台”按钮，此时该按钮处于按下状态，如图5-12所示，表示以后对对象进行的任何对齐操作都是相对于整个工作区的。处于按下状态的“相对于舞台”按钮图5-12按下“相对于舞台”按钮

5.1逐帧动画制作步骤：

4、依次单击“垂直居中分布”按钮和“水平居中分布”按钮，如图5-13所示，完成对象的居中操作，可见秒表轮廓处于工作区的中央，如图5-14所示。“垂直居中分布”按钮“水平居中分布”按钮图5-13“垂直居中分布”按钮和“水平居中分布”按钮

图5-14处于工作区中央的轮廓

5.1逐帧动画制作步骤：

(3)下面为秒表轮廓填充颜色，这里需要用到“混色器面板”。1、选取颜料桶工具，在“颜色栏”中将填充色设置为一种放射状渐变颜色，如图5-15所示，给秒表轮廓填充，如图5-16所示。放射状渐变颜色图5-15设置颜色

图5-16填充颜色

5.1逐帧动画制作步骤：

2、执行“窗口”菜单下的“设计面板”命令，在弹出的子菜单中执行“混色器”命令，如图5-17所示，打开“混色器”面板，如图5-18所示。图5-17“混色器”命令

颜色按钮颜色滑块颜色种类下拉列表颜色条图5-18“混色器”面板

5.1逐帧动画制作步骤：

混色器面板中显示了当前的颜色状态，并可对颜色进行编辑。以当前的填充颜色为例，“颜色种类”下拉列表中显示“放射状”表示当前的填充色为放射状渐变颜色。中间的颜色条两端各有一个颜色滑块，分别呈蓝色和黑色，如图5-19所示，表示当前的放射状渐变颜色由蓝色和黑色组成，颜色滑块可以左右拖动来调节该种颜色在渐变颜色中所占的比例。图5-19颜色条

5.1逐帧动画制作步骤：

3、单击选取呈黑色的颜色滑块，单击“颜色”按钮，弹出颜色卡，如图5-20所示，将该颜色滑块的颜色设置为黄色，此时放射状渐变颜色变为由蓝色和黄色组成，如图5-21所示，轮廓颜色如图5-22所示。图5-20颜色卡

图5-21修改后的颜色

图5-22填充效果

5.1逐帧动画制作步骤：

（4）使用文本工具绘制一个文本框，在文本框中输入“00”，使用变形工具调整文本框的大小和位置，如图5-23所示。用同样的方法绘制另一个文本框，如图5-24所示。图5-23文本框

图5-24文本框

5.1逐帧动画制作步骤：

（5）在第2帧上单击鼠标右键，弹出快捷菜单，执行其中的“插入关键帧”命令，如图5-25所示。图5-25“插入关键帧”命令

5.1逐帧动画制作步骤：

（6）在第2帧中双击右边的文本框，使该文本框处于编辑状态，如图5-26所示，将文本框中的数字改为“01”，如图5-27所示。图5-26文本框处于编辑状态

图5-27修改文字

5.1逐帧动画制作步骤：

（7）同样地在第3帧、第4帧、第5帧……第13帧插入关键帧，依次将右边文本框中的数字修改为“02”、“03”、“04”

……“12”。（8）当秒表上数字变为“12”后，秒表停止，为显示一段停顿，在第24帧插入关键帧，这样从第13帧到第24帧，秒表显示“12”。（9）第24帧以后，秒表回到初始状态。在第25帧插入关键帧，将右边文本框中的数字改为“00”，为使初始状态持续一段时间，在第40帧插入关键帧。动画制作完毕，该实例的时间轴如图5-28所示。图5-28实例时间轴

5.1逐帧动画制作步骤：

注意：动画制作完毕后要观看动画效果有两种方法：（1）按键盘上的“Enter”键在工作界面中观看；（2）执行“控制”菜单下的“测试影片”命令，如图5-29所示，测试影片，如图5-30所示。图5-29“测试影片”命令

图5-30测试影片

5.2补间动画由计算机自动生成两个关键帧之间的过渡部分的动画称为补间动画。补间动画包括：运动补间动画、变形补间动画和颜色补间动画。5.2.1运动补间动画

5.2.2变形补间动画

5.2.3颜色补间动画

5.2.1运动补间动画运动补间动画用于制作对象运动的效果。给对象指定开始位置和终止位置，由计算机自动生成中间的运动过程，实现对象从开始位置运动到终止位置的效果。另外，使用运动补间动画的基本过程，通过对各种参数的设置，可以制作变形效果，旋转效果和淡入、淡出效果，在下面的实例中将介绍到。注意：用于制作运动补间动画的对象必须是元件，所以如果要使图形对象运动，必须先将其转换为元件。实例1：圆的运动本例运用运动补间动画制作一个圆从左到右的运动过程，如图5-31所示。

图5-31实例效果

5.2.1运动补间动画制作步骤：（1）新建一个文件。选取椭圆工具，打开属性面板，将线条粗细设置为“3”，填充色设置为红色与黑色的放射状渐变颜色。在工作区中，按住键盘上的“Shift”键拖动鼠标绘制一个正圆，如图5-32所示。

图5-32绘制圆

5.2.1运动补间动画制作步骤：（2）将图形转换为元件：选取箭头工具，用框选的方法选取整个圆。执行“修改”菜单下的“转换为元件”命令，如图5-33所示，弹出“转换为符号”对话框，在“行为”单选栏中选择“图形”，在“名称”文本框中输入元件的名称——“圆”，如图5-34所示，单击“确定”按钮。转换为元件后的图形四周出现蓝色框，如图5-35所示。

图5-33“转换为元件”命令

图5-34“转换为符号”对话框

图5-35图形被转换为元件

5.2.1运动补间动画制作步骤：（3）在第30帧插入关键帧，将圆向右拖动一段距离，如图5-36所示。

图5-36移动圆

5.2.1运动补间动画制作步骤：（4）创建运动补间动画：单击选取第1帧，打开属性面板，如图5-37所示。单击“补间”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“动作”，如图5-38所示。设置完毕后在时间轴上可看到有一个从第1帧指向第30帧的箭头，如图5-39所示。

图5-37帧属性面板

图5-38“补间”下拉列表

图5-39示箭头

箭头5.2.1运动补间动画制作步骤：动画制作完毕，按键盘上的“Enter”键或“测试影片”可以看到动画效果。本实例的时间轴如图5-40所示：

图5-40实例时间轴

5.2.1运动补间动画实例2：变形效果图5-41实例效果

使用运动补间动画可以制作变形效果，但这与下面介绍的“变形补间动画”是完全不同的，使用运动补间动画制作的变形效果仅仅展示变形工具改变对象形状的过程。本实例展示使用变形工具改变一个矩形形状的过程，如图5-41所示。

5.2.1运动补间动画制作步骤：（1）新建一个文件。（2）选取矩形工具，打开属性面板，将线条颜色设置为黑色，线条粗细设置为“1”，填充颜色设置为红色，如图5-42所示。图5-42设置属性

（3）在工作区中绘制一个矩形，使用“对齐”面板将其放置到工作区的中央，如图5-43所示。图5-43绘制矩形

5.2.1运动补间动画制作步骤：（4）将矩形转换为图形元件：选取矩形，执行“修改”菜单下的“转换为元件”命令，如图5-44所示，弹出“转换为符号”对话框，在“行为”单选栏中选择“图形”，在“名称”文本框中输入元件的名称——“矩形”，如图5-45所示，单击“确定”按钮。

图5-44“转换为元件”命令

图5-45“转换为符号”对话框

5.2.1运动补间动画制作步骤：（5）在“图层1”的第15帧插入关键帧。

（6）使用变形工具选取矩形，按下“选项栏”中的“旋转与倾斜”按钮，将鼠标移动到矩形上方中间的控制点附近，可以看到鼠标箭头变成图案，如图5-46所示，拖动鼠标使矩形倾斜，如图5-47所示。

图5-46示鼠标图案

图5-47倾斜矩形

5.2.1运动补间动画制作步骤：（7）创建运动补间动画：单击选取第1帧，打开属性面板，如图5-48所示。单击“补间”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“动作”，如图5-49所示。

图5-48帧属性面板

图5-49“补间”下拉列表

5.2.1运动补间动画制作步骤：动画制作完毕，按键盘上的“Enter”键或“测试影片”可以看到动画效果。本实例的时间轴如图5-50所示：

图5-50实例时间轴

5.2.1运动补间动画实例3：旋转效果图5-51实例效果

使用运动补间动画可以制作变形效果。本实例制作一个原地旋转的矩形，如图5-51所示。

5.2.1运动补间动画制作步骤：（1）新建一个文件。（2）选取矩形工具，打开属性面板，将线条颜色设置为黑色，线条粗细设置为“1”，填充颜色设置为红色，如图5-52所示。图5-52设置属性

（3）

在工作区中绘制一个矩形，使用“对齐”面板将其放置到工作区的中央，如图5-53所示。图5-53绘制矩形

5.2.1运动补间动画制作步骤：（4）将矩形转换为图形元件：选取矩形，执行“修改”菜单下的“转换为元件”命令，如图5-54所示，弹出“转换为符号”对话框，在“行为”单选栏中选择“图形”，在“名称”文本框中输入元件的名称——“矩形”，如图5-55所示，单击“确定”按钮。

图5-54“转换为元件”命令

图5-55“转换为符号”对话框

5.2.1运动补间动画制作步骤：（5）在“图层1”的第30帧插入关键帧。

（6）创建运动补间动画：单击选取第1帧，打开属性面板，如图5-56所示。单击“补间”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“动作”，如图5-57所示。

图5-56帧属性面板

图5-57“补间”下拉列表

5.2.1运动补间动画制作步骤：（7）此时属性面板如图5-58所示，单击“旋转”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“顺时针”，如图5-59所示，在其后面的“次数”文本框中输入“3”，如图5-60所示，即让矩形顺时针旋转3周。

“旋转”下拉列表“次数”文本框图5-58属性面板

图5-59“旋转”下拉列表

图5-60设置旋转次数

5.2.1运动补间动画制作步骤：动画制作完毕，按键盘上的“Enter”键或“测试影片”可以看到动画效果。本实例时间轴如图5-61所示：

图5-61实例时间轴

5.2.1运动补间动画实例4：淡入淡出效果图5-62实例效果

淡入、淡出效果指使对象由不可见渐渐地变为可见，然后再渐渐地变为不可见。淡入、淡出效果通过运动补间动画实现。本实例展示一个圆的淡入、淡出效果，如图5-62所示。

5.2.1运动补间动画制作步骤：（1）新建一个文件。选取椭圆工具，打开属性面板，将线条粗细设置为“1”，填充色设置为红色与黑色的放射状渐变颜色。在工作区中，按住键盘上的“Shift”键拖动鼠标绘制一个正圆，使用“对齐”面板将其放置到工作区的中央，如图5-63所示。

图5-63绘制圆

（2）将圆转换为图形元件，取名为“圆”。

5.2.1运动补间动画制作步骤：（3）在“图层1”的第20帧插入关键帧。回到第1帧，选取圆，打开属性面板，如图5-64所示。单击“颜色”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“Alpha”，如图5-65所示。

“颜色”下拉列表图5-64帧属性面板

图5-65“颜色”下拉列表

5.2.1运动补间动画制作步骤：此时的属性面板如图5-66所示，单击“Alpha”值显示框右端的向下箭头，弹出滑标，如图5-67所示，可通过上下移动滑标来改变“Alpha”值，另外也可以在显示框中直接输入数字。这里在第1帧中将圆的“Alpha”值设置为“0%”，即完全透明，在第20帧中将圆的“Alpha”值设置为“100%”，即完全不透明。

“Alpha”值显示框滑标图5-66属性面板

图5-67示滑标

5.2.1运动补间动画制作步骤：（4）设置从第1帧到第20帧的运动补间动画，完成“淡入”效果。

（5）在第30帧中插入关键帧，使圆的完全不透明状态保持到第30帧。

（6）在第50帧中插入关键帧，在该帧中将圆的“Alpha”值设置为“0%”，即完全透明。

（7）设置从第30帧到第50帧的运动补间动画，完成“淡出”效果。

5.2.1运动补间动画制作步骤：动画制作完毕，按键盘上的“Enter”键或“测试影片”可以看到动画效果。本实例时间轴如图5-68所示：

图5-68实例时间轴

5.2.2变形补间动画变形补间动画用于制作对象变形的效果。给对象指定开始形状和终止形状，由计算机自动生成中间的变形过程，实现对象从开始形状变形到终止形状的效果。注意：用于制作变形补间动画的对象必须是“图形对象”。如果要对其它对象进行变形，则先要将其转换为图形对象，例如要对文本对象进行变形，就先要将其转换为图形对象。5.2.2变形补间动画实例1：圆形变正方形本实例介绍一个圆形变为一个正方形的变化过程，如图5-69所示。

图5-69实例效果

5.2.2变形补间动画制作步骤：（1）新建一个文件。选取椭圆工具，打开属性面板，将填充色设置为黄色。在工作区中，按住键盘上的“Shift”键拖动鼠标绘制一个圆，如图5-70所示。使用箭头工具选取圆的边框，按键盘上的“Delete”键将其删除。

图5-70绘制圆

5.2.2变形补间动画制作步骤：（2）使用“对齐”面板将圆放置于工作区的中央，如图5-71所示。

图5-71将圆放置于工作区中央

（3）在第20帧插入关键帧。使用箭头工具选取圆，按键盘上的“Delete”键将其删除。

5.2.2变形补间动画制作步骤：（4）选取矩形工具，打开属性面板，将填充色设置为黄色。在工作区中，按住键盘上的“Shift”键拖动鼠标绘制一个正方形，如图5-72所示。选取箭头工具，采用双击一条边框的方法选取正方形的所有边框，按键盘上的“Delete”键将其删除。

图5-72绘制正方形

5.2.2变形补间动画制作步骤：（5）使用“对齐”面板将正方形放置于工作区的中央，如图5-73所示。

图5-73将正方形放置于工作区中央

5.2.2变形补间动画制作步骤：（6）创建变形补间动画：单击选取第1帧，打开属性面板，单击“补间”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“形状”，如图5-74所示。设置完毕后在时间轴上可看到有一个从第1帧指向第20帧的箭头，同时参与该动画过程的帧变为绿色，如图5-75所示。

箭头图5-74“补间”下拉列表

图5-75示箭头

5.2.2变形补间动画制作步骤：动画制作完毕，该实例的时间轴如图5-76所示。

图5-76实例时间轴

5.2.2变形补间动画实例2：线条变文字效果的制作本实例分两个阶段，全都采用变形补间动画。首先3条黄色线条由短变长直到贯穿整个工作区，然后3条线条依次变为文字，如图5-77所示。

图5-77实例效果

5.2.2变形补间动画制作步骤：（1）将背景颜色设置为黑色：新建一个文件，打开属性面板，如图5-78所示，单击“背景颜色”按钮，弹出颜色卡，选择黑色，如图5-79所示。这时整个工作区呈黑色背景，如图5-80所示。

图5-78属性面板

图5-79修改颜色

图5-80黑色背景

5.2.2变形补间动画制作步骤：（2）选取矩形工具，打开属性面板，将填充色设置为黄色。在工作区中绘制一个扁矩形，因为该矩形是用来代表线条的，所以一定要绘制得很扁，如图5-81所示。使用箭头工具选取矩形的边框，按键盘上的“Delete”键将其删除。

扁矩形图5-81绘制矩形

5.2.2变形补间动画制作步骤：