3.2 逐帧动画
逐帧动画是一种常见的动画形式，它的原理是在连续的关键帧中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。
由于逐帧动画的帧内容不一样，不仅增加制作负担而且最终输出的文件也很大，但它的优势也很明显：因为它与电影播放模式相似，所以很适合于表现很细腻的动画，如3D效果、人物或动物急剧转身等效果。
1.逐帧动画的概念和在时间帧上的表现形式
在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧地画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。
逐帧动画在时间轴上表现为连续出现的关键帧，如图3-2所示。
■图3-2 逐帧动画
2.创建逐帧动画的方法
（1）用导入的静态图片建立逐帧动画
将jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画（参考实例：盛开的玫瑰）。
（2）绘制矢量逐帧动画
用鼠标或压感笔在场景中一帧帧地画出帧内容（参考实例：飞翔的天鹅）。
（3）文字逐帧动画
用文字作为帧中的元件，实现文字跳跃、旋转等特效（参考实例：翻转帧写字）。
（4）指令逐帧动画
在时间轴面板上，逐帧写入动作脚本语句来完成元件的变化。
（5）导入序列图像
可以导入gif序列图像、swf动画文件或者利用第三方软件（如swish、swift 3D等）产生动画序列。
3.2.1 课前学习——制作盛开的玫瑰动画
逐帧动画适合演绎细腻的动画，可以用于制作慢慢盛开的玫瑰动画。
请扫一扫获取相关微课视频
步骤一：把素材中的11张玫瑰图片素材导入到库中，如图3-3所示。
步骤二：右击时间轴上的第一帧，选择“插入空白关键帧”命令，或者按【F7】键插入空白关键帧，如图3-4所示。把“玫瑰1.png”图片拖动到舞台中央。接着右击第二帧，选择“插入空白关键帧”命令，或者按下【F7】键插入空白关键帧，把“玫瑰2.png”也拖动到舞台中央。
步骤三：为了使第二朵玫瑰花与第一朵相重合，需要使用时间轴上的绘图纸辅助工具，单击“编辑多个帧”按钮，如图3-5所示。
■图3-3 导入玫瑰图片素材
■图3-4 插入空白关键帧
■图3-5 编辑多个帧
这样，之前的所有帧上的图形内容，通过移动操作，新的帧上的玫瑰花图片与前一帧上的图片重合，如图3-6所示。
步骤四：使用同样的方法，将其他图片逐帧拖动到舞台，并使用“编辑多个帧”按钮将所有图片重合，最后，玫瑰花盛开的效果见图3-7。
■图3-6 两个帧上内容重合
■图3-7 玫瑰花盛开序列效果
3.2.2 课堂学习——制作倒计时动画
制作倒计时动画，可以使用逐帧的方法，一个帧插入一个数字，最后播放影片，数字按照帧序列逐帧播放。
步骤一：使用“文本工具（T）”，在舞台上输入文字“5”，如图3-8所示。接下来，在时间轴上依次插入“空白关键帧”，如图3-9所示。分别输入文字“4”“3”“2”“1”，如图3-10所示。
请扫一扫获取相关微课视频
■图3-8 输入文字
■图3-9 插入空白关键帧
■图3-10 依次输入数字
步骤二：将各个帧的数字进行对齐，可以使用“编辑多个帧”按钮，通过移动操作，可以让新的帧上的数字与前一帧上的数字重合，如图3-11所示。
步骤三：通过菜单栏上的“控制”|“测试影片”命令，或者按【Ctrl+Enter】组合键，测试影片，观看效果。
■图3-11 将多个帧上的图形重合
问题：还有其他的制作方法吗？请大家想一想。
方法：使用插入关键帧的方法制作倒计时动画。
步骤一：使用“文本工具（T）”，在舞台上输入文字“5”，如图3-8所示。接下来，在时间蚰上依次右击，选择“插入关键帧”命令，插入其余4个关键帧。
步骤二：这样，5个关键帧上都输入了文字“5”，并且是相互重合的。接下来，依次将关键帧上的数字，修改成“4”“3”“2”“1”。
步骤三：通过菜单栏上的“控制”|“测试影片”命令，或者按【Ctrl+Enter】组合键，测试影片，观看效果。
请扫一扫获取相关微课视频
3.2.3 课堂学习——制作打字机效果动画
本案例通过逐帧动画技术，制作打字机逐个打字的效果动画。
步骤一：选择“文本工具（T）”，在舞台上输入下画线“_”，通过菜单栏的“修改”|“转换为元件”命令将其转换为图形元件，命名为“下画线”，如图3-12所示。
■图3-12 “转换为元件”对话框
步骤二：为了制作下画线的闪烁效果，在第3帧和第5帧的位置，插入关键帧，如图3-13所示。在第2帧、第4帧、第6帧的位置插入空白关键帧，如图3-14所示。
■图3-13 插入关键帧
■图3-14 插入空白关键帧
步骤三：在第6帧的空白关键帧位置，输入文字“欢”，打开菜单栏选择“视图”|“标尺”，可以让其他文字按照“欢”字所在位置底对齐。接下来依次插入关键帧，并依次输入文字“迎”“来”“到”“动”“画”“制”“作”“课”“堂”，如图3-15所示，时间轴上的设置如图3-16所示。
■图3-15 逐帧依次输入文字
■图3-16 时间轴设置
步骤四：制作句末下画线的闪烁效果，选择图层1，在第19帧上插入帧，延长句子显示的时间。新建图层2，在第15帧的位置，插入空白关键帧，将下画线图形元件拖入舞台，并放置在句末，并在第17帧、19帧上插入关键帧，在第16帧、18帧上插入空白关键帧，如图3-17所示。这样，下画线闪烁的效果就制作完成了，如图3-18所示。
■图3-17 新建图层
■图3-18 最终效果
步骤五：将文档保存，并通过菜单栏上的“控制”|“测试影片”命令，或者按【Ctrl+Enter】组合键测试影片，观看效果。
3.2.4 课堂学习——制作写字效果动画
制作一笔一画写字的效果，可以通过逐帧制作笔画来完成。
请扫一扫获取相关微课视频
步骤一：在舞台中央输入文字“吉”，设置字符颜色为红色，字符大小为96点，如图3-19所示。
步骤二：使用【Ctrl+B】组合键，将文字分离，如图3-20所示。
步骤三：在第2帧插入关键帧，并使用工具栏中的“橡皮擦工具”，擦除“吉”字的最后一个笔画，如图3-21所示。
■图3-19 输入文字
■图3-20 将文字分离
■图3-21 擦除笔画
步骤四：在第3帧插入关键帧，擦除“吉”字的倒数第二个笔画，依次在第4、5、6、7帧上插入关键帧，并依次擦除“吉”字的笔画，如图3-22所示。
■图3-22 逐帧擦除吉字
步骤五：这时播放动画我们发现“吉”字的笔画顺序是逆序的，需要将其翻转回来。将7个帧全部选中，选中的方式有两种：一种是按住【shift】键，先选中时间轴上第1帧，再选中第7帧，即可连续选中7个帧；另外一种方法是直接从第1帧开始往最后一帧框选，如图3-23所示。选中了所有帧之后，在帧上右击，选择“翻转帧”命令，即可让文字按照正确笔画书写。
步骤六：这时播放动画，我们发现文字的笔画书写速度非常快，为了让文字能慢慢的一笔一画书写，在每个关键帧之后，插入两个普通帧，最终时间轴上的设置如图3-24所示。将文档保存，并通过菜单栏上的“控制”|“测试影片”命令，或者按【Ctrl+Enter】组合键，测试影片，观看效果。
■图3-23 选中所有帧
■图3-24 插入普通帧
3.2.5 课堂练习——制作飞翔的大雁动画
请观看教学视频和教程，自行制作飞翔的大雁逐帧动画。
步骤一：新建一个文档，使用渐变色填充天空。在“颜色”面板上，类型选择“线性”，设置“深蓝-浅蓝”的线性渐变色，如图3-25所示，使用“矩形工具”绘制一个与舞台同样大小的矩形。
步骤二：使用工具栏上的“渐变变形工具”调整渐变色的方向，通过旋转角点，改变渐变色填充方向，如图3-26所示，调整后的效果如图3-27所示。
请扫一扫获取相关微课视频
■图3-25 渐变色填充
■图3-26 渐变变形工具
■图3-27 绘制天空
步骤三：将图层1命名为“天空”，并在时间轴上第5帧插入帧，新建一个图层，命名为“大雁”，在第1帧的位置，插入空白关键帧，如图3-28所示，并绘制大雁图形，如图3-29所示。
步骤四：在“大雁”图层第2帧，插入关键帧，并使用工具栏上的“选择工具（V）”，调整翅膀部分的形状，接下来，依次在第3、4、5、6帧插入关键帧，并将每个帧上的大雁翅膀形状做调整，制作出大雁翅膀上下扇动的效果，如图3-30所示。
步骤五：测试影片观看效果后发现大雁的翅膀扇动速度太快，为了调整速度，在时间轴上的每个关键帧后插入一个普通帧，延长每个动作停留的时间，如图3-31所示。
■图3-28 图层和时间轴设置
■图3-29 大雁图形
■图3-30 逐帧调整翅膀形状
■图3-31 时间轴设置