简单动画课件

1、第5章 简单动画 简单动画是Flash MX2004的基本动画形式，包括逐帧动画和补间动画，其中补间动画又分为运动补间动画、变形补间动画和颜色补间动画。 5.1 逐帧动画 5.2 补间动画 5.3 小结 综合习题五 5.1 逐帧动画 逐帧动画又称作连续帧动画，指不需要计算机自动生成两个关键帧之间过渡的内容（即不需要计算机“补间”），而由人工来制作每一帧的动画内容的动画。就像传统的动画制作方法一样，但使用Flash MX2004制作的逐帧动画，在播放时会首尾相接地循环播放，所以可以用来生成一些特殊的效果。 实例：秒表效果的制作 秒表效果体现数字的跳动，如图5-1所示。这里仅仅用于说明逐帧动画的制

2、作过程，实际上秒表中的数字并非1秒钟跳动一个，因为Flash MX2004在默认状态下动画播放的速度是12帧/秒，也就是说此动画中每跳动一个数字的时间是1/12秒。 图5-1 实例效果 5.1 逐帧动画 制作步骤： （1）新建一个文件。首先在第1帧中绘制秒表的轮廓，秒表轮廓如图5-2所示。 图5-2 秒表轮廓 （2）秒表轮廓绘制完毕后，有必要介绍一下将如何将对象放置到工作区的中央： 5.1 逐帧动画 制作步骤： 3、按下“相对于舞台”按钮 ，此时该按钮处于按下状态，如图5-12所示，表示以后对对象进行的任何对齐操作都是相对于整个工作区的。 处于按下状态的“相对于舞台”按钮图5-12 按下“相对

3、于舞台”按钮 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

4、 逐帧动画 制作步骤： 2、执行“窗口”菜单下的“设计面板”命令，在弹出的子菜单中执行“混色器”命令，如图5-17所示，打开“混色器”面板，如图5-18所示。 图5-17 “混色器”命令 颜色按钮颜色滑块颜色种类下拉列表颜色条图5-18 “混色器”面板 5.1 逐帧动画 制作步骤： 3、单击选取呈黑色的颜色滑块 ，单击“颜色”按钮 ，弹出颜色卡，如图5-20所示，将该颜色滑块的颜色设置为黄色，此时放射状渐变颜色变为由蓝色和黄色组成，如图5-21所示，轮廓颜色如图5-22所示。 图5-20 颜色卡 图5-21 修改后的颜色 图5-22 填充效果 5.1 逐帧动画 制作步骤： （5）在第2帧上单击

5、鼠标右键，弹出快捷菜单，执行其中的“插入关键帧”命令，如图5-25所示。 图5-25 “插入关键帧”命令 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 实例时

6、间轴 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 运动补间动画 运动补间动画用于制作对象运动的效果。给对象指定开始位置和终止位置，由计算机自动生成中

7、间的运动过程，实现对象从开始位置运动到终止位置的效果。另外，使用运动补间动画的基本过程，通过对各种参数的设置，可以制作变形效果，旋转效果和淡入、淡出效果，在下面的实例中将介绍到。注意：用于制作运动补间动画的对象必须是元件，所以如果要使图形对象运动，必须先将其转换为元件 。实例1：圆的运动 本例运用运动补间动画制作一个圆从左到右的运动过程，如图5-31所示。 图5-31 实例效果 5.2.1 运动补间动画 制作步骤： （1）新建一个文件。选取椭圆工具，打开属性面板，将线条粗细设置为“3”，填充色设置为红色与黑色的放射状渐变颜色 。在工作区中，按住键盘上的“Shift”键拖动鼠标绘制一个正圆，如图

8、5-32所示。 图5-32 绘制圆 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 运动补间动画 实例2：变形效果 图5-41 实例效果 使用运动补间

9、动画可以制作变形效果，但这与下面介绍的“变形补间动画”是完全不同的，使用运动补间动画制作的变形效果仅仅展示变形工具改变对象形状的过程。本实例展示使用变形工具改变一个矩形形状的过程，如图5-41所示。 5.2.1 运动补间动画 制作步骤： （1）新建一个文件。（2）选取矩形工具，打开属性面板，将线条颜色设置为黑色，线条粗细设置为“1”，填充颜色设置为红色，如图5-42所示。 图5-42 设置属性 （3）在工作区中绘制一个矩形，使用“对齐”面板将其放置到工作区的中央，如图5-43所示。 图5-43 绘制矩形 5.2.1 运动补间动画 制作步骤： （5）在“图层1”的第15帧插入关键帧。 （6）使用

10、变形工具 选取矩形，按下“选项栏”中的“旋转与倾斜”按钮 ，将鼠标移动到矩形上方中间的控制点附近，可以看到鼠标箭头变成 图案，如图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”键或“测试影片”可以看到动画效果。本实

11、例的时间轴如图5-50所示： 图5-50 实例时间轴 5.2.1 运动补间动画 制作步骤： （1）新建一个文件。（2）选取矩形工具，打开属性面板，将线条颜色设置为黑色，线条粗细设置为“1”，填充颜色设置为红色，如图5-52所示。 图5-52 设置属性 （3） 在工作区中绘制一个矩形，使用“对齐”面板将其放置到工作区的中央，如图5-53所示。图5-53 绘制矩形 5.2.1 运动补间动画 制作步骤： （4）将矩形转换为图形元件：选取矩形，执行“修改”菜单下的“转换为元件”命令，如图5-54所示，弹出“转换为符号”对话框，在“行为”单选栏中选择“图形”，在“名称”文本框中输入元件的名称“矩形”，如

12、图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”

13、，如图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）新建一

14、个文件。选取椭圆工具，打开属性面板，将线条粗细设置为“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 运动补

15、间动画 制作步骤： 此时的属性面板如图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帧中插入关键帧，

16、在该帧中将圆的“Alpha”值设置为“0%”，即完全透明。 （7）设置从第30帧到第50帧的运动补间动画，完成“淡出”效果。 5.2.1 运动补间动画 制作步骤： 动画制作完毕，按键盘上的“Enter”键或“测试影片”可以看到动画效果。本实例时间轴如图5-68所示： 图5-68 实例时间轴 5.2.2 变形补间动画 变形补间动画用于制作对象变形的效果。给对象指定开始形状和终止形状，由计算机自动生成中间的变形过程，实现对象从开始形状变形到终止形状的效果。注意：用于制作变形补间动画的对象必须是“图形对象”。如果要对其它对象进行变形，则先要将其转换为图形对象，例如要对文本对象进行变形，就先要将其转换

17、为图形对象。 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帧插入关键帧。使用箭头工具选取

18、圆，按键盘上的“Delete”键将其删除。 5.2.2 变形补间动画 制作步骤： （4）选取矩形工具，打开属性面板，将填充色设置为黄色。在工作区中，按住键盘上的“Shift”键拖动鼠标绘制一个正方形，如图5-72所示。选取箭头工具，采用双击一条边框的方法选取正方形的所有边框，按键盘上的“Delete”键将其删除。 图5-72 绘制正方形 5.2.2 变形补间动画 制作步骤： （5）使用“对齐”面板将正方形放置于工作区的中央，如图5-73所示。 图5-73 将正方形放置于工作区中央 5.2.2 变形补间动画 制作步骤： （6）创建变形补间动画：单击选取第1帧，打开属性面板，单击“补间”下拉列表右

19、端的向下箭头，弹出下拉列表，选择其中的“形状”，如图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）将背景

20、颜色设置为黑色：新建一个文件，打开属性面板，如图5-78所示，单击“背景颜色”按钮 ，弹出颜色卡，选择黑色，如图5-79所示。这时整个工作区呈黑色背景，如图5-80所示。 图5-78 属性面板 图5-79 修改颜色 图5-80 黑色背景 5.2.2 变形补间动画 制作步骤： （2）选取矩形工具，打开属性面板，将填充色设置为黄色。在工作区中绘制一个扁矩形，因为该矩形是用来代表线条的，所以一定要绘制得很扁，如图5-81所示。使用箭头工具选取矩形的边框，按键盘上的“Delete”键将其删除。 扁矩形图5-81 绘制矩形 5.2.2 变形补间动画 制作步骤： （3）复制矩形，分别粘贴到不同的图层中。

21、（4）使用箭头工具将“图层1”和“图层3”中的矩形拖动到工作区的左边缘上，“图层2”中的矩形拖动到工作区的右边缘上，如图5-88所示。 “图层1”中的矩形“图层2”中的矩形“图层3”中的矩形图5-88 示矩形位置 5.2.2 变形补间动画 制作步骤： （5）在“图层1”的第30帧插入关键帧。在第30帧中，使用变形工具 选取“图层1”中的矩形，按下“选项栏”中的“缩放”按钮 ，如图5-89所示。将鼠标置于矩形的右侧，此时鼠标变为 图案，如图5-90所示 。图5-89 按下“缩放”按钮 图5-90 示鼠标图案 5.2.2 变形补间动画 制作步骤： 按住鼠标左键将矩形水平向右拖动放大，如图5-91所

22、示，直到贯穿整个工作区，如图5-92所示。 图5-91 放大矩形 图5-92 矩形贯穿工作区 5.2.2 变形补间动画 制作步骤： （6）创建变形补间动画：单击选取“图层1”的第1帧，打开属性面板，单击“补间”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“形状”。创建完毕后可按键盘上的“Enter”键观看线条由短变长的效果。 （7）分别在“图层2”和“图层3”的第30帧插入关键帧，用同样的方法制作“图层2”和“图层3”中的线条动画（“图层2”中的线条向左延伸）。制作完毕后将“图层2”和“图层3”锁定。 5.2.2 变形补间动画 制作步骤： （8）在“图层1”的第33帧插入关键帧。选取文本工

23、具，在属性面板中将字体设置为“黑体”、“粗体”，将文字大小设置为“70”，将文字颜色设置为黄色，在工作区中书写“欢迎使用”几个字。使用箭头工具将文字移动到合适的位置上，如图5-93所示。使用箭头工具选取黄色线条，按键盘上的“Delete”键删除，如图5-94所示。 图5-93 书写文字 图5-94 删除黄色线条 5.2.2 变形补间动画 制作步骤： （9）将文本对象转换为图形对象：使用箭头工具选取文字，执行“修改”菜单下的“分离”命令，如图5-95所示，此时文字如图5-96所示。再次执行“修改”菜单下的“分离”命令，完成由文本对象到图形对象的转换，如图5-97所示。 图5-95 “分离”命令

24、图5-96 一次分离后的文字 图5-97 文本对象被转换为图形对象 5.2.2 变形补间动画 制作步骤： （10）在“图层1”中创建从第30帧到第33帧的变形补间动画。创建完毕后可按键盘上的“Enter”键观看线条变文字的动画效果。在“图层1”的第50帧插入关键帧，使当前状态保持到第50帧。“图层1”制作完毕后将其锁定，同时给“图层2”解锁，准备制作“图层2”中的动画。 5.2.2 变形补间动画 制作步骤： （11）在“图层2”的第33帧插入关键帧，使线条状态保持到第33帧。在第36帧插入关键帧，选取文本工具，在属性面板中将字体设置为“Arial Black”，将文字大小设置为“50”，将文字

25、颜色设置为黄色，在工作区中书写“Flash MX2004”几个字。使用箭头工具将文字移动到合适的位置上，如图5-98所示。使用箭头工具选取黄色线条，按键盘上的“Delete”键删除，如图5-99所示。 图5-98 书写文字 图5-99 删除黄色线条 5.2.2 变形补间动画 制作步骤： （12）将文本对象转换为图形对象：使用箭头工具选取文字，两次执行“修改”菜单下的“分离”命令，完成由文本对象到图形对象的转换，如图5-100所示。 图5-100 文本对象被转换为图形对象 5.2.2 变形补间动画 制作步骤： （13）在“图层2”中创建从第33帧到第36帧的变形补间动画。创建完毕后在“图层2”的

26、第50帧插入关键帧，使当前状态保持到第50帧。“图层2”制作完毕后将其锁定，同时给“图层3”解锁，准备制作“图层3”中的动画。 5.2.2 变形补间动画 制作步骤： （14）在“图层3”的第36帧插入关键帧，使线条状态保持到第36帧。在第39帧插入关键帧，选取文本工具，在属性面板中将字体设置为“Arial Black”，将文字大小设置为“90”，将文字颜色设置为黄色，在工作区中书写一个感叹号“！”。使用箭头工具将感叹号移动到合适的位置上，如图5-101所示。使用箭头工具选取黄色线条，按键盘上的“Delete”键删除，如图5-102所示。 图5-101 书写感叹号 图5-102 删除黄色线条 5

27、.2.2 变形补间动画 制作步骤： （15）将文本对象转换为图形对象：使用箭头工具选取感叹号，这里只需执行一次“修改”菜单下的“分离”命令即可完成由文本对象到图形对象的转换，如图5-103所示。 图5-103 文本对象被转换为图形对象 （16）在“图层3”中创建从第36帧到第39帧的变形补间动画。创建完毕后在“图层3”的第50帧插入关键帧，使当前状态保持到第50帧。 5.2.2 变形补间动画 制作步骤： 动画制作完毕，该实例的时间轴如图5-104所示。 图5-104 实例时间轴 5.2.3 颜色补间动画 颜色补间动画用于制作对象变色的效果。给对象指定开始颜色和终止颜色，由计算机自动生成中间的变

28、色过程，实现对象从开始颜色变化到终止颜色的效果。颜色补间动画与变形补间动画类似，其主体必须是“图形对象”，如果其它对象要实现变色效果则首先必须转换为图形对象。 实例：圆的变色效果 本实例介绍一个圆由黄色变为红色，再变为蓝色，再变为绿色的过程，如图5-105所示。 图5-105 实例效果 5.2.3 颜色补间动画 （1）新建一个文件。选取椭圆工具，打开属性面板，将填充色设置为黄色。在工作区中，按住键盘上的“Shift”键拖动鼠标绘制一个圆，如图5-106所示。使用箭头工具选取圆的边框，按键盘上的“Delete”键将其删除。 制作步骤： 图5-106 绘制圆 5.2.3 颜色补间动画 （2）使用“

29、对齐”面板将圆放置于工作区的中央，如图5-107所示。 制作步骤： 图5-107 将圆放置于工作区中央 （3）在第10帧插入关键帧。使用箭头工具选取圆，打开属性面板，将其颜色改为红色，如图5-108所示。 图5-108 修改颜色 5.2.3 颜色补间动画 （4）创建从第1帧到第10帧的颜色补间动画（实际上也就是变形补间动画）：单击选取第1帧，打开属性面板，单击“补间”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“形状”，如图5-109所示。同变形补间动画一样，设置完毕后在时间轴上可看到有一个从第1帧指向第10帧的箭头，同时参与该动画过程的帧变为绿色，如图5-110所示。 制作步骤： 图5-

30、109 “补间”下拉列表 图5-110 示箭头 箭头5.2.3 颜色补间动画 （5）在第20帧插入关键帧。使用箭头工具选取圆，打开属性面板，将其颜色改为蓝色，如图5-111所示。 制作步骤： 图5-109 “补间”下拉列表 5.2.3 颜色补间动画 （6）创建从第10帧到第20帧的颜色补间动画：单击选取第10帧，打开属性面板，单击“补间”下拉列表右端的向下箭头，弹出下拉列表，选择其中的“形状”。 制作步骤： 图5-112 修改颜色 （7）在第30帧插入关键帧。使用箭头工具选取圆，打开属性面板，将其颜色改为绿色，如图5-112所示。 （8）创建从第20帧到第30帧的颜色补间动画。 5.2.3 颜色补间动画 动画制作完毕，该实例的时间轴如图5-113所示。 制作步骤： 图5-113 实例时间轴 5.3 小结 本章介绍Flash MX2004的基本动画类型，包括逐帧动画和补间动画，其中补间动画又包括运动补间动画、变形补间动画和颜色补间动画。本章通过实例来介绍各种类型动画的制作方法和效果。 学习本章需要重点掌握应用运动补间动画制作的变形效果、旋转效果和淡入淡出效果，这几种效果在以后的综合动画制作过程中会经常用到。另外，需要掌握“对齐”面板和“混色器”面板的应用，特别是使用“对齐”面板将对象放置到工作区中央的方法。 综合习题五