《FlashCS6中文版基础教程张云杰等32768第13章》由会员分享，可在线阅读，更多相关《FlashCS6中文版基础教程张云杰等32768第13章（25页珍藏版）》请在金锄头文库上搜索。
1、2,第13章 创建形状补间动画,形状补间动画是Flash中非常重要的表现手法之一，运用它可以变幻出各种奇妙的不可思议的变形效果，如图13-1所示。 下面从形状补间动画基本概念入手，带领读者认识形状补间动画的各种特性，了解补间动画的创建方法，学会应用“形状提示”让图形的形变自然流畅，最后制作一个完整的形状补间动画实例，帮助读者更深入地了解形状补间动画。,3,13.1 创建形状补间动画,形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画之间，使用的元素多为用鼠标或压感笔绘制出的形状。如果使用图形元件、按钮、文字，则必先“打散”再变形，如图13
2、-2所示。 形状补间动画创建好后，【时间轴】面板的背景色变为淡绿色，在起始帧和结束帧之间有箭头表示；如果创建失败则为虚线表示，如图13-3所示。,4,13.1 创建形状补间动画,1. 在时间轴中创建 2. 在命令菜单中创建,5,13.2 形状提示的运用,形状提示的作用是解决形状补间动画在形成的过程中，场景中的对象出现纠结的情况，如图13-12所示。想要控制更加复杂的形状变化，可以使用形状提示。形状提示会标识起始形状和结束形状中的相对应的点，以帮助制我们更准确地掌握动画的变形过程。,6,13.2.1 形状提示的效果,我们通过一个练习来演示形状提示的效果。 (1) 首先绘制出场景中的图形，如图13
3、-13所示。 (2) 可以看到一个“星形”的形状补间动画在播放的过程中，对象纠结到一起，出现图形错乱，没有达到我们想要制作的效果，如图13-14所示。,7,13.2.1 形状提示的效果,(3) 我们通过为动画添加“形状提示”来规范形状补间动画在播放过程中图形变化的位置和大小等因素，如图13-15所示。 (4) 播放动画，发现形状补间动画的运动过程发生了变化，如图13-16所示。 (5) 添加“形状提示”后的形状补间动画结束帧效果如图13-17所示。,8,13.2.2 形状提示的添加方法,添加“形状提示”的具体操作步骤如下。 (1) 打开刚才用过的那个场景文件，如图13-18所示。 (2) 选择
4、【变形】图层的第1帧，选择【修改】|【形状】|【添加形状提示】菜单命令，如图13-19所示。 图13-20 形状提示a (3) 添加“形状提示”后，在图形的中央位置出现了红色的“a”标注，如图13-20所示。,9,13.2.2 形状提示的添加方法,(4) “形状提示”图形中有三种表现形式，第一种是红色，表示调整形状提示后没有对位置进行调整。第二种是黄色，表示调整位置后开始帧变化的颜色。第三种是绿色，表示调整位置后结束帧变化的颜色，如图13-21所示。 (5) 在图层的开始帧，使用鼠标拖曳“形状提示a”到图形的左上角，如图13-22所示。 (6) 在图层的结束帧，使用鼠标拖曳“形状提示a”到图形
5、的左上角，如图13-23所示。,10,13.2.2 形状提示的添加方法,(7) 播放补间动画，观察形状补间动画的变形过程，如图13-24所示。 (8) 图像还是发生了纠结的情况，看来添加一个“形状提示”还是不够的。返回图层的第1帧，选择【变形】图层的第1帧，选择【修改】|【形状】|【添加形状提示】命令，如图13-25所示。 (9) 为形状补间动画添加“形状提示b”，如图13-26所示。,11,13.2.2 形状提示的添加方法,(10) 在图层的第1帧，用鼠标拖曳“形状提示b”到图形的左侧，如图13-27所示。 (11) 选择图层的第40帧，用鼠标拖曳“形状提示b”到图形的左侧，如图13-28所
6、示。 (12) 播放补间形状动画，观察补间形状动画的变形过程，在添加了两个“形状提示”后，最终获得了我们满意的形状补间动画效果，如图13-29所示。,12,13.3 上机实践操作,本范例完成文件：13书翻页效果.fla。 多媒体教学路径：光盘多媒体教学第13章。,13,13.3.1 实例介绍和展示,通过以上的学习，我们学会了创建形状补间动画，以及为补间动画添加“形状提示”，最后我们通过创建一个实例来综合地运用之前所学习的知识点。 本例通过运用【新建】命令、【绘图工具】、【选择工具】、【颜色】面板、【颜料桶工具】、【创建补间形状】命令等绘制图书翻页的效果，如图13-30所示。,14,13.3.2
7、 绘制书页,(1) 新建一个空白文件，保持默认设置。 (2) 按Ctrl+F8组合键，打开【创建新元件】对话框，新建一个图形元件，如图13-31所示。 (3) 选择元件的【类型】为【图形】，单击【确定】按钮，进入图形元件的编辑界面，如图13-32所示。,15,13.3.2 绘制书页,(4) 选择【工具】面板中的【矩形工具】，在工作区中绘制一个矩形，如图13-33所示。 (5) 选择【工具】面板中的【选择工具】，调整矩形上下边框的形状，如图13-34所示。 (6) 选择【窗口】|【颜色】菜单命令，如图13-35所示。,16,13.3.2 绘制书页,(7) 打开【颜色】面板，选择【类型】为【线性渐
8、变】，设置左侧指针的颜色为“#3399cc”，右侧指针的颜色设置为“#fFFFFFF”，如图13-36所示。 (8) 使用【工具】面板中的【颜料桶工具】按钮，为调整后的矩形填充颜色，如图13-37所示。 (9) 使用【工具】面板中的【线条工具】按钮，在矩形的侧面绘制几条直线，如图13-38所示。,17,13.3.3 制作书本,(1) 返回场景中，将图形元件【元件1】拖曳到工作区中，在工作区中创建一个实例，如图13-39所示。 (2) 单击时间轴下面的【新建图层】按钮，新建一个图层，如图13-40所示。 (3) 选中【图层1】中的图形元件“元件1”并右击，在弹出的快捷菜单中选择【复制】命令，如图
9、13-41所示。,18,13.3.3 制作书本,(4) 单击【图层2】的第1帧并右击，在弹出的快捷菜单中选择【粘贴】命令，如图13-42所示。此时，“元件1”实例复制到了场景中，如图13-43所示。,19,13.3.3 制作书本,(5) 选择【修改】|【变形】|【水平翻转】菜单命令，如图13-44所示。再运用【工具】面板中的【选择工具】调整图形的位置，翻转后的图形效果如图13-45所示。,20,13.3.4 制作翻页效果,(1) 单击【图层1】的第50帧，按Shift键的同时单击【图层2】的第50帧，然后按F5键，延长图层的帧数，如图13-46所示。 (2) 单击时间轴下方的【新建图层】图标，
10、新建一个图层，如图13-47所示。 (3) 单击【图层3】的第1帧，选择【工具】面板中的【矩形工具】，在工作区中绘制一个矩形并调整其形状和位置，如图13-48所示。,21,13.3.4 制作翻页效果,(4) 单击【图层3】的第50帧，按F6键，插入关键帧，如图13-49所示。 (5) 选择【工具】面板中的【修改】|【变形】|【水平翻转】命令，调整图形的位置，如图13-50所示。 (6) 单击【图层3】的第12帧，按F7键，插入空白关键帧，然后绘制一个矩形并调整其形状和位置，如图13-51所示。,22,13.3.4 制作翻页效果,(7) 单击【图层3】的第37帧，按F7键，插入空白关键帧，绘制一
11、个矩形并调整其形状和位置，如图13-52所示。 (8) 单击【图层3】的第24帧，按F7键，插入空白关键帧，选择【工具】面板中的【矩形工具】，在工作区中绘制矩形，并调整位置和大小，如图13-53所示。 (9) 单击【图层3】的第25帧，按F7键，插入空白关键帧，选择【工具】面板中的【矩形工具】，在工作区中绘制矩形，并调整其位置和大小，如图13-54所示。,23,13.3.4 制作翻页效果,(10) 在【图层3】的第1帧到第12帧之间右击，在弹出的快捷菜单中选择【创建补间形状】命令，如图13-55所示。 (11) 按照上一步的方法，在第12帧到第24帧之间创建形状补间动画，如图13-56所示。 (12) 按照前面学习过的方法，在第25帧到第37帧之间创建形状补间动画，如图13-57所示。,24,13.3.4 制作翻页效果,(13) 按照上一步的方法，在第37帧到第50帧之间创建形状补间动画，如图13-58所示。 (14) 至此利用创建形状补间动画所创建的“翻书”实例制作完成，测试动画，播放动画，如图13-59所示。,25,13.4 操 作 练 习,创建一个“1”的图形实例，在第60帧处创建一个“2”的图形实例。运用形状补间动画和形状提示命令，使“1”图形实例在不出现纠结的情况下变换成“2”图形实例。动画效果如图13-60所示。,
