Flash8制作形状补间动画教案资料.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,Flash8制作形状补间动画,5.1,形状补间动画原理,5.2,形状提示点原理,5.3,课后作业,本章大纲,5.1,形状补间动画原理,5.1.1,知识点讲解,形状补间动画是动画制作中一种常用的动画制作方法，它可以补间形状的位置、大小和颜色等，使用形状补间可以制作出千变万化的动画效果。,一、形状补间动画的原理。,形状补间动画可以实现两个矢量图形之间颜色、形状、位置的变化，如图,5-1,所示。,图,5-1,形状补间动画原理,绿色渐变,红色渐变,舞台左边,舞台右边,小苹果,大苹果,颜色补间,位置补间,形状补间,二、创建形状补间动画。,同一图层上，在绘制着不同矢量图形的两关键帧之间任选,1,帧，然后再在,【,属性,】,面板上的,【,补间,】,下拉列表中选择,【,形状,】,选项，如图,5-2,所示，就可创建一个形状补间动画。,图,5-2,创建形状补间动画,三、认识形状补间动画的属性面板。,Flash 8,的,【,属性,】,面板随选定的对象不同而发生相应的变化。当建立了一个形状补间动画后，单击时间轴，其,【,属性,】,面板如,5-2,所示。,其中经常使用的选项有如下两种：,（,1,）,【,缓动,】,选项。在,【,缓动,】,选项中输入相应的数值，形状补间动画则会随之发生相应的变化。（,2,）,【,混合,】,选项。在,【,混合,】,选项中包含“角形”和“分布式”两个参数。,5.1.2,范例解析（一）创建形状补间动画练习,请同学们在老师的带领下对形状补间动画的创建方法和原理进行进一步的熟悉，并跟随以下要求进行操作训练。,1,、新建一个,Flash,文档，然后利用,【,椭圆,】,工具在舞台上绘制一个圆形，并在,【,属性,】,面板中设置圆的颜色为“,#00FF00”,，宽高为“,7px7px”,，如图,5-3,所示。,2,、在第,20,帧处插入关键帧，然后以圆为基点绘制一片树叶，如图,5-4,所示。,图,5-3,绘制圆形,图,5-4,绘制树叶,3,、在第,20,帧处，首先删除“圆”，然后填充树叶，效果如图,5-5,所示。,#FFFFFF,#339900,【,颜色,】,面板,树叶效果,图,5-5,填充树叶,4,、在第,40,帧处插入关键帧，然后调节树叶的颜色效果如图,5-6,所示,【,颜色,】,面板,树叶效果,#FFFFFF,#CC9900,5,、在第,60,帧处将树叶移出舞台。,6,、选中第,1,帧，然后在,【,属性,】,面板的,【,补间,】,下拉列表中选择“形状”选项，如图,5-7,所示。则创建出第,1,帧第,20,帧之间的形状补间动画,。,图,5-7,创建补间动画,7,、使用相同的方法，在第,20,帧、第,40,帧两处分别创建形状补间动画。,8,、按,Ctrl+Enter,快捷键测试播放影片，观看这个由小圆成长为一片绿叶，再枯黄，再凋零的动画。,9,、关闭测试播放器，选中第,40,帧，然后在属性面板中分别设置,【,缓动,】,为“,100100”,之间不同的值，然后分别测试影片，观看树叶凋落动画的速率变化,。,5.1.3,范例解析（二）制作,“,浪漫绽放,”,花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制作一个“浪漫的绽放”动画，带领读者来一同体验自己绘制出的浪漫感觉，其设计思路及效果如图,5-8,所示。,图,5-8,制作思路及效果,1,、制作叶片的生长,。,（,1,）打开教学资源中“素材,第,5,讲,浪漫的绽放,浪漫的绽放,-,模板,.fla”,文件，场景效果如图,5-9,所示。,（,2,）在“背景”图层之上新建并重命名图层，直至图层效果如图,5-10,所示。,图,5-9,模板场景,图,5-10,图层效果,（,3,）选择,【,矩形,】,工具，在,【,属性,】,面板中设置,【,笔触颜色,】,为“无”，,【,填充颜色,】,为“,#37C030”,，在“叶片,1”,图层上绘制一个宽高为“,5px5px”,的矩形，并将其置于花盆的后面，效果如图,5-11,所示。,（,4,）在“叶片,1”,图层的第,10,帧处插入关键帧，利用,【,选择,】,工具调整第,10,帧处“矩形”的形状如图,5-12,所示。,（,5,）在“叶片,1”,图层的第,20,帧处插入关键帧，利用,【,选择,】,工具调整第,20,帧处“矩形”的形状如图,5-13,所示。,矩形,图,5-11,第,1,帧叶片形状,图,5-12,第,10,帧叶片形状,图,5-13,第,20,帧叶片形状,（,6,）在第,1,帧第,10,帧之间、第,10,帧第,20,帧之间创建形状补间动画，这样一片叶子的生长过程就制作完成。,（,7,）使用同样的方法在图层“叶片,2”,、“叶片,3”,、“叶片,4”,、“叶片,5”,、“叶片,6”,上分别制作其他,5,片叶子的生长，完成叶片的生长动画。此时的场景效果如图,5-14,所示，,【,时间轴,】,效果如图,5-15,所示。,叶片,6,叶片,2,叶片,4,叶片,5,叶片,3,叶片,1,图,5-14,完成叶片制作,在制作叶片生长动画效果时，注意调整叶片生长的先后顺序，尽量使叶片生长看起来贴近自然。每个叶片的生长时间也可根据叶片大小有所不同。建议将制作完成的图层进行锁定，以免产生误操作。,图,5-15 【,时间轴,】,效果一,2,、制作花梗的生长。,（,1,）在“叶片,6”,图层之上新建一个图层并重命名为“花梗”图层。,（,2,）在“花梗”图层的第,65,帧处插入关键帧。,（,3,）选择,【,矩形,】,工具，在,【,属性,】,面板中设置,【,笔触颜色,】,为“无”，,【,填充颜色,】,为“,#CCE492”,，在“花梗”图层的第,65,帧处绘制一个宽高为“,5px5px”,的矩形，而后将其置于花盆的后面，效果如图,5-16,所示。,（,4,）利用,【,选择,】,工具调整矩形的形状如图,5-17,所示。,（,5,）在“花梗”图层的第,105,帧处插入关键帧，利用,【,选择,】,工具调整第,105,帧处“花梗”的形状如图,5-18,所示。,（,6,）在第,65,帧第,105,帧之间创建形状补间动画，这样花梗的生长过程就制作完成了。,花梗,图,5-16,原始矩形,图,5-17,花梗的原始形状,图,5-18,第,105,帧花梗形状,3,、制作花瓣的生长。,（,1,）在“花梗”图层之上新建并重命名图层，直至图层效果如图,5-19,所示。,（,2,）在“花瓣,1”,图层的第,105,帧处插入关键帧。,（,3,）选择,【,椭圆,】,工具，在,【,属性,】,面板中设置,【,笔触颜色,】,为“无”，,【,填充颜色,】,为“,#F997DC”,，在“花瓣”图层的第,105,帧处绘制一个宽高为“,1.3px1.1px”,的椭圆，并将其置于花梗顶端花苞的上面，效果如图,5-20,所示。,椭圆,图,5-19,图层效果,图,5-20,第,105,帧花瓣形状,在绘制花瓣的原始形状时，需要将其放置在花苞上并适当调整位置，使得花开得更自然，也达到掩盖花苞的目的,。,（,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,完成制作,（,7,）最终的场景效果如图,5-23,所示，时间轴效果如图,5-24,所示,。,图,5-23,最终场景效果,图,5-24,制作完成后的,【,时间轴,】,效果,（,8,）保存测试影片，一株美丽的花儿浪漫绽放的动画效果制作完成。,5.1.4,课堂练习制作,“,魔幻扑克,”,请同学们自己动手制作一个扑克变幻的动画，其效果如图,5-25,所示,。,1,、,新建一个,Flash,文档，设置文档,【,尺寸,】,为“,500px353px”,，文档其他属性使用默认参数。,图,5-25,魔幻扑克效果,2,、执行,【,文件,】/【,导入,】/【,打开外部库,】,菜单命令，将教学资源中的“素材,第,5,讲,魔幻扑克,魔幻扑克,-,素材,.fla”,文件打开，将外部库里的元件和图片复制到当前库中，效果如图,5-26,所示。,3,、将,【,库,】,面板中的“背景”位图拖入场景中，设置其宽高为“,500px353px”,，并相对舞台居中对齐，效果如图,5-27,所示。,图,5-26 【,库,】,面板,图,5-27,导入背景图片,4,、将“背景”图层锁定，在“背景”图层上新建并重命名图层，直到图层效果如图,5-28,所示，并在所有图层的第,20,帧处插入帧。,5,、选择“红桃,2,参考”图层，将,【,库,】,面板中的“红桃,2,参考图”图形元件拖入到舞台中，并相对舞台居中对齐。在,【,属性,】,面板中设置其,【Alpha】,参数为“,50%”,，效果如图,5-29,所示。,图,5-28,设置大小和位置,图,5-29,拖入“红桃,2,参考图”,6,、根据参考图在各个图层上绘制花色为“红桃,2”,纸牌各个部分的形状，如图,5-30,所示。,图,5-30,绘制红桃,2,其中,【,字体,】,为“,Bookman Old Style”,（读者可以设置为自己喜欢的字体或者自行购买外部字体库）。,7,、在“花色上”、“花色中”、“花色下”、“数字上”、“数字下”图层的第,20,帧处按,F7,快捷键插入空白关键帧。使用同样的方法绘制花色为“黑桃,A”,的纸牌，效果如图,5-31,所示。,8,、将“数字下”、“数字上”图层的第,1,帧和第,20,帧处的数字打散。,9,、分别在“花色上”、“花色中”、“花色下”、“数字上”、“数字下”图层的第,1,帧第,20,帧之间创建“形状补间“动画，时间轴效果如图,5-32,所示。,图,5-31,绘制黑桃,A,图,5-32,绘制倾斜为,45,的线条,10,、保存测试影片，一个简单而又神奇的扑克变幻动画制作完成,。,5.2,形状提示点原理,当用形状补间动画制作一些较为复杂的变形动画时，常常会使画面变得混乱，根本达不到用户想要的变化过程，这时就需要使用形状提示点来进行控制。,5.2.1,知识点讲解,一、添加形状提示。,单击形状补间动画的开始帧，执行,【,修改,】/【,形状,】/【,添加形状提示,】,菜单命令。这样在形状上就会增加一个带字母的红色圆圈，相应地在结束帧的形状上也会增加形状提示符，如图,5-33,所示。,分别将这两个形状提示符安放到适当的位置时，起始关键帧上的形状提示点为黄色，结束关键帧的形状提示点为绿色，如图,5-34,所示,第,1,帧,第,10,帧,显示为黄色,显示为绿色,图,5-33,未调节,图,5-34,调节成功,二、形状提示原理。,继续添加形状提示点，并调节提示点位置，此时图形变化的过程如图,5-35,所示。,图,5-35,使用形状提示,图,5-36,所示为未添加形状提示点的变化过程，经过观察可以清楚的了解形状提示的功能和原理，即形状提示点用于识别起始形状和结束形状中相对应的点，并用字母,a,到,z,来表示,。,图,5-36,未使用形状提示,5.2.2,范例解析（一）使用形状提示点练习,请同学们在老师的带领下对形状提示点的创建方法和原理进行进一步的熟悉，并跟随以下要求进行操作训练。,1,、打开教学资源中“素材,第,5,讲,形状提示点练习,飞翔的蝙蝠,.fla”,文件。,2,、分别在第,1,帧第,10,帧之间，第,11,帧第,20,帧之间，第,21,帧第,30,帧之间，第,31,帧第,40,帧之间创建形状补间动画，拖动时间轴观察图形的渐变效果，如图,5-37,所示。,图,5-37,形状补间效果,3,、选中“图层,1”,的第,1,帧，执行,【,修改,】/【,形状,】/【,添加形状提示,】,菜单命令添加一个形状提示点，并将其拖动到蝙蝠的翅膀上，如图,5-38,所示。选中第,10,帧，将提示点也拖动到蝙蝠的翅膀上，此时形状提示点变为绿色，如图,5-39,所示。,通过观察可以发现，此时的形状补间动画效果并不理想，整个形状补间动画效果显的十分的杂乱无章，没有达到预期的效果,。,图,5-38,添加形状提示点一,图,5-39,调整形状提示点一,4,、使用同样的方法添加,3,个形状提示点，并分别在第,1,帧和第,10,帧调整提示点的位置，效果如图,5-40,和图,5-41,所示。,图,5-40,添加形状提示点二,图,5-41,调整形状提示点二,5,、使用同样的方法为后续的形状补间动画添加形状提示点，图,5-42,所示为第,31,帧处的形状提示点，图,5-43,所示为第,40,帧处的形状提示点。,图,5-42,添加形状提示点三,图,5-43,调整形状提示点三,6,、此时再拖动时间轴观察这个形状补间动画的变换效果，如图,5-44,所示。,图,5-44,添加形状提示点后的效果,5.2.3,范例解析（二）制作,“,旋转的三棱锥,”,本例将使用形状提示点动画来制作一个旋转的三棱锥效果，其设计思路及效果如图,5-45,所示。,1,、素材准备。,（,1,）新建一个,Flash,文档，文档所有属性使用默认参数,。,图,5-45,设计思路及效果,（,2,）新建并重命名图层，直至图层效果如图,5-46,所示。,（,3,）执行,【,文件,】/【,导入,】/【,打开外部库,】,菜单命令，将教学资源中的“素材,第,5,讲,旋转的三棱锥,.fla”,文件打开，将外部库里的元件和图片复制到当前,【,库,】,面板中，效果如图,5-47,所示。,图,5-46,图层效果,图,5-47,复制后的,【,库,】,面板,2,、设置主场景。,（,1,）选择,【,矩形,】,工具，在,【,属性,】,面板中设置,【,笔触颜色,】,为“无”，,【,填充颜色,】,的,【,类型,】,为“线性”，从左至右第,1,个色块颜色为“,#00CCFF”,，第,2,个色块颜色为“,#006666”,，在“背景”图层上绘制一个宽高为“,550px400px”,的矩形，其位置坐标,x,、,y,分别为“,0”,、“,0”,，如图,5-48,所示,。,【,颜色,】,面板,矩形最终效果,图,5-48,绘制背景,（,2,）将,【,库,】,面板中名为“边框”的元件放置到“边框”图层上，并与舞台居中对齐，效果如图,5-49,所示。,3,、绘制辅助图形。,（,1,）选择,【,多角星形,】,工具，在,【,属性,】,面板中设置,【,笔触高度,】,为“,1”,，,【,笔触颜色,】,为“红色”，设置,【,填充颜色,】,为“无”，单击 按钮打开,【,工具设置,】,对话框，并设置,【,边数,】,为“,3”,，单击 按钮完成设置。,（,2,）在“辅助层”图层上绘制一个宽高为“,242.9px213px”,的三角形，其位置坐标,x,、,y,分别为“,153.6”,、“,93.5”,，效果如图,5-50,所示,。,图,5-49,布置上下边框,图,5-50,绘制三角形,（,3,）选择,【,线条,】,工具，在,【,属性,】,面板中设置,【,笔触高度,】,为“,1”,，,【,笔触颜色,】,为“红色”，在“辅助层”图层上的三角形右边绘制两条边作为三棱锥的侧边，效果如图,5-51,所示。,在绘制两条边时，注意线段需要两两相交，为后面填充图形和对齐图形做好准备,。,图,5-51,绘制侧边,（,4,）选中步骤（,3,）中绘制的两条边，按,Ctrl+T,快捷键打开,【,变形,】,面板，图形旋转的参数设置如图,5-52,所示，然后单击按钮，复制两条边，水平移动到三角形的左侧，效果如图,5-53,所示,。,复制后的两条边,图,5-52 【,变形,】,面板,图,5-53,复制两条边,（,5,）在所有图层的第,60,帧处插入帧，效果如图,5-54,所示。,4,、制作旋转三棱锥效果。,（,1,）将,【,库,】,面板中名为“图片,1.jpg”,的图片放置到“第一面”图层上，并与舞台居中对齐，然后选中舞台上的图片按,Ctrl+B,快捷键将图片打散，效果如图,5-55,所示,打散图片,图,5-54,在第,60,帧处插入帧,图,5-55,放置第一张图片,（,2,）选中“辅助层”图层的第,1,帧，按,Ctrl+C,快捷键复制当前帧的图形。,在复制当前帧图形前，先检查图形是否都被打散，如果存在没有打散的图形，需要先将图形打散后才进行复制操作，这样才能实现后面操作中分离图的效果,（,3,）选中“第一面”图层的第,1,帧，按,Ctrl+Shift+V,快捷键将图形粘贴到当前位置，锁定并隐藏“辅助层”图层，效果如图,5-56,所示。,（,4,）选择“第一面”图层上的图形，将多余的线条和填充区域删除，只保留正面三角形区域的图形，效果如图,5-57,所示。,锁定并隐藏图层,图,5-56,锁定并隐藏“辅助层”图层,图,5-57,分离后的图形,（,5,）在“第一面”图层的第,20,帧、第,40,帧和第,60,帧处插入关键帧，然后在第,21,帧处插入空白关键帧。,（,6,）取消隐藏“辅助层”图层，选中“第一面”图层的第,20,帧处的图形，将图形下面两个顶点移动到如图,5-58,所示的位置。然后选择,【,填充变形,】,工具，向左上移动填充区域的中心点，效果如图,5-59,所示。,移动两个顶点,图,5-58,改变图形形状,图,5-59,调节渐变的中心位置,（,7,）选中“第一面”图层的第,40,帧处的图形，将图形下面两个顶点移动到如图,5-60,所示的位置。然后选择,【,填充变形,】,工具，向右上移动填充区域的中心点，效果如图,5-61,所示,。,移动两个顶点,图,5-60,改变图形形状,图,5-61,调节渐变的中心位置,（,8,）隐藏“辅助层”图层，选择“第一面”图层，在第,1,帧和第,20,帧，第,40,帧和第,60,帧之间分别创建形状补间动画，观察它们的变化，效果如图,5-62,所示。,第,10,帧处的图形,第,50,帧处的图形,图,5-62,变形对比,从图,5-62,分析可知，第,1,帧到第,20,帧的变形是符合需要的动画效果，而第,40,帧到第,60,帧的变形是不符合需要的动画效果，这就需要添加形状提示点，让变形的效果达到这里需要的动画效果。,（,9,）选择“第一面”图层的第,40,帧，执行,【,修改,】/【,形状,】/【,添加形状提示点,】,菜单命令，为图形添加,3,个形状提示点，其分布如图,5-63,所示。,（,10,）选择“第一面”图层的第,60,帧，调整形状提示点的分布，效果如图,5-64,所示,。,图,5-63,第,40,帧处提示点的分布,图,5-64,第,60,帧处提示点的分布,在这里添加形状提示点时，一定要将“,b”,放到上面的顶点处，这样变形才是动画需要的变形效果。同学们可以试一试其他的分布顺序，并观察它们的变形效果有何不同。,（,11,）至此，第,1,张图片的动画制作已经完成。,（,12,）制作“第二面”和“第三面”图层上的动画效果的方法和制作“第一面”的方法相同，这里给出相关信息如图,5-65,所示，从而方便读者完成余下工作。,（,13,）删除“辅助层”图层。,（,14,）保存测试影片，一个旋转的三棱锥效果制作完成。,第二面信息,第三面信息,图,5-65,制作第二面和第三面信息,5.2.4,课堂练习制作,“,舌头也摇摆,”,使用形状提示点可以制作出各种复杂的形状渐变动，本例将使用形状提示点制作一个可爱的卡通蛇吐着舌头，呆呆的看着你的动画，其制作思路及效果如图,5-66,所示。,图,5-66,效果图,1,、新建一个,Flash,文档，文档属性使用默认参数。,2,、将默认的“图层,1”,重命名为“背景”图层，在“背景”图层之上新建一个图层并重命名为“蛇”,。,3,、执行,【,文件,】/【,导入,】/【,打开外部库,】,菜单命令，将教学资源中的“素材,第,5,讲,舌头也摇摆,舌头也摇摆,-,素材,.fla”,文件打开，将外部库里所有的元件复制到当前,【,库,】,面板中，如图,5-67,所示。,4,、选择“背景”图层，将“背景”元件拖入场景，相对舞台居中对齐，并在“背景”图层的第,90,帧处按,F5,快捷键插入帧。,选择“蛇”图层，将“蛇”元件拖入场景，并将他的“身体”与草地上,5,、的阴影对齐，然后锁定“蛇”图层和“背景”图层。此时的场景效果如图,5-68,所示，时间轴效果如图,5-69,所示,。,图,5-67 【,库,】,面板,图,5-68,场景效果,图,5-69 【,时间轴,】,效果二,6,、在“蛇”图层之上新建一个图层并重命名为“蛇信子”图层。,7,、这里给出“蛇信子”图层的相关信息，由读者独立完成其形状提示动画的制作，如图,5-70,所示。,图,5-70,蛇信子,添加形状提示的过程中应该注意以下几点。,1,增加控制点只能在补间动画的开始帧进行。,2,控制点用字母表示，最多只有,26,个。,3,控制点的顺序要符合逻辑。例如在开始帧的一条直线上按,a,、,b,、,c,顺序放置,3,个控制点，在结束帧的相应帧的直线就不能按,a,、,c,、,b,顺序放置。,4,控制点并非设置得越多越好，应该根据实际情况来决定。,8,、保存测试影片，一个卡通蛇吐着左右摇摆的舌头的动画制作完成,5.3,课后作业,一、操作题,1,、使用形状补间动画制作如图,5-71,所示的变形效果。,2,、使用性质补间动画制作一个简单的雨滴效果，如图,5-72,所示,。,图,5-71,变形效果,图,5-72,雨滴效果,此课件下载可自行编辑修改，仅供参考！感谢您的支持，我们努力做得更好！谢谢,