1、学习目标 第 4讲 制作逐帧动画l了解帧的种类及对帧的操作 。l掌握逐帧动画的原理和制作方法 。l掌握使用逐帧动画进行细腻表达的方法。 l使用逐帧动画表现绘图效果 。 4.1 逐帧动画原理 4.2 认识原件和库 4.3 课后作业本章大纲4.1 逐帧动画原理 4.1.1 知识点讲解逐帧动画的原理比较简单，但是要制作出优秀的逐帧动画对制作者的动画技能要求较高。本节从逐帧原理入手再配合一个较简单的逐帧动画来向读者讲述如何制作逐帧动画 .一、帧的类型 （ 1）关键帧 。动作补间动画、形状补间动画、 AS代码、关键帧、空白关键帧在 【 时间轴 】 中的显示如图 4-1所示 。（ 2）普通帧 。普通帧的最
2、后一帧显示为一个中空矩形，图 4-2所示为普通帧在 【 时间轴 】 中显示的效果 。图 4-1 关键帧 图 4-2 普通帧效果 二、对帧的操作。对帧的操作有 3种方式：菜单命令（见图 4-3）、鼠标右键快捷菜单（见图 4-4）和键盘快捷键。 图 4-3 选择 【 编辑 】 下的菜单命令 图 4-4 用鼠标右键单击帧弹出的快捷菜单 常用的帧操作命令的快捷键及功能如表 4-1所示 。表 4-1 常用的帧操作命令的快捷键及功能命令 快捷键 功能说明创 建 补间动 画 在当前 选择 的 帧 的关 键帧 之 间创 建 动 作 补间动 画创 建 补间 形状 在当前 选择 的 帧 的关 键帧 之 间创 建形
3、状 补间动 画插入 帧 F5 在当前位置插入一个普通 帧 ，此 帧 将延 继 上 帧 的内容删 除 帧 Shift+F5 删 除所 选择 的 帧插入关 键帧 F6 在当前位置插入关 键帧 并将前一关 键帧 的作用 时间 延 长 到 该帧 之前插入空白关 键帧 F7 在当前位置插入一个空白关 键帧清除关 键帧 Shift+F6 清除所 选择 的关 键帧 ，使其 变为 普通 帧转换为 关 键帧 将 选择 的普通 帧转换为 关 键帧转换 空白关 键帧 将 选择 的 帧转换为 空白关 键帧剪切 帧 Ctrl+Alt+X 剪切当前 选择 的 帧复制 帧 Ctrl+Alt+C 复制当前 选择 的 帧粘 贴
4、帧 Ctrl+Alt+V 将剪切或复制的 帧 粘 贴 到当前位置清除 帧 Alt+Backspace 清除所 选择 的关 键帧 选择 所有 帧 Ctrl+Alt+A 选择时间轴 中的所有 帧翻 转帧 将所 选择 的 帧 翻 转 ，只有在 选择 了两个或两个以上的关 键帧时该 命令才有效同步符号 如果所 选帧 中包含 图 形元件 实 例，那么 执 行此命令将确保在制作 动 作补间动 画 时图 形元件的 帧 数与 动 作 补间动 画的 帧 数同步动 作 F9 为 当前 选择 的 帧 添加 ActionScript代 码三、逐帧动画的原理。逐帧动画的原理是逐一创建出每一帧上的动画内容，然后顺序播放各
5、动画帧上的内容，从而实现连续的动画效果，如图 4-5所示。 图 4-5 逐帧动画原理 创建逐帧动画的典型方法主要有以下 3种。l从外部导入素材生成逐帧动画，如导入静态的图片、序列图像和 GIF动态图片等。l使用数字或者文字制作逐帧动画，如实现文字跳跃或旋转等特效动画。l绘制矢量逐帧动画，利用各种制作工具在场景中绘制连续变化的矢量图形，从而形成逐帧动画 4.2.1 范例解析（一） 对操作帧的练习请同学们在老师的带领下对帧的操作进行进一步的熟悉，并跟随以下要求进行操作训练。 1、新建一个 Flash文档，然后在舞台上输入 “Flash帧操作 ”几个字，并设置文字颜色为 “暗红色 ”,如图 4-6所
6、示。2、选中默认 “图层 1”的第 10帧，按键盘上的 F5快捷键插入帧，如图 4-7所示。然后拖动时间轴控制柄观看舞台上文字的变化 图 4-6 输入文字 图 4-7 插入帧 3、选中默认 “图层 1”的第 5帧，按键盘上的 F6快捷键插入关键帧，如图 4-8所示，在第 5帧处改变文字的颜色为 “蓝色 ”，然后拖动时间轴控制柄观察第 5帧前和第 5帧后文字的变换。4、按 F7快捷键，分别在第 3帧和第 8帧处插入空白关键帧，如图 4-9所示，然后拖动时间轴控制柄观察舞台的变化。图 4-8 插入关键帧 图 4-9 插入空白关键帧 5、按 Ctrl+Alt+A快捷键选中所有帧，如图 4-10所示。
7、6、按 Ctrl+Alt+C快捷键复制所有帧，然后选中第 10帧，按下Ctrl+Alt+V快捷键粘贴帧，此时， 【 时间轴 】 面板如图 4-11所示，然后拖动时间轴控制柄观察舞台的效果 。图 4-10 选中所有帧 图 4-11 粘贴帧 请根据 【 知识点讲解 】 栏目讲解的帧知识和此处进行的操作和观察，思考帧、关键帧、空白关键帧的意义和用法 。4.2.1 范例解析（一） 对操作帧的练习本例使用从外部导入静态图片和使用文字的方式来制作逐帧动画，从而制作 “一马平川 ”的动画效果，其制作思路及结果如图 4-12所示 。图 4-12 制作思路及效果 1、制作背景。 （ 1）新建一个 Flash文档
8、，设置文档 【 尺寸 】 为 “550px250px”，【 帧频 】 为 “6fps”，其他属性使用默认参数 。（ 2）将默认的 “图层 1”重命名为 “背景 ”层，执行 【 文件 】 /【 导入 】/【 导入到舞台 】 菜单命令，将教学资源中的 “素材 第 4讲 一马平川 背景 .png”的图像文件导入到舞台中，并相对舞台居中对齐，如图 4-13所示 。图 4-13 导入背景后的舞台效果 2、制作骏马奔跑动画 。（ 1）在 “背景 ”图层之上新建一个图层并重命名为 “骏马 ”层，然后选中 “背景 ”图层和 “骏马 ”的第 8帧，按下 F5快捷键插入帧，此时的 【时间轴 】 状态如图 4-14
9、所示 。图 4-14 【 时间轴 】 状态一 （ 2）新建一个影片剪辑元件并命名为 “骏马 ”，进入元件的编辑模式。 （ 3）在元件内执行 【 文件 】 /【 导入 】 /【 导入到舞台 】 菜单命令，将教学资源中的 “素材 第 4讲 一马平川 骏马 马 1.png”的图像文件导入到舞台中，此时会弹出提示对话框，询问是否导入序列图片的对话框，如图 4-15所示 。（ 4）选择 按钮，将序列图片全部导入到时间轴上，时间轴效果如图 4-16所示 （ 5）返回主场景，将刚才创建好的 “骏马 ”影片剪辑元件拖入到 “骏马 ”图层，并相对舞台居中对齐，如图 4-17所示。图 4-15 导入序列图片 图
10、4-16 【 时间轴 】 效果 图 4-17 导入 “骏马 ”元件 3、制作文字逐帧动画 。（ 1）在 “骏马 ”图层上面新建一个图层并重命名为 “文字效果 ”，选中 “文字效果 ”图层的第 2帧，然后按 F6快捷键插入一个关键帧 。（ 2）选择 【 文本 】 工具，在 【 属性 】 面板中设置 【 字体 】 为 “隶书 ”， 【 字体颜色 】 为 “#FFFFFF”， 【 字体大小 】 为 “80”，然后在舞台上输入 “一 ”字，并移动文字到舞台的上边，如图 4-18所示 。（ 3）选中 “文字效果 ”图层的第 3帧，按 F6快捷键插入一个关键帧，在该帧输入一个 “马 ”字，并移动 “马 ”
11、字的位置到 “一 ”字右侧，效果如图 4-19所示 。（ 4）使用相同的方法，分别在第 4帧和第 5帧输入 “平 ”、 “川 ”字，如图 4-20和图 4-21所示。 图 4-18 第 2帧添加 “一 ” 图 4-19 第 3帧添加 “马 ” 图 4-20 第 4帧添加 “平 ” 图 4-21 第 5帧添加 “川 ” （ 5）保存测试影片，一马平川的动画效果制作完成 。4.1.4 课堂练习 制作 “ 旗帜飘扬 ” 请同学们使用绘图工具，在不同的帧上绘制红旗在空中不同的状态，从而制作如图 4-22所示的动态效果 。第 1帧 第 2帧 第 3帧 第 4帧 第 5帧 图 4-22 动态红旗效果 1、
12、新建一个 Flash文档，设置文档 【 尺寸 】 为 “250px350px”， 【帧频 】 为 “5”，其他属性使用默认参数 。2、将默认的 “图层 1”重命名为 “背景 ”图层，并在上面绘制背景和旗杆，如图 4-23所示。3、新建一个图层并重命名为 “红旗 ”图层，在第 1帧绘制如图 4-24所示的红旗。4、在第 2帧处按 F6快捷键插入关键帧，然后修改图形效果如图 4-25所示 。图 4-23 绘制背景和旗杆 图 4-24 绘制红旗 图 4-25 修改红旗 5、使用同样的方法制作余下的红旗。6、选择 “背景 ”图层的第 5帧，按 F5快捷键添加帧 。7、保存测试影片，一个红旗在微风中飘动
13、的动画制作完成 。4.2 认识原件和库 元件是 Flash动画中的重要元素，灵活的使用元件可以使开发工作达到事半功倍的效果，所以本任务首先从认识元件入手，再配合一个逐帧动画案例剖析来讲述元件这一知识点。 4.2.1 知识点讲解一、 元件和库的概念 。元件是指创建一次即可以多次重复使用的图形、按钮或影片剪辑，而元件是以实例的形式来体现，库是容纳和管理元件的工具。形象地说，元件是动画的 “演员 ”，而实例是 “演员 ”在舞台上的 “角色 ”，库是容纳 “演员 ”的 “房子 ”。如图 4-26所示，舞台上的图形如“苹果 ”、 “盘子 ”都是元件，都存在于 【 库 】 中，如图 4-27所示。 图 4
14、-26 元件在舞台上的显示 图 4-27 元件和库元件只需创建一次，就可以在当前文档或其他文档中重复使用，如图 4-27中的 “苹果 ”图形 。二、使用元件的优点。（ 1）可以简化动画的编辑。 （ 2）减小动画文件尺寸 。（ 3）加快文件的播放速度 。三、元件的类型。元件的类型有 3种，即 【 图形元件 】 、 【 按钮元件 】 和 【 影片剪辑元件 】 。4.2.2 范例解析（一） 辨别元件练习 Flash中的 3种元件对于很多 Flash用户来说都比较容易混淆，特别是图形元件和影片剪辑元件的不同更是很难区分，所以请同学们在老师的带领下做以下操作和观察来区别元件 1、新建一个 Flash文档
15、，文档属性使用默认参数 。2、单击 【 库 】 面板下面的 按钮，打开 【 创建新元件 】 对话框，设置参数如图 4-28所示。3、单击 按钮新建元件并进入元件的编辑模式，然后在元件内制作一个简单的文字逐个出现的逐帧动画，如图 4-29所示。 图 4-28 创建新元件 图 4-29 文字逐帧出现动画 4、新建一个图形元件，并命名为 “图形 ”，进入该元件编辑模式进行编辑。使用同样的方法制作一个文字逐帧出现的简单动画，如图 4-30所示。 5、新建一个按钮元件，并命名为 “按钮 ”，进入该元件编辑模式进行编辑。在不同的帧上输入不同文字，如图 4-31所示。 图 4-30 文字逐帧动画 图 4-3
16、1 在不同帧输入文字 6、返回主场景，将 【 库 】 面板中的 “影片剪辑 ”、 “图形 ”、 “按钮 ”放置到舞台上，按 Ctrl+Enter快捷键测试影片观看效果 。（ 1）影片剪辑 ”元件不停的循环播放；（ 2） “图形 ”元件不播放；（ 3）当鼠标移动到 “按钮 ”元件之上或用鼠标单击 “按钮 ”元件时都会引起 “按钮 ”元件文字的变化。 7、 关闭测试播放器，在主场景的默认 “图层 1”的第 10帧处插入帧，然后再次测试播放影片观看效果，此时 “图形 ”元件开始循环播放 。8、选中舞台上的 “图形 ”元件，然后在 【 属性 】 面板中分别设置播放方式为 “循环 ”、 “播放一次 ”、
17、 “单帧 ”3种不同选项值，如图 4-32所示，并播放测试观看影片 。图 4-32 设置播放模式 4.2.3 范例解析（二） 书写 “ 生日快乐 ” 本例将使用逐帧动画来细腻描摹在蛋糕上书写 “生日快乐 ”4个字的动画，其操作思路及效果如图 4-33所示 。1、制作背景 。（ 1）新建一个 Flash文档，设置文档 【 尺寸 】 为 “800 px700px”，文档其他属性使用默认参数 。图 4-33 操作思路及效果 （ 2）将默认的 “图层 1”重命名为 “背景 ”图层，然后执行 【 文件 】 /【 导入 】 /【 导入到舞台 】 菜单命令，将教学资源中的 “素材 第 4讲 生日快乐 背景
18、.png”图像文件导入到舞台，如图 4-34所示 。2、制作 “生 ”字的书写效果 。（ 1）新建一个 【 影片剪辑 】 元件并命名为 “文字 ”，单击 按钮进入元件的编辑模式 。（ 2）选中默认 “图层 1”的第 1帧，利用 【 文本 】 工具在舞台上输入 “生日快乐 ”4个字，在 【 属性 】 面板中设置其 【 字体 】 为 “方正舒体 ”，【 字体大小 】 为 “95”， 【 文本颜色 】 为 “红色 ”，如图 4-35所示，调整使其相对舞台居中对齐 。图 4-34 导入背景后的舞台效果 图 4-35 设置文本属性 （ 3）选中文字，按下 Ctrl+B快捷键将文本打散，如图 4-36所示
19、，用鼠标右键单击文字，在弹出的快捷菜单中选择 【 分散到图层 】 命令，将 4个文字分散到不同的图层上，此时的 【 时间轴 】 状态如图 4-37所示 。图 4-36 文字打散后的效果 图 4-37 【 时间轴 】 状态二 （ 4）删除 “图层 1”图层，然后调整图层的顺序从下到上为 “生 ”、 “日 ”、 “快 ”、 “乐 ”，如图 4-38所示。（ 5）选中最下层 “生 ”图层上的文字，按下 Ctrl+B快捷键将文字打散。 （ 6）选中 “生 ”图层的第 2帧，按 F6快捷键插入一个关键帧，选择【 橡皮檫 】 工具，擦除 “生 ”的最下边一横右边的一小部分，效果如图 4-39所示。 图 4
20、-38 调整图层顺 图 4-39 第 2帧的文字 这里擦除文字的顺序和文字被书写出来的顺序刚好相反，其目的是为了后续步骤翻转帧之后，即可制作出文字被逐渐写出的效果。 （ 7）在 “生 ”图层的第 3帧插入一个关键帧，继续擦除 “生 ”字最下边一横右端的一小部分，效果如图 4-40所示 。（ 8）重复上面的步骤，直到把文字擦除剩下很小的一部分，效果如图 4-41所示。 （ 9）此时 【 时间轴 】 状态如图 4-42所示 。图 4-40 第 3帧的文字 图 4-41 擦除文字后的效 图 4-42 擦除文字后的 【 时间轴 】 状态 （ 10）选择 “生 ”图层的所有帧，单击鼠标右键，在弹出的快捷
21、菜单中选择 【 翻转帧 】 命令，如图 4-43所示 。（ 11）按 Enter键预览动画，可以看到舞台上按书写时的笔画顺序显示出一个 “生 ”字 。（ 12）在 “生 ”图层的上面新建一个图层并重命名为 “手 ”，执行 【 文件 】 /【 导入 】 /【 打开外部库 】 菜单命令，选择打开教学资源中的 “素材 第 4讲 生日快乐 手 .flv”文件，导入其中的 “手 ”图形元件，如图 4-44所示。图 4-43 选择 【 翻转帧 】 命令 图 4-44 导入外部库 “手 .flv”中的 “手 ”图形元件 （ 13）将 “手 ”元件拖入到舞台中，移动使其袋尖位于 “生 ”字第一划的起始位置，如
22、图 4-45所示 。（ 14）选中 “手 ”图层的第 2帧，按 F6快捷键插入一个关键帧。将 “手 ”元件移动到 “生 ”字第一撇显示部分的末端，效果如图 4-46所示 。图 4-45 调整后第 1帧挤袋的位置 图 4-46 第 2帧挤袋的位置 （ 15）使用同样的方法逐帧移动 “手 ”元件，直到使用 “手 ”元件模拟写完整个 “生 ”字，如图 4-47所示 。3、制作其他文字的写作效果。 （ 1）将 “日 ”图层拖到 “手 ”图层的下边，并将 “日 ”图层的第 1帧拖到第25帧处，效果如图 4-48所示 。图 4-47 逐帧写完 “生 ”字的效果 图 4-48 调整 “日 ”图层的起始帧 （ 2）按下 Ctrl+B快捷键将 “日 ”字打散。（ 3）选中 “日 ”图层的第 26帧，按 F6快捷键插入一个关键帧。（ 4）用反向擦除的方法，将 “日 ”字擦除至最后一划，如图 4-49所示。 图 4-49 反向擦除完 “日 ”字的效果 （ 5）选中 “日 ”图层的所有关键帧，单击鼠标右键，在弹出的快捷菜单中选择 【 翻转帧 】 命令，如图 4-50所示 。图 4-50 对 “日 ”图层利用 【 翻转帧 】 命令
