04 制作逐帧动画

flash 教学课件

第4讲

制作逐帧动画学习目标

了解帧的种类及对帧的操作 。 掌握逐帧动画的原理和制作方法 。 掌握使用逐帧动画进行细腻表达的方法。 掌握使用逐帧动画进行细腻表达的方法。 使用逐帧动画表现绘图效果 。

flash 教学课件

本章大纲

4.1 4.2 4.3

逐帧动画原理 认识原件和库 课后作业

flash 教学课件

4.1 逐帧动画原理

逐帧动画的原理比较简单，但是要制作出优秀的逐帧动画对制作 但是要制作出优秀的逐帧动画对制作 者的动画技能要求较高。本节从逐帧原理入手再配合一个较简单的逐 本节从逐帧原理入手再配合一个较简单的逐 帧动画来向读者讲述如何制作逐帧动画 .

4.1.1 知识点讲解

一、帧的类型 1)关键帧 。动作补间动画、形状补间动画 形状补间动画、AS代码、关键帧、空 白关键帧在【时间轴】中的显示如图 中的显示如图4-1所示 。 2)普通帧 。普通帧的最后一帧显示为一个中空矩形 普通帧的最后一帧显示为一个中空矩形，图4-2所示 为普通帧在【时间轴】中显示的效果 。 中显示的效果

图4-1 关键帧

图4-2 普通帧效果

flash 教学课件

二、对帧的操作。 对帧的操作。 对帧的操作有3种方式 菜单命令(见图4-3)、 种方式： )、鼠标右键快 对帧的操作有 种方式：菜单命令(见图 )、鼠标右键快 捷菜单(见图 )和键盘快捷键。 捷菜单(见图4-4)和键盘快捷键。

选择【编辑】 图4-3 选择【编辑】下的菜单命令

图4-4 用鼠标右键单击帧弹出的快捷菜单

flash 教学课件

表4-1命令 创建补间动画 创建补间形状 插入帧 删除帧 插入关键帧 插入空白关键帧 清除关键帧 转换为关键帧 转换空白关键帧 剪切帧 复制帧 粘贴帧 清除帧 选择所有帧 翻转帧 同步符号 动作 F9 F5

常用的帧操作命令的快捷键及功能快捷键 功能说明 在当前选择的帧的关键帧之间创建动作补间动画 在当前选择的帧的关键帧之间创建形状补间动画 在当前位置插入一个普通帧，此帧将延继上帧的内容 在当前位置插入一个普通帧 删除所选择的帧 在当前位置插入关键帧并将前一关键帧的作用时间延长到该帧之前 在当前位置插入一个空白关键帧 清除所选择的关键帧，使其变为普通帧 清除所选择的关键帧 将选择的普通帧转换为关键帧 将选择的帧转换为空白关键帧 Ctrl+Alt+X Ctrl+Alt+C Ctrl+Alt+V Alt+Backspace Ctrl+Alt+A 剪切当前选择的帧 复制当前选择的帧 将剪切或复制的帧粘贴到当前位置 清除所选择的关键帧 选择时间轴中的所有帧 将所选择的帧翻转， ,只有在选择了两个或两个以上的关键帧时该命令才 有效 如果所选帧中包含图形元件实例，那么执行此命令将确保在制作动作补 如果所选帧中包含图形元件实例 间动画时图形元件的帧数与动

作补间动画的帧数同步 为当前选择的帧添加ActionScript代码 为当前选择的帧添加

Shift+F5 F6 F7 Shift+F6

flash 教学课件

三、逐帧动画的原理。 逐帧动画的原理。 逐帧动画的原理是逐一创建出每一帧上的动画内容， 逐帧动画的原理是逐一创建出每一帧上的动画内容，然后顺 序播放各动画帧上的内容，从而实现连续的动画效果，如图4-5所 序播放各动画帧上的内容，从而实现连续的动画效果，如图 所 示。

图4-5 逐帧动画原理

创建逐帧动画的典型方法主要有以下3种 创建逐帧动画的典型方法主要有以下 种。 从外部导入素材生成逐帧动画，如导入静态的图片、 从外部导入素材生成逐帧动画，如导入静态的图片、序列图像 动态图片等。 和GIF动态图片等。 动态图片等 使用数字或者文字制作逐帧动画， 使用数字或者文字制作逐帧动画，如实现文字跳跃或旋转等特 效动画。 效动画。 绘制矢量逐帧动画， 绘制矢量逐帧动画，利用各种制作工具在场景中绘制连续变化 的矢量图形， 的矢量图形，从而形成逐帧动画

flash 教学课件

4.2.1 范例解析(一)──对操作帧的练习 对操作帧的练习

请同学们在老师的带领下对帧的操作进行进一步的熟悉， 请同学们在老师的带领下对帧的操作进行进一步的熟悉，并 跟随以下要求进行操作训练。 跟随以下要求进行操作训练。

1、新建一个Flash文档，然后在舞台上输入“Flash帧操作”几个字 、新建一个 文档， 帧操作” 文档 然后在舞台上输入“ 帧操作 并设置文字颜色为“暗红色” 如图 所示。 如图4-6所示 ，并设置文字颜色为“暗红色”,如图 所示。 2、选中默认“图层 的第 帧，按键盘上的 快捷键插入帧，如图 的第10帧 按键盘上的F5快捷键插入帧 快捷键插入帧， 、选中默认“图层1”的第 4-7所示。然后拖动时间轴控制柄观看舞台上文字的变化 所示。 所示

图4-6 输入文字

图4-7 插入帧

flash 教学课件

3、选中默认“图层1”的第 帧，按键盘上的 快捷键插入关键帧 、选中默认“图层 的第 的第5帧 按键盘上的F6快捷键插入关键帧 所示， 帧处改变文字的颜色为“ ,如图4-8所示，在第 帧处改变文字的颜色为“蓝色”,然后 如图 所示 在第5帧处改变文字的颜色为 蓝色” 拖动时间轴控制柄观察第5帧前和第 帧后文字的变换。 帧前和第5帧后文字的变换 拖动时间轴控制柄观察第 帧前和第 帧后文字的变换。 4、按F7快捷键，分别在第 帧和第 帧处插入空白关键帧，如图 、 快捷键， 帧和第8帧处插入空白关键帧 快捷键 分别在第3帧和第 帧处插入空白关键帧，如图49所示，然后拖动时间轴控制柄观察舞台的变化。 所示，然后拖动时间轴控制柄观察舞台的变化。 所示

图4-8 插入关键帧

图4-9 插入空白关键帧

flash 教学课件

5、按Ctrl+Alt+A快捷键选中所有帧，如图 、 快捷键选中所有帧， 所示。 快捷键选中所有帧 如图4-10所示。 所示 6、按Ctrl+Alt+C快捷键复制所有帧，然后选中第10帧，按下 、 快捷键复制所有帧， 快捷键复制所有帧 然后选中第 帧 Ctrl+Alt+V快捷键粘贴帧，此时，【时间轴】面板如图 快捷键粘贴帧，此时， 时间轴】面板如图4-11所示， 所示， 快捷键粘贴帧 所示 然后拖动时间轴控制柄观察舞台的效果 。

图4-10 选中所有帧

图4-11 粘贴帧

请根据【知识点讲解】 请根据【知识点讲解】栏目讲解的帧知识和此处进行的操 作和观察，思考帧、关键帧、 作和观察，思考帧、关键帧、空白关键帧的意义和用法 。

flash 教学课件

4.2.1 范例解析(一)──对操作帧的练习 对操作帧的练习本例使用从外部导入静态图片和使用文字的方式来制作逐帧动

画，从而制作“一马平川”的动画效果，其制作思路及结果如图4-12 从而制作“一马平川”的动画效果，其制作思路及结果如图

所示 。

图4-12 制作思路及效果

flash 教学课件

1、制作背景。 、制作背景。 (1)新建一个Flash文档，设置文档【尺寸】为“550px×250px” )新建一个 文档，设置文档【尺寸】 × 文档 帧频】 ,【帧频】为“6fps”,其他属性使用默认参数 。 , 重命名为“ 执行【文件】 【 (2)将默认的“图层 重命名为“背景”层，执行【文件】/【导 )将默认的“图层1”重命名为 背景” 入】/【导入到舞台】菜单命令，将教学资源中的“素材 第4讲\一 【导入到舞台】菜单命令，将教学资源中的“素材\第 讲 一 马平川\背景 背景.png”的图像文件导入到舞台中，并相对舞台居中对齐 的图像文件导入到舞台中， 马平川 背景 的图像文件导入到舞台中 ，如图4-13所示 。 如图 所示

图4-13 导入背景后的舞台效果

flash 教学课件

2、制作骏马奔跑动画 。 、 (1)在“背景”图层之上新建一个图层并重命名为 图层之上新建一个图层并重命名为“骏马”层， 然后选中“背景”图层和“骏马” ”的第8帧，按下F5快捷键插入帧 ，此时的【时间轴】状态如图4-14 14所示 。

时间轴】 图4-14 【时间轴】状态一

(2)新建一个影片剪辑元件并命名为“骏马”,进入元件的编辑 )新建一个影片剪辑元件并命名为“骏马” 模式。 模式。 (3)在元件内执行【文件】/【导入】/【导入到舞台】菜单命令 )在元件内执行【文件】 【导入】 【导入到舞台】 将教学资源中的“素材\第 讲 一马平川 骏马\马 一马平川\骏马 ，将教学资源中的“素材 第4讲\一马平川 骏马 马1.png”的图像文 的图像文 件导入到舞台中，此时会弹出提示对话框

, 件导入到舞台中，此时会弹出提示对话框，询问是否导入序列图 片的对话框，如图4-15所示 。 片的对话框，如图 所示 按钮，将序列图片全部导入到时间轴上， (4)选择 ) 按钮，将序列图片全部导入到时间轴上，时间 轴效果如图4-16所示 轴效果如图 所示

flash 教学课件

图4-15 导入序列图片

时间轴】 图4-16 【时间轴】效果

(5)返回主场景，将刚才创建好的“骏马”影片剪辑元件拖入到“ )返回主场景，将刚才创建好的“骏马”影片剪辑元件拖入到“ 骏马”图层，并相对舞台居中对齐，如图4-17所示。 所示。 骏马”图层，并相对舞台居中对齐，如图 所示

导入“骏马” 图4-17 导入“骏马”元件

flash 教学课件

骏马”图层上面新建一个图层并重命名为“文字效果” (1)在“骏马”图层上面新建一个图层并重命名为“文字效果”, ) 选中“文字效果”图层的第2帧 然后按F6快捷键插入一个关键 选中“文字效果”图层的第 帧，然后按 快捷键插入一个关键 帧。 属性】面板中设置【字体】 (2)选择【文本】工具，在【属性】面板中设置【字体】为“隶书 )选择【文本】工具， 字体颜色】 #FFFFFF”, 字体大小】 ”,【字体颜色】为“#FFFFFF”,【字体大小】为“80”,然后 ， 在舞台上输入“ 并移动文字到舞台的上边，如图4-18所 在舞台上输入“一”字，并移动文字到舞台的上边，如图 所 示。 快捷键插入一个关键帧， (3)选中“文字效果”图层的第3帧，按F6快捷键插入一个关键帧， )选中“文字效果”图层的第3帧 快捷键插入一个关键帧 在该帧输入一个“ 并移动“ 字的位置到“ 在该帧输入一个“马”字，并移动“马”字的位置到“一”字右 效果如图4-19所示 。 侧，效果如图 所示 帧和第5帧输入 (4)使用相同的方法，分别在第4帧和第 帧输入“平”、“川”字 )使用相同的方法，分别在第4帧和第 帧输入“ 如图4-20和图 和图4-21所示。 所示。 ,如图 和图 所示

帧添加“ 帧添加“ 图4-18 第2帧添加“一 图4-19 第3帧添加“马 帧添加 帧添加 ” ”

帧添加“ 图4-20 第4帧添加“平 帧添加 ”

帧添加“ 图4-21 第5帧添加“川 帧添加 ”

(5)保存测试影片，一马平川的动画效果制作完成 。 )保存测试影片，

flash 教学课件

.1.4

课堂练习──制作“旗帜飘扬” 课堂练习──制作“旗帜飘扬” ──制作

请同学们使用绘图工具， 请同学们使用绘图工具，在不同的帧上绘制红旗在空中不同的 状态，从而制作如图4-22所示的动态效果 所示的动态效果。 状态，从而制作如图 所示的动态效果

第1帧 帧

第2帧 帧

第3帧 帧

第4帧 帧

第5帧 帧

图4-22 动态红旗效果

1、新建一个Flash文档，

设置文档【尺寸】为“250px×350px”, 、新建一个 文档， 文档 设置文档【尺寸】 × , 帧频】 【帧频】为“5”,其他属性使用默认参数 。 ,

flash 教学课件

2、将默认的“图层1”重命名为“背景”图层，并在上面绘制背景 、将默认的“图层 重命名为 背景”图层， 重命名为“ 和旗杆，如图4-23所示。 所示。 和旗杆，如图 所示 3、新建一个图层并重命名为“红旗”图层，在第 帧绘制如图 帧绘制如图4-24 、新建一个图层并重命名为“红旗”图层，在第1帧绘制如图 所示的红旗。 所示的红旗。 4、在第 帧处按 快捷键插入关键帧，然后修改图形效果如图 帧处按F6快捷键插入关键帧 、在第2帧处按 快捷键插入关键帧，然后修改图形效果如图4-25 所示 。

图4-23 绘制背景和旗杆

图4-24 绘制红旗

图4-25 修改红旗

5、使用同样的方法制作余下的红旗。 、使用同样的方法制作余下的红旗。 6、选择“背景”图层的第 帧，按F5快捷键添加帧 。 、选择“背景”图层的第5帧 快捷键添加帧 7、保存测试影片，一个红旗在微风中飘动的动画制作完成 。 、保存测试影片，

flash 教学课件

4.2 认识原件和库

元件是Flash动画中的重要元素 动画中的重要元素，灵活的使用元件可以使开发工 作达到事半功倍的效果，所以本任务首先从认识元件入手 所以本任务首先从认识元件入手，再配合一 个逐帧动画案例剖析来讲述元件这一知识点。 个逐帧动画案例剖析来讲述元件这一知识点

4.2.1 知识点讲解

一、元件和库的概念。 元件是指创建一次即可以多次重复使用的图形、按钮或影片剪辑 元件是指创建一次即可以多次重复使用的图形 ，而元件是以实例的形式来体现 而元件是以实例的形式来体现，库是容纳和管理元件的工具 。 形象地说，元件是动画的“演员 演员”,而实例是“演员”在舞台上 的“角色”,库是容纳“演员 演员”的“房子”。如图4-26所示， 舞台上的图形如“苹果”、“ “盘子”都是元件，都存在于【库 】中，如图4-27所示。

图4-26 元件在舞台上的显示

图4-27 元件和库

flash 教学课件

元件只需创建一次， 元件只需创建一次，就可以在当前文档或其他文档中重复使 如图4-27中的“苹果”图形 。 中的“ 用，如图 中的 苹果” 二、使用元件的优点。 使用元件的优点。 (1)可以简化动画的编辑。 )可以简化动画的编辑。 (2)减小动画文件尺寸 。 ) (3)加快文件的播放速度 。 ) 元件的类型。 三、元件的类型。 图形元件】 按钮元件】 元件的类型有3种，即【图形元件】、【按钮元件】和【影 元件的类型有 种 片剪辑元件】 片剪辑元件】 。

flash 教学课件

4.2.2

范例解析( ──辨别元件练习 范例解析(

一)──辨别元件练习

Flash中的 种元件对于很多Flash用户来说都比较容易混淆，特 中的3种元件对于很多 用户来说都比较容易混淆， 中的 种元件对于很多Flash用户来说都比较容易混淆 别是图形元件和影片剪辑元件的不同更是很难区分， 别是图形元件和影片剪辑元件的不同更是很难区分，所以请同学们在 老师的带领下做以下操作和观察来区别元件

1、新建一个Flash文档，文档属性使用默认参数 。 文档属性使用默认参数 2、单击【库】面板下面的 按钮， ,打开【创建新元件】对话框，设 置参数如图4-28所示。 3、单击 按钮新建元件并进入元件的编辑模式，然后在元件内 按钮新建元件并进入元件的编辑模式 制作一个简单的文字逐个出现的逐帧动画，如图4-29所示。 制作一个简单的文字逐个出现的逐帧动画

图4-28 创建新元件 图4-29 文字逐帧出现动画

本文来源：https://www.bwwdw.com/article/zpfi.html