第六讲　高级动画
打印本页
 
 
  高级的动画是包含多个图层的。各个图层之间相互影响，形成高级的动画效果。例如引导层可以决定被引导层中对象的运动路径；遮罩层可以决定被遮罩层中对象的显示区域。

  6.1 遮罩动画
  学习目标
  遮罩动画是一类高级的多图层动画。在Flash的作品中，常常看到很多眩目神奇的效果，而其中不少就是利用"遮罩"完成的，如水波、万花筒、望远镜等。本节要学习的内容，就是遮罩动画的制作。
  6.1.1 创建遮罩动画
  遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。遮罩层相当于打开了一个窗口，透过这个窗口可以看到遮罩层的内容。
  具体地说，这两个遮罩层各有特点，不可代替，不可混淆：
  遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为"填充"。
  被遮罩层中的对象只能透过遮罩层中的对象被看到，被遮罩层可使用按钮、影片剪辑、图形、位图、文字、线条等。
  下面演示创建遮罩层的方法。只要在某个图层上单击右键，在弹出快捷菜单中选择"遮罩层"，使命令的左边出现一个小勾，该图层就会生成遮罩层，"层图标"就会从普通层图标 变为遮罩层图标 ，系统会自动把遮罩层下面的一层关联为"被遮罩层"，在缩进的同时图标变为 。
  可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。在Flash动画中，"遮罩"主要有两种用途：
  用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见；
  遮罩住某一元件的一部分，从而实现一些特殊的效果。
  6.1.2 操作实例：电影文字
  上机实践
  透过文字看到背后图片犹如放电影一样感觉一定很特别。本实例通过"电影文字"的制作，熟悉文字处理以及遮罩层的运用。
  （1）首先新建一个Flash文档，将文档尺寸设置为550×200，其余保持默认不变。
  （2）在时间轴上新建两个图层，此时时间轴上共有3个图层。自上而下分别将它们命名为"文字边框"、"文字"和"图片"。
  （3）将"文字"层选为当前编辑层，使用工具箱中的"文本工具" 在舞台中输入一行文字，文本的属性可以根据个人喜好任意设置，这里输入的是"FLASH"。
  （4）确认舞台上文字处于选中状态，连续执行两次"Ctrl＋B"组合键，将其打散为矢量图。然后在"文字"图层的第1帧上单击鼠标右键，再在弹出的菜单中选择"复制帧"命令，准备将该帧复制到新的位置。
  （5）选中"文字边框"层的第1帧，在该帧上单击鼠标右键，再在弹出的菜单中选择"可圈可点的意思粘贴帧"命令，直接将"文字"层的内容拷贝到"文字边框"层。
  （6）将"文字"层锁定，然后点击该图层上的第一个小黑点，使它成为一个红小叉，这样就将该图层设置为不可见。接着取消文字的选中状态，并选择工具箱中的"墨水瓶工具" ，再打开"属性"面板，在该面板下将"笔触颜" 设置为红，笔触高度设置为4，笔触样式保持默认。完成后在舞台上为文字添加红边框。
  （7美发名字）使用"选择工具" 选中文字的填充部分，按"Delete"键将其删掉，只留下边框。
  （8）将"文字边框"层锁定，然后分别在"文字边框"层和"文字"层的第30帧处按"F5"功能键插入帧，使它们在动画中始终保持不变。
  （9）执行菜单栏的"文件/导入/导入到库"命令，在弹出的"导入到库"对话框中选择4张素材，将其导入到库中。
  （10）执行菜单栏"插入/新建元件"命令，创建一个名为"影片"的图形元件。在该元件的编辑状态下，将刚才导入的4张素材使用"任意变形工具" 等比例调整大小，高度以稍宽于文字高度为佳，并将它们依次排列整齐，反复进行次序无规则排列。
  （11）排列好素材后，退出元件编辑状态。在主场景中，将图形元件"影片"从"库"面板中拖拽至"图片"图层第1帧所对应的舞台上。
  （12）选中"图片"层的第1帧，单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。然后用"选择工具" 将调整素材图形的位置。
  （13）在时间轴的第30帧处按"F6"功能键插入关键帧，在舞台上使用"选择工具" 移动素材图形。
  （14）选择"文字"图层单击鼠标右键，在弹出的菜单中选择"遮罩层"命令，将"文字"层设置为遮罩层，"图片"层设置为被遮罩层。
  （15）最后使用"Ctrl + Enter"键预览动画效果，一个应用遮罩原理制作出来的电影文字特效就制作完成。
  6.1.3 操作实例：闪耀的五角星
  上机实践
  一颗星星悬挂在夜空中，向外发射出光芒。光芒的数量达到了72个。如果使用普通的补间动画，那么至少需要72个图层。但是如果使用遮罩动画，就变得非常简单了。
  （1）首先创建一个新文档，文档的大小保持默认状态不变。使用"多角星形工具" 在舞台中绘制一个五角星，将五角星形放置于舞台的正中央。"笔触颜"设置为桔红"#FF6600"，"填充"设置为由黄"#FFFF00"到红"#FF0000"的放射状渐变。
  （2）选中时间轴上的第1帧，单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。
  （3）在时间轴的第20和40帧上分别插入一个关键帧，接着选中第20帧。然后使用"选择工具" 在舞台中单击五角星形，然后在"属性"面板下打开"颜"列表下的"高级"命令对话框，在该对话框下进行设置，修改五角星形的颜。
  （4）锁定图层1，点击时间轴上的"插入图层"按钮 ，创建一个新的图层2。在该图层上使用"线条工具" 绘制一条黄直线。为了便于观察，在绘制直线前，先将文档的背景颜修改为黑。
  （5）使用"任意变形工具" 选中直线，将它的变形中心点拖拽至五角星的中心位置处。
  （6）打开"变形"面板，在该面板下将旋转的角度设置为15，点击"复制并应用变形"按钮 ，复制并旋转直线。使复制出来的直线围绕五角星旋转一周。
  （7）复制完成后，选中图层2上的所有直线，执行菜单栏"修改/形状/将线条转换为填充"命令，将线条转换为填充模式。这一点很重要，当执行了这步操作之后，在后面的步骤中将该层作为遮罩层的时候这些直线才会起作用。
  （8）锁定图层2，创建一个新的图层3。在该图层上使用"椭圆工具" 绘制一个无填充的椭圆，椭圆的笔触高度设置为10。
  （9）选中绘制的椭圆，打开"混器"面板，将"笔触颜" 设置为放射状填充，填充颜设置为由白完全透明到白再到白完全透明的放射状渐变。
  （10）设置好渐变颜后，执行菜单栏"修改/形状/将线条转换为填充"命令，将椭圆由笔触模式转换为填充模式。
  （11）接下来复制两个椭圆，并将3个椭圆放置成同心圆效果，再将同心圆的尺寸缩小，使它位于五角星的正中央位置。
  （12）点击图层3上的第1帧，单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。
  （13）在图层3的第40帧上插入一个关键帧，然后在舞台上将3个同心圆同时放大，使它最内圈的圆紧靠直线的边缘。这里可以适当缩小舞台的显示比例，以帮助缩放图像的大小。
  （14）使用"选择工具" 将图层3拖拽至图层2的下方，然后在图层2上单击鼠标右键，在弹出的菜单中选择"遮罩层"命令，创建遮罩动画。
  （15）最后使用"Ctrl + Enter"键预览动画效果。一个光芒照耀的五角星形动画就制作完成。
  6.1.4 遮罩层的运动
  在前面，我们让遮罩层保持不动，同时让被遮罩层运动，得到的效果就像在房子的窗前看窗外运动的景。现在换另一种方法：让被遮罩层保持不动，让遮罩层运动起来。这样的结果，就像黑夜中用探照灯照射楼。被显示的对象本身是不动的，运动的是显示的区域。
  6.1.5 操作实例：切换背景
  上机实践
  前面已经讲解了遮罩动画的基本概念和原理，制作出了运动的被遮罩层。本实例就通过壁纸图片的互相切换，使用遮罩层运动的方法，进一步熟悉遮罩动画的制作。
  （1）首先新建一个Flash文档，执行菜单栏"修改/文档"命令，在打开的"文档属性"对话框中，将文档尺寸设置为500×300，其余选项保持默认不变。
  （2）创建好新文档后，执行菜单栏"文件/导入/导入到库"命令，在打开的"导入到库"对话框中选择两张素材图片，然后单击"打开"按钮将其导入到库中。
  （3）在时间轴上连续点击2次"插入图层 "按钮，创建2个新的图层。此时时间轴上一共有3个图层，将这3个图层由下而上分别命名为"图片1"、"图片2"和"遮罩1"。
  （4）选中"图片1"图层，然后打开"库"面板，用"选择工具" 从中拖拽一张素材至该图层中。确认素材处于选中状态后，打开"信息"面板，在该面板下将素材图片的宽度和高度分别设置成500和300，使图片的大小与文档大小保持一致。再将X和Y坐标值修改为0，这样图片就正好与文档重叠。
  （5）接下来将"图片1"图层锁定，在"图片2"层的第15帧处按"F7"功能键，插入一个空白的关键帧。然后将另外一张素材从库中拖拽到"图片2"图层的第15帧所对应的舞台上。使用第4步中相同的方法，修改素材的尺寸和位置，使它与文档大小保持一致并正好与文档重叠。
  （6）执行菜单栏"插入/新建元件"命令，创建一个名为"幕1"的图形元件。在该元件的编辑状态下，使用"矩形工具" 绘制图形，设置左边第一个大的矩形的尺寸为500×300，和文档大小保持一致，其余的矩形尺寸不作规定，可根据图示比例绘制，绘制完成后的图形将作为遮罩效果。
  （7）绘制好幕布后，点击时间轴上的"场景1"按钮，回到主场景中。在"遮罩"图层的第15帧上按"F6"功能键，插入一个关键帧。
  （8）在"库"面板中将图形元件"幕1"拖拽到"遮罩"图层的第15帧所对应的舞台上。再在该帧上单击鼠标右键，在弹出菜单中选择"创建补间动画"命令，创建一个补间动画。
工程监理证  （9）在"遮罩"层的第54帧处按"F6"功能键插入关键帧，再在"图片1"和"图片2"层的第54帧处分别按"F5"功能键插入帧，使这两层的对象在动画过程中保持不变。
  （10）使用"选择工具" 分别移动"遮罩"层中补间动画首尾两帧中的对象，在移动时可以适当缩放舞台的显示比例，以帮助观察舞台上图像的整体效果。
  （11）在第15帧上，"幕1"元件位于文档的左外侧边缘；第54帧上"幕1"元件的左边第一个大矩形将图片全部遮住，可以借助时间轴上的"绘图纸外观轮廓"按钮 显示出图片遮盖的位置。
  （12）在"遮罩"图层上单击鼠标右键，在弹出的菜单中选择"遮罩层"命令，将"幕1"图层设置为遮罩层，此时"图片2"图层被系统默认为被遮罩层。
  （13）设置完遮罩效果后，按键盘上的"Enter"键可以直接预览遮罩效果。两张素材在遮罩原理的作用下，相互切换变化。
  （14）在时间轴上再创建三个图层制作一个由"图片2"图层上的素材切换到"图片1"图层上素材的遮罩效果。
  （15）创建一个名为"幕2"的图形元件，在该元件的编辑区域内绘制一个由椭圆组成的图形。使用"幕2"元件作为第二个遮罩效果的遮罩层，完成素材的切换动画制作。在用"幕2"元件创建遮罩动画时，该动画的最后一帧处，要将元件放大若干倍，使该元件中的其中一个椭圆能遮挡住整个素材图片。
  （16）为了便于管理，单击时间轴上的"插入图层文件夹" 按钮 ，创建两个图层文件夹，并用鼠标将相对应的图层分别拖拽至两个图层文件夹中。
  （17）最后使用"Ctrl + Enter"键预览动画效果。一个背景图片的切换效果就制作完成。
  6.1.6 用逐帧动画做遮罩层
  遮罩层中的动画，既可以是补间动画，也可以是逐帧动画。对于比较细腻的动画，就要使用逐帧动画来进行了。逐帧动画在遮罩层中的典型应用是写字特效。首先在被遮罩层中放置一个字符。
  在遮罩层中制作一个包含五个帧的逐帧动画。使用刷子工具绘制出区域，遮盖住被遮罩层中的字。遮罩层中的内容可能会画得比较粗糙，甚至觉得难看，但是这并不影响最终的效果。
  将遮罩层和被遮罩层锁定，测试动画，就可以看到写字动画特效。 装修老房改造
  6.1.7 操作实例：人物绘制过程
  上机实践
  这例来讲解遮罩层运动的应用，着重掌握通过逐帧动画的方式来制作遮罩层。比如这例中绘制的小人，就是逐帧进行遮罩制作出来的。
  （1）新建一个文档，文档大小保持默认状态不变。使用"矩形工具" 和"线条工具" 在舞台上绘制一页纸张图形。将图形的边框颜设置为灰"#CCCCCC"，填充颜为由灰"#EDEDED"汽车保险费用怎么算到白再到灰"#EDEDED"的线性渐变。
  （2）锁定图层1，在时间轴上点击"插入图层"按钮 ，创建一个新的图层2，在该层的第5帧处按"F6"功能键插入一个关键帧。
  （3）选中图层2上的第5帧，然后使用"铅笔工具" 在舞台上绘制一个白描人物形象。前面章节中对Flash的绘图的技巧已进行过详细讲解，这里就不再细述绘制过程。
  （3）锁定图层2，点击时间轴上的"插入图层"按钮 ，创建一个新的图层3。在该图层的第骏马奔驰保边疆5帧上插入一个关键帧。
  （4）分别在图层1和图层2的第50帧上按"F5"功能键插入帧，准备工作完成。接下来创建遮罩效果。
  （5）选中图层3上的第5帧，然后使用"椭圆工具" 在舞台中绘制若干个椭圆，使椭圆完全遮盖住帽子的外边缘处。因为该层作为遮罩层，在预览动画时，图形的颜是不会被显示出来的，所以这里的椭圆可以为任意颜。
  （6）在图层3的第6帧上插入关键帧，然后在舞台上继续绘制椭圆，使绘制出来的椭圆遮盖住帽子的后侧部分。
  （7）在第7帧上插入关键帧，继续绘制椭圆遮盖帽子的后侧的褶皱部分。在使用"椭圆工具" 绘制遮罩图形时，可以适当放大舞台的显示比例，以使绘制的图形更精确。
  （8）以此类推，从第8帧到第50帧上均插入关键帧，每帧所对应的舞台上的椭圆呈递增状态。
  （9）完成遮罩绘制之后，在图层3上单击鼠标右键，在弹出的菜单中选择"遮罩层"命令，创建一个遮罩动画。
  （10）最后使用"Ctrl + Enter"键预览动画效果。一个绘制人物形象的动画效果就制作完成。

  6.2 引导动画
  学习目标
  将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式被称为"引导路径动画"。这种动画可以使一个或多个元件完成曲线或不规则运动。本节要学习的内容，就是引导动画的制作。
  6.2.1 创建引导动画
  直接创建的动画只能沿着实线行进，而创建了引导路径之后，物品就可以沿着虚线弯弯曲曲地行走了。可以将多个层链接到一个运动引导层，使多个对象沿同一条路径运动。链接到运动引导层的常规层就成为引导层。
  一个最基本"引导路径动画"由两个图层组成，上面一层是"引导层"，其图标为 ，下面一层是"被引导层"，图标为 ，同普通图层一样。
  在普通图层上单击时间轴面板中的"添加运动引导层" 按钮，该层的上面就会添加一个引导层 ，同时该普通层缩进成为"被引导层"。
  "被引导层"中的对象在被引导运动时，还可作更细致的设置，如运动方向，在"属性"面板上，选中"调整到路径"复选框，对象的基线就会调整到运动路径。而如果选中"对齐"复选框，元件的注册点就会与运动路径对齐。
  如果想让对象作圆周运动，可以在"引导层"画一根椭圆线条，再用"橡皮擦工具"擦去一小段，使圆形线段出现2个端点，成为开口的线条，再把对象的起始、终点分别对准端点即可。
  6.2.2 操作实例：甲壳虫
  上机实践
  前面制作的运动动画，对象只能沿着直线运动，这例学习制作引导线动画，使制作出来的对象沿绘制出来的引导线运动。
  （1）新建一个Flash文档，执行菜单栏的"修改/文档"命令，在弹出的"文档属性"对话框中，将文档尺寸设置为600×400，帧频设为15fps。
  （2）在时间轴上新建1个图层后，将这2个图层从上至下分别命名为"甲壳虫"和"背景"，然后在"背景"层中执行菜单栏"文件/导入/导入到舞台"命令，选择一张背景素材导入至舞台中，并设置背景图片和文档同样大小。
  （3）在"背景"层的第100帧处按"F5"功能键插入帧，使背景图片始终保持不变。
  （4）锁定"背景"层，创建一个名为"甲壳虫"的图形元件，在该元件下绘制一只甲壳虫。
  （5）在时间轴上点击"场景1"按钮，退出元件编辑状态，回到主场景中。将"库"面板中的图形元件"甲壳虫"拖拽至"甲壳虫"图层所对应的舞台上。
  （6）在"甲壳虫"图层的第1帧上单击鼠标右键，再在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。
  （7）在时间轴的第100帧处按"F6"功能键插入关键帧，完成补间动画的制作。
  （8）锁定"甲壳虫"图层，点击时间轴上的"添加运动引导层"按钮 ，创建一个引导层。系统会自动将该层命名为"引导层: 甲壳虫"。
  （9）使用"铅笔工具" 在引导层上沿树干部分绘制一曲线，作为甲壳虫爬行时的路径。因为在预览动画时，引导线是不会显示的，所以这里的笔触颜可以是任意颜。
  （10）锁定"引导层"，解开"甲壳虫"图层的小锁后，确认该图层处于当前编辑状态。使用"选择工具" 分别移动第1帧和第100帧处甲壳虫的位置，让它分别位于引导线的首尾位置上。
  （11）在移动甲壳虫图形前，先在工具箱中启用"贴紧至对象" 按钮，这样可以帮助甲壳虫图形自动吸附到引导线上。使用"任意变形工具" 对甲壳虫图形进行旋转变形，使它的朝向与引导线保持一致，
  （12）按回车键直接测试动画，可以看到甲壳虫沿着引导线的路径前进。为了使甲壳虫的爬行过程更为自然，接下来编辑一下这个运动动画。
  （13）在"甲壳虫"图层的第1到第99帧上任意选择一帧，打开"属性"面板。在该面板下，勾选"调整到路径"复选框。此时再测试动画便可看到甲壳虫的朝向与引导线的曲折处正好吻合。
  （14）最后使用"Ctrl + Enter"键预览动画效果，一只甲壳虫沿树枝爬行的动画效果就制作完成了。
  6.2.3 操作实例：激光文字
  本例继续学习引导动画和遮罩动画的综合技巧，如本例中应用了遮罩原理，制作出激光文字效果。
  （1）首先创建一个文档，执行菜单栏"修改/文档"命令，在弹出的"文档属性"对话框中把背景设为黑。
  （2）设置好背景颜后，执行菜单"插入/新建元件"命令，创建一个名为"激光"的图形元件。
  （3）在"激光"元件的编辑区内使用绘图工具绘制一个光斑效果图形。然后在混器面板中将填充颜设置成由白到桔黄"#FF9A00"再到红"#FF0000"的放射状渐变。对光斑图形进行颜填充后。
  （4）点击时间轴上的"场景1"按钮，返回到主场景编辑区。使用工具箱中的"文本工具" 在舞台中输入一行文字。这里根据个人喜好任意设置字体的大小和颜等属性。
  （5）点击时间轴上的"插入图层" 按钮，创建一个新的图层2。执行菜单栏"窗口/库"命令，在弹出的"库"面板中，将图形元件"激光"拖拽至"图层2"所对应的舞台上。并根据文字大小适当调整"激光"图形的大小。
  （6）锁定图层1和图层2，点击时间轴上的"添加运动引导层" 按钮，为图层2创建一个引导层。准备在该层上绘制引导线。
  （7）选择工具箱中的"铅笔工具" ，为了进行颜区分，这里将"笔触颜" 设置成红。然后在舞台中按照文字的书写顺序绘制线条。
  （8）绘制完引导线之后，分别在该层的第10、25、35和40帧上按"F6"功能键插入关键帧，再在图层1的第40帧上按"F5"功能扩展帧。
  （9）完成上述操作之后，锁定引导图层，解开图层2上的小锁，并使该图层处于当前编辑状态。接下来创建运动动画，使光斑沿着字母笔画顺序进行运动。
  （10）在图层2的第1帧上单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。
  （11）选择工具箱中的"选择工具" ，并启用工具箱中的"贴紧至对象" 按钮，然后在舞台中将光斑图形移动至引导线的起始端。因为启用了"贴紧至对象" 按钮，所以在移动光斑图形时，该图形会被自动吸附到引导线的端点上。
  （12）在第9帧处插入一个关键帧，然后在舞台上将光斑图形拖拽至同一条曲线的末端处。完成后第一个引导动画就制作完成。
  （13）接下来在图层2的第10、24、25、34、35和40帧上分别插入一个关键帧。选中第10帧，在舞台上将光斑图形拖拽至第二条曲线的起始位置，在第24帧处将光斑图形拖拽至第二条曲线的末端处。以此类推，在其余帧所对应的舞台上，将光斑图形拖拽至相应的曲线首末端处。
  （14）完成上述操作之后锁定图层2，接着点击图层1，再点击"插入图层" 按钮创建一个新图层4。确认新创建的图层4位于图层1的上方，接下来制作遮罩动画。
  （15）选择工具箱中"刷子工具" ，刷子的大小默认状态即可，刷子颜只要与背景和文字颜区分开来就行。然后在光斑图形遮住的文字部分上进行涂抹，使得绘制出来的图形刚好盖住光斑部分就行，形状随意。
  （16）完成上述操作之后，在第2帧上插入一个关键帧，在舞台上光斑经过以后的文字部分进行路径绘制，注意只在光斑经过以后的路径上进行绘制。
  （17）在第3帧上插入关键帧，同样在舞台上对光斑经过处的文字部分进行绘制。
  （18）以此类推，在图层4的每一帧上都插入关键帧，每一帧所对应的舞台上都将光斑经过以后的文字部分进行涂抹遮盖。
  （19）在图层4上单击鼠标右键，再在弹出的菜单中选择"遮罩层"命令，创建一个遮罩动画。
  （20）在图层1的第55帧上按"F5"功能键扩展帧，到此一个引导层动画与遮罩层动画相结合的实例就制作完成。

  本章要点
  1．使用遮罩动画
  2．使用引导动画