2.2 传统补间动画
传统补间动画是Flash中最常用的制作动画的方法，可以利用传统补间对属性为元件的图像添加位移、缩放、旋转、渐隐渐显、效果变化等动画效果，其基本方法是先制作一个关键帧，再在时间轴后面的某帧上插入关键帧，调整新关键帧的参数值，然后在两个关键帧之间创建补间动画，软件会自动计算两帧之间的变化效果。
请看一个非常简单的案例如图2.56所示，第1个关键帧就是左上角的蓝色方块元件，新插入的关键帧在第5帧上，蓝色方块元件在这一帧被移动到右下角，并进行了放大。中间3个浅蓝色方块显示的就是软件自动计算补间在这3帧上的结果。请仔细观察时间轴，如图2.57所示，其中第1帧与第5帧显示的黑色圆点代表关键帧，中间部分则是从左往右的箭头，且所有帧的颜色都显示浅紫色，表示创建的传统补间已经生效。
图2.56 传统补间动画
图2.57 传统补间动画在时间轴上的显示
元件属性有很多设置，如色彩效果的样式以及各种滤镜，都可以用传统补间来制作其参数变化的动态效果。只要处理得当，用简单的传统补间动画，就可以完成很多不错的动画效果。要想做出好的效果，就要对元件属性有一定的理解，并在实践过程中能灵活利用各种属性的参数来制作补间动画。
2.2.1 实例Ⅰ——制作“空调广告”动画
根据前面提到的补间动画制作方法，现在尝试制作一个“空调”的简单广告动画，画面效果如图2.58所示，最终的动画效果可参见光盘中的文件“效果\ch02\2.2.1空调广告.swf”。
图2.58 “空调”广告动画效果
Step1 单击“文件”|“新建”命令，或按【Ctrl+N】组合键，在弹出的“新建文档”对话框的“常规”选项卡中选择“ActionScript 3.0”选项，舞台宽度和高度为720像素×480像素，帧频为24fps，背景颜色为黑色（#000000），如图2.59所示。
Step2 单击工具箱中的“矩形工具”
，在“属性”面板中设置“笔触颜色”为无色
，单击“窗口”|“颜色”命令，或者单击附加工具栏中的“颜色”按钮
，在“颜色类型”下拉列表框中选择“径向渐变”选项，单击左边的颜色滑块并输入十六进制值为“2C73D5”，单击右边的颜色滑块并输入十六进制值为“000000”，如图2.60所示。
Step3 重命名“图层1”为“背景”，用“矩形工具”在该图层上拖动鼠标且覆盖整个舞台，如图2.61所示，单击工具箱中的“渐变变形工具”
或按【F】键，使用操作手柄将径向渐变的正圆挤压成椭圆，如图2.62所示。选中矩形，按【F8】键将其转换为名称为“背景”，类型为“图形”的元件。在时间轴上选中第180帧，按【F5】键或右击，在弹出的快捷菜单中选择“插入帧”命令，设置该动画的时长为180帧。编辑完成后，单击“背景”图层上的锁形图标
。
图2.59 新建文档
图2.60 设置矩形颜色
图2.61 设置矩形颜色
图2.62 调整径向渐变的范围
Step4 新建图层并重命名为“背景图案”，单击“文件”|“导入”|“导入到库”命令，将“素材\ch02\2.2.1空调广告”文件夹里的所有JPG、PNG格式的素材导入到库中，按【Ctrl+L】组合键打开“库”面板，把库中的素材“背景图案”拖到舞台中，按【F8】键将其转换成“名称”为“背景图案”，“类型”为“影片剪辑”的元件，在“属性”面板的“显示”区域设置“混合模式”为“叠加”，如图2.63所示。按【Ctrl+K】组合键打开“对齐”面板，勾选“与舞台对齐”复选框，单击“匹配宽和高”按钮
，如图2.64所示，把图片设置成与舞台大小一致。然后单击“对齐”区域的“水平中齐”按钮
与“垂直中齐”按钮
，使图片与舞台对齐。为了方便后面图层的编辑操作，在此步骤之后对“背景图案”图层也进行锁定。
Step5 新建图层并重命名为“空调”。把库里的素材“空调.png”拖到舞台中，按【F8】键将其转换成“名称”为“空调”，“类型”为“影片剪辑”的元件，如图2.65所示。
图2.63 调整显示混合模式
图2.64 和舞台大小匹配
图2.65 转换“空调”元件
Step6 制作空调移动动画。在“空调”图层第1帧上将“空调”元件移动到舞台外左侧（位置为X：-250，Y：250），如图2.66所示，在第15帧插入关键帧，把“空调”元件移动到舞台中间（位置为X：360，Y：250），如图2.67所示。右击第1～15帧之间的位置，在弹出的快捷菜单中选择“创建传统补间”命令。空调由左边进入舞台的动态设置完成。
图2.66 第1帧空调的位置
图2.67 第15帧空调的位置
Step7 为了凸显空调，给空调添加发光动画效果。在“空调”图层的第20帧插入关键帧，在“空调”元件的“属性”面板给空调添加发光滤镜，设置参数为模糊X和模糊Y均为“0像素”，品质设置为“高”，颜色的十六进制值为“#6699FF”，其余参数为默认值，如图2.68所示。在第25帧插入关键帧，设置发光滤镜模糊X和模糊Y均为“125像素”，强度为“230％”，如图2.69所示。复制第20帧到第30帧与第45帧的位置上，复制第25帧到第35帧上。选中第45帧按【Ctrl+T】组合键打开“变形”面板，把“空调”元件的宽度与高度的缩放值都设置为“70％”，如图2.70所示。分别选中第20、25、30、35帧并右击，在弹出的快捷菜单中选择“创建传统补间”命令。
图2.68 第20帧发光滤镜参数
图2.69 第25帧发光滤镜参数
图2.70 缩放设置
Step8 制作文字从无到有逐渐显现的效果。在“空调”图层上方新建“文字1”图层，选中第55帧并插入空白关键帧，把素材“军工科技.png”拖到舞台中，按【F8】键将其转换成“名称”为“文字1”，“类型”为“图形”的元件，具体位置为X：250，Y：100，如图2.71所示。在第70帧插入关键帧，然后回到第55帧，在“属性”面板中的“色彩效果”区域设置样式为“Alpha”，Alpha的值设置为“0％”。右击第70帧，在弹出的快捷菜单中选择“创建传统补间”命令。文字逐渐显现效果完成。
Step9 制作文字运动缓冲效果。在“文字1”图层上方新建“文字2”图层，在“文字2”层第85帧的位置上插入空白关键帧，把库里的素材“强力制冷，快人一步.png”拖入舞台，按【F8】键将其转换成“名称”为“文字2”，“类型”为“图形”的元件，把元件拉到舞台外右侧（位置为X：750，Y：340），如图2.72所示。按【Q】键或者单击工具箱中的“任意变形工具”，把其中心点设置在元件下方中间的位置上，如图2.73所示，然后按【Ctrl+T】组合键打开“变形”面板，设置其水平倾斜角度为“40°”，如图2.74所示。在第95帧插入关键帧，在“属性”面板中修改其位置属性为X：210，在“变形”面板中设置水平倾斜角度为“-35°”，如图2.75所示。在第103帧插入关键帧，在“变形”面板中设置水平倾斜角度为“0°”，如图2.76所示。在时间轴上分别选中第85帧和第95帧并右击，在弹出的快捷菜单中选择“创建传统补间”命令。文字运动缓冲效果完成。
图2.71 “文字1”元件的位置和大小参数及效果
图2.72 “文字2”在第85帧上的位置
图2.73 调整中心点的位置（箭头所指空心小圆）
图2.74 第85帧水平倾斜角度设置及效果
图2.75 第95帧水平倾斜角度设置及效果
图2.76 第103帧水平倾斜角度设置及效果
Step10 制作最后LOGO定版效果。在“文字2”图层上方新建“LOGO”图层，在第125帧插入空白关键帧，把库里的素材“标志.png”拖入舞台，然后按【F8】键将其转换为“名称”为“LOGO”，“类型”为“影片剪辑”的元件。在“属性”面板的“色彩效果”区域设置样式为“亮度”，把亮度值设置为“100％”，如图2.77所示。给“LOGO”元件添加“模糊”滤镜，设置其模糊X和模糊Y的值均为“255像素”，品质为“高”，如图2.78所示。在第137帧插入关键帧，设置其模糊X和模糊Y的值均为“0像素”，如图2.79所示。在第125帧到第137帧之间创建传统补间动画。
图2.77 “LOGO”的色彩效果样式设置
图2.78 第125帧模糊滤镜参数
图2.79 第137帧模糊滤镜参数
Step11 测试影片，发现背景图案影响了文字和定板的显示效果，因此，需要继续给背景图案制作简单的动画效果。在时间轴上选中“背景图案”图层，将该层解锁。然后在第1帧的舞台中选中“背景图案”元件，在“属性”面板的“色彩效果”区域设置样式为“Alpha”，把Alpha的值设置为“0％”，如图2.80所示。在第70帧插入关键帧，设置Alpha的值为“100％”，在这一帧上给“背景图案”元件添加“模糊”滤镜，设置其模糊X和模糊Y的值均为“0像素”，品质设置为“高”，如图2.81所示。在第130帧、第140帧插入关键帧，在第140帧将“模糊”滤镜的模糊X的值设置为“255像素”，模糊Y设置为“0像素”，如图2.82所示。选中第70帧与第130帧并右击，在弹出的快捷菜单中选择“创建传统补间”命令。背景图案的动画效果完成。
图2.80 “背景图案”元件第1帧的色彩效果设置
图2.81 “背景图案”元件第70帧的属性设置
Step12 检查并修改各个图层的显示与持续帧数。由于开始制作本实例时，就已经将“背景”图层的持续时长设定为180帧，而后创建的图层都会直接默认持续180帧，假设在操作过程中不小心删除了帧或添加了多余的帧，就应该选择右键快捷菜单中的“插入帧”命令或“删除帧”命令来增加或减少帧。其中“空调”图层与两个文字图层在“LOGO”图层出现后就不应再显示，同时选中这三个图层的第130帧并右击，在弹出的快捷菜单中选择“插入空白关键帧”命令。完成后图层与时间轴如图2.83所示。全部动画设置完成，测试无误后保存即可。
图2.82 “背景图案”元件130帧的滤镜参数
图2.83 图层设置与时间轴的设置
2.2.2 实例Ⅱ——制作“企业形象广告”动画
为了加深认识，继续完成一个“企业形象广告”动画，画面效果如图2.84所示，最终的动画效果可参见光盘中的文件“效果\ch02\2.2.2企业形象广告.swf”。
图2.84 “企业形象广告”效果
Step1 单击“文件”|“新建”命令，或按【Ctrl+N】组合键，在弹出的“新建文档”对话框的“常规”选项卡中选择“ActionScript 3.0”选项，保留默认设置，单击“确定”按钮，如图2.85所示。
图2.85 “新建文档”对话框
Step2 单击工具箱中的“矩形工具”
，在“属性”面板中将“笔触颜色”设置为无色
，设置“填充颜色”
十六进制值为“#FFCC66”。将“图层1”重命名为“背景”，在该图层上拖动鼠标将绘制的矩形覆盖整个舞台，如图2.86所示，在第160帧插入帧。编辑完成后单击“背景”图层上的锁形图标
将该层锁定。
Step3 单击“文件”|“导入”|“导入到库”命令，将“素材\ch02\2.2.2企业形象广告”中的所有PNG格式素材导入到库中。按【Ctrl+F8】组合键或单击“插入”|“新建元件”命令，创建一个“名称”为“半圆”，“类型”为“图形”的元件，如图2.87所示。把“半圆.png”拖入元件，单击舞台左上方的“场景1”按钮回到场景。
图2.86 绘制矩形
图2.87 创建元件
Step4 制作半圆落下的效果。在“背景”图层上新建图层并重命名为“半圆”，在该图层的第1帧上把“半圆”元件拖入舞台。在这一帧上选中“半圆”元件，用“任意变形工具”调整元件中心点的位置到半圆的底端，如图2.88所示。按【Ctrl+T】组合键打开“变形”面板，将缩放宽度与缩放高度都设置为“50％”，设置位置为X：280，Y：-140，如图2.89所示。在第10帧插入关键帧，调整“半圆”元件的位置为X：280，Y：250，如图2.90所示。
图2.88 修改中心点的位置
图2.89 第1帧“半圆”位置与缩放参数
图2.90 第10帧“半圆”位置与缩放参数
Step5 制作半圆变形效果。在第13帧插入关键帧，利用“变形”面板的缩放高度对“半圆”元件进行压缩，缩放高度值为“30％”，如图2.91所示，在第16帧插入关键帧，将“半圆”元件的缩放高度设置为“65％”，垂直方向抬高，位置为Y：225，如图2.92所示。选中并复制第13帧，粘贴到第18帧，将第10帧复制到第20帧。选中第1帧，按住【Shift】键单击第19帧并右击，在弹出的快捷菜单中选择“创建传统补间”命令，半圆下落并变形的动画完成。
图2.91 第13帧“半圆”缩放参数
图2.92 第16帧“半圆”位置与缩放参数
Step6 制作“大”字渐显的效果。新建一个“名称”为“大”，“类型”为“图形”的元件，将库里的素材“大.png”拖入元件图层1的第1帧中。单击舞台左上方“场景1”按钮回到场景，新建图层并重命名为“大字”，在第25帧插入空白关键帧，将做好的“大”元件拖入这一帧的舞台中，按【Ctrl+K】组合键打开“变形”面板，设置缩放宽度和缩放高度的值均为“55％”，设置位置为X：225，Y：140，与半圆进行对位，如图2.93所示。在第40帧插入关键帧。回到第25帧，将“大”元件色彩效果的样式属性设置为“Alpha”，把Alpha（即不透明度）的值设置为“0％”，如图2.94所示。在第25～40帧之间创建传统补间，大字逐渐显现效果完成。
图2.93 第25帧元件“大”的位置与缩放参数
图2.94 第25帧元件“大”的色彩效果样式设置
Step7 制作方块运动效果。在“大字”图层的下方新建图层并重命名为“左”，在该层第60帧插入空白关键帧，单击工具箱中的“矩形工具”，在“属性”面板中将“笔触颜色”设置为无色
，设置“填充颜色”
十六进制值为“#000000”，在舞台中绘制一个25像素×25像素的矩形，按【F8】键将其转换成“名称”为“方格”，“类型”为“图形”的元件。调整其位置为X：188，Y：176，如图2.95所示。复制第60帧到第45帧，在第45帧把“方格”位置调整为X：270，Y值不变，如图2.96所示。在第45～60帧之间创建传统补间。在时间轴上选中图层“左”并右击，在弹出的快捷菜单中选择“复制图层”命令，将“左复制”图层重命名为“右”，在图层“右”第60帧的位置上，将“方格”元件的位置设置为X：348，Y值不变，如图2.97所示。方块运动效果完成。
图2.95 图层“左”第60帧“方格”的位置与大小及效果
图2.96 图层“左”第45帧“方格”的位置
图2.97 图层“右”第60帧“方格”的位置及效果
Step8 制作轮子转动元件。新建一个“名称”为“轮子”，“类型”为“影片剪辑”的元件。将库里的素材“大”元件拖入“轮子”元件图层1的第1帧中。单击工具箱中的“椭圆工具”，在“属性”面板中将“笔触颜色”设置为无色
，设置“填充颜色”
十六进制值为“#FFCC66”，在“轮子”元件中新建图层2，将图层2移动到底层，在该层第1帧绘制一个直径为200像素的圆。将圆和“大”元件进行对齐，如图2.98所示。然后在图层2第15帧插入帧。在图层1第15帧插入关键帧，在第1～15帧之间创建传统补间，选中第1～14帧之间任何一帧，在“属性”面板“补间”区域将“旋转”设置为“顺时针”，“旋转次数”设置为“1”，如图2.99所示。
图2.98 对齐的效果
图2.99 补间旋转方向与次数设置
Step9 制作轮子的运动效果。单击舞台左上方“场景1”按钮回到场景，在“大字”图层下方新建图层并重命名为“轮子左”，在第75帧插入空白关键帧，把“轮子”元件拖入舞台。按【Ctrl+T】组合键打开“变形”面板，设置缩放宽度和缩放高度的值均为“55％”，如图2.100所示。然后将“轮子”元件与“大字”图层进行对位，因为“轮子”元件和“大”元件的大小不一致，因此所在的位置也不同，需手动对位，以“大字”图层可以完全覆盖住“轮子左”图层的大字图案为准。在第90帧插入关键帧，利用“变形”面板设置缩放宽度和缩放高度的值均为“25％”，将轮子缩小，并把轮子移动到图2.101所示的位置上。复制“轮子左”图层并重命名为“轮子右”，在该层第90帧上将轮子放置到图2.102所示的位置即可，此时所有图层组合成车形图标。
Step10 制作车子形图标整体运动的效果。同时选中“大字”“轮子左”“轮子右”“左”“右”“半圆”这6个图层（见图2.103）的第100帧，按【F6】键统一插入关键帧，继续同时选中这6个图层的第120帧并插入关键帧，在第120帧的位置上框选所有元件，设置位置为X：290，Y：140，如图2.104所示。
图2.100 缩放设置
图2.101 位置及缩放设置
图2.102 图层“轮子右”第90帧“轮子”元件的位置
图2.103 六个图层
图2.104 第120帧车子形图标整体所在的位置
Step11 制作企业名字定版效果。在“大字”图层上方新建图层并重命名为“捷运”，在第100帧插入空白关键帧，同时把库里的素材“捷运（文字）.png”拖入舞台，按【F8】键将位图素材转换成“名称”为“捷运”，“类型”为“影片剪辑”的元件。设置其位置参数为X：-450，Y：100，如图2.105所示。给“捷运”元件添加“模糊”滤镜，设置其模糊X值为“255像素”，模糊Y值为“0像素”，品质设置为“高”，如图2.106所示，在第120帧插入关键帧，设置位置参数为X：55，Y：150，宽为“240”，高为“141”，并把“模糊”滤镜模糊X和模糊Y的值均设置为“0像素”，如图2.107所示。本实例制作完成，可按【Ctrl+Enter】组合键进行测试，确定效果无误后对文件进行保存。
图2.105 第100帧“捷运”元件位置设置
图2.106 第100帧“捷运”元件效果及“模糊”滤镜参数设置
图2.107 第120帧“捷运”元件效果及“模糊”滤镜参数设置