在FLASH中处理动画

**一、逐帧动画 ** 着重介绍逐帧动画（Frame By Frame），这是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画. 由于逐帧动画的帧序列内容不一样，不仅增加制作负担而且最终输出的文件量也很大，但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果. 1．逐帧动画的概念和在时间帧上的表现形式 在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧地画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容. 2．创建逐帧动画的几种方法 （1）用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画 （2）绘制矢量逐帧动画  用鼠标或压感笔在场景中一帧帧的画出帧内容（参考实例：旋转的立方体）. （3）文字逐帧动画  用文字作帧中的元件，实现文字跳跃、旋转等特效. （4）指令逐帧动画 在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化. （5）导入序列图像 可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">3．绘图纸功能 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">（1）绘画纸的功能 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> 绘画纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用. 通常情况下，Flash 在舞台中一次只能显示动画序列的单个帧. 使用绘画纸功能后，你就可以在舞台中一次查看两个或多个帧了. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">如图3-2-2所示，这是使用绘画纸功能后的场景，可以看出，当前帧中内容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起. 当然，这时你只能编辑当前帧的内容. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">（2）绘图纸各个按钮的介绍 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">● <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">                 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">绘图纸外观按钮：按下此按钮后，在时间帧的上方，出现  绘图纸外观标记. 拉动外观标记的两端，可以扩大或缩小显示范围. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">● <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">绘图纸外观轮廓按钮：按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">● <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">编辑多个帧按钮：按下后可以显示全部帧内容，并且可以进行“多帧同时编辑”. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">● <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">修改绘图纸标记按钮：按下后，弹出菜单，菜单中有以下选项： <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">总是显示标记选项：会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">锚定绘图纸选项：会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置. 通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的. 通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">绘图纸 2选项；会在当前帧的两边显示两个帧. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">绘图纸 5选项；会在当前帧的两边显示五个帧. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">绘制全部选项；会在当前帧的两边显示全部帧. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">上面，我们全面介绍了逐帧动画的特点和创建方法，现在，我们来动手制作二个逐帧动画实例，以加深对逐帧动画的认识. <span style="font-family: 宋体; mso-bidi-font-size: 10.5pt;"> **<span style="font-family: 宋体; mso-bidi-font-size: 10.5pt;">二、变形动画 **<span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状补间动画是Flash中非常重要的表现手法之一，运用它，你可以变幻出各种奇妙的、不可思议的变形效果. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">1．形状补间动画的概念 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（1）形状补间动画的概念 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（2）构成形状补间动画的元素 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”才能创建变形动画. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（3）形状补间动画在时间帧面板上的表现 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一长箭头 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（4）创建形状补间动画的方法 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在属性面板上单击补间旁边的小三角，在弹出的菜单中选择形状，此时，时间轴上的变化如图3-3-1所示，一个形状补间动画就创建完毕. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">2．认识形状补间动画的属性面板 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">Flash的属性面板随鼠标选定的对象不同而发生变化. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状补间动画的属性面板上只有二个参数： <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（1）“简易”选项 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">单击其右边的 按钮，会弹出滑动杆，拖动上面的滑块可以调节参数值，当然也可以在文本框中直接输入具体的数值，设置后，形状补间动画会随之发生相应的变化. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在1到 -100 的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在1 到 100 的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">默认情况下，补间帧之间的变化速率是不变的. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（2）“混合”选项 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">“混合”选项中有二项供选择： <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">角形选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">分布式选项：创建的动画中间形状比较平滑和不规则. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">3．使用形状提示 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状补间动画看似简单，实则不然，Flash在“计算”2个关键帧中图形的差异时，远不如我们想象中的“聪明”，尤其前后图形差异较大时，变形结果会显得乱七八糟，这时，“形状提示”功能会大大改善这一情况. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（1）  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">形状提示的作用 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（2）添加形状提示的方法 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> 先在形状补间动画的开始帧上单击一下，再执行修改>形状>添加形状提示命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变 <span style="font-family: 楷体_GB2312; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-hansi-font-family: 宋体;">说明：在制作复杂的变形动画时，形状提示的添加和拖放要多方位尝试，每添加一个形状提示，最好播放一下变形效果，然后再对变形提示的位置做进一步的调整 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（3）添加形状提示的技巧 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">“形状提示”可以连续添加，最多能添加26个. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">将变形提示从形状的左上角开始按逆时针顺序摆放，将使变形提示工作得更有效. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状提示的摆放位置也要符合逻辑顺序. 例如，起点关键帧和终点关键帧上各有一个三角形，我们使用3个“形状提示”，如果它们在起点关键帧的三角形上的顺序为abc，那么在重点关键帧的三角形上的顺序就不能是acb，也要是abc. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状提示要在形状的边缘才能起作用，在调整形状提示位置前，要打开工具栏上选项下面的吸咐开关  ，这样，会自动把“形状提示”吸咐到边缘上，如果你发觉“形状提示”仍然无效，则可以用工具栏上的缩放工具  单击形状，放大到足够大，以确保“形状提示”位于图形边缘上. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">另外，要删除所有的形状提示，可执行修改>形状>删除所有提示命令. 删除单个形状提示，可用鼠标右键单击它，在弹出菜单中选择删除提示. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">至此，“形状补间动画”的相关知识我们已都介绍给大家了，下面来一起动手制作二个实例，体会一下形状补间动画的奇妙. **<span style="font-family: 宋体; mso-bidi-font-size: 10.5pt;">三、运动动画 ** <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">动作补间动画也是Flash中非常重要的表现手段之一，与“形状补间动画”不同的是，动作补间动画的对象必需是“元件”或“成组对象”. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">运用动作补间动画，你可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，配合别的手法，你甚至能做出令人称奇的仿3D的效果来. 本节详细讲解了动作补间动画的特点及创建方法，并分析了动作补间动画和形状补间动画的区别，我们精心设计的两个实例将带你进一步加深对动作补间动画的了解. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">1．动作补间动画的概念 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（1）动作补间动画的概念 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的值创建的动画被称为动作补间动画. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（2）构成动作补间动画的元素 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（3）动作补间动画在时间帧面板上的表现 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（4）形状补间动画和动作补间动画的区别 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状补间动画和动作补间动画都属于补间动画. 前后都各有一个起始帧和结束帧，二者之间的区别如下表所示. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">区别之处 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">动作补间动画 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状补间动画 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在时间轴上的表现 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">淡紫色背景加长箭头 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">淡绿色背景加长箭头 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">组成元素 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">影片剪辑、图形元件、按钮、文字、位图等 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">形状，如果使用图形元件、按钮、文字，则必先打散再变形. || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">完成的作用 || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">实现一个元件的大小、位置、颜色、透明等的变化. || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化. || <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（5）创建动作补间动画的方法 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧，在属性面板上单击补间旁边的“小三角”，在弹出的菜单中选择动作，或单击右键，在弹出的菜单中选择创建补间动画，就建立了“动作补间动画”. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">2．认识动作补间动画的属性面板 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（1）简易选项 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">用鼠标单击简易右边的 按钮，弹出拉动滑杆，拖动上面的滑块，可设置参数值，当然也可以直接在文本框中输入具体的数值，设置完后，补间动作动画效果会以下面的设置作出相应的变化： <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在-1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">u  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">默认情况下，补间帧之间的变化速率是不变的. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（2）旋转选项 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">有四个选择，选择无（默认设置）可禁止元件旋转；选择自动可使元件在需要最小动作的方向上旋转对象一次；选择顺时针(CW) 或逆时针(CCW) ，并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（3）调整到路径 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">将补间元素的基线调整到运动路径，此项功能主要用于引导线运动，我们在下一节中会介绍此功能. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（4）同步复选框 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">使图形元件实例的动画和主时间轴同步. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（5）对齐选项 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">可以根据其注册点将补间元素附加到运动路径，此项功能主要也用于引导线运动 **<span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">四、 ****<span style="font-family: 宋体; mso-bidi-font-size: 10.5pt;"> 遮罩动画 **<span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在Flash的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如水波、万花筒、百页窗、放大镜、望远镜……等等. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">那么，“遮罩”如何能产生这些效果呢？ <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在本节，我们除了给大家介绍“遮罩”的基本知识，还结合我们的实际经验介绍一些“遮罩”的应用技巧，最后，提供二个很实用的范例，以加深对“遮罩”原理的理解. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">1．遮罩动画的概念 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（1）什么是遮罩 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的. 在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（2）遮罩有什么用 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">2．创建遮罩的方法 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（1）创建遮罩 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的. 你只要在某个图层上单击右键，在弹出菜单中选择遮罩层，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标 变为遮罩层图标  ，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为  ，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（2）构成遮罩和被遮罩层的元素 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">被遮罩层中的对象只能透过遮罩层中的对象被看到. 在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">（3）遮罩中可以使用的动画形式 <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;"> <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-bidi-font-weight: normal; mso-font-kerning: 0pt;">3．应用遮罩时的技巧 <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">l  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的. 比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">l  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">l  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">可以用“Actions”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_Alpha属性. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">l  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">不能用一个遮罩层试图遮蔽另一个遮罩层. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">l  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">遮罩可以应用在gif动画上. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">l  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮  ，使之变成  ，使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置. <span style="font-family: Wingdings; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">l  <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">在被遮罩层中不能放置动态文本. <span style="font-family: 宋体; mso-bidi-font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt;">或许你读了上面的描述，还有点模糊，那么，通过一些范例，相信你会感受到遮罩动画的神奇！ <span style="font-family: 宋体; mso-bidi-font-size: 10.5pt;">
 * <span style="font-family: 宋体; mso-bidi-font-size: 10.5pt;">在Flash中处理动画 **