逐帧动画-课件

• 制作在雪地中奔跑的豹子 ，并添加文字。
复习工具的使用
第四课 逐帧动画
逐帧动画概念
• 逐帧动画这是一种常见的动画手法，它的原理是 在“连续的关键帧”中分解动画动作，也就是每 一帧中的内容不同，连续播放而成动画。 • 由于逐帧动画的帧序列内容不一样，不仅增加制 作负担而且最终输出的文件量也很大，但它的优 势也很明显：因为它相似与电影播放模式，很适 合于表演很细腻的动画，如3D效果、人物或动物 急剧转身等等效果。
新建图层
• 新建图层改为雪景，将雪景图片导入舞台。 用任意变形工具将图片大小调整为舞台大 小。 • 将背景图层拖到“豹子”图层下面。
设置标题文字
• 在场景中新建一个图层，单击工具栏上的 文字工具按钮 ,选择字体，设置字体大小 35；颜色为深蓝色。在文本框输入“奔跑 的豹子”五个字，居中放置。
实践
• 逐帧动画是在时间帧上逐帧绘制帧内容， 由于是一帧一帧的画，所以逐帧动画具有 非常大的灵活性，几乎可以表现任何想表 现的内容。 逐帧动画在时间帧上表现为连 续出现的关键帧 。
创建逐帧动画的几种方法
• （1）用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中， 就会建立一段逐帧动画。 • （2）逐帧绘制 用鼠标或压感笔在场景中一帧帧的画出内容。 • （3）导入序列图像 可以导入gif序列图像、swf动画文件或者利用第3 方软件（如swish、swif做奔跑的豹子动画。 • 再做一做让豹子往前奔跑的动画。 • 分别保存为豹子1.fla和豹子2.fla，并用ctrl+回 车键进行动画测试，测试的同时会产生豹子 1.swf和豹子2.swf文件。
你会做在雪地中奔跑的豹子吗?
图层的应用
• 图层就像透明的醋酸纤维薄片一样，在舞台上一 层层地向上叠加。图层可以帮助您组织文档中的 插图。可以在图层上绘制和编辑对象，而不会影 响其它图层上的对象。如果一个图层上没有内容， 那么就可以透过它看到下面的图层。 • 要绘制、上色或者对图层进行修改，需要在时间 轴中选择该图层以激活它。时间轴中图层旁边的 铅笔图标表示该图层处于活动状态。一次只能有 一个图层处于活动（编辑）状态（尽管一次可以 选择多个图层），为不影响其它的层可以将其它 的层暂时锁定。

动画欣赏
Flash CS3
一张纸,一个动作 一张纸,一个画面 一张、一张、又一张…… 连续播放，就构成了动画。
简
Flash CS3
单
的 授
课 人
逐
何 超
帧
动
画
任务一：
Flash CS3
制作流程
Flash CS3
1
导入蝴蝶图片到库
2 插入第1帧，将图片拖 到舞台，并调整大小。
3 在第2帧插入关键帧，
用“任意变形工具”向
4
左右调整图片。
5 重复第三步、第四步 多次 6 测试动画，调整动画时间
ห้องสมุดไป่ตู้
任务2：
Flash CS3
大显身手
Flash CS3
总结: 逐帧动画是由一幅一幅画面构成的 每一个画面 、一个动作……就是一帧 所有帧连续播放就成了动画。
Flash CS3
动画欣赏
Flash CS3
世界因你而精彩 你的动画世界,你做主!

逐帧动画
每一帧都由手工绘制或导入图片完
成的动画称为逐帧动画.
达标检测
从桌面：\学生材料\达标检测文件夹中选本 组图片素材，制作一个逐帧动画，测试后保存到
桌面:\学生材料\学生作品文件夹中，通过本节课的学习，你有什么收获呢？
优胜小组
课后延伸
请同学们将学习生活中的一组动作拍成
1.参照导学案 2.小组合作完成
3.学习时间为6分钟
动画初探 小结
新建FLASH文档 执行导入命令 选择图片导入
插入空白关键帧 重复图片导入操作
测试动画 保存文档
第二站：省时省力做动画 “矮和尚出场”
新建一个Flash文档，将桌面:\学生材料\
省时省力做动画 文件夹中的矮和尚图片素材导 入到舞台上,并保存到桌面:\学生作品文件夹中， 名字为“ahs.fla”。 1、独立完成。
2、仔细观察操作过程中与第一站有什么不同。
3、第二站与第一站的相同点是什么？
第三站：手随心动 “吃苹果”
打开 桌面 :\学生材料 \ 手随心动 文件夹 中的“吃苹果 .fla ”文档 ,并借助 橡皮工具 ， 完成一个吃苹果的动画。并将作品保存到： 桌面:\学生作品文件夹中。 要求：
1.参照学案
2.小组合作完成 3.学习时间为5分钟
逐帧动画
学习目标
1.知道什么是逐帧动画。 2.会在Flash中导入图片素材、添加关键帧 3.会测试影片。
第一站：动画初探 “胖和尚出场”
新建一个FLASH文档，将桌面:\学生材料\动画初 探 文件夹中的胖和尚图片导入到舞台上。 并保存到 桌面:\学生作品文件夹中，名字为“phs.fla”。
要求：
图片，做成逐帧动画。

四、认识Flash界面 在桌面上用鼠标左键双击
在创建新项目中选择——Flash文档
工
时间轴
具
箱
舞台
属性面板
1. 帧的概念：构成动画的每一个画面叫做一个帧。
在时间轴上，每一个小方格就是一帧。帧又分为普通帧、关键 帧、空白关键帧。逐帧动画的每一帧都是关键帧。只有关键帧是可 以编辑的。在时间轴上显示为黑色的圆点。
认识逐帧动画
明湖中学 杨 丽
观看动画片说出动画的制作类型
一、动画的基本原理
动画就是通过连续播放一系列画面，给视觉造成图像连 续变化的感觉，达到理想的动画效果。它的基本原理与电 影、电视是一样，都是利用了视觉原理。动画不是“会动 的画”，而是“画出来的运动”。
二、常用的动画制作软件
1、二维动画制作软件： Ulead GIF AnimatorGIF是一种动画制作软件 Flash是一种集动画创作与应用程序开发于一身的软件， 制作的动画具有点小精悍的特点。
课堂实操: 制作“倒计时效果”动画
制作在一个红色圆角矩形背景下显示“5、4、3、…1、GO！”的 倒计时动画效果（设计效果如下图所示实操步骤以及使用的工具 选择工具
1、打开Flash软件，新建一个Flash文档。
2、点击舞台，在属性面板中把舞台大小设置为200*160像 素。背景颜色修改为红色。
2. 帧的分类：空白帧、关键帧和空白关键帧
空白关键帧 关键帧 空白帧 播放头 普通帧
帧频率
3. 帧的操作：包括添加帧 、删除帧 、 清除关键帧 、选择所有帧 、复制帧 、 粘贴帧 、移动帧 和翻转帧
下面我们来观看几个比较有代表性的，利用逐帧动画制作的小动画
行走的土豆人
第1帧
第2帧

图 1-14 第3帧的效果
图1-15 逐帧动画的时间轴效果
(4)接下来，就按顺序在后面的帧上插入关键帧，然后Ctrl+Shift+V原 位置粘贴，旋转到适当位置。完成后的时间轴和舞台效果如图1-15所示。
第一单元 我的第一个动画 (5)选择该层的第40帧，单击右键，在弹出的快捷菜单中选择“插入帧” 命令，等效的快捷键是F5。本例修改后的时间轴如图1-16所示：
（2）按快捷键shift+F9打开“混色器”面板，将左侧色标设为浅紫色， 右侧色标设为深紫色。按住鼠标拖动，在舞台中心位置绘制一个长条状 矩形。
第一单元 我的第一个动画 （3）单击选择工具，将鼠标移至矩形的上边线，当鼠标右下角出现一 小段圆弧时，按住左键向上拖动，会在矩形顶端产生弧状。如图1-8所 示。
6.测试存盘
执行“控制”→“测试影片”命令或按快捷键Ctrl+Enter，那么动画 就会在一个新窗口中播放了。本动画最终效果如图1-19所示。执行 “文件”→“保存”命令，将文件保存。
图1-19 折扇效果图
第一单元 我的第一个动画
举一反三
1.倒计时逐帧动画 动画效果
制作说明：在每一帧上输入不 同的数字，测试影片时，即可 看到不断变化的数字效果。
图 1-11 用任意变形工具旋转图形
第一单元 我的第一个动画
4. 创建扇子展开的逐帧动画
(1)选择第二帧，单击右键，从弹出的快捷菜单中选择“插入关键帧” 命令(等效的快捷键为F6)，如图1-12所示。
图 1-12 插入关键帧
图1-13 第2帧的效果
(2)选中第二帧上的扇片，并把它的中心点移到扇片与中心线相交处，然后
图1-16 插入帧使画面延时
第一单元 我的第一个动画

课堂总结
谢谢！
4 制作逐帧动画
任务三 制作逐帧动画
① 制作“摇摆的音符”逐帧动画（关键帧）
灵活使用“选择工具”和“任意变形工具”调整位置大小方向
② 制作“数字编码”逐帧动画（空白关键帧）
观看《任务书》《帮助微视频》
作品展示评价
5 修改完善作品
如果你已经完成所有的任务，请播放动画看 一看自己的成果，及时进行修改和完善。最后 不要忘记保存和上交你的作品！
3 任务二 绘制 个创意音符元件
① 新建图形元件“音符1”、“音符2”、“音符3”； ② 用“椭圆工具”和“多角星工具”画音符头； ③ 用“线条工具”画音符尾； ④ 配合“选择工具”调整细节，绘制你自己的创意音符吧！
提示：“多角星工具”藏在“矩形工具”中，长按可切换 具体步骤参考《帮助微视频》
制作逐帧动画典型方法
①
外部导入素材(静 态图片/序列图片)
②
绘制矢量逐帧动 画，用鼠标或压 感笔，在场景中 一帧帧画出帧内 容。
③
绘制元件（文字 元件/图形元件） 再用元件制作逐 帧动画 (本课使用方法)
制作逐帧动画有哪些步骤？
阅读 P27 的“学习任务”板块
1 确立主题
模拟信号 声音
数字信号 二进制数
2 构思作品
角 色
动 画
2 构思作品
2 构思作品
音 符
数字 编码
小 女 孩
角 色
唱歌 跳舞
摇
动
摆
画 慢一拍
出现
任务一 添加背景和主角
① 新建“背景”图层 ② 插入背景并调整位置 ③ 新建“女孩”图层 ④ 逐帧插入孩动画
调整位置 ⑤ 调整图层顺序
提示：《任务书》《帮助微视频》
3 制作角色元件

课后习题
3、在计时器控件中，interval属性的作用是（B）。 A．决定是否响应用户操作 B．设置计时器事件之间的间隔 C.存储程序所需要的附件数据 D.设置计时器顶端和其容器之间的距离
课堂总结
1、设置left属性的数值来改变位置。
2、Timer控件有
指定Timer事情之间的间隔 和
。
3、OptionButton来显示选项，每个选项代表一种选择，用户
让它们间隔一定的时间交替 显示，并不断重复。
新知讲解
2、位置变化
形态变化的小兔子实现了“原地跑”的效果，要让它向 左跑，可以每间隔一定的时间，让小兔子图片向左移动，即 设置兔子图片left属性减少一定的数值。
新知讲解
3、速度变化 想加快兔子跑的速度，可通过增加步幅和加快频率两种
方式来实现。增加步幅，就是让小兔子每个周期的移动距离 加大，即left属性值减少得多一些；加快频率，就是在相同 的周期内多跑几次，通过Timer控件来实现。
每个选项代表一种选择，用户
。
例：设置三种不同的跑动速度。对应不同的事件。
新知讲解
VB常见的分支结构是IF语句。
是
条件
否
语句组1
语句组2
新知讲解
兔子形态变化的流程图
是
a=1?
否
载入第1张图片 将a的值改为2
载入第2张图片 将a的值改为1
新知讲解
新知讲解 VB中常用的关系表达式和逻辑表达式
新知讲解
第四节 逐帧动画
粤教版 八年级下
新知导入
观看这个动画，平常只要说到动画制作，我们就会想到flash；想一想， VB进行能不能进行制作动画呢？
新知讲解
观看图片：分析“兔子跑”程序设计思路。

中文Flash 基础与案例教程——Flash CS6（第2版）
本课小结
知识要点 知 识 获 取 理解逐帧动画的原理 了解帧类型以及帧的基本操作 掌握几种创建逐帧动画的方法 掌握绘图纸外观的使用方法 掌握程度
中文Flash 基础与案例教程——Flash CS6（第2版）
课程配套资源
1. 视频教学
视频教学：扫一扫
逐帧动画案例
——QQ表情 2. 在线开放课程
中国大学MOOC “二维动画设计”
中文Flash 基础与案例教程——Flash CS6（第2版）
Hale Waihona Puke 实训案例实训案例 技 能 掌 握 任务 1：摇动的花 任务 2：爱在心中 任务 3：心的绘制 任务 3：蒲公英效果
技能目标 用导入的位图建立逐帧动画 打字效果 绘制矢量逐帧动画 导入序列图像创建逐帧动画
学习目标
理解逐帧动画的原理，了解帧类型以及帧的基本操作，掌握几 种创建逐帧动画的方法，掌握绘图纸外观的使用方法。
中文Flash 基础与案例教程——Flash CS6（第2版）
预备知识
1.逐帧动画原理
逐帧动画是一种常见的动画形式，其原理是在连续的关键帧中分解动画动作，也 就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成的动画。
中文Flash 基础与案例教程——Flash CS6（第2版）
知识要点
1．帧的操作
（1）插入帧 （2）删除帧 （3）选择帧 （4）移动和复制帧
中文Flash 基础与案例教程——Flash CS6（第2版）
知识要点
2．绘图纸功能
（1）绘图纸外观 （2）绘图纸外观轮廓 （3）编辑多个帧 （4）修改绘图纸标记
4.1.1.fla 4.1.2.fla 4.1.3.fla 4.1.4.fla QQ表情. fla ★★ ★★ ★★★ ★

标题栏
菜单栏
浮动面板
工具条
图层区
帧格
时间轴
工具选项框
舞台 活动面板
属性面板
逐帧动画特点：
是一种传统的动画形式，制作起来比 较繁琐，需要将动画的每一帧都绘制 出来，要求创造者具有较强的逻辑思 维能力和一定的较大；
作品欣赏
将库中的元件“壳2”拖到场景1中，以相同的坐标值。 5. 用同样的方法将其它元件插入到相对应的帧中，位
置坐标一律相同。 6. “蜗牛出壳”动画制作完成，大家欣赏自己的作品
吧！
测试和保存影片
测试：Ctrl+Enter 保存：Ctrl+S
案例小结
• 本案例制作的是蜗牛出壳动画效果，在制 作过程中主要用到了插入了白色关键帧。 需要注意的是，制作逐帧动画时，关键帧 的数量可以自行设定，各个关键帧的内容 也可任意改变，只要两个相邻关键帧上的 内容连续性合理即可。
1. 豹子 2. 鸟儿 3. 小象 4. 大雁 5. 马儿
使用 “库”
• 单击“文件”菜单下的“以库打开”选项， 打开“以库打开”对话框。
• 找到E盘中的“教学素材\蜗牛出壳.fla”，文 件类型为“Flash影片”，单击“打开”按 钮，打开“蜗牛出壳.fla”库.
逐帧动画制作方法
1. 将“图层1”改名为“出壳”。 2. 选中“出壳”图层的第一帧。 3. 将“壳1”拖到场景1中合适的位置（记住坐标值）。 4. 右键单击第二帧，从中选择“插入空白关键帧”，

鼠标或压感笔在场景中一帧帧的画出帧内容.
3,制作逐帧动画(优缺点) ,制作逐帧动画(优缺点)
(1)它特别适合于那些复杂的,每一帧中的图像都 )它特别适合于那些复杂的, 有变化的动画. 有变化的动画. (2)逐帧动画会增加文件体积. )逐帧动画会增加文件体积.
4.绘图纸功能 (1)绘画纸的功能 ) 绘画纸是一个帮助定位和编辑动画的辅助功能, 这个功能对制作逐帧动画特别有用.通常情况下, Flash 在舞台中一次只能显示动画序列的单个帧. 使用绘画纸功能后,你就可以在舞台中一次查看两 个或多个帧了.
33制作逐帧动画制作逐帧动画优缺点优缺点11它特别适合于那些复杂的它特别适合于那些复杂的每一帧中的图像都每一帧中的图像都有变化的动画有变化的动画
第六讲: 第六讲:动画制作
--逐帧动画 --逐帧动画
tcy@
教学内容 从本节课起,我们将逐渐给大家介绍Flash8.0 中的五种常见的动画形式:逐帧动画,形状补间动 画,动作补间动画,遮罩动画,引导线动画.
下节课内容
(讲解形状补间动画) 形状补间动画 课后预习
�
1,逐帧法:就是对每一帧的内容逐个编辑,按一定 逐帧法: 的时间顺序播放时所形成的动画.
2.创建逐帧动画的几种方法 (1)用导入的静态图片建立逐帧动画
用jpg,png等格式的静态图片连续导入Flash 中,就会建立一段逐帧动画.
(2)导入序列图像
可以导入gif序列图像,swf动画文件或者利用 第3方软件(如swish, 3D等)产生的动画序列.
(2)绘图纸各个按钮的介绍
绘图纸外观按钮 :按下此按钮后,在时间帧的上方,出现绘 图纸外观标记.拉动外观标记的两端,可以扩大或缩小显示 范围. 绘图纸外观轮廓 :按下此按钮后,场景中显示各帧内容的轮 廓线,填充色消失,特别适合观察对象轮廓,另外可以节省 系统资源,加快显示过程. 绘图纸显示多帧按钮:按下后可以显示全部帧内容,并且可以 进行"多帧同时编辑". 修改绘图纸标记: 按下后,弹出菜单,菜单中有以下选项: 总是显示标记 绘图纸 2 绘图纸 5 绘制全部

《制作逐帧动画》PPT课 件
本演示文稿将介绍如何制作逐帧动画，包括定义、工具和软件、基本原理和 步骤、创作技巧和注意事项、应用领域和案例分析，以及总结和展望。
逐帧动画的定义和概述
逐帧动画是一种通过连续排列的静止图像，以每秒多个帧的速度展示，从而 创造出连续运动的效果。它是一种古老而又魔幻的艺术形式。
逐帧动画的应用领域和案例分析
影视制作
逐帧动画可用于电影、电视剧和广告中，制造特殊 效果和精彩场景。
游戏开发
逐帧动画为游戏角色和动态场景增添了视觉上的吸 引力和真实感。
总结和展望
逐帧动画是一种创造力和技术的完美结合，它有着广泛的应用领域。未来， 随着技术的不断发展，逐帧动画将继续创造出更多精彩的作品。
键帧。
3
3. 拼接
将绘制好的图像连接起来，形成连列。
将动画序列导出为视频文件，添加音效 和特效。
逐帧动画的创作技巧和注意事项
1 表达动态
运用丰富的线条和色彩，呈现物体的运动状态。
2 把握节奏
关注时间间隔，使动画流畅且有趣。
3 运用动画原理
如重力、加速度和反射等，增强动画的真实感。
制作逐帧动画的工具和软件
传统绘画工具
如铅笔、纸张和动画台
数码绘画软件
如Photoshop和Procreate
动画制作软件
如Toon Boom Harmony和 Adobe Animate
逐帧动画的基本原理和步骤
1
1. 规划
制定故事板，并划分关键帧和动画序列。
2. 绘制
2
使用绘画工具或软件，逐帧绘制每个关

制作思路：
制作一连串关键帧后，将这些画面连续播放就 会形成逐帧动画。
步骤1：设置舞台大小和播放速度
逐帧动画
步骤2：插入关键帧， 步骤3：插入多个关键帧， 步骤4：保存文件
作业：
1、利用图片素材制作“行走的马” 2、制作走动的鸡宝宝
• 归纳与评价：
以小组为单位，归纳逐帧动画的优势和不足 评价作品
ቤተ መጻሕፍቲ ባይዱ
逐帧动画
本节重点：
1、如何启动flash8 2 什么是关键帧？ 3 什么是逐帧动画？
4 怎样才能制作好一个逐帧动画？
关键帧的概念知道吗？
关键帧就是帧内包含有决定动画 内容、动画动态幅度和动画动作 轨迹特征的画面。 关键帧在时间轴上的标记为黑色实心圆点
空白关键帧
普通帧
什么是逐帧动画
• 将一个动画的连续动作分解成一张张的图 片，把每一张图片用关键帧描绘出来， Flash将这些关键帧连续播放，形成动画效 果。掌握本节内容可以做出许多生动有趣 的动画。因此，同学们在本节的学习过程 中，会产生非常高的学习热情，为今后的 学习打下坚实的基础。

1、帧动画的原理 每一个关键帧上显示不同的数字 或者图形组成动画。
2、帧、关键帧、空白关键帧的区别
关键帧能显示数字或者图像或者发生变化
帧可以延续关键帧上对象的时间，不发生任何改变。 空白关键帧使关键帧对象消失，画面一片空白。
11
F6 记是一个实心黑点 .
逐帧动画就是每一个关键帧上放置一个不同的对
象
6
？ 如何让关键帧对象延续时间？
插入普通帧让关键帧对象延续。标志是一个空长方形。
F5
7
？ 如果让动画关键帧内容消失？
插入空白关键帧，前面关键
F7 帧内容将消失.标志是空心圆圈。
8
课外研究
? 说说制作思维
9
10
任务四：教学小结
第2课制作逐帧动画作品
1
2.1Biblioteka 的种类帧是构成 Flash 动画最基本的单位，帧分为普通帧、 关键帧和空白关键帧三种类型，而对帧的所有操作都 是在“时间轴”面板中进行的 。
关键帧
普通帧
空白关键帧
时间轴面板
3
2 创建帧
1．创建关键帧
关键帧是定义动画变化的帧，要制作动画，必须创建关 键帧。
在时间轴上单击选中要创建关键帧的帧，然后鼠标右键 >“插入关键帧”选项，或按快捷键【F6】，即可在选中 的帧上插入关键帧 。
插入关键帧
4
2．创建空白关键帧
插入空白关键帧
选中帧后，鼠标右 键>“插入空白关键帧” 或按快捷键【F7】，
即可插入空白关键 帧。
3．普通帧是延长关键帧的时间
选中要创建普通帧 的帧，鼠标>“插入 帧”右键或者按快 捷键【F5】即可插 入一个普通帧。
插入普通帧

1、有内容的关键帧 2、空白关键帧
• 帧——就是影像动画中最小单位的单幅 影像画面，相当于电影胶片上的每一格镜 头。 一帧就是一副静止的画面，连续的帧 就形成动画，如电视图象等。
活动1 逐帧动画
• 关键帧——任何动画要表现运动或变化， 至少前后要给出两个不同的关键状态，而 中间状态的变化和衔接电脑可以自动完成， 在Flash中，表示关键状态的帧叫做关键帧。
创建逐帧动画的几种方法
（1）用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中，就会
建立一段逐帧动画。
（2）绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧帧的画出帧内容。
（3）文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。
（4）导入序列图像
标题栏
菜单栏
逐帧动画欣赏
逐帧动画欣赏
逐帧动画欣赏
逐帧动画欣赏
什么是逐帧动画
定义：将动画中的每一帧都设置为关键帧， 在每一个关键帧中创建不同的内容，就成 为逐帧动画。逐帧动画是指动画的每一帧 的内容都是由一幅绘制的图象组成。 原理：将对象的运动过程分解成多个静态 图形，再将这些连续的静态图形置于连续 的关键帧中，就构成了逐帧动画。
浮动面板
工具条
图层区
帧格
时间轴
工具选项框
舞台 活动面板
属性面板
认识Flash 8界面
菜 单 栏
认识Flash 8界面
标 准 工 具 栏
认识Flash 8界面
控 制 器
认识Flash 8界面
图 层 管 理 区
认识Flash 8界面
时 间 轴
认识Flash 8界面
舞 台
认识Flash 8界面