2.1 逐帧动画
逐帧动画是利用一系列逐张变化的图像组成的动态效果，是最传统的动画形式，其方法简单来说就是一帧一帧地把每张变化的图像都绘制出来，可以说逐帧动画中需要制作的每一帧都是关键帧。用这种方式，可以完成绝大部分的动画效果，缺点就是需要逐张制作，比较耗时费力，工作量十分大，而优点就是可以灵活地把握每个动态。图2.1所示的就是用逐张绘制的方法制作的由花朵造型逐渐变成人形的实例，动画效果可参见光盘中的文件“效果\ch02\花形变人形.swf”。
图2.1 花朵逐渐变人形
逐帧动画的方式并不难掌握，但在实际应用中，要根据一般的运动规律，把所要绘制的动画进行分析，安排每一帧图像的造型、色彩与位置的变化，并把握所要绘制动画的帧数以及帧频。
2.1.1 实例Ⅰ——制作“溢彩流星”动画
根据前面所说的逐帧动画的制作方法，现在尝试利用逐帧方式制作“溢彩流星”动画，画面效果如图2.2所示，最终的动画效果可参见光盘中的文件“效果\ch02\2.1.1溢彩流星.swf”。
图2.2 溢彩流星效果
Step1 单击“文件”|“新建”命令，或按【Ctrl+N】组合键，在弹出的“新建文档”对话框的“常规”选项卡中选择“ActionScript 3.0”选项，舞台宽度和高度为默认值即可，设置帧频为12fps，单击“确定”按钮，如图2.3所示。
图2.3 新建文档
Step2 单击工具箱中的“矩形工具”
，在“属性”面板中将“笔触颜色”设置为无色
，单击“窗口”|“颜色”命令，或者单击附加工具栏中的“颜色”按钮
，在“颜色类型”下拉列表框中选择“线性渐变”选项，单击左边的颜色滑块并输入十六进制值为“030B23”，单击右边的颜色滑块并输入十六进制值为“053EBF”，如图2.4所示。
Step3 重命名“图层1”为“背景”，在该图层上拖动鼠标将矩形覆盖整个舞台，如图2.5所示，单击工具箱中的“渐变变形工具”
或按【F】键，将矩形顺时针旋转90°，如图2.6所示。编辑完成后，单击“背景”图层上的锁形图标
将该层锁定。
图2.4 设置矩形颜色
图2.5 绘制矩形
图2.6 渐变变形
Step4 新建图层并重命名为“繁星”，单击工具箱中的“多角星形工具”
，在“属性”面板“工具设置”区域单击“选项”按钮
，在弹出的“工具设置”对话框中将“样式”设置为“星形”，“边数”设置为“10”，“星形顶点大小”设置为“0.20”，如图2.7所示。在“属性”面板中将“笔触颜色”设置为无色
，“填充颜色”的十六进制值为“#FFFF00”。单击“繁星”图层的第1帧，在舞台中反复单击拖动，绘制出大大小小的满天繁星，注意在“属性”面板中观察每颗星形的“宽”与“高”尽量不要超过15像素×15像素，如图2.8所示。
图2.7 多角星形工具设置
图2.8 繁星满天的效果
Step5 同时选中“繁星”和“背景”图层的第24帧（按住【Shift】键可加选），如图2.9所示。按【F5】键可在两个图层的第24帧同时“插入帧”，则此时“繁星”和“背景”两个图层都将在动画中持续显示2s，如图2.10所示。
图2.9 在时间轴上选中帧
图2.10 在时间轴上插入帧
Step6 在“繁星”图层上新建图层并重命名为“流星”，单击“流星”图层的第1帧，保持步骤4的“多角星形工具”设置，在舞台中随意绘制一个星形，用工具箱中的“选择工具”
选中星形，在“属性”面板中设置其“位置”和“大小”：X的值为“530”，Y的值为“-8”，宽和高的值均为“30”，并单击宽高前的图标
把宽高的比例进行锁定，绘制的效果如图2.11所示。一颗比较明亮的星星出现在舞台的右上角处。选中星形并按【F8】键，把星形转换为元件，在弹出的“转换为元件”对话框中设置其“名称”为“流星”，“类型”为“图形”，如图2.12所示，单击“确定”按钮退出。
图2.11 第1帧星形的位置（箭头所指）和大小
图2.12 “转换为元件”对话框
Step7 右击“流星”图层的第2帧，在弹出的快捷菜单中选择“插入关键帧”命令（或直接按【F6】键快速插入关键帧）。选中第2帧中的元件“流星”，在“属性”面板中设置其“位置”和“大小”：X值为“490”，Y值为“20”，宽和高均为“35”，效果如图2.13所示。
图2.13 第2帧星形的位置（箭头所指）和大小
Step8 后面4个关键帧中“流星”的制作方法与第2帧相同。需注意的是用逐帧的方法绘制流星，要安排好每一帧上“流星”的大小和位置的变化。由于流星下落是一个加速运动，所以在制作后面的关键帧时流星下落的距离应该越来越大，且流星的大小也相应改变。为了给读者提供参考，以下列出每个关键帧中元件“流星”的位置与大小数据。
第1帧：X：530，Y：-8，宽：30，高：30；
第2帧：X：490，Y：20，宽：35，高：35；
第3帧：X：430，Y：60，宽：40，高：40；
第4帧：X：350，Y：120，宽：45，高：45；
第5帧：X：230，Y：210，宽：50，高：50；
第6帧：X：90，Y：320，宽：55，高：55。
制作完毕后，选中“第6帧”，单击“时间轴”下方的“绘图纸外观轮廓”按钮
，在时间轴上把“绘图纸外观轮廓”的范围设置在第1帧到第6帧之间，如图2.14所示，然后在舞台中观察其效果，如图2.15所示。
图2.14 “绘图纸外观轮廓”的范围
图2.15 打开“绘图纸外观轮廓”后前6帧的效果
Step9 此时按【Ctrl+Enter】组合键测试即可见“流星”落下的效果。下面开始为“流星”绘制拖尾及溢彩效果。在“流星”图层上新建图层并重命名为“拖尾”。选中第1帧，切换“多角星形工具”
为“椭圆工具”（或直接使用快捷键【O】进行切换），如图2.16所示。在舞台中按住【Shift】键单击并拖动鼠标任意绘制一个圆，然后按快捷键【V】切换为“选择工具”
，移动鼠标接近圆的边缘，当箭头下方出现弧形小图标时，在圆的右边拖出图2.17所示的形状。双击选中形状，在“属性”面板中将“笔触颜色”设置为无色
，单击附加工具栏中的“颜色”按钮
，在“颜色类型”下拉列表框中选择“线性渐变”选项，单击左边的颜色滑块并输入十六进制值为“F2FF00”，单击右边的颜色滑块并输入十六进制值同样为“F2FF00”，但其Alpha值为“0％”，如图2.18所示。图2.16切换“椭圆工具”
图2.17 以“圆”为基础绘制的流星拖尾
图2.18 颜色设置
Step10 选中先前所绘制的流星拖尾，设置其宽为“100”，高为“15”，按【F8】键将其转换成元件，设置“名称”为“拖尾”，“类型”为“影片剪辑”，如图2.19所示。按快捷键【Q】切换成“任意变形工具”，单击拖动元件的中心点，移至元件左端如图2.20所示位置。
图2.19 转换为元件
图2.20 设置元件中心点（箭头所指）
Step11 在“拖尾”图层第1帧上选中元件“拖尾”，按【Ctrl+T】组合键打开“变形”面板，设置其旋转角度为“-38.0°”，将其中心与“流星”图层第1帧中的“流星”中心对准，可得到流星的拖尾效果如图2.21所示。
图2.21 拖尾旋转角度设置及其与流星中心对齐的效果
Step12 选中“拖尾”元件，在“属性”面板的色彩效果区域，设置“拖尾”的Alpha值为“75％”。在“属性”面板滤镜区域中单击“添加滤镜”按钮
，在弹出菜单中选中“渐变发光”命令，然后设置渐变发光滤镜的值，模糊X与模糊Y均为“11像素”，强度为“200％”，品质为“高”，角度与距离的值都为“0”，如图2.22所示。单击滤镜属性里的“渐变”颜色条，设置其两端的十六进制颜色值均为“#FFFF99”。发光的拖尾效果如图2.23所示。
图2.22 第1帧拖尾的属性设置
图2.23 流星拖尾发光效果
Step13 选中“拖尾”图层的第2帧，按【F6】键插入关键帧，将该帧的“拖尾”元件与“流星”图层第2帧的“流星”元件对准，如图2.24所示。按【Ctrl+T】组合键打开“变形”面板，设置其“缩
放宽度”的值为“130％”“缩
放高度”的值维持“100％”不变，如图2.25所示。
图2.24 “拖尾”与第2帧的“流星”对准
图2.25 “拖尾”的缩放参数设置
第3帧至第6帧元件缩放的设置方法与第2帧相同，以下列出第3～6帧缩放值以供参考：
第3帧：缩放宽度为“140％”，缩放高度为“110％”
。
第4帧：缩放宽度为“165％”，缩放高度为“120％”
。
第5帧：缩放宽度为“230％”，缩放高度为“125％”
。
第6帧：缩放宽度为“290％”，缩放高度为“135％”
。
设置完成后，单击时间轴最下方的“编辑多个帧”按钮
，把“编辑多个帧”的范围设置成第1帧至第6帧，观察是否为图2.26所示效果，并按【Ctrl+Enter】组合键进行测试，一次流星划过的效果已经完成。
图2.26 第1帧到第6帧的拖尾流星效果
Step14 为了在场景里制作更多的流星效果，可以把制作好的流星与拖尾效果创建成元件。选中“流星”与“拖尾”两个图层上的所有帧并右击，在弹出的快捷菜单中选择“复制帧”命令。按【Ctrl+F8】组合键弹出“创建新元件”对话框，设置元件“名称”为“拖尾流星”，“类型”为“影片剪辑”，如图2.27所示。在元件编辑模式中选中“图层1”的第1帧并右击，在弹出的快捷菜单中选择“粘贴帧”命令，如图2.28所示，“流星”与“拖尾”两个图层的内容都被粘贴进来。同时选中“流星”与“拖尾”两个图层的第7帧到第24帧，按【F7】键则同时在这些帧中插入空白关键帧，如图2.29所示。这是为了防止“拖尾流星”元件放入舞台后在24帧内反复循环播放。
图2.27 复制帧与新建元件
图2.28 在新建的元件中粘帖帧
图2.29 插入空白关键帧
Step15 单击舞台编辑区域左上角的“场景1”按钮返回场景（见图2.30），新建图层重命名为“粉色流星”，选中第4帧并按【F7】键插入空白关键帧，然后按【Ctrl+L】组合键打开“库”面板，将“库”里的“拖尾流星”元件拖到舞台中，在“属性”面板中设置其位置与大小，X值为“95”，Y值为“155”，宽值为“66”，高值为“57”。在“色彩效果”区域的“样式”下拉列表框中选择“高级”选项，设置绿色值为“35％”，如图2.31所示。粉色流星在场景中的效果如图2.32所示。
图2.30 返回“场景1”
图2.31 位置与大小及色彩效果的属性设置
Step16 新建图层，重命名为“蓝色流星”，选中第9帧并按【F7】键插入空白关键帧，然后按【Ctrl+L】组合键打开“库”面板，将“库”里的“拖尾流星”元件拖到舞台中，在“属性”面板中设置其位置与大小，X值为“340”，Y值为“280”，宽值为“75”，高值为“65”。在“色彩效果”区域的“样式”下拉列表框中选择“高级”选项，设置红色值为“0％”，设置xG+值为“255”，xB+值为“255”，如图2.33所示。
图2.32 粉色流星效果
注意：用同样的方法可以在本场景中添加更多颜色的流星，每颗流星的动态最好用单独一层来表现，不同图层的“拖尾流星”元件的起始位置要错开，流星的动态才不会那么呆板。
图2.33 蓝色流星属性设置与效果
2.1.2 实例Ⅱ——制作“卡通老鼠跳舞”动画
想要绘制老鼠跳舞的动态，就要先对动作进行分析，用逐帧的方式来表现老鼠的每一个动作。一般先确定一个动作的起始帧和结束帧的动态造型，再绘制两帧之间的中间动态。然后再继续绘制起始帧和中间帧，中间帧与结束帧之间的动态，进而继续绘制更多的中间动态，一帧一帧细化，逐渐形成一个流畅的动态效果。
Step1 单击“文件”|“新建”命令，或按【Ctrl+N】组合键，在弹出的“新建文档”对话框的“常规”选项卡中选择“ActionScript 3.0”选项，舞台宽度和高度为默认值即可，设置帧频为8fps，单击“确定”按钮，如图2.34所示。
图2.34 新建文档
Step2 绘制老鼠头部形状。用“椭圆工具”绘制一个圆，用“选择工具”对其加以修改，调整成老鼠的头部形状。然后用“椭圆工具”绘制耳朵，选择不要的线删除，用“选择工具”
（快捷键【V】）调整形状，如图2.35所示。
Step3 绘制老鼠身体形状。在老鼠头部下方用“椭圆工具”
绘制一个椭圆，然后用“选择工具”
配合“部分选取工具”
（快捷键【A】）对身体形状进行修改。用“铅笔工具”绘制裙子，再用“选择工具”
配合“部分选取工具”
并利用【+】键快速对裙子曲线加点，逐步编辑修改，使裙子呈现出一定的结构，如图2.36所示。
图2.35 老鼠头部形状绘制步骤
图2.36 老鼠身体形状绘制步骤
Step4 绘制老鼠四肢。用“线条工具”绘制出老鼠四肢，注意关节点的位置要把握好，如图2.37所示。
Step5 深入刻画，绘制老鼠的细节部分，完成卡通老鼠的造型绘制。用“铅笔工具”“椭圆工具”“线条工具（快捷键【N】）”等绘制工具配合“选择工具”与“部分选取工具”，在老鼠基本形状的基础上加细节。删除多余的线条，调整好线条的造型，完成卡通老鼠的基本形象，步骤如图2.38所示。注意细节的表现，可参考人物的形象来丰富老鼠的造型，如图2.39所示。绘制完成后，可以把老鼠的位置移到舞台外作为形象参考。
图2.37 绘制老鼠四肢
图2.38 卡通老鼠造型绘制步骤
Step6 新建图层，重命名为“基本动态”。根据设计好的老鼠造型，先在该层第1帧绘制出起始动态形状，如图2.40所示。然后在第9帧绘制出结束动态。本实例中可以取巧地把第1帧的老鼠动态进行水平翻转来作为第9帧的结束动态。方法是在第9帧按【F6】键插入关键帧，整体选中老鼠，单击“修改”｜“变形”｜“水平翻转”命令，然后把老鼠向右拖动一定的距离，如图2.41所示。单击“绘图纸外观轮廓”按钮，设置其范围在第1帧至第9帧之间，就可以在舞台中同时看到第1帧和第9帧的画面以及它们的位置关系，如同图2.40与图2.41之间的距离。
图2.39 卡通老鼠造型细节
图2.40 第1帧
图2.41 第9帧
一般在进行逐帧角色动画的绘制时，应先确定其第1帧和最后一帧的基本动作。在这一步，先把形体的动态确定好，确保动态流畅，然后再一帧一帧绘制出细节，这样做可以对动态更有把握。如果一开始就想着直接用复杂的老鼠形象来绘制动态，就有可能做许多无用功。
Step7 绘制第1帧到第9帧之间的中间帧（第5帧），这一帧的动作是老鼠起跳到空中最高的位置。保持“绘图纸外观轮廓”的打开状态，确保其范围设置在第1帧和第9帧之间（见图2.42）。在第5帧插入关键帧，用上一步中提到的方法，对老鼠进行修改，绘制出以下动作，如图2.43所示。
图2.42 绘图纸外观轮廓的范围
图2.43 中间帧（第5帧）老鼠跳至空中的动态
Step8 绘制第3帧的动态。保持“绘图纸外观轮廓”的打开状态，确保其范围设置在第1帧和第5帧之间，如图2.44所示。在第3帧插入关键帧，对老鼠进行修改，绘制出图2.45所示的动作。
图2.44 绘制第3帧时绘图纸外观轮廓的范围
Step9 绘制第7帧的动态。保持“绘图纸外观轮廓”的打开状态，确保其范围设置在第5帧至第9帧之间，如图2.46所示。在第7帧插入关键帧，对老鼠进行修改，绘制出图2.47所示的动作。
图2.45 第3帧动态及其与第1、5帧的位置关系
图2.46 绘制第7帧时绘图纸外观轮廓的范围
注意：老鼠的动态不是死板机械的位移，老鼠在跳跃过程中，身体各部位需要配合，形成自然协调的动态。
Step10 继续用同样的方法，绘制出第2帧、第4帧、第6帧、第8帧的老鼠动态，如图2.48～图2.52所示。
图2.47 第7帧动态及其与第5、9帧的位置关系
图2.48 第2帧动态及其与第1、3帧的位置关系
图2.49 第4帧动态及其与第3、5帧的位置关系
图2.50 第6帧动态及其与第5、7帧的位置关系
图2.51 第8帧动态及其与第7、9帧的位置关系（第2帧复制翻转可得）
图2.52 绘图纸外观轮廓范围设置在第1～9帧时老鼠的全部动态
Step11 观察老鼠目前的动态，是从左边起跳到右边落下。如果想制作出一直跳舞的循环动态，那么就需要继续制作从右往左跳的动作。此时，可利用老鼠先前的动态来完成。选中第1帧并右击，在弹出的快捷菜单中选择“复制帧”命令，右击第18帧，在弹出的快捷菜单中选择“粘帖帧”命令。选中第2帧并右击，在弹出的快捷菜单中选择“复制帧”命令，右击第11帧，在弹出的快捷菜单中选择“粘帖帧”命令。在时间轴上选择第11帧，单击“修改”｜“变形”｜“水平翻转”命令，然后单击“绘图纸外观轮廓”按钮，设置其范围为第9～18帧之间，把第11帧的老鼠移动到图2.53所示的位置上。
图2.53 第11帧老鼠的位置
Step12 用同样的方法，复制第3帧到第12帧并水平翻转，复制第4帧到第13帧并水平翻转，复制第5帧到第14帧并水平翻转，复制第6帧到第15帧并水平翻转，复制第7帧到第16帧并水平翻转，复制第8帧到第17帧并水平翻转。注意每一帧老鼠的位置，制作完成后，老鼠是从右往左跳，其运动轨迹是抛物线，如图2.54所示。按【Ctrl+Enter】组合键测试，老鼠的动态就是一个完整的循环动作。
图2.54 老鼠从右往左跳的完整动态
Step13 老鼠的基本动态绘制好后，就可以根据这些简单的形态绘制出细节。复制“基本动态”图层，并重命名为“完整动态”，在这层上一帧一帧地绘制老鼠的细节。绘制过程中可锁定“基本动态”图层，并单击图层名称右边的方形色块，使其变成带颜色的线框显示模式，用于动作的参考。绘制新一帧时，可利用上一帧绘制好的造型，配合“铅笔工具”“选择工具”“部分选取工具”“套索工具”“任意变形工具”等对可用的部分进行复制、移动、旋转或缩放以及修改线条造型等操作，得到所需的造型。绘制完毕后，在导出影片时可删除“基本动态”图层。老鼠从左往右跳的动态序列如图2.55所示（从右往左跳只需按照基本动态的方法进行复制翻转即可），详情可参见光盘“效果\ch02\老鼠跳舞.swf”。
图2.55 老鼠动态序列帧