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