制作形状补间动画

,第5讲制作形状补间动画,掌握形状补间动画的原理和创建方法。使用形状补间动画表现事物变化的过程。掌握形状提示点的原理和使用方法。使用形状提示点动画表现舌头摆动效果的方法。,重点与难点分析,5.1形状补间动画原理5.2形状提示点原理5.3课后作业,本章大纲,1形状补间动画的概念（1）形状补间动画的概念在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。,形状补间动画用于创建形状变化的动画效果，使一个形状变成另一个形状，同时也可以设置图形形状位置、大小、颜色的变化。只要创建出两个关键帧中的对象，其他过渡帧便可以通过Flash自己制作出来。,4.1补间形状动画的基本概念,形状补间动画,所谓形状补间，就是创建对象的变形动画，使某种形状的对象逐渐地变形为另一种形状。形变动画的对象不能是元件、组或者直接导入的位图图像等，而必须是打散的图形。,制作条件,4.1补间形状动画的基本概念,制作形状补间动画需要具备以下3个条件：在一个形状补间动画中至少有两个关键帧。这两个关键帧中的对象必须是可编辑图形，如果是其他类型的对象，则必须将其转换为可编辑的图形。3.这两个关键帧中的图形必须有一些变化，否则制作的动画将没有动的效果。,1形状补间动画的概念,（2）构成形状补间动画的元素首尾帧上的对象必须是矢量图形,如果是图形元件、按钮、文字或位图的话,必须首先打散（Ctrl+B）。（3）形状补间动画在时间帧面板上的表现形状补间动画建好后，时间帧面板的背景色变为淡绿色。,a、形状改变b、颜色渐变c、位置变化d、大小变化e、透明度变化,2、形变动画分类,5.1形状补间动画原理,5.1.1知识点讲解,形状补间动画是动画制作中一种常用的动画制作方法，它可以补间形状的位置、大小和颜色等，使用形状补间可以制作出千变万化的动画效果。,一、形状补间动画的原理。形状补间动画可以实现两个矢量图形之间颜色、形状、位置的变化，如图5-1所示。,图5-1形状补间动画原理,任务一：图形变形,初始状态,终止状态,形状颜色,位置大小,圆形变方形？,见“五角星变成花”案例形状变化用到的元素必须是非成组、非元件的矢量图形，可以用分离功能把元件和成组打散后进行形状变化。,任务二：图片变形,注：先将位图转换为矢量图（分离）,白雪公主变成小熊,任务三：文字变形,注：（1）分散到图层（2）文本分离CTRL+B,【补间形状动画帧】创建成功的的补间形状动画在两个关键帧之间绘制一个浅绿色背景填充的实线箭头。,成功创建的形状补间帧,补间形状帧,4.1补间形状动画的基本概念,动画欣赏,倒计时效果,【未完成或中断的渐变】如果补间动画出现错误，则本应出现的实线箭头符号显示为虚线。,未成功创建的形状补间帧,4.1补间形状动画的基本概念,未完成或中断的渐变,1、在第一个关键帧上绘制一个形状，如果是文字、图片、组合类对象或者元件，必须先分离，快捷键Ctrl+B。2、在第二个关键帧上绘制另一个形状，如果是文字、图片、组合类对象或者元件，必须先分离，快捷键Ctrl+B。3、在第一个关键帧上单击右键，选择“形状补间”即可实现。,创建步骤,4.2补间形状动画的制作方法,当满足了制作条件后，就可以制作补间形状动画。可以通过右键菜单，也可以通过菜单命令，两者相比，前者更方便快捷，比较常用。1.通过右键菜单创建补间形状动画选择同一图层的两个关键帧之间的任意一帧，单击鼠标右键，在弹出的菜单中选择【创建补间形状】命令。2.通过菜单创建补间形状动画选择同一图层的两个关键帧之间的任意一帧，单击菜单【插入】|【补间形状】命令。,创建补间形状动画,4.2补间形状动画的制作方法,如果想删除创建的补间形状动画，可以通过右键菜单，也可以通过菜单命令，两者相比，前者更方便快捷，比较常用。1.通过右键菜单删除补间形状动画选择已经创建补间形状的两个关键帧之间的任意一帧，单击鼠标右键，在弹出的菜单中选择【删除补间】命令。2.通过菜单命令删除补间形状动画选择已经创建补间形状的两个关键帧之间的任意一帧，单击菜单【插入】|【删除补间】命令。,删除补间形状动画,二、创建形状补间动画。同一图层上，在绘制着不同矢量图形的两关键帧之间任选1帧，然后再在【属性】面板上的【补间】下拉列表中选择【形状】选项，如图5-2所示，就可创建一个形状补间动画。,图5-2创建形状补间动画,三、认识形状补间动画的属性面板。Flash8的【属性】面板随选定的对象不同而发生相应的变化。当建立了一个形状补间动画后，单击时间轴，其【属性】面板如5-2所示。其中经常使用的选项有如下两种：（1）【缓动】选项。在【缓动】选项中输入相应的数值，形状补间动画则会随之发生相应的变化。（2）【混合】选项。在【混合】选项中包含“角形”和“分布式”两个参数。,3、属性面板(1)简易：控制形变快慢（-100100）负值:越来越快即加速运动正值:越来越慢即减速运动(2)混合分布式：该方式可使动画过程中过渡帧的图形比较平滑。角形：创建过渡帧中的图形更多地保留了原来图形的尖角或直线的特征。,思考一：,如何改变形变的速度？,“缓动”值：调节速度的变化“混合”选项：分布式和角形,4、形状提示（1）形状提示的作用在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。,4、形状提示,4.2补间形状动画的制作方法,在制作形变动画时，如何要控制较为复杂的形变，则会出现变化过程杂乱无章的情况。这时，可以通过添加形状提示，控制形状变化。形状提示是一个有颜色的实心小圆，上面标志着小写的英文字母，用于识别起始形状和结束形状中相对应的点。对于每一个形变过程，可以为它添加26个形状提示，从a标记到z标记，实际上只用几个就够了。在制作形状补间动画时，如果使用形状提示在开始和结束形状中选择公共点，这些公共点在过渡形状中保持不变，这样就可以较为精确地控制整个形变过程。,使用形状提示控制形状变化,（2）添加形状提示的方法先在形状补间动画的开始帧上单击一下，再执行【修改】|【形状】|【添加形状提示】命令注：变形提示包含从(a-z)26个字母.在开始关键帧上提示点为黄色，结束为绿色,如提示点安放不成功或不在一条曲线上时为红色.,提示：如果开始关键帧和结束关键帧的形状提示点没有变黄或变绿，则说明这个形状提示点没有在两个帧中对应起来。,（3）添加形状提示的技巧“形状提示”可以连续添加，最多能添加26个。确保“形状提示”是符合逻辑的。形状提示要在形状的边缘才能起作用。另外，要删除所有的形状提示，选择【修改】|【形状】|【删除所有提示】。删除单个形状提示，单击右键，在弹出菜单中选择【删除提示】。,1、补间形状动画只能作用于形状（要对组合、实例、位图或文本对象应用形状补间动画，必须先将这些对象分离为形状）2、形状间的渐变只能在同一图层3、在复杂的形状补间动画中，最好创建中间形状然后再进行补间，而不要只定义起始和结束的形状。4、在起始和结束的形状中，形状提示的顺序必须是一致的。,注意事项,4.1补间形状动画的基本概念,4.2补间形状动画的制作方法,补间形状动画的属性通过【属性】面板的【补间】选项进行设置。首先选择已经创建补间形状动画两个关键帧之间的任意一帧，然后展开【属性】面板。,动画属性设置,4.2补间形状动画的制作方法,（1）缓动：默认情况下，过渡帧之间的变化速率是不变的，可以调整变化速率，创建更为自然地由慢到快的加速或先快后慢的减速效果【取值】0：默认，匀速-100-0:加速0-100：减速（2）混合：共有两种选项“分布式”、“角形”【分布式】：创建的动画中间形状更为平滑【角形】：创建的动画中间形状会保留明显的角和直线,动画属性设置,4.2补间形状动画的制作方法,形状提示点制作方法,【步骤】1.选择开始关键帧，单击【修改】|【形状】|【添加形状提示】，可添加一个提示点，再次选择可继续添加提示点2.调整控制点到合适位置，提示点变黄色3.选择结束关键帧，重复步骤1、2，提示点变绿色提示：如果开始关键帧和结束关键帧的形状提示点没有变黄或变绿，则说明这个形状提示点没有在两个帧中对应起来。,4.2补间形状动画的制作方法,形状提示点制作实例,【正方形变心形】,【课堂实例日月变换】,4.3补间形状动画实例,制作“日月变换”动画,新建Flash文件，然后设置影片的属性，包括背景色和屏幕大小在时间轴窗口选择当前图层，然后单击选择一空白单元格，按F6键，建立起始关键帧。如果是第一帧，可省去此操作选择工具箱中的工具绘制图形，作为补间形状的起始图形。在本例中，选用椭圆工具、选择工具、颜料桶工具绘制月牙,【步骤】,制作“日月变换”动画,4.3补间形状动画实例,在第30帧处插入关键帧，使用椭圆工具绘制太阳在两个关键帧中任选一帧，单击右键选择“创建补间形状”出现浅绿色填充的箭头即可,制作“日月变换”动画,【步骤】,4.3补间形状动画实例,制作“进度条”动画,4.3补间形状动画实例,图层1命名为“框”，编辑内容：一个进度条的框和文字loading新建一个图层“颜色”，内容：画一个颜色条长宽刚好和框的大小一致在第50帧处插入关键帧，将颜色条的宽度调整为和“框”的宽度一样在第1帧和第50帧之间的任意一帧处单击右键，选择【创建补间形状】,制作“进度条”动画,【步骤】,4.3补间形状动画实例,图7-35制作完成的封面图7-36入库后的封面,制作“翻书效果”动画,4.3补间形状动画实例,制作“文字变形”动画,4.3补间形状动画实例,文字对象分散到图层,制作“文字变形”动画,【技巧】先使用【修改】|【分离】将要变形的文字打散（出现网格点），再进行补间形状设置，方法同几何变形。(1)“分离”命令(2)“分散到图层”命令,4.3补间形状动画实例,给“日月变换”动画添加形变提示,4.3补间形状动画实例,给“日月变换”动画添加形变提示,1.添加变形提示关键点,单击【修改】|【形状】|【添加形状提示】，出现提示点a连续执行该命令，可添加更多提示点快捷键（Ctrl+Shift+H）,2.调整变形提示关键点,鼠标拖拽可以调整提示点位置,4.3补间形状动画实例,任务二：图片变形,注：先将位图转换为矢量图（分离）,任务三：文字变形,注：（1）分散到图层（2）文本分离CTRL+B,自主探究,利用提供的丑小鸭素材，制作丑小鸭变成小天鹅的变形过程。,思考二：,如何使形变按预期方式变化，使变形过程更加细腻？,添加形状提示,添加形状提示前后的对比：,1、补间形状动画只能作用于形状（要对组合、实例、位图或文本对象应用形状补间动画，必须先将这些对象分离为形状）2、形状间的渐变只能在同一图层3、在复杂的形状补间动画中，最好创建中间形状然后再进行补间，而不要只定义起始和结束的形状。4、在起始和结束的形状中，形状提示的顺序必须是一致的。,注意事项,4.1补间形状动画的基本概念,案例：变化的字母,1新建一个Flash文件，在图层一的第1帧输入字母“A”。2在第15帧处插入关键帧，并将字母“A”改为“B”。3在第30帧处插入关键帧，并将字母“B”改为“C”。4在第1帧到第15帧之间和第15帧到第30帧之间，创建形状补间动画。,自主探究,课堂总结,1.形状补间动画的步骤：,（1）.初始关键帧：编辑初始对象状态（2）.终止关键帧：编辑终止对象状态（3）.创建补间形状,2.,使用形状提示创建补间形状动画，实现五个福娃依次变形的动画效果。,作业：,使用形状提示创建补间形状动画，实现五个福娃依次变形的动画效果。,作业：,制作“进度条”动画,4.3补间形状动画实例,图层1命名为“框”，编辑内容：一个进度条的框和文字loading新建一个图层“颜色”，内容：画一个颜色条长宽刚好和框的大小一致在第50帧处插入关键帧，将颜色条的宽度调整为和“框”的宽度一样在第1帧和第50帧之间的任意一帧处单击右键，选择【创建补间形状】,制作“进度条”动画,【步骤】,4.3补间形状动画实例,制作“翻书效果”动画,1.制作封底,新建图层“封底”，在第1帧处使用矩形工具绘制封底矩形（黑色），并绘制一个小的内页矩形（蓝色）放置其上方，在第90帧处插入帧（F5）。,4.3补间形状动画实例,制作“翻书效果”动画,2.制作封面,新建图层“封面”，在第1帧处使用矩形工具绘制矩形（橙色，与封底一样大小），放置在封底上方，并对齐。在第15帧处插入关键帧（F6），修改矩形为棱形。选1-15之间的任意帧，添加补间形状,4.3补间形状动画实例,4.3补间形状动画实例,制作“翻书效果”动画,2.制作封面,在第16帧处插入关键帧（F6），将菱形水平翻转，并移动到封底左侧。在第30帧处插入关键帧，将第1帧处的矩形复制粘贴过来，并对齐。选16-30之间的任意帧，添加补间形状,4.3补间形状动画实例,制作“翻书效果”动画,3.制作内页,新建图层“内页1”，在第31帧处插入关键帧（F6），将内页矩形复制粘贴过来。在第45帧处插入关键帧（F6），修改矩形为棱形。选31-45之间的任意帧，添加补间形状,4.3补间形状动画实例,制作“翻书效果”动画,3.制作内页,在第46帧处插入关键帧（F6），将菱形水平翻转，并移动到封底左侧。在第60帧处插入关键帧，将第31帧处的矩形复制粘贴过来，并对齐。选46-60之间的任意帧，添加补间形状,更为复杂的翻书效果制作关键界面,4.3补间形状动画实例,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,其中【字体】为“BookmanOldStyle”（读者可以设置为自己喜欢的字体或者自行购买外部字体库）。,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帧的变形是不符合需要的动画效果，这就需要添加形状提示点，让