1、第7章基本动画的制作 本章简介:在Flash CS6动画的制作过程中,时间轴和帧起到了关键性的作用。本章将介绍动画中帧和时间轴的使用方法及应用技巧。读者通过学习要了解并掌握如何灵活地应用帧和时间轴,并根据设计需要制作出丰富多彩的动画效果。课堂学习目标u 了解动画和帧的基本概念u 掌握逐帧动画的制作方法u 掌握形状补间动画的制作方法u 掌握传统补间动画的制作方法u 熟悉测试动画的方法u 了解Deco工具的使用方法7.1帧与时间轴 u 课堂案例制作美好回忆动画u 动画中帧的概念 u 帧的显示形式 u 时间轴面板 u 绘图纸(洋葱皮)功能 u 在时间轴面板中设置帧 使用“刷子”工具,绘制光标图形;使
2、用“文本”工具,添加文字;使用“翻转帧”命令,将帧进行翻转;使用“影片剪辑”元件,制作小猫动画。效果图 7.1.1课堂案例制作美好回忆动画医学证明,人类具有视觉暂留的特点,即人眼看到物体或画面后,在1/24秒内不会消失。利用这一原理,在一幅画没有消失之前播放下一幅画,就会给人造成流畅的视觉变化效果。所以,动画就是通过连续播放一系列静止画面,给视觉造成连续变化的效果。在Flash CS6中,这一系列单幅的画面就叫帧,它是Flash CS6动画中最小时间单位里出现的画面。每秒钟显示的帧数叫帧率,如果帧率太慢就会给人造成视觉上不流畅的感觉。所以,按照人的视觉原理,一般将动画的帧率设为24帧/秒。7.
3、1.2动画中帧的概念 7.1.3帧的显示形式 u空白关键帧 在时间轴中,白色背景带有黑圈的帧为空白关键帧。u关键帧 在时间轴中,灰色背景带有黑点的帧为关键帧。u动作补间帧 在时间轴中,带有黑色圆点的第1帧和最后1帧为关键帧,中间蓝色背景带有黑色箭头的帧为补间帧。u形状补间帧 在时间轴中,带有黑色圆点的第1帧和最后1帧为关键帧,中间绿色背景带有黑色箭头的帧为补间帧。7.1.3帧的显示形式 u包含动作语句的帧 在时间轴中,第1帧上出现一个字母“a”,表示这1帧中包含了使用“动作”面板设置的动作语句。u帧标签 在时间轴中,第1帧上出现一只红旗,表示这一帧的标签类型是名称;第1帧上出现两条绿色斜杠,表
4、示这一帧的标签类型是注释;第1帧上出现一个金色的锚,表示这一帧的标签类型是锚记。“时间轴”面板由图层面板和时间轴组成。“时间轴”面板7.1.4时间轴面板 一般情况下,Flash CS6的舞台只能显示当前帧中的对象。如果希望在舞台上出现多帧对象以帮助当前帧对象的定位和编辑,Flash CS6提供的绘图纸(洋葱皮)功能可以将其实现。7.1.5绘图纸(洋葱皮)功能 u“帧居中”按钮:单击此按钮,播放头所在帧会显示在时间轴的中间位置。u“绘图纸外观”按钮:单击此按钮,时间轴标尺上出现绘图纸的标记显示,在标记范围内的帧上的对象将同时显示在舞台中。7.1.5绘图纸(洋葱皮)功能 u“绘图纸外观轮廓”按钮:
5、单击此按钮,时间轴标尺上出现绘图纸的标记显示,在标记范围内的帧上的对象将以轮廓线的形式同时显示在舞台中。u“编辑多个帧”按钮:单击此按钮,绘图纸标记范围内的帧上的对象将同时显示在舞台中,可以同时编辑所有的对象。u“修改绘图纸标记”按钮:单击此按钮,弹出其下拉菜单。7.1.6在时间轴面板中设置帧 u插入帧 选择“插入 时间轴 帧”命令,或按F5键,可以在时间轴上插入一个普通帧;选择“插入 时间轴 关键帧”命令,或按F6键,可以在时间轴上插入一个关键帧;选择“插入 时间轴 空白关键帧”命令,可以在时间轴上插入一个空白关键帧。u选择帧 选择“编辑 时间轴 选择所有帧”命令,选中时间轴中的所有帧。单击
6、要选的帧,帧变为深色。用鼠标选中要选择的帧,再向前或向后进行拖曳,其间鼠标经过的帧全部被选中。按住Ctrl键的同时,用鼠标单击要选择的帧,可以选择多个不连续的帧。按住Shift键的同时,用鼠标单击要选择的两个帧,这两个帧中间的所有帧都被选中。7.1.6在时间轴面板中设置帧 u移动帧 选中一个或多个帧,按住鼠标,移动所选帧到目标位置。在移动过程中,如果按住Alt键,会在目标位置上复制出所选的帧。u删除帧 用鼠标右键单击要删除的帧,在弹出的菜单中选择“清除帧”命令。选中要删除的普通帧,按Shift+F5组合键,删除帧。选中要删除的关键帧,按Shift+F6组合键,删除关键帧。u 课堂案例制作小松鼠
7、动画u 帧动画 u 逐帧动画u 简单形状补间动画u 应用变形提示u 创建传统补间u 色彩变化动画u 测试动画u“影片浏览器”面板的功能7.2动画的创建使用“导入到舞台”命令,导入松鼠的序列图;使用“时间轴”面板,制作逐帧动画;使用“创建传统补间”命令,制作松鼠运动效果;使用“变形”面板,改变图形的大小。效果图 7.2.1课堂案例制作小松鼠动画第1帧 7.2.2帧 画 第5帧 第10帧 第15帧 时间轴面板中设置关键帧的状态 第1帧 7.2.3逐帧动画 第2帧 第3帧 第4帧 时间轴面板中设置关键帧的状态 7.2.4简单形状补间动画 第1帧 第3帧 第5帧 第7帧 第10帧时间轴面板中设置关键帧
8、的状态 使用变形提示,可以让原图形上的某一点变换到目标图形的某一点上。应用变形提示可以制作出各种复杂的变形效果。系统自动生成的图形变化过程 7.2.5应用变形提示 在提示点的作用下生成的图形变化过程 第1帧中图形效果 7.2.6创建传统补间在时间轴面板中设置动作补间动画 最后1帧中图形效果 每帧中的图形变化效果 在不同的关键帧中,玫瑰花的颜色变化效果 7.2.7色彩变化动画 时间轴面板中的设置 在制作完成动画后,要对其进行测试。可以通过多种方法来测试动画。7.2.8测试动画 u应用控制器面板 选择“窗口 工具栏 控制器”命令,弹出“控制器”面板。u应用播放命令 选择“控制 播放”命令,或按En
9、ter键,可以对当前舞台中的动画进行浏览。在“时间轴”面板中,可以看见播放头在运动,随着播放头的运动,舞台中显示出播放头所经过的帧上的内容。7.2.8测试动画 u应用测试影片命令 选择“控制 测试影片”命令,或按Ctrl+Enter组合键,可以进入动画测试窗口,对动画作品的多个场景进行连续的测试。u应用测试场景命令 选择“控制 测试场景”命令,或按Ctrl+Alt+Enter组合键,可以进入动画测试窗口,测试当前舞台窗口中显示的场景或元件中的动画。“影片浏览器”面板,可以将Flash CS6文件组成树型关系图,方便用户进行动画分析、管理或修改。在其中可以查看每一个元件,熟悉帧与帧之间的关系,查
10、看动作脚本等,也可快速查找需要的对象。选择“窗口 影片浏览器”命令,弹出“影片浏览器”面板。“影片浏览器”面板7.2.9“影片浏览器”面板的功能 7.3 Deco工具u 创建藤蔓u 藤蔓属性选择“Deco”工具,将鼠标移到舞台上,鼠标指针变成 形状,在舞台上单击鼠标左键,即可看到藤蔓生长的效果,在生长的藤蔓图形上再次单击鼠标左键,即可停止当前藤蔓图形的生长。过程图 7.3.1创建藤蔓选择“Deco”工具,选择“窗口 属性”命令,弹出Deco工具的“属性”面板。在Deco工具“属性”面板中可以更改藤蔓的属性。“属性”面板7.3.2藤蔓属性使用“文本”工具,输入文字;使用“转换为元件”命令,制作图形元件;使用“属性”面板,改变文字的颜色。效果图 7.4课堂练习制作变色文字使用“钢笔”工具和“颜色”面板,制作加载条;使用“逐帧”动画,制作数据变化效果。使用“文本”工具,添加文本。效果图 7.5课后习题制作加载条效果