Flash动画制作之-制作形状补间动画

Flash动画制作之—制作形状补间动画第1页/共46页5.1形状补间动画原理5.2形状提示点原理5.3课后作业本章大纲第2页/共46页5.1形状补间动画原理5.1.1知识点讲解形状补间动画是动画制作中一种常用的动画制作方法，它可以补间形状的位置、大小和颜色等，使用形状补间可以制作出千变万化的动画效果。一、形状补间动画的原理。形状补间动画可以实现两个矢量图形之间颜色、形状、位置的变化，如图5-1所示。图5-1形状补间动画原理绿色渐变红色渐变舞台左边舞台右边小苹果大苹果颜色补间位置补间形状补间第3页/共46页二、创建形状补间动画。同一图层上，在绘制着不同矢量图形的两关键帧之间任选1帧，然后再在【属性】面板上的【补间】下拉列表中选择【形状】选项，如图5-2所示，就可创建一个形状补间动画。图5-2创建形状补间动画

三、认识形状补间动画的属性面板。

Flash8的【属性】面板随选定的对象不同而发生相应的变化。当建立了一个形状补间动画后，单击时间轴，其【属性】面板如5-2所示。其中经常使用的选项有如下两种：（1）【缓动】选项。在【缓动】选项中输入相应的数值，形状补间动画则会随之发生相应的变化。（2）【混合】选项。在【混合】选项中包含“角形”和“分布式”两个参数。第4页/共46页5.1.2范例解析（一）──创建形状补间动画练习请同学们在老师的带领下对形状补间动画的创建方法和原理进行进一步的熟悉，并跟随以下要求进行操作训练。1、新建一个Flash文档，然后利用【椭圆】工具在舞台上绘制一个圆形，并在【属性】面板中设置圆的颜色为“#00FF00”，宽高为“7px×7px”，如图5-3所示。2、在第20帧处插入关键帧，然后以圆为基点绘制一片树叶，如图5-4所示。图5-3绘制圆形图5-4绘制树叶第5页/共46页3、在第20帧处，首先删除“圆”，然后填充树叶，效果如图5-5所示。

#FFFFFF#339900【颜色】面板

树叶效果

图5-5填充树叶第6页/共46页4、在第40帧处插入关键帧，然后调节树叶的颜色效果如图5-6所示

【颜色】面板

树叶效果

#FFFFFF#CC99005、在第60帧处将树叶移出舞台。6、选中第1帧，然后在【属性】面板的【补间】下拉列表中选择“形状”选项，如图5-7所示。则创建出第1帧～第20帧之间的形状补间动画。图5-7创建补间动画

第7页/共46页7、使用相同的方法，在第20帧、第40帧两处分别创建形状补间动画。8、按Ctrl+Enter

快捷键测试播放影片，观看这个由小圆成长为一片绿叶，再枯黄，再凋零的动画。9、关闭测试播放器，选中第40帧，然后在属性面板中分别设置【缓动】为“－100~100”之间不同的值，然后分别测试影片，观看树叶凋落动画的速率变化。第8页/共46页5.1.3范例解析（二）──制作“浪漫绽放”

花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制作一个“浪漫的绽放”动画，带领读者来一同体验自己绘制出的浪漫感觉，其设计思路及效果如图5-8所示。图5-8制作思路及效果

第9页/共46页1、制作叶片的生长。（1）打开教学资源中“素材\第5讲\浪漫的绽放\浪漫的绽放-模板.fla”文件，场景效果如图5-9所示。（2）在“背景”图层之上新建并重命名图层，直至图层效果如图5-10所示。图5-9模板场景

图5-10图层效果第10页/共46页（3）选择【矩形】工具，在【属性】面板中设置【笔触颜色】为“无”，【填充颜色】为“#37C030”，在“叶片1”图层上绘制一个宽高为“5px×5px”的矩形，并将其置于花盆的后面，效果如图5-11所示。（4）在“叶片1”图层的第10帧处插入关键帧，利用【选择】工具调整第10帧处“矩形”的形状如图5-12所示。（5）在“叶片1”图层的第20帧处插入关键帧，利用【选择】工具调整第20帧处“矩形”的形状如图5-13所示。矩形图5-11第1帧叶片形状

图5-12第10帧叶片形状

图5-13第20帧叶片形状

第11页/共46页（6）在第1帧～第10帧之间、第10帧～第20帧之间创建形状补间动画，这样一片叶子的生长过程就制作完成。（7）使用同样的方法在图层“叶片2”、“叶片3”、“叶片4”、“叶片5”、“叶片6”上分别制作其他5片叶子的生长，完成叶片的生长动画。此时的场景效果如图5-14所示，【时间轴】效果如图5-15所示。

叶片6叶片2叶片4叶片5叶片3叶片1图5-14完成叶片制作

第12页/共46页在制作叶片生长动画效果时，注意调整叶片生长的先后顺序，尽量使叶片生长看起来贴近自然。每个叶片的生长时间也可根据叶片大小有所不同。建议将制作完成的图层进行锁定，以免产生误操作。图5-15【时间轴】效果一

第13页/共46页2、制作花梗的生长。（1）在“叶片6”图层之上新建一个图层并重命名为“花梗”图层。（2）在“花梗”图层的第65帧处插入关键帧。（3）选择【矩形】工具，在【属性】面板中设置【笔触颜色】为“无”，【填充颜色】为“#CCE492”，在“花梗”图层的第65帧处绘制一个宽高为“5px×5px”的矩形，而后将其置于花盆的后面，效果如图5-16所示。（4）利用【选择】工具调整矩形的形状如图5-17所示。（5）在“花梗”图层的第105帧处插入关键帧，利用【选择】工具调整第105帧处“花梗”的形状如图5-18所示。（6）在第65帧～第105帧之间创建形状补间动画，这样花梗的生长过程就制作完成了。花梗图5-16原始矩形

图5-17花梗的原始形状

图5-18第105帧花梗形状第14页/共46页3、制作花瓣的生长。（1）在“花梗”图层之上新建并重命名图层，直至图层效果如图5-19所示。（2）在“花瓣1”图层的第105帧处插入关键帧。（3）选择【椭圆】工具，在【属性】面板中设置【笔触颜色】为“无”，【填充颜色】为“#F997DC”，在“花瓣”图层的第105帧处绘制一个宽高为“1.3px×1.1px”的椭圆，并将其置于花梗顶端花苞的上面，效果如图5-20所示。椭圆图5-19图层效果

图5-20第105帧花瓣形状第15页/共46页在绘制花瓣的原始形状时，需要将其放置在花苞上并适当调整位置，使得花开得更自然，也达到掩盖花苞的目的。（4）在“花瓣1”图层的第135帧处插入关键帧，利用【选择】工具调整第135帧处“花瓣”的形状如图5-21所示。（5）在第105帧～第135帧之间创建形状补间动画，这样一片花瓣的生长过程就制作完成。（6）使用同样的方法在图层“花瓣2”、“花瓣3”、“花瓣4”、“花瓣5”、“花瓣6”上分别制作其他5片花瓣的生长，完成花瓣的生长动画，效果如图5-22所示。图5-21第135帧花瓣形状

花瓣4花瓣5花瓣6花瓣3花瓣1花瓣2图5-22完成制作

第16页/共46页（7）最终的场景效果如图5-23所示，时间轴效果如图5-24所示。图5-23最终场景效果

图5-24制作完成后的【时间轴】效果（8）保存测试影片，一株美丽的花儿浪漫绽放的动画效果制作完成。第17页/共46页5.1.4课堂练习──制作“魔幻扑克”请同学们自己动手制作一个扑克变幻的动画，其效果如图5-25所示。1、新建一个Flash文档，设置文档【尺寸】为“500px×353px”，文档其他属性使用默认参数。图5-25魔幻扑克效果

第18页/共46页2、执行【文件】/【导入】/【打开外部库】菜单命令，将教学资源中的“素材\第5讲\魔幻扑克\魔幻扑克-素材.fla”文件打开，将外部库里的元件和图片复制到当前库中，效果如图5-26所示。3、将【库】面板中的“背景”位图拖入场景中，设置其宽高为“500px×353px”，并相对舞台居中对齐，效果如图5-27所示。图5-26【库】面板

图5-27导入背景图片第19页/共46页4、将“背景”图层锁定，在“背景”图层上新建并重命名图层，直到图层效果如图5-28所示，并在所有图层的第20帧处插入帧。5、选择“红桃2参考”图层，将【库】面板中的“红桃2参考图”图形元件拖入到舞台中，并相对舞台居中对齐。在【属性】面板中设置其【Alpha】参数为“50%”，效果如图5-29所示。图5-28设置大小和位置

图5-29拖入“红桃2参考图”

第20页/共46页6、根据参考图在各个图层上绘制花色为“红桃2”纸牌各个部分的形状，如图5-30所示。

图5-30绘制红桃2其中【字体】为“BookmanOldStyle”（读者可以设置为自己喜欢的字体或者自行购买外部字体库）。

第21页/共46页7、在“花色上”、“花色中”、“花色下”、“数字上”、“数字下”图层的第20帧处按F7

快捷键插入空白关键帧。使用同样的方法绘制花色为“黑桃A”的纸牌，效果如图5-31所示。8、将“数字下”、“数字上”图层的第1帧和第20帧处的数字打散。9、分别在“花色上”、“花色中”、“花色下”、“数字上”、“数字下”图层的第1帧～第20帧之间创建“形状补间“动画，时间轴效果如图5-32所示。图5-31绘制黑桃A

图5-32绘制倾斜为45°的线条10、保存测试影片，一个简单而又神奇的扑克变幻动画制作完成。第22页/共46页5.2形状提示点原理当用形状补间动画制作一些较为复杂的变形动画时，常常会使画面变得混乱，根本达不到用户想要的变化过程，这时就需要使用形状提示点来进行控制。5.2.1知识点讲解一、添加形状提示。单击形状补间动画的开始帧，执行【修改】/【形状】/【添加形状提示】菜单命令。这样在形状上就会增加一个带字母的红色圆圈，相应地在结束帧的形状上也会增加形状提示符，如图5-33所示。分别将这两个形状提示符安放到适当的位置时，起始关键帧上的形状提示点为黄色，结束关键帧的形状提示点为绿色，如图5-34所示第1帧

第10帧

显示为黄色

显示为绿色

图5-33未调节

图5-34调节成功

第23页/共46页二、形状提示原理。继续添加形状提示点，并调节提示点位置，此时图形变化的过程如图5-35所示。图5-35使用形状提示

图5-36所示为未添加形状提示点的变化过程，经过观察可以清楚的了解形状提示的功能和原理，即形状提示点用于识别起始形状和结束形状中相对应的点，并用字母a到z来表示。图5-36未使用形状提示第24页/共46页5.2.2范例解析（一）──使用形状提示点练习请同学们在老师的带领下对形状提示点的创建方法和原理进行进一步的熟悉，并跟随以下要求进行操作训练。1、打开教学资源中“素材\第5讲\形状提示点练习\飞翔的蝙蝠.fla”文件。2、分别在第1帧～第10帧之间，第11帧～第20帧之间，第21帧～第30帧之间，第31帧～第40帧之间创建形状补间动画，拖动时间轴观察图形的渐变效果，如图5-37所示。

图5-37形状补间效果

第25页/共46页3、选中“图层1”的第1帧，执行【修改】/【形状】/【添加形状提示】菜单命令添加一个形状提示点，并将其拖动到蝙蝠的翅膀上，如图5-38所示。选中第10帧，将提示点也拖动到蝙蝠的翅膀上，此时形状提示点变为绿色，如图5-39所示。

通过观察可以发现，此时的形状补间动画效果并不理想，整个形状补间动画效果显的十分的杂乱无章，没有达到预期的效果。图5-38添加形状提示点一

图5-39调整形状提示点一第26页/共46页4、使用同样的方法添加3个形状提示点，并分别在第1帧和第10帧调整提示点的位置，效果如图5-40和图5-41所示。图5-40添加形状提示点二

图5-41调整形状提示点二5、使用同样的方法为后续的形状补间动画添加形状提示点，图5-42所示为第31帧处的形状提示点，图5-43所示为第40帧处的形状提示点。

图5-42添加形状提示点三

图5-43调整形状提示点三第27页/共46页6、此时再拖动时间轴观察这个形状补间动画的变换效果，如图5-44所示。图5-44添加形状提示点后的效果

第28页/共46页5.2.3范例解析（二）──制作“旋转的三棱锥”本例将使用形状提示点动画来制作一个旋转的三棱锥效果，其设计思路及效果如图5-45所示。1、素材准备。（1）新建一个Flash文档，文档所有属性使用默认参数。图5-45设计思路及效果

第29页/共46页（2）新建并重命名图层，直至图层效果如图5-46所示。（3）执行【文件】/【导入】/【打开外部库】菜单命令，将教学资源中的“素材\第5讲\旋转的三棱锥.fla”文件打开，将外部库里的元件和图片复制到当前【库】面板中，效果如图5-47所示。

图5-46图层效果

图5-47复制后的【库】面板2、设置主场景。（1）选择【矩形】工具，在【属性】面板中设置【笔触颜色】为“无”，【填充颜色】的【类型】为“线性”，从左至右第1个色块颜色为“#00CCFF”，第2个色块颜色为“#006666”，在“背景”图层上绘制一个宽高为“550px×400px”的矩形，其位置坐标x、y分别为“0”、“0”，如图5-48所示

。第30页/共46页【颜色】面板

矩形最终效果

图5-48绘制背景

（2）将【库】面板中名为“边框”的元件放置到“边框”图层上，并与舞台居中对齐，效果如图5-49所示。3、绘制辅助图形。（1）选择【多角星形】工具，在【属性】面板中设置【笔触高度】为“1”，【笔触颜色】为“红色”，设置【填充颜色】为“无”，单击按钮打开【工具设置】对话框，并设置【边数】为“3”，单击按钮完成设置。第31页/共46页（2）在“辅助层”图层上绘制一个宽高为“242.9px×213px”的三角形，其位置坐标x、y分别为“153.6”、“93.5”，效果如图5-50所示。图5-49布置上下边框

图5-50绘制三角形（3）选择【线条】工具，在【属性】面板中设置【笔触高度】为“1”，【笔触颜色】为“红色”，在“辅助层”图层上的三角形右边绘制两条边作为三棱锥的侧边，效果如图5-51所示。第32页/共46页在绘制两条边时，注意线段需要两两相交，为后面填充图形和对齐图形做好准备。图5-51绘制侧边

（4）选中步骤（3）中绘制的两条边，按Ctrl+T快捷键打开【变形】面板，图形旋转的参数设置如图5-52所示，然后单击按钮，复制两条边，水平移动到三角形的左侧，效果如图5-53所示。复制后的两条边图5-52【变形】面板

图5-53复制两条边第33页/共46页（5）在所有图层的第60帧处插入帧，效果如图5-54所示。4、制作旋转三棱锥效果。（1）将【库】面板中名为“图片1.jpg”的图片放置到“第一面”图层上，并与舞台居中对齐，然后选中舞台上的图片按Ctrl+B快捷键将图片打散，效果如图5-55所示打散图片图5-54在第60帧处插入帧

图5-55放置第一张图片（2）选中“辅助层”图层的第1帧，按Ctrl+C快捷键复制当前帧的图形。

第34页/共46页在复制当前帧图形前，先检查图形是否都被打散，如果存在没有打散的图形，需要先将图形打散后才进行复制操作，这样才能实现后面操作中分离图的效果

（3）选中“第一面”图层的第1帧，按Ctrl+Shift+V

快捷键将图形粘贴到当前位置，锁定并隐藏“辅助层”图层，效果如图5-56所示。（4）选择“第一面”图层上的图形，将多余的线条和填充区域删除，只保留正面三角形区域的图形，效果如图5-57所示。锁定并隐藏图层图5-56锁定并隐藏“辅助层”图层

图5-57分离后的图形第35页/共46页（5）在“第一面”图层的第20帧、第40帧和第60帧处插入关键帧，然后在第21帧处插入空白关键帧。（6）取消隐藏“辅助层”图层，选中“第一面”图层的第20帧处的图形，将图形下面两个顶点移动到如图5-58所示的位置。然后选择【填充变形】工具，向左上移动填充区域的中心点，效果如图5-59所示。移动两个顶点图5-58改变图形形状

图5-59调节渐变的中心位置第36页/共46页（7）选中“第一面”图层的第40帧处的图形，将图形下面两个顶点移动到如图5-60所示的位置。然后选择【填充变形】工具，向右上移动填充区域的中心点，效果如图5-61所示。移动两个顶点图5-60改变图形形状图5-61调节渐变的中心位置

（8）隐藏“辅助层”图层，选择“第一面”图层，在第1帧和第20帧，第40帧和第60帧之间分别创建形状补间动画，观察它们的变化，效果如图5-62所示。

第10帧处的图形

第50帧处的图形

图5-62变形对比

第37页/共46页从图5-62分析可知，第1帧到第20帧的变形是符合需要的动画效果，而第40帧到第60帧的变形是不符合需要的动画效果，这就需要添加形状提示点，让变形的效果达到这里需要的动画效果。（9）选择“第一面”图层的第40帧，执行【修改】/【形状】/【添加形状提示点】菜单命令，为图形添加3个形状提示点，其分布如图5-63所示。（10）选择“第一面”图层的第60帧，调整形状提示点的分布，效果如图5-64所示。图5-63第40帧处提示点的分布

图5-64第60帧处提示点的分布

第38页/共46页在这里添加形状提示点时，一定要将“b”放到上面的顶点处，这样变形才是动画需要的变形效果。同学们可以试一试其他的分布顺序，并观察它们的变形效果有何不同。（11）至此，第1张图片的动画制作已经完成。（12）制作“第二面”和“第三面”图层上的动画效果的方法和制作“第一面”的方法相同，这里给出相关信息如图5-65所示，从而方便读者完成余下工作。第39页/共46页（13）删除“辅助层”图层。（14）保存测试影片，一个旋转的三棱锥效果制作完成。第二面信息

第三面信息

图5-65制作第二面和第三面信息

第40页/共46页5.2.4课堂练习──制作“舌头也摇摆”

使用形状提示点可以制作出各种复杂的形状渐变动，本例将使用形状提示点制作一个可爱的卡通蛇吐着舌头，呆呆的看着你的动画，其制作思路及效果如图5-66所示。图5-66效果图

1、新建一个Flash文档