FLASH第4讲 动作补间动画ppt课件

活动一 ： 让哈利波特飞起来
要点：
制作运动补间动画的条件
两个关键帧（位置不同） 一个箭头（创建补间动画）
步骤：
新建文件 — 素材导入到库 — 设置关键 帧 — 创建补间动画 — 调试
关键帧
角色或者物体 运动或变化中 的关键动作所 处的控制点。
普通帧
用来计量播放时间或 过渡时间前后关键帧。
手动插入或删除普通 帧，会改变前后两个 关键帧之间的过渡时 间。
空白关键帧
没有图像的关 键帧。便于插 入与上一个关 键帧不相同的 内容。
隐身魔法
Alpha : 100%
Alpha : 0%
Alpha值在元件属性中，控制的是元件的不透明度，数值越高，就表示越不 透明。
当我们在关键帧中点击元件，属性栏就会显示元件的属性，在颜色属 性下拉菜单中“Alpha”是改变物体不透明度的属性。
画面内容
说明（对话）
1
晴朗的一天
小猫从右往左跑
小猫高兴的在草地上奔跑着
2
这时候，刺猬蜷缩着身体，咕 刺猬从右向左翻滚着
噜咕噜的在马路上向前滚着……
3
……
……
……
30 X 12 = 360 张
有没有一种魔法，很简单的就让我们的哈利飞 起来？
需要： 1、两个关键帧（位置、状态不同） 2、一个箭头
起始状态
终止状态
运动补间动画？！
运动补间动画：
做flash动画时，在两个关键帧中间需要创建“补间动画”，
才能实现图画的运动；插入补间动画后两个关键帧之间的插补帧是由计 算机自动运算而得到的
《FLASH动画设计与制作》第四讲
FLASH 变化中的关键动作所 处的控制点。

那么如何来创建运动补间动画？
活动一：利用素材制作运动补间动画（8Min）
活动提示： 1、新建flash文档 2、导入图片素材到库面板 3、创建动作补间动画。 5、按住Ctrl+Enter或“控制”→“测试影片”来
查看效果。 6、保存文件，命名为“学号+姓名”格式。 7、将作业上传
创建补间动画前
总结
运动补间动画的功能
➢位移变化 ➢大小缩放 ➢Alpha透明度变化 ➢旋转 ➢色调变化
创建运动补间动画的三个条件
–（1）至少有两个关键帧 –（2）关键帧中必须包含内容 –（3）设置“动画”补间方式
电脑生成补间图形元件
自己创建图形元件
如何创建图形元件制作动画？
帧区域出现虚线
是否有关键帧？ 是否有内容？
活动二：创建图形元件来完成动画
活动提示： 1、新建flash文档 2、导入图片素材到库面板 4、创建图形元件，创建动作补间动画。 5、按住Ctrl+Enter或“控制”→“测试影片”来
查看效果。 6、保存文件，命名为“学号+姓名”格式。 7、将作业上传
运动补间动画制作
先看一个小动画
想想利用所学知识，你会怎样来 做这个动画？
第一个关键帧对应图
第二个关键帧对应图
运动补间动画的功能
➢位移变化 ➢大小缩放 ➢Alpha透明度变化 ➢旋转 ➢色调变化
创建运动补间动画的三个条件
–（1）至少有两个关键帧 –（2）关键帧中必须包含内容 –（3）设置“动画”补间方式
创建补间动画后
对位图创建运动补间动画时，位图会自动被转换成一个图形元件
为什么使用元件？
元件只需创建一次，然后即可在整个文档或其他
文档中重复使用 。

第4页/共9页
三、课堂教学过程设计
1、创设情境，引入课题
欣赏小明同学制作关于郊游的flash动画， 展示动画，导入“动作补间”动画的制作，激 发起学生的兴趣，分析动画效果，让学生了解 “动作补间”动画可以制作出哪些动画效果， 为后面的学习做好铺垫。
第5页/共9页
学件
三、课堂教学过程设计
2、任务驱动，实践操作 ①观看教师演示，结合教材、演示录像，完成任务1。 ②小组合作探究：尝试完成任务2。 ③依据教材及演示录像，继续完成任务3。 ④拓展训练:设计福娃动画。
对象的状态
第8页/共9页
感谢您的观看！
第9页/共9页
一、教学对象分析与教学设计 二、学情分析与教学设计 三、课堂教学过程 四、教与学的体会即教学反思
第1页/共9页
一、教学对象分析与教学设计
1、学生认知能力分析： 适用对象:初中二年级学生 对象特征：逻辑思维正逐步形成，但感官认知、模仿仍是获取知识的重要思维方 式，同时，反省思维也已经有所发展，自主学习探究也已经有一定的能力，但仍 体现出意志薄弱、自控能力差等特征。
第2页/共9页
Байду номын сангаас
一、教学对象分析与教学设计
2、学生操作技能分析：
学生活泼好动、好奇心强、求知欲旺、视野广泛，对信息技术充满兴趣； 而且已具备一定的设计经验，大部分同学能够利用教材及帮助录像，在小组合作 的情况下完成任务。
第3页/共9页
二、学情分析与教学设计
学 生 已 经 能 够 初 步 地 理 解 flash 动 画 制 作 中的基本知识，了解了元件和图层在flash动画 中的作用。《“动作补间”动画》应有2个课时， 而本节课就是主要让学生理解“动作补间”动 画的制作原理，掌握“动作补间”动画的制作 步骤。个人认为图层与动画的结合放在第二课 时更为妥当些。

分 分 门 门 别 类 前 后 类 别
4.2 形状补间动画
形状补间动画可以是形状、位置和颜色 的变化，但主要还是形状的变化。这里 首先要强调的一点是，形状动画不可以 使用元件的实例，只能是绘制或转换的 图形，以下分两点来进行介绍。 1、制作简单的形状补间动画 2、使用形状提示点
4.2.1制作简单的形状补间动画
4.1.3创建元件
1、创建图形元件 选择菜单栏上的【插入】/【新建元件】命令， 或者在【库】面板中单击【新建元件】按钮， 也可以在【库】面板中右击鼠标，在弹出的快 捷菜单上选择【新建元件】命令，均可打开 【创建新元件对话框，如下图所示。
“创建新元件”对话框
4.1.3创建元件
2、创建按钮元件 选择菜单栏上的【插入】/【新建元件】命令， 或者在【库】面板中单击【新建元件】按钮， 也可以在【库】面板中右击鼠标，在弹出的快 捷菜单上选择【新建元件】命令，均可打开 【创建新元件】对话框，如下图所示。
4.1.1元件和实例的概念
所谓元件 元件，就是存放在库中的各种矢量图形、图像 元件 （可以是从外部导入的JPG、GIF和BMP等格式图 像）、动画、按钮或者导入的声音和视频文件， 元件具有存储一次可以重复使用多次的特点。 实例则是指元件在舞台工作区的应用。一旦创建了 实例 元件就可以创建它的实例。将元件拖入舞台上， 就产生了一个实例，所以，一个元件可以产生许 多的实例，当元件修改以后，它所生成的实例都 会跟着更新。
“创建新元件”对话框
4.1.3创Leabharlann 元件3、创建影片剪辑元件 方法与前面类似，【创建新元件】面板中 类型选择“影片剪辑”。
4.1.4编辑元件
1、在元件编辑窗口编辑元件 2、在新窗口中编辑元件 3、在当前位置修改元件 4、重命名元件

ቤተ መጻሕፍቲ ባይዱ
动画组成结构
动画
场景1
场景2 .......
图层1 图层2 .......
第1帧 第2帧 .......
帧 — 图层 — 场景 — 动画
场记板
动画的步骤：①
起始关键帧 起始位置
动画的步骤：②
终点关键帧 移到终点位置
动画的步骤：③
鼠标右键 创建补间
一件元件一个层， 互不干涉
创建补间动画--准备
创建元件
动画的步骤：①
起始关键帧 起始大小
动画的步骤：②
终点关键帧 终止大小
动画的步骤：③
鼠标右键 创建补间
创建动作补间动画,补间动画让物体动 起来
动作补间动画只能对元件进行补间，如果对 非元件的对象进行动作补间动画时，先将其 转化为元件。
Flash动画
补间动画让物体动起来
之创建动作补间动画
时间轴
帧：时间轴上每一小格就表示一帧，是动画的一个
最小时间片断。每一个帧其实也就是一幅组成动 画的静态图象。
空白帧：没有内容的帧，当播放头到达层内均为
空白帧时，就会停止放映动画。
关键帧：定义动画发生变化的帧。关键帧以实心的 黑点表示。
空白关键帧：动画内容发生变化的帧，但画面是空 白的，空白关键帧以空播心放的头 圆点表示。
空白关 键帧
关键帧
空白帧
动画的三个步骤：
①设置一个起始关键帧 ②设置一个终止关键帧 ③创建补间动画

自主学习
画
三步曲之一：找演员----创建元件
三步曲之二：将演员请上舞台 ----确定两个状态
三步曲之三： 让演员动起来----创建补间动画
自主学习
动作补间动画在时间帧面板上的表现
包含动作补间动画的帧，它的背景色是淡紫色 的，并且在起始帧和结束帧之间有一个长箭头 连接起来，如图所示。
设置旋转圈数
一、动作补间动画的概念 二、 动作补间动画的创建流程 三、动作补间动画的属性设置 四、 案例的制作过程
该选项有四个选择，如图所示 ➢ 选择“无”可禁止元件旋转； ➢ 选择“自动”可使元件在需要最小动作的方向
上旋转对象一次； ➢ 选择“顺时针”（CW）或“逆时针”
（CCW），可使元件在运动是顺时针或逆时针 旋转相应的圈数，
拓展延伸 如果选择了“顺时针”（CW）或“逆时
针”（CCW），那么还可以进一步设置旋转 的圈数，如图所示
自主学习
Flash动画分类
逐帧动画
补间动画
动作补间动画(motion)
形状补间动画(Shape)
自主学习
(1)动作补间动画的概念
动作补间动画，就是在起始帧上放置一个元件实例 (或对象)，然后在结束帧中改变这个元件实例的属性
（位置、大小、颜色等），再让Flash根据两者之间的差 值创建动画。只要确定了起始帧和结束帧的内容，那么 Flash就可以把中间的过程补充完整。
动作补间动画在在时间轴上的体现
合作探究
任务1：根据提供的“精彩台球1.fla”文 件，制作完成模拟台球游戏1
合作探究
任务2：根据提供的“精彩台球2.fla”文 件，制作完成模拟台球游戏2
拓展延伸 “动作补间动画”的属性是通过关键帧的属性设

动作补间动画
初中信息技术
纲要要求
培养学生对信息技术的兴趣和意识，让学生了解和掌握信息技术基本知识和技能
生活应用
动漫作品、电子相册、网页广告
动作补间动画
初中信息技术
心理特点
八年级的学生精力旺盛、思维活跃，想象力丰富，对Flash的理解只是感性认识
认知结构
对基本概念比如：帧、关键帧、舞台与工作区、层、时间轴、场景等的了解
1.让学生学会使用工具箱中的选择工具、文本工具、矩形工具制作图形元件； 2.让学生学会制作动作补间动画,学会设置“缩放、旋转、缓动”等选项,做出各种动画效果。
知识与 技能
初中信息技术
动作补间动画
初中信息技术
重点：如何恰当、合理运用Flash 的补间 动画制作方法设计动画作品 难点：制作补间动画的一般性思路，如何 利用动画设计来开发学生的动手能 力、表达能力、创造力。
《动作补间动画-“感恩母亲”贺卡制作》
初中信学 情 分 析
2
3
教 学 目 标
5
学 法 处 理
教 学 过 程
教 法 处 理
4
动作补间动画
初中信息技术
基础：动画的原理、 Flash 的基本概念 铺垫：形状补间动画及遮罩动画 承上启下
过程与 方法
通过制作“闪烁的星星”和“贺词”补间动画，让学生学会分析和分解运动过程，理解补间动画制作的一般性思路，掌握动作补间动画的制作方法。
情感态度 与价值观
1.让学生通过F l a s h技术手段,做出各种动画效果, 来正确表达自己的个性化想法，培养学生发现美，创造美的能力； 2.培养学生团队与 协作精神； 3.体味母爱伟大，无私，怀有感恩之心

1. 创建图形元件,能创建图形元件的元素可以是导入的位图 图像、矢量图形、文本对象以及用Flash工具创建的线条 、色块等。
2. 创建按钮元件, 采用新建和转换两种方式来创建。能创 建按钮元件的元素可以是导入的位图图像、矢量图形、 文本对象以及用Flash工具创建的任何图形。
4.1元件和实例
4.1.4创建元件
在作品发布后，一定不能放弃源文件，因为源文件保留 着大量的劳动成果，很多情况下，可能会取用其中的一 些元件。
4.1元件和实例
4.1.6库的管理
2. 元件排序
默认是“库”的元件按“元件名称”排列，英文在前， 中文按其对应的字符编码排列。
在图4-23中，元件列表的顶部有五个“项目按钮”，它 们是“名称”、“类型”、“使用次数”、“修改日期 ”、“AS链接”，其实它们是一组“排序”按钮。单击 某一按钮，“元件列表”就按其标明的内容排列，再单 击一次，可以切换为反序。
4.1元件和实例
4.1.1案例——花的世界
图 【案例学习目标】
4-1
应用元件的相互嵌套及重复使 花
用来制作变化无穷的动画效果
的 世
界
效
果
图
【案例知识要点】 1. 花瓣元件：新建影片剪影元件，使用椭圆工具绘制花瓣 2. 花朵元件：新建花朵元件，将花瓣元件应用到花朵元件，制作五瓣花朵 3. 花朵转动元件：新建花朵转动元件，将花朵元件应用到此元件，并制作传统
第4章 补间动画
教师：孙杰 2014年4月10日
本章学习目标
掌握元件的类型和元件的创建及编辑 掌握形状补间动画的制作方法 掌握动作补间动画的制作方法
4.1 元件和实例 4.2 形状补间动画 4.3 动作补间动画 4.4 综合案例 课后实训

—制作动作补间动画
XXXX中学
XXX
实例演示：运动小车
位置
创建动作补间动画
1. 确定起始帧：在时间轴面板上动画开始播放的地方创建或 选择一个关键帧并设置一个元件。
2. 确定结束帧：在动画结束的地方创建或选择一个关键帧并 设置该元件的属性。
3. 创建动画：单击开始帧和结束帧之间的任意区域，在“属 性”面板上单击“补间”旁边的小三角按钮，在弹出的下拉列表 中选择“动画”选项，即可建立动作补间动画。
任务一
制作小车向右运动的动作补间动画
对比
任务二
制作小车车轮转动的动画
实例演示：运动小车
任务三
制作小车向左运动的动作补间动画
动作补间动画 （课堂小结）
动作补间动画的制作方法和步骤：
1、确定起始帧
2、确定结束帧
3、创建动画
注意两点： 第一，动作补间动画的起始帧和结束帧都必须是关键帧； 第二，动作主体都必须是以元件的形式呈现的。

播放头
空白关键帧
关键帧
空白帧
动作补间动画有哪几种变化方式？ 大小变化的动作补间 颜色变化的动作补间 位置变化的动作补间
认真阅读课本P78-83，思考以下问题： 1、根据课本提示，尝试完成大小变化、颜色变 化、位置变化的动作补间。 2、如何“测试影片”，生成swf标准动画文件？
1、选中对应图层，调整第一个关键帧 图形对象的状态
自学时间：3分钟
时间轴上，每一个小格表示一帧，帧代表着某一 个时刻的画面，动画是由若干个不同画面的帧组成的。
重点： 有哪些类型的帧？ 分别表示什么意思？
播放头
空白关键帧
关键帧
空白帧
Flash动画是由 帧、图层、场景、动画 逐层构成。
帧（画面）
图层
场景
动画
思考：补间动画的制作方式？有哪两种类型？
2、在后面的某个位置创建关 键帧，并改变对象的状态
3、选择中间普通帧，在属性面板 上，选择动画补间
完成龟兔赛跑背景的位置变化过程。
要求：
分图层将对应的元件从库 中导入到场景，制作动作补间。
Ctrl+Enter 提交swf文件
什么是帧？ 有哪些类型的帧？ 分别表示什么意思？
只要确定动画 起始 与 结束 这两个关键帧的元件状态， Flash会自动根据动作变化规律完成中间的变化过程，从而 实现动画效果。
补间动画可分为 动作动画 和 形状动画 两种制作方式。
问：课本介绍了哪几种变化方式的动作补间动画？ 大小变化的动作补间 颜色变化的动作补间 位置变化的动作补间
1、选中对应图层，调整第一个关键帧 图形对象的状态
让物体动起来
1、了解帧的概念和类型，以及帧、图层、场 景与动画的构成关系 2、掌握插入帧、关键帧和新建图层的操作 3、理解动作补间动画的基本原理 4、掌握动作补间动画的制作方法

.
12
例6 动态秀文字 – 旋转洋葱头文字效果
• 步骤1：设置文档 550*200,40fps • 步骤2：制作两个文本mc: "ONLON SKIN" – 洋葱皮，琥珀字体、字号：40
•文本1（文字带边沿），文本2（文字不带边沿） -- 文字打散 • 步骤3：编辑主场景
• 层1（旋转文本1）：文本1_mc,50帧动画，逆时针旋转1周 • 层2（旋转文本2）：文本2_mc,2帧空白，50帧动画，逆时针旋转1周，透明 度设为50 • 层3（旋转文本2）：文本2_mc,4帧空白，50帧动画，逆时针旋转1周，透明 度设为45 • 层4-层9（旋转文本2）：文本2_mc,每次增加两帧空白，动画相同，透明度 依次减5 • 步骤4：Ctrl+Enter,测试影片
• 层2（阴影）：1-25帧为阴影收缩的效果， 25-50帧为阴影放大效果
.
4
4.2 形状补间动画
起始关键帧 设置形状补间 终止关键帧
打散的对象
打散的对象
• 要素：首尾两个关键帧，中间插入形状补间
• 要求：首尾两个关键帧中内容必须是打散的对象。即，形状
• 特点：首尾帧两个关键帧中内容可以是不同的对象，甚至可以是多个对象，但 都必须是打散的。利用【绘图纸外观】按钮，可以得到左边效果。俗称洋葱皮效 果。
.
11
例5 动态秀文字 – 文字剪影向外发散
设置文档 550*200,12fps，背景黑色 1）层1（制作人文本）： "制作人：黄荧"，放在右下角 2）层2（标题文本）：大标题从舞台上方移入+稍微放大 3）层3（标题剪影左移淡出）：在15帧处插入关键帧，复制标题在其中作为剪影， 左移淡出. 4）层4（标题剪影右移淡出）：在15帧处插入关键帧，复制标题在其中作为剪影， 右移淡出. 5）Ctrl+Enter,测试影片