形状补间动画制作精Word文档下载推荐.docx

1、1. 形状补间动画在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。2. 构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”才能创建变形动画。3. 形状补间动画在时间帧面板上的表现形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头。4. 创建形状补间动画的方法在时间轴面板上动画开始播放的地

2、方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，此时，时间轴上的变化如图3-3-1所示，一个形状补间动画就创建完毕。三、 学生练习任务：熟悉形状补间动画的制作1. 根据老师所提供的学习资料制作形状补间动画2. 从网上搜索更多的教程学习四、 课堂小结小结本节的主要内容和学生中存在的问题附：学生资料形状补间动画形状补间动画是Flash中非常重要的表现手法之一，运用它，你可以变幻出各种奇妙的、不可思议的变形效果。本节从形状补间动画基本概念入手

3、，带你认识形状补间动画在时间帧上的表现，了解补间动画的创建方法，学会应用“形状提示”让图形的形变自然流畅，最后，提供了二个实例，帮助你更深地理解形状补间动画。1形状补间动画的概念（1）形状补间动画的概念 （2）构成形状补间动画的元素（3）形状补间动画在时间帧面板上的表现形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如图3-3-1所示。图3-3-1 形状补间动画在时间帧面板上的标记（4）创建形状补间动画的方法2认识形状补间动画的属性面板Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后，单击帧，【属性】面板如图3

4、-3-2所示。图3-3-2 形状补间动画的【属性】面板形状补间动画的【属性】面板上只有二个参数：（1）“简易”选项单击其右边的按钮，会弹出滑动杆，拖动上面的滑块可以调节参数值，当然也可以在文本框中直接输入具体的数值，设置后，形状补间动画会随之发生相应的变化。 在1到 -100 的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。 在1 到 100 的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。 默认情况下，补间帧之间的变化速率是不变的。（2）“混合”选项“混合”选项中有二项供选择： 【角形】选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混

5、合形状。 【分布式】选项：创建的动画中间形状比较平滑和不规则。3使用形状提示形状补间动画看似简单，实则不然，Flash在“计算”2个关键帧中图形的差异时，远不如我们想象中的“聪明”，尤其前后图形差异较大时，变形结果会显得乱七八糟，这时，“形状提示”功能会大大改善这一情况。（1） 形状提示的作用在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。（2）添加形状提示的方法 先在形状补间动画的开始帧上单击一下，再执行【修改】|【形状】|【添加形状提示】命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出

6、现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变，如图3-3-3所示。图3-3-3 添加形状提示后各帧的变化说明：在制作复杂的变形动画时，形状提示的添加和拖放要多方位尝试，每添加一个形状提示，最好播放一下变形效果，然后再对变形提示的位置做进一步的调整第三节 形状补间动画（2（3）添加形状提示的技巧 “形状提示”可以连续添加，最多能添加26个。 将变形提示从形状的左上角开始按逆时针顺序摆放，将使变形提示工作得更有效。 形状提示的摆放位置也要符

7、合逻辑顺序。例如，起点关键帧和终点关键帧上各有一个三角形，我们使用3个“形状提示”，如果它们在起点关键帧的三角形上的顺序为abc，那么在重点关键帧的三角形上的顺序就不能是acb，也要是abc。 形状提示要在形状的边缘才能起作用，在调整形状提示位置前，要打开工具栏上【选项】下面的【吸咐开关】，这样，会自动把“形状提示”吸咐到边缘上，如果你发觉“形状提示”仍然无效，则可以用工具栏上的【缩放工具】单击形状，放大到足够大，以确保“形状提示”位于图形边缘上。 另外，要删除所有的形状提示，可执行【修改】|【形状】|【删除所有提示】命令。删除单个形状提示，可用鼠标右键单击它，在弹出菜单中选择【删除提示】。至

8、此，“形状补间动画”的相关知识我们已都介绍给大家了，下面来一起动手制作二个实例，体会一下形状补间动画的奇妙。4实例1庆祝国庆实例简介 国庆的夜空绚丽多彩，朵朵礼花在天空中绽放，远处传来礼炮的轰鸣声，让我们来给这美丽的夜晚增加点喜庆，挂几个大红灯笼来庆祝祖国的生日吧！实例播放效果如图3-3-4所示。图3-3-4 庆祝国庆实例画面知识提要 创建矢量图形 创建形状补间动画 将文字转变为形状 用混色器设置颜色 在场景中导入声音制作步骤步骤1 创建新文档执行【文件】|【新建】命令，在弹出的对话框中选择【常规】|【Flash文档】选项后，单击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为4

9、00330像素，【背景色】为白色，如图3-3-5所示。图3-3-5 文档属性步骤2 创建背景图层执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的名为“节日夜空.jpg”图片导入到场景中，（“节日夜空”图片位置：光盘examplepart3*图片节日夜空.jpg），选择第80帧，按键盘上的F5键，增加一个普通帧，如图3-3-6所示。第三节 形状补间动画（3步骤3 导入声音文件 执行【文件】|【导入】|【导入到库】命令，打开配套光盘中的名为“sound.mp3”的文件，将其导入到库中。步骤4 创建灯笼形状 我们先来画灯笼，执行【窗口】|【设计面板】|【混色器】命令，打开【混色器】面板，设

10、置各项参数，渐变的颜色为白色到红色，如图3-3-7所示。图3-3-7 【混色器】面板设置之一新建一个图层，并将其重新命名为“灯笼一”。选择工具箱中的【椭圆工具】，设置【笔触颜色】为无，在场景中绘制出一个椭圆做灯笼的主体，大小为6540像素。接着我们来画灯笼上下的边，打开【混色器】面板，按照如图3-3-8所示设置深黄色到浅黄色的【线性】渐变填充。从左到右三个填充色标的颜色值分别为：#FF9900、#FFFF00、#FFCC00。图3-3-8 【混色器】面板设置之二选择工具箱上的【矩形工具】，设置【笔触颜色】为无，绘制出一个矩形，大小为3010像素，复制这个矩形，分别放在灯笼的上下方，再画一个小的

11、矩形，长宽为710像素，作为灯笼上面的提手。最后用【线条工具】，在灯笼的下面画几条黄色线条做灯笼穗，一个漂亮的灯笼就画好了。如图3-3-9所示（为了能清楚的显示灯笼，可暂时将背景色改为蓝色）。图3-3-9 画好的灯笼步骤5 复制粘贴四个灯笼复制刚画好的灯笼，新建三个图层，在每个图层中粘贴一个灯笼，调整灯笼的位置，使其错落有致地排列在场景中。在第20、40帧处为各图层添加关键帧，如图3-3-10所示。图3-3-10 错落有致的灯笼及时间轴面板第三节 形状补间动画（4步骤6 把文字转为形状取代灯笼选取第一个灯笼，在第40帧处用文字“庆”取代灯笼，在【属性】面板上，设置文本类型为【静态文本】，字体为

12、【隶书】，字体大小为60，颜色为红色。对“庆”字执行【修改】|【分离】命令，把文字转为形状。如图3-3-11所示。图3-3-11 用“庆”字替换第一个灯笼依照以上步骤，在第40帧处的相应图层上依次用“祝”、“国”、“庆”三个字取代另外三个灯笼，并执行【分散】操作，其效果如图 3-3-12所示。图3-3-12 用文字形状取代灯笼形状及文字打散步骤7 设置文字形状到灯笼形状的转变。在“灯笼”各图层的第60帧及80帧处，分别添加关键帧，现在，在80帧处各“灯笼”图层中的内容为“文字图形”，应该把它们换成“灯笼”。具体办法是分别复制第20帧中的“灯笼”图形，再分别粘贴到第80帧中，当然，你应该先清除第

13、80帧处4个“灯笼”图层中的内容哦！步骤8 创建形状补间动画。在“灯笼”各图层的第20、60帧处单击帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，建立形状补间动画，如图3-3-13所示。图3-3-13 创建形状补间动画步骤9 设置声音添加一层，在第20、60帧处按F6键，创建关键帧，在【属性】面板上单击【声音】旁边的小三角，选择sound.mp3，如图3-3-14所示。图3-3-14 声音设置设置好的时间帧面板如图3-3-15所示。图3-3-15 设置好的时间帧面板有关声音导入及应用的详细内容请参阅本书第五章的相关内容。5实例2添加形状提示练习上面我们曾谈到，为得到流畅自然的形状变形动画，可以添加形状提示，本例是专为此而设计的练习。请你在光盘的相关目录中找到“添加形状提示练习.swf”文件，如图3-3-16所示。这2个同样是“形状变形”，其中右边的变形用了变形“参考点”，从中，我们可以看出变形效果有明显的差异。图3-3-16 添加形状提示实例界面 添加形状提示 创建形状