大学制作形状补间动画

1、会计学1大学制作形状补间动画大学制作形状补间动画 5.1 形状补间动画原理 5.2 形状提示点原理 5.3 课后作业本章大纲本章大纲1 1形状补间动画的概念形状补间动画的概念（1 1）形状补间动画的概念）形状补间动画的概念 在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。4.1 补间形状动画的基本概念4.1 补间形状动画的基本概念补间形状动画的基本概念制作形状补间动画需要具备以下制作形状补间动画需要具备以下3 3个条件：个条件：1.1. 在一个形状补

2、间动画中在一个形状补间动画中至少有两个关键帧至少有两个关键帧。2.2. 这这两个关键帧中的对象必须是可编辑图形两个关键帧中的对象必须是可编辑图形，如果是其他类，如果是其他类型的对象，则必须将其转换为可编辑的图形。型的对象，则必须将其转换为可编辑的图形。3.3.这这两个关键帧中的图形必须有一些变化两个关键帧中的图形必须有一些变化，否则制作的动画，否则制作的动画将没有动的效果。将没有动的效果。（2 2）构成形状补间动画的元素）构成形状补间动画的元素 （3 3）形状补间动画在时间帧面板上的表现）形状补间动画在时间帧面板上的表现 5.1 形状补间动画原理 5.1.1 知识点讲解 形状补间动画是动画制作

3、中一种常用的动画制作方法，它可以补间形状的位置、大小和颜色等，使用形状补间可以制作出千变万化的动画效果。 一、形状补间动画的原理。一、形状补间动画的原理。 形状补间动画可以实现两个矢量图形之间颜色、形状、位置的变化，如图5-1所示 。 图图5-1 形状补间动画原理形状补间动画原理 绿色渐变红色渐变舞台左边舞台右边小苹果大苹果颜色补间位置补间形状补间任务一：图形变形任务一：图形变形初始状态初始状态终止状态终止状态形状形状 颜色颜色位置位置 大小大小练习：练习：圆形变方形？圆形变方形？任务二：图片变形任务二：图片变形注：先将位图转换为矢量图（分离）注：先将位图转换为矢量图（分离）白雪公主变成小熊任

4、务三：文字变形任务三：文字变形注：注：（1 1）分散到图层）分散到图层 （2 2）文本分离）文本分离 CTRL+BCTRL+B4.1 补间形状动画的基本概念动画欣赏动画欣赏倒计时效果倒计时效果4.1 补间形状动画的基本概念创建步骤创建步骤4.2 补间形状动画的制作方法4.2 补间形状动画的制作方法二、创建形状补间动画二、创建形状补间动画 。 同一图层上，在绘制着不同矢量图形的两关键同一图层上，在绘制着不同矢量图形的两关键帧之间任选帧之间任选1帧，然后再在帧，然后再在【属性属性】面板上的面板上的【补间补间】下拉列表中选择下拉列表中选择【形状形状】选项，如图选项，如图5-2所示，就所示，就可创建一

5、个形状补间动画可创建一个形状补间动画 。图图5-2 创建形状补间动画创建形状补间动画 三、认识形状补间动画的属性面板。三、认识形状补间动画的属性面板。 Flash 8的的【属性属性】面板随选定的对象不同而发面板随选定的对象不同而发生相应的变化。当建立了一个形状补间动画后，单生相应的变化。当建立了一个形状补间动画后，单击时间轴，其击时间轴，其【属性属性】面板如面板如5-2所示。所示。 其中经常使用的选项有如下两种其中经常使用的选项有如下两种 ： （1）【缓动缓动】选项选项 。在。在【缓动缓动】选项中输入相选项中输入相应的数值，形状补间动画则会随之发生相应的变化应的数值，形状补间动画则会随之发生相

6、应的变化 。（。（2）【混合混合】选项选项 。在。在【混合混合】选项中包含选项中包含“角形角形”和和“分布式分布式”两个参数。两个参数。 3 3、属性面板、属性面板(1)简易：控制形变快慢（-100100） 负值:越来越快即加速运动 正值:越来越慢即减速运动(2)混合 分布式：该方式可使动画过程中过渡帧的图形比较平滑。 角形：创建过渡帧中的图形更多地保留了原来图形的尖角或直线的特征。思考一：思考一：如何改变形变的速度？如何改变形变的速度？“缓动”值：调节速度的变化“混合”选项：分布式和角形4.2 补间形状动画的制作方法 提示：如果开始关键帧和结束关键帧的形状提示点没有变黄或变绿，则说明这个形状

7、提示点没有在两个帧中对应起来。（3 3）添加形状提示的技巧）添加形状提示的技巧 1.“形状提示”可以连续添加，最多能添加26个。 2.确保“形状提示”是符合逻辑的。3.形状提示要在形状的边缘才能起作用。4.另外，要删除所有的形状提示，选择【修改】|【形状】|【删除所有提示】。删除单个形状提示，单击右键，在弹出菜单中选择【删除提示】。 4.1 补间形状动画的基本概念补间形状动画的基本概念4.2 补间形状动画的制作方法补间形状动画的制作方法4.2 补间形状动画的制作方法补间形状动画的制作方法4.2 补间形状动画的制作方法补间形状动画的制作方法4.2 补间形状动画的制作方法【课堂实例日月变换】4.3

8、 补间形状动画实例1.新建Flash文件，然后设置影片的属性，包括背景色和屏幕大小2.在时间轴窗口选择当前图层，然后单击选择一空白单元格，按F6键，建立起始关键帧。如果是第一帧，可省去此操作3.选择工具箱中的工具绘制图形，作为补间形状的起始图形。在本例中，选用椭圆工具、选择工具、颜料桶工具绘制月牙 【步骤】4.3 补间形状动画实例4.在第30帧处插入关键帧，使用椭圆工具绘制太阳5.在两个关键帧中任选一帧，单击右键选择“创建补间形状”6.出现浅绿色填充的箭头即可 【步骤】4.3 补间形状动画实例4.3 补间形状动画实例补间形状动画实例1.1.图层图层1 1命名为命名为“框框”，编辑内容：一个进度

9、条的框和文，编辑内容：一个进度条的框和文字字loadingloading2.2.新建一个图层新建一个图层“颜色颜色”，内容：画一个颜色条长宽刚，内容：画一个颜色条长宽刚好和框的大小一致好和框的大小一致3.3.在第在第5050帧处插入关键帧，将颜色条的宽度调整为和帧处插入关键帧，将颜色条的宽度调整为和“框框”的宽度一样的宽度一样4.4.在第在第1 1帧和第帧和第5050帧之间的任意一帧处单击右键，选择帧之间的任意一帧处单击右键，选择【创建补间形状创建补间形状】【步骤步骤】4.3 补间形状动画实例补间形状动画实例 图7-35 制作完成的封面 图7-36 入库后的封面 4.3 补间形状动画实例补间形

10、状动画实例 4.3 补间形状动画实例 【技巧】先使用【修改】|【分离】将要变形的文字打散（出现网格点），再进行补间形状设置，方法同几何变形。(1) “分离”命令 (2) “分散到图层”命令 4.3 补间形状动画实例4.3 补间形状动画实例1. 添加变形提示关键点 单击【修改】|【形状】|【添加形状提示】，出现提示点a连续执行该命令，可添加更多提示点快捷键（Ctrl+Shift+H） 2. 调整变形提示关键点鼠标拖拽可以调整提示点位置 4.3 补间形状动画实例任务二：图片变形任务二：图片变形注：先将位图转换为矢量图（分离）注：先将位图转换为矢量图（分离）任务三：文字变形任务三：文字变形注：注：（

11、1 1）分散到图层）分散到图层 （2 2）文本分离）文本分离 CTRL+BCTRL+B自主探究自主探究 利用提供的丑小鸭素材，制作丑小鸭变成小天鹅的变形过程。思考二：思考二： 如何使形变按预期方式变化，使变形过程更加细腻？添加形状提示添加形状提示添加形状提示前后的对比：添加形状提示前后的对比：4.1 补间形状动画的基本概念自主探究自主探究 课堂总结课堂总结1.形状补间动画的步骤：（1）.初始关键帧：编辑初始对象状态（2）.终止关键帧：编辑终止对象状态（3）.创建补间形状特点特点形状补间动画形状补间动画在时间轴上的表现淡绿色背景加长箭头组成元素矢量图形；如果使用元件、按钮、文字，则必须先打散完成

12、作用实现两个形状之间的变化;或一个形状的大小、位置、颜色等的变化。2.使用形状提示创建补间形状动画，实现五个福娃依次变形的动画效果。作业：作业：使用形状提示创建补间形状动画，实现五个福娃依次变形的动画效果。作业：作业：4.3 补间形状动画实例1.图层1命名为“框”，编辑内容：一个进度条的框和文字loading2.新建一个图层“颜色”，内容：画一个颜色条长宽刚好和框的大小一致3.在第50帧处插入关键帧，将颜色条的宽度调整为和“框”的宽度一样4.在第1帧和第50帧之间的任意一帧处单击右键，选择【创建补间形状】【步骤】4.3 补间形状动画实例1. 制作封底 新建图层“封底”，在第1帧处使用矩形工具绘

13、制封底矩形（黑色），并绘制一个小的内页矩形（蓝色）放置其上方，在第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”，在第

14、31帧处插入关键帧（F6），将内页矩形复制粘贴过来。在第45帧处插入关键帧（F6），修改矩形为棱形。选31-45之间的任意帧，添加补间形状4.3 补间形状动画实例3. 制作内页在第46帧处插入关键帧（F6），将菱形水平翻转，并移动到封底左侧。在第60帧处插入关键帧，将第31帧处的矩形复制粘贴过来，并对齐。选46-60之间的任意帧，添加补间形状 4.3 补间形状动画实例5.1.2 范例解析（一）创建形状补间动画练习 请同学们在老师的带领下对形状补间动画的创请同学们在老师的带领下对形状补间动画的创建方法和原理进行进一步的熟悉，并跟随以下要求建方法和原理进行进一步的熟悉，并跟随以下要求进行操作训练进

15、行操作训练 。1、新建一个、新建一个Flash文档，然后利用文档，然后利用【椭圆椭圆】工具在舞工具在舞台上绘制一个圆形，并在台上绘制一个圆形，并在【属性属性】面板中设置圆面板中设置圆的颜色为的颜色为“#00FF00”，宽高为，宽高为“7px7px”，如，如图图5-3所示所示 。2、在第、在第20帧处插入关键帧，然后以圆为基点绘制一帧处插入关键帧，然后以圆为基点绘制一片树叶，如图片树叶，如图5-4所示。所示。图图5-3 绘制圆形绘制圆形 图图5-4 绘制树叶绘制树叶 3、在第、在第20帧处，首先删除帧处，首先删除“圆圆”，然后填充树叶，然后填充树叶，效果如图，效果如图5-5所示。所示。 #FFF

16、FFF#339900【颜色颜色】面板面板 树叶效果树叶效果 图图5-5 填充树叶填充树叶4、在第、在第40帧处插入关键帧，然后调节树叶的颜色效帧处插入关键帧，然后调节树叶的颜色效果如图果如图5-6所示所示 【颜色颜色】面板面板 树叶效果树叶效果 #FFFFFF#CC99005、在第、在第60帧处将树叶移出舞台。帧处将树叶移出舞台。6、选中第、选中第1帧，然后在帧，然后在【属性属性】面板的面板的【补间补间】下下拉列表中选择拉列表中选择“形状形状”选项，如图选项，如图5-7所示。则创建所示。则创建出第出第1帧第帧第20帧之间的形状补间动画帧之间的形状补间动画 。图图5-7 创建补间动画创建补间动画

17、 7、使用相同的方法，在第、使用相同的方法，在第20帧、第帧、第40帧两处分别创建形帧两处分别创建形状补间动画。状补间动画。8、按、按Ctrl+Enter 快捷键测试播放影片，观看这个由小圆快捷键测试播放影片，观看这个由小圆成长为一片绿叶，再枯黄，再凋零的动画。成长为一片绿叶，再枯黄，再凋零的动画。9、关闭测试播放器，选中第、关闭测试播放器，选中第40帧，然后在属性面板中分帧，然后在属性面板中分别设置别设置【缓动缓动】为为“100100”之间不同的值，然后之间不同的值，然后分别测试影片，观看树叶凋落动画的速率变化分别测试影片，观看树叶凋落动画的速率变化 。5.1.3 范例解析（二）制作“浪漫绽

18、放” 花是带给人们幸福与浪漫的精灵。本例将使用形状花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制作一个补间动画来制作一个“浪漫的绽放浪漫的绽放”动画，带领读者动画，带领读者来一同体验自己绘制出的浪漫感觉，其设计思路及效来一同体验自己绘制出的浪漫感觉，其设计思路及效果如图果如图5-8所示所示 。图图5-8 制作思路及效果制作思路及效果 1、制作叶片的生长、制作叶片的生长 。（1）打开教学资源中“素材第5讲浪漫的绽放浪漫的绽放-模板.fla”文件，场景效果如图5-9所示。（2）在“背景”图层之上新建并重命名图层，直至图层效果如图5-10所示。图图5-9 模板场景模板场景 图图5-10 图

19、层效果图层效果 （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帧

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

21、长动画效果时，注意调整叶片生长的先后顺序，尽量使意调整叶片生长的先后顺序，尽量使叶片生长看起来贴近自然。每个叶片叶片生长看起来贴近自然。每个叶片的生长时间也可根据叶片大小有所不的生长时间也可根据叶片大小有所不同。建议将制作完成的图层进行锁定同。建议将制作完成的图层进行锁定，以免产生误操作。，以免产生误操作。图图5-15 【时间轴时间轴】效果一效果一 2、制作花梗的生长。、制作花梗的生长。（1）在）在“叶片叶片6”图层之上新建一个图层并重命名为图层之上新建一个图层并重命名为“花梗花梗”图层。图层。（2）在）在“花梗花梗”图层的第图层的第65帧处插入关键帧。帧处插入关键帧。（3）选择）选择【矩形矩

22、形】工具，在工具，在【属性属性】面板中设置面板中设置【笔触颜色笔触颜色】为为“无无”，【填充颜色填充颜色】为为“#CCE492”，在，在“花梗花梗”图层的第图层的第65帧处绘制帧处绘制一个宽高为一个宽高为“5px5px”的矩形，而后将其置于的矩形，而后将其置于花盆的后面，效果如图花盆的后面，效果如图5-16所示。所示。（4）利用）利用【选择选择】工具调整矩形的形状如图工具调整矩形的形状如图5-17所所示。示。（5）在）在“花梗花梗”图层的第图层的第105帧处插入关键帧，利帧处插入关键帧，利用用【选择选择】工具调整第工具调整第105帧处帧处“花梗花梗”的形状的形状如图如图5-18所示。所示。（6

23、）在第）在第65帧第帧第105帧之间创建形状补间动画，帧之间创建形状补间动画，这样花梗的生长过程就制作完成了这样花梗的生长过程就制作完成了 。花梗图图5-16 原始矩形原始矩形 图图5-17 花梗的原始形状花梗的原始形状 图图5-18 第第105帧花梗形状帧花梗形状 3、制作花瓣的生长、制作花瓣的生长 。（1）在）在“花梗花梗”图层之上新建并重命名图层，直至图层之上新建并重命名图层，直至图层效果如图图层效果如图5-19所示。所示。（2）在）在“花瓣花瓣1”图层的第图层的第105帧处插入关键帧。帧处插入关键帧。（3）选择）选择【椭圆椭圆】工具，在工具，在【属性属性】面板中设置面板中设置【笔触颜色

24、笔触颜色】为为“无无”，【填充颜色填充颜色】为为“#F997DC”，在，在“花瓣花瓣”图层的第图层的第105帧处绘制帧处绘制一个宽高为一个宽高为“1.3px1.1px”的椭圆，并将其置的椭圆，并将其置于花梗顶端花苞的上面，效果如图于花梗顶端花苞的上面，效果如图5-20所示所示 。椭圆图图5-19 图层效果图层效果 图图5-20 第第105帧花瓣形状帧花瓣形状 在绘制花瓣的原始形状时，需要将其在绘制花瓣的原始形状时，需要将其放置在花苞上并适当调整位置，使得花开放置在花苞上并适当调整位置，使得花开得更自然，也达到掩盖花苞的目的得更自然，也达到掩盖花苞的目的 。（4）在）在“花瓣花瓣1”图层的第图层

25、的第135帧处插入关键帧，利帧处插入关键帧，利用用【选择选择】工具调整第工具调整第135帧处帧处“花瓣花瓣”的形状的形状如图如图5-21所示。所示。（5）在第）在第105帧第帧第135帧之间创建形状补间动画，帧之间创建形状补间动画，这样一片花瓣的生长过程就制作完成。这样一片花瓣的生长过程就制作完成。（6）使用同样的方法在图层）使用同样的方法在图层“花瓣花瓣2”、“花瓣花瓣3”、“花瓣花瓣4”、“花瓣花瓣5”、“花瓣花瓣6”上分别制作其他上分别制作其他5片花瓣的生长，完成花瓣的生长动画，效果如片花瓣的生长，完成花瓣的生长动画，效果如图图5-22所示。所示。 图图5-21 第第135帧花瓣形状帧花

26、瓣形状 花瓣4花瓣5花瓣6花瓣3花瓣1花瓣2图图5-22 完成制作完成制作 （7）最终的场景效果如图）最终的场景效果如图5-23所示，时间轴效果如所示，时间轴效果如图图5-24所示所示 。图图5-23 最终场景效果最终场景效果 图图5-24 制作完成后的【时间轴】效果 （8）保存测试影片，一株美丽的花儿浪漫绽放的动）保存测试影片，一株美丽的花儿浪漫绽放的动画效果制作完成画效果制作完成 。5.1.4 5.1.4 课堂练习制作“魔幻扑克” 请同学们自己动手制作一个扑克变幻的动画，其请同学们自己动手制作一个扑克变幻的动画，其效果如图效果如图5-25所示所示 。1、新建一个Flash文档，设置文档【尺

27、寸】为“500px353px”，文档其他属性使用默认参数 。图图5-25 魔幻扑克效果魔幻扑克效果 2、执行、执行【文件文件】/【导入导入】/【打开外部库打开外部库】菜单命菜单命令，将教学资源中的令，将教学资源中的“素材素材第第5讲讲魔幻扑克魔幻扑克魔魔幻扑克幻扑克-素材素材.fla”文件打开，将外部库里的元件和文件打开，将外部库里的元件和图片复制到当前库中，效果如图图片复制到当前库中，效果如图5-26所示。所示。3、将、将【库库】面板中的面板中的“背景背景”位图拖入场景中，设位图拖入场景中，设置其宽高为置其宽高为“500px353px”，并相对舞台居中，并相对舞台居中对齐，效果如图对齐，效果

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

29、29所示。所示。图图5-28 设置大小和位置设置大小和位置 图图5-29 拖入拖入“红桃红桃2参考图参考图” 6、根据参考图在各个图层上绘制花色为、根据参考图在各个图层上绘制花色为“红桃红桃2”纸纸牌各个部分的形状，如图牌各个部分的形状，如图5-30所示。所示。 图图5-30 绘制红桃绘制红桃2 其中其中【字体字体】为为“Bookman Old Style”（读者可以设置为自己喜欢的字体或者自（读者可以设置为自己喜欢的字体或者自行购买外部字体库）。行购买外部字体库）。 7、在、在“花色上花色上”、“花色中花色中”、“花色下花色下”、“数数字上字上”、“数字下数字下”图层的第图层的第20帧处按帧

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

31、10、保存测试影片，一个简单而又神奇的扑克变幻动画制作完成、保存测试影片，一个简单而又神奇的扑克变幻动画制作完成 。5.2 形状提示点原理 当用形状补间动画制作一些较为复杂的变形动画当用形状补间动画制作一些较为复杂的变形动画时，常常会使画面变得混乱，根本达不到用户想要的时，常常会使画面变得混乱，根本达不到用户想要的变化过程，这时就需要使用形状提示点来进行控制。变化过程，这时就需要使用形状提示点来进行控制。5.2.1 知识点讲解一、添加形状提示。一、添加形状提示。 单击形状补间动画的开始帧，执行单击形状补间动画的开始帧，执行【修改修改】/【形状形状】/【添加形添加形状提示状提示】菜单命令。这样在

32、形状上就会增加一个带字母的红菜单命令。这样在形状上就会增加一个带字母的红色圆圈，相应地在结束帧的形状上也会增加形状提示符，如色圆圈，相应地在结束帧的形状上也会增加形状提示符，如图图5-33所示。所示。 分别将这两个形状提示符安放到适当的位置时，起始关键帧上分别将这两个形状提示符安放到适当的位置时，起始关键帧上的形状提示点为黄色，结束关键帧的形状提示点为绿色，如的形状提示点为黄色，结束关键帧的形状提示点为绿色，如图图5-34所示所示第第1帧帧 第第10帧帧 显示为黄色显示为黄色 显示为绿色显示为绿色 图图5-33 未调节未调节 图图5-34 调节成功调节成功 二、形状提示原理二、形状提示原理 。

33、 继续添加形状提示点，并调节提示点位置，此时继续添加形状提示点，并调节提示点位置，此时图形变化的过程如图图形变化的过程如图5-35所示所示 。图图5-35 使用形状提示使用形状提示 图图5-36所示为未添加形状提示点的变化过程，所示为未添加形状提示点的变化过程，经过观察可以清楚的了解形状提示的功能和原理，即经过观察可以清楚的了解形状提示的功能和原理，即形状提示点用于识别起始形状和结束形状中相对应的形状提示点用于识别起始形状和结束形状中相对应的点，并用字母点，并用字母a到到z来表示来表示 。图图5-36 未使用形状提示未使用形状提示 5.2.2 5.2.2 范例解析（一）使用形状提示点练习 请同

34、学们在老师的带领下对形状提示点的创建方请同学们在老师的带领下对形状提示点的创建方法和原理进行进一步的熟悉，并跟随以下要求进行操法和原理进行进一步的熟悉，并跟随以下要求进行操作训练。作训练。1、打开教学资源中、打开教学资源中“素材素材第第5讲讲形状提示点练习形状提示点练习飞飞翔的蝙蝠翔的蝙蝠.fla”文件。文件。2、分别在第、分别在第1帧第帧第10帧之间，第帧之间，第11帧第帧第20帧之间帧之间，第，第21帧第帧第30帧之间，第帧之间，第31帧第帧第40帧之间创帧之间创建形状补间动画，拖动时间轴观察图形的渐变效果建形状补间动画，拖动时间轴观察图形的渐变效果，如图，如图5-37所示。所示。 图图5

35、-37 形状补间效果形状补间效果 3、选中、选中“图层图层1”的第的第1帧，执行帧，执行【修改修改】/【形状形状】/【添加形状提示添加形状提示】菜单命令添加一个形状提菜单命令添加一个形状提示点，并将其拖动到蝙蝠的翅膀上，如图示点，并将其拖动到蝙蝠的翅膀上，如图5-38所示。选中第所示。选中第10帧，将提示点也拖动到蝙蝠的帧，将提示点也拖动到蝙蝠的翅膀上，此时形状提示点变为绿色，如图翅膀上，此时形状提示点变为绿色，如图5-39所示。所示。 通过观察可以发现，此时的形状补间动画效通过观察可以发现，此时的形状补间动画效果并不理想，整个形状补间动画效果显的十果并不理想，整个形状补间动画效果显的十分的杂

36、乱无章，没有达到预期的效果分的杂乱无章，没有达到预期的效果 。图图5-38 添加形状提示点一添加形状提示点一 图图5-39 调整形状提示点一调整形状提示点一 4、使用同样的方法添加、使用同样的方法添加3个形状提示点，并分别在个形状提示点，并分别在第第1帧和第帧和第10帧调整提示点的位置，效果如图帧调整提示点的位置，效果如图5-40和图和图5-41所示。所示。 图图5-40 添加形状提示点二添加形状提示点二 图图5-41 调整形状提示点二调整形状提示点二 5、使用同样的方法为后续的形状补间动画添加形、使用同样的方法为后续的形状补间动画添加形状提示点，图状提示点，图5-42所示为第所示为第31帧处

37、的形状提示帧处的形状提示点，图点，图5-43所示为第所示为第40帧处的形状提示点。帧处的形状提示点。 图图5-42 添加形状提示点三添加形状提示点三 图图5-43 调整形状提示点三调整形状提示点三 6、此时再拖动时间轴观察这个形状补间动画的变、此时再拖动时间轴观察这个形状补间动画的变换效果，如图换效果，如图5-44所示。所示。图图5-44 添加形状提示点后的效果添加形状提示点后的效果 5.2.3 范例解析（二）制作“旋转的三棱锥” 本例将使用形状提示点动画来制作一个旋转的本例将使用形状提示点动画来制作一个旋转的三棱锥效果，其设计思路及效果如图三棱锥效果，其设计思路及效果如图5-45所示。所示。

38、1、素材准备。、素材准备。（1）新建一个）新建一个Flash文档，文档所有属性使用默认参数文档，文档所有属性使用默认参数 。图图5-45 设计思路及效果设计思路及效果 （2）新建并重命名图层，直至图层效果如图）新建并重命名图层，直至图层效果如图5-46所示所示。（3）执行）执行【文件文件】/【导入导入】/【打开外部库打开外部库】菜单命令菜单命令，将教学资源中的，将教学资源中的“素材素材第第5讲讲旋转的三棱锥旋转的三棱锥.fla”文件打开，将外部库里的元件和图片复制到当前文件打开，将外部库里的元件和图片复制到当前【库库】面板中，效果如图面板中，效果如图5-47所示。所示。 图图5-46 图层效果

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

40、图图5-48 绘制背景绘制背景 （2）将）将【库库】面板中名为面板中名为“边框边框”的元件放置到的元件放置到“边框边框”图层上，并与舞台居中对齐，效果如图图层上，并与舞台居中对齐，效果如图5-49所示。所示。3、绘制辅助图形、绘制辅助图形 。（1）选择）选择【多角星形多角星形】工具工具 ，在，在【属性属性】面板中面板中设置设置【笔触高度笔触高度】为为“1”，【笔触颜色笔触颜色】为为“红色红色”，设置，设置【填充颜色填充颜色】为为“无无”，单击，单击 按钮按钮打开打开【工具设置工具设置】对话框，并设置对话框，并设置【边数边数】为为“3”，单击，单击 按钮完成设置。按钮完成设置。 （2）在）在“辅

41、助层辅助层”图层上绘制一个宽高为图层上绘制一个宽高为“242.9px213px”的三角形，其位置坐标的三角形，其位置坐标x、y分分别为别为“153.6”、“93.5”，效果如图，效果如图5-50所示所示 。图图5-49 布置上下边框布置上下边框 图图5-50 绘制三角形绘制三角形 （3）选择）选择【线条线条】工具，在工具，在【属性属性】面板中设置面板中设置【笔触高度笔触高度】为为“1”，【笔触颜色笔触颜色】为为“红色红色”，在在“辅助层辅助层”图层上的三角形右边绘制两条边作为图层上的三角形右边绘制两条边作为三棱锥的侧边，效果如图三棱锥的侧边，效果如图5-51所示所示 。在绘制两条边时，注意线段

42、需要两两相交，在绘制两条边时，注意线段需要两两相交，为后面填充图形和对齐图形做好准备为后面填充图形和对齐图形做好准备 。图图5-51 绘制侧边绘制侧边 （4）选中步骤（）选中步骤（3）中绘制的两条边，按）中绘制的两条边，按Ctrl+T快快捷键打开捷键打开【变形变形】面板，图形旋转的参数设置如图面板，图形旋转的参数设置如图5-52所示，然后单击按钮，复制两条边，水平移动所示，然后单击按钮，复制两条边，水平移动到三角形的左侧，效果如图到三角形的左侧，效果如图5-53所示所示。复制后的两条边图图5-52 【变形变形】面板面板 图图5-53 复制两条边复制两条边 （5）在所有图层的第）在所有图层的第6

43、0帧处插入帧，效果如图帧处插入帧，效果如图5-54所示所示 。4、制作旋转三棱锥效果、制作旋转三棱锥效果 。（1）将）将【库库】面板中名为面板中名为“图片图片1.jpg”的图片放置的图片放置到到“第一面第一面”图层上，并与舞台居中对齐，然后图层上，并与舞台居中对齐，然后选中舞台上的图片按选中舞台上的图片按Ctrl+B快捷键将图片打散，快捷键将图片打散，效果如图效果如图5-55所示所示 打散图片图图5-54 在第在第60帧处插入帧帧处插入帧 图图5-55 放置第一张图片放置第一张图片 （2）选中）选中“辅助层辅助层”图层的第图层的第1帧，按帧，按Ctrl+C快捷键快捷键复制当前帧的图形。复制当前

44、帧的图形。 在复制当前帧图形前，先检查图形是否都被在复制当前帧图形前，先检查图形是否都被打散，如果存在没有打散的图形，需要先将打散，如果存在没有打散的图形，需要先将图形打散后才进行复制操作，这样才能实现图形打散后才进行复制操作，这样才能实现后面操作中分离图的效果后面操作中分离图的效果 （3）选中）选中“第一面第一面”图层的第图层的第1帧，按帧，按Ctrl+Shift+V 快捷键将图形粘贴到当前位置，锁定并隐藏快捷键将图形粘贴到当前位置，锁定并隐藏“辅辅助层助层”图层，效果如图图层，效果如图5-56所示。所示。（4）选择）选择“第一面第一面”图层上的图形，将多余的线条图层上的图形，将多余的线条和

45、填充区域删除，只保留正面三角形区域的图形和填充区域删除，只保留正面三角形区域的图形，效果如图，效果如图5-57所示。所示。 锁定并隐藏图层图图5-56 锁定并隐藏锁定并隐藏“辅助层辅助层”图层图层 图图5-57 分离后的图形分离后的图形 （5）在）在“第一面第一面”图层的第图层的第20帧、第帧、第40帧和第帧和第60帧帧处插入关键帧，然后在第处插入关键帧，然后在第21帧处插入空白关键帧帧处插入空白关键帧。（6）取消隐藏）取消隐藏“辅助层辅助层”图层，选中图层，选中“第一面第一面”图图层的第层的第20帧处的图形，将图形下面两个顶点移动帧处的图形，将图形下面两个顶点移动到如图到如图5-58所示的位

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

47、形状改变图形形状 图图5-61 调节渐变的中心位置调节渐变的中心位置 （8）隐藏）隐藏“辅助层辅助层”图层，选择图层，选择“第一面第一面”图层，在第图层，在第1帧和第帧和第20帧，第帧，第40帧和第帧和第60帧之间分别创建形状帧之间分别创建形状补间动画，观察它们的变化，效果如图补间动画，观察它们的变化，效果如图5-62所示。所示。 第第10帧处的图形帧处的图形 第第50帧处的图形帧处的图形 图图5-62 变形对比变形对比 从图5-62分析可知，第1帧到第20帧的变形是符合需要的动画效果，而第40帧到第60帧的变形是不符合需要的动画效果，这就需要添加形状提示点，让变形的效果达到这里需要的动画效果

48、 。（9）选择）选择“第一面第一面”图层的第图层的第40帧，执行帧，执行【修改修改】/【形状形状】/【添加形状提示点添加形状提示点】菜单命令，为图形添加菜单命令，为图形添加3个形状提示点，其分布如图个形状提示点，其分布如图5-63所示。所示。（10）选择）选择“第一面第一面”图层的第图层的第60帧，调整形状提示帧，调整形状提示点的分布，效果如图点的分布，效果如图5-64所示所示。图图5-63 第第40帧处提示点的分布帧处提示点的分布 图图5-64 第第60帧处提示点的分布帧处提示点的分布 在这里添加形状提示点时，一定要将 “b”放到上面的顶点处，这样变形才是动画需要的变形效果。同学们可以试一试

49、其他的分布顺序，并观察它们的变形效果有何不同。（11）至此，第）至此，第1张图片的动画制作已经完成张图片的动画制作已经完成 。（12）制作）制作“第二面第二面”和和“第三面第三面”图层上的动画效图层上的动画效果的方法和制作果的方法和制作“第一面第一面”的方法相同，这里给出相的方法相同，这里给出相关信息如图关信息如图5-65所示，从而方便读者完成余下工作所示，从而方便读者完成余下工作 。（13）删除）删除“辅助层辅助层”图层。图层。（14）保存测试影片，一个旋转的三棱锥效果制作）保存测试影片，一个旋转的三棱锥效果制作完成。完成。第二面信息第二面信息 第三面信息第三面信息 图图5-65 制作第二面

50、和第三面信息制作第二面和第三面信息 5.2.4 课堂练习课堂练习制作制作“舌头也摇摆舌头也摇摆” 使用形状提示点可以制作出各种复杂的形状渐使用形状提示点可以制作出各种复杂的形状渐变动，本例将使用形状提示点制作一个可爱的卡通变动，本例将使用形状提示点制作一个可爱的卡通蛇吐着舌头，呆呆的看着你的动画，其制作思路及蛇吐着舌头，呆呆的看着你的动画，其制作思路及效果如图效果如图5-66所示。所示。图图5-66 效果图效果图 1、新建一个、新建一个Flash文档，文档属性使用默认参数文档，文档属性使用默认参数。 2、将默认的、将默认的“图层图层1”重命名为重命名为“背景背景”图层，在图层，在“背景背景”图

51、层之上新建一个图层并重命名为图层之上新建一个图层并重命名为“蛇蛇” 。3、执行、执行【文件文件】/【导入导入】/【打开外部库打开外部库】菜单命令菜单命令，将教学资源中的，将教学资源中的“素材素材第第5讲讲舌头也摇摆舌头也摇摆舌头舌头也摇摆也摇摆-素材素材.fla”文件打开，将外部库里所有的元文件打开，将外部库里所有的元件复制到当前件复制到当前【库库】面板中，如图面板中，如图5-67所示。所示。4、选择、选择“背景背景”图层，将图层，将“背景背景”元件拖入场景，元件拖入场景，相对舞台居中对齐，并在相对舞台居中对齐，并在“背景背景”图层的第图层的第90帧帧处按处按F5快捷键插入帧。快捷键插入帧。选择选择“蛇蛇”图层，将图层，将“蛇蛇”元件拖入场景，并将他的元件拖入场景，并将他的“身体身体”与草地上与草地上5、的阴影对齐，然后锁定、的阴影对齐