制作动作补间动画
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第6讲 制作动作补间动画
学习目标
掌握动作补间动画的原理和创建方法 。 掌握使用动作补间动画表现蝙蝠飞翔的效果 。 掌握时间轴特效的原理和使用方法 。 掌握使用时间轴特效制作动态影集的方法 。
本章大纲
• 6.1 • 6.2 • 5.3
动作补间动画原理 时间轴特效 课后作业
6.1 动作补间动画原理
动作补间是Flash动画应用最多的表现手法，只要有动画产生的 实例中就会使用动作补间，其重要性不言而喻，这里首先来认识其原 理。
面 板，也可执行【窗口】/【属性】/【滤镜】菜单命令打开 【滤镜】面板。
（6）按住Ctrl键不放，利用【选择】工具拖动“云块”元件，复 制元件并摆放成如图6-15所示的云层状。
图6-15 复制云块
2、制作天空元件 。
（1）新建一个影片剪辑元件并命名为“天空”，单击 按钮进入 元件内部进行编辑。
（2）选择【矩形】工具，在【颜色】面板中设置【笔触颜色】为“ 无”，【填充颜色】的【类型】为“线性”，从左至右第1个色块 颜色为“白色”，第2个色块颜色为“#0099FF”，如图6-16所示 。
其他文档属性使用默认参数。
（2）新建一个影片剪辑元件并命名为“云块”，单击
按钮进
入元件内部进行编辑。
（3）选择【椭圆】工具，设置【笔触颜色】为“无”，【填充颜
色】为“白色”，在编辑区绘制5个椭圆形成一片云的形状，如
图6-13所示。
（4）新建一个影片剪辑元件并命名为“云层”，单击
按钮进
入元件内部进行编辑。
图6-7 调整篮球位置二
图6-8 创建动作补间动画
5、按Ctrl+Enter快捷键测试播放影片，虽然篮球运动起来了，但 是动作显的十分坚硬 。
6、选中第1帧，在【属性】面板中设置【缓动】为“－100”，如 图6-9所示，选中第30帧，在【属性】面板中设置【缓动】为 “100”，如图6-10所示 。
9、再次测试播放影片，篮球的运动效果基本达到要求 。
6.1.3 范例解析（二）──制作“云海日出”
花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制 作一个“浪漫的绽放”动画，带领读者来一同体验自己绘制出的浪漫 感觉，其设计思路及效果如图5-8所示 。
图6-12 制作思路及效果
1、制作云层元件。 （1）新建一个Flash文档，设置文档【背景颜色】为“#666666”，
图6-2 右键操作
图6-3 创建失败
三、认识形状补间动画的属性面板 当选中动作补间动画的任一帧时，其【属性】面板如图6-4所示。
图6-4 【属性】面板
其中常用的选项为【缓动】和【旋转】选项，在【旋转】选 项中选择不同的方式，将使元件按不同的方式旋转。
（1）“顺时针”是指元件播放时以顺时针方向进行旋转，并可在 【次】项中设置旋转次数。 （2）“逆时针”是指元件播放时以逆时针方向进行旋转，并可在 【次】项中设置旋转次数。 （3）“自动”是指元件的旋转由用户自己进行设置。 （4）“无”是指元件不产生旋转 。
6.1.1 知识点讲解
一、动作补间动画原理。 动作补间动画是指在两个或两个以上的关键帧之间对元件进
行补间的动画，使一个元件随着时间幻化其颜色、位置、旋转等 属性，如图6-1所示。
红色花朵 舞台左边
Biblioteka Baidu
颜色补间 位置补间
蓝色花朵 舞台右边
旋转补间
0°
15°
图6-1 动作补间动画
动作补间动画只能对元件进行补间，如果对非元件的对 象进行动作补间动画时，软件将自动将其转化为元件。
（3）在编辑区绘制一个宽高为“550px×400px”的矩形，并居中对 齐，然后利用【填充变形】工具调整填充方向和位置如图6-17所 示。
图6-16 填充颜色
图6-17 调整填充
3、制作太阳元件 。 （1）新建一个影片剪辑元件并命名为“太阳”，单击 按钮进入
元件内部进行编辑 。
（2）选择【椭圆】工具，在【颜色】面板中设置【笔触颜色】为“ 无”，【填充颜色】的【类型】为“放射状”，从左至右第1个 色块颜色为“白色”，第2个色块颜色为“#FFFF00”，第3个色 块颜色为“#FFFF00”且【Alpha】参数为“0%”，如图6-18所示 。
图6-5 打开制作模板
图6-6 调整篮球位置一
3、在第60帧处插入关键帧，调整篮球的位置如图6-7所示。 4、分别在“篮球”图层的第1帧和第30帧处单击鼠标右键，在弹
出的快捷菜单中选择【创建补间动画】命令，从而在第1帧～ 第30帧、第30帧～第60帧之间创建动作补间动画，此时【时 间轴】效果如图6-8所示 。
（5）将【库】面板中的“云块”元件拖入编辑区，打开【滤镜】
面板，单击面板左上角的 按钮，选择“模糊”滤镜，设置
参数【模糊X】和【模糊Y】都为“30”，如图6-14所示。
图6-13 绘制云块
图6-14 滤镜参数
【滤镜】面板默认情况下位于【属性】面板窗格中，单 击窗格上方“属性”右侧的“滤镜”便可转到【滤镜】
6.1.2 范例解析（一）──创建动作补间动画练习
请同学们在老师的带领下进一步学习动作补间动画的创建方 法，并按要求完成以下操作 。
1、打开教学资源中的“素材\第6讲\创建动作补间动画\创建动作补 间动画.fla”文件，如图6-5所示。
2、在“篮球”图层的第30帧处插入关键帧，然后向下移动篮球到如 图6-6所示的位置。
图6-9 设置缓动为“－100”
图6-10 设置缓动为“100”
7、按Ctrl+Enter快捷键测试播放影片，篮球的运动看起来具有一 定的速率变化了。
8、选中第1帧，在【属性】面板中设置【旋转】为“顺时针”，【 次】为“1”，如图6-11所示，选中第30帧，在【属性】面板中做相 同的旋转设置。
图6-11 设置旋转
（3）按住Shift键不放，在编辑区绘制一个宽高都为“100px”的圆形 ，并相对于舞台居中对齐，如图6-19所示。
二、创建动作补间动画。 在存储着同一元件两种不同属性的两关键帧之间任选1帧，然后在【 属性】面板上的【补间】下拉列表中选择【动作】命令或直接在该 帧上单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命 令，如图6-2所示就可创建动作补间动画。 如果两关键帧之中的任何一个关键帧的内容为空，将创建动作补间 动画失败，如图6-3所示 。
学习目标
掌握动作补间动画的原理和创建方法 。 掌握使用动作补间动画表现蝙蝠飞翔的效果 。 掌握时间轴特效的原理和使用方法 。 掌握使用时间轴特效制作动态影集的方法 。
本章大纲
• 6.1 • 6.2 • 5.3
动作补间动画原理 时间轴特效 课后作业
6.1 动作补间动画原理
动作补间是Flash动画应用最多的表现手法，只要有动画产生的 实例中就会使用动作补间，其重要性不言而喻，这里首先来认识其原 理。
面 板，也可执行【窗口】/【属性】/【滤镜】菜单命令打开 【滤镜】面板。
（6）按住Ctrl键不放，利用【选择】工具拖动“云块”元件，复 制元件并摆放成如图6-15所示的云层状。
图6-15 复制云块
2、制作天空元件 。
（1）新建一个影片剪辑元件并命名为“天空”，单击 按钮进入 元件内部进行编辑。
（2）选择【矩形】工具，在【颜色】面板中设置【笔触颜色】为“ 无”，【填充颜色】的【类型】为“线性”，从左至右第1个色块 颜色为“白色”，第2个色块颜色为“#0099FF”，如图6-16所示 。
其他文档属性使用默认参数。
（2）新建一个影片剪辑元件并命名为“云块”，单击
按钮进
入元件内部进行编辑。
（3）选择【椭圆】工具，设置【笔触颜色】为“无”，【填充颜
色】为“白色”，在编辑区绘制5个椭圆形成一片云的形状，如
图6-13所示。
（4）新建一个影片剪辑元件并命名为“云层”，单击
按钮进
入元件内部进行编辑。
图6-7 调整篮球位置二
图6-8 创建动作补间动画
5、按Ctrl+Enter快捷键测试播放影片，虽然篮球运动起来了，但 是动作显的十分坚硬 。
6、选中第1帧，在【属性】面板中设置【缓动】为“－100”，如 图6-9所示，选中第30帧，在【属性】面板中设置【缓动】为 “100”，如图6-10所示 。
9、再次测试播放影片，篮球的运动效果基本达到要求 。
6.1.3 范例解析（二）──制作“云海日出”
花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制 作一个“浪漫的绽放”动画，带领读者来一同体验自己绘制出的浪漫 感觉，其设计思路及效果如图5-8所示 。
图6-12 制作思路及效果
1、制作云层元件。 （1）新建一个Flash文档，设置文档【背景颜色】为“#666666”，
图6-2 右键操作
图6-3 创建失败
三、认识形状补间动画的属性面板 当选中动作补间动画的任一帧时，其【属性】面板如图6-4所示。
图6-4 【属性】面板
其中常用的选项为【缓动】和【旋转】选项，在【旋转】选 项中选择不同的方式，将使元件按不同的方式旋转。
（1）“顺时针”是指元件播放时以顺时针方向进行旋转，并可在 【次】项中设置旋转次数。 （2）“逆时针”是指元件播放时以逆时针方向进行旋转，并可在 【次】项中设置旋转次数。 （3）“自动”是指元件的旋转由用户自己进行设置。 （4）“无”是指元件不产生旋转 。
6.1.1 知识点讲解
一、动作补间动画原理。 动作补间动画是指在两个或两个以上的关键帧之间对元件进
行补间的动画，使一个元件随着时间幻化其颜色、位置、旋转等 属性，如图6-1所示。
红色花朵 舞台左边
Biblioteka Baidu
颜色补间 位置补间
蓝色花朵 舞台右边
旋转补间
0°
15°
图6-1 动作补间动画
动作补间动画只能对元件进行补间，如果对非元件的对 象进行动作补间动画时，软件将自动将其转化为元件。
（3）在编辑区绘制一个宽高为“550px×400px”的矩形，并居中对 齐，然后利用【填充变形】工具调整填充方向和位置如图6-17所 示。
图6-16 填充颜色
图6-17 调整填充
3、制作太阳元件 。 （1）新建一个影片剪辑元件并命名为“太阳”，单击 按钮进入
元件内部进行编辑 。
（2）选择【椭圆】工具，在【颜色】面板中设置【笔触颜色】为“ 无”，【填充颜色】的【类型】为“放射状”，从左至右第1个 色块颜色为“白色”，第2个色块颜色为“#FFFF00”，第3个色 块颜色为“#FFFF00”且【Alpha】参数为“0%”，如图6-18所示 。
图6-5 打开制作模板
图6-6 调整篮球位置一
3、在第60帧处插入关键帧，调整篮球的位置如图6-7所示。 4、分别在“篮球”图层的第1帧和第30帧处单击鼠标右键，在弹
出的快捷菜单中选择【创建补间动画】命令，从而在第1帧～ 第30帧、第30帧～第60帧之间创建动作补间动画，此时【时 间轴】效果如图6-8所示 。
（5）将【库】面板中的“云块”元件拖入编辑区，打开【滤镜】
面板，单击面板左上角的 按钮，选择“模糊”滤镜，设置
参数【模糊X】和【模糊Y】都为“30”，如图6-14所示。
图6-13 绘制云块
图6-14 滤镜参数
【滤镜】面板默认情况下位于【属性】面板窗格中，单 击窗格上方“属性”右侧的“滤镜”便可转到【滤镜】
6.1.2 范例解析（一）──创建动作补间动画练习
请同学们在老师的带领下进一步学习动作补间动画的创建方 法，并按要求完成以下操作 。
1、打开教学资源中的“素材\第6讲\创建动作补间动画\创建动作补 间动画.fla”文件，如图6-5所示。
2、在“篮球”图层的第30帧处插入关键帧，然后向下移动篮球到如 图6-6所示的位置。
图6-9 设置缓动为“－100”
图6-10 设置缓动为“100”
7、按Ctrl+Enter快捷键测试播放影片，篮球的运动看起来具有一 定的速率变化了。
8、选中第1帧，在【属性】面板中设置【旋转】为“顺时针”，【 次】为“1”，如图6-11所示，选中第30帧，在【属性】面板中做相 同的旋转设置。
图6-11 设置旋转
（3）按住Shift键不放，在编辑区绘制一个宽高都为“100px”的圆形 ，并相对于舞台居中对齐，如图6-19所示。
二、创建动作补间动画。 在存储着同一元件两种不同属性的两关键帧之间任选1帧，然后在【 属性】面板上的【补间】下拉列表中选择【动作】命令或直接在该 帧上单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命 令，如图6-2所示就可创建动作补间动画。 如果两关键帧之中的任何一个关键帧的内容为空，将创建动作补间 动画失败，如图6-3所示 。