《二维flash动画制作》第5章 特效动画的制作

第2部分强化篇——让对象动起来第5章特效动画的制作5.1遮罩动画的制作5.2引导层动画的制作5.33D效果动画的制作5.4上机实习5.1遮罩动画的制作5.1.1遮罩动画原理

5.1.2遮罩动画的实现

5.1.3实践与练习一：暗夜偷窥

5.1.4实践与练习二：放大镜动画5.1.1遮罩动画原理

1、什么是遮罩动画遮罩，顾名思义就是遮挡住下面的对象。在Flash中，遮罩动画也确实是通过遮罩层来达到有选择地显示位于其下方的被遮罩层中的内容的目的。遮罩图层对象的填充区域，就等于在遮罩图层上挖掉了相应形状的洞，透过这些洞，可以看到下面图层的内容，其余内容便被遮罩起来。在一个遮罩动画中，一个遮罩层可以有任意多个被遮罩层。在Flash动画中，遮罩主要有两种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。2、应用了遮罩的图层外观只有当遮罩图层与被遮罩图层都处于如图5.1所示的锁定状态下，才可以在舞台预览到最后的遮罩效果。图5.1应用了遮罩的图层外观5.1.2遮罩动画的实现

在这里我们通过一个简单的例子来说明创建遮罩动画的步骤。1、绘制遮罩层对象在此图层上绘制一个圆形，如图5.2所示。这个圆决定了遮罩效果将要显示的区域，这个图层将成为遮罩层。在遮罩层中，位图填充、渐变填充、透明设置、颜色、笔触等等元素都将被忽略，我们只取它所含内容的大小。提示：笔触不能用于遮罩其它对象，一个只有笔触的遮罩层是无法显示被遮罩层中被遮部分内容的。2、绘制被遮罩层对象在图层1上方新建一个图层2，在该图层中添加文本“MASK”，并将图层2拖放至图层1下方，如图5.3所示。图5.2绘制对象决定要显示的区域图5.3新建图层添加文本并调整图层顺序3、创建遮罩效果在图层1的名字附近单击鼠标右键，选择“遮罩层”命令，带有记号的图层是遮罩层，带有记号的图层是被遮罩层，Flash自动锁定遮罩与被遮罩图层，我们可以在舞台上预览到最后的效果，如图5.4所示。上面介绍的是给图层创建遮罩效果的普通方法。除此之外，还可以在【时间轴】面板中把已经存在的普通图层拖放到遮罩图层下面，被遮罩的图层会右缩进，表明被遮罩。如果要取消被遮罩图层与遮罩图层之间的关联，有两个主要的方法：一个是在【时间轴】面板中把被遮罩图层拖放到遮罩图层上面，另一个是在被遮罩图层上单击鼠标右键，在弹出的快捷菜单中选择“属性”，这时会弹出“图层属性”对话框，在【类型】项中选择“一般”单选项便可以取消被遮罩图层与遮罩图层之间的关联。图5.4遮罩的最终效果5.1.3实践与练习一：暗夜偷窥这里我们通过动画“暗夜偷窥”的制作，让读者掌握遮罩动画的制作方法与技巧。1、新建一个Flash文档，文档尺寸保持默认，背景颜色设置为黑色。将图层1重命名为“夜景”，利用工具栏中的绘图工具绘制如图5.5所示的夜景，延长至240帧。2、在“夜景”层上新建一图层，命名为“望远镜”，用椭圆工具绘制一个如图5.6所示的望远镜，将望远镜拖出舞台并放置在左上角，将此图层延长至240帧。3、在“望远镜”层上的第1帧上单击鼠标右键，选择“创建补间动画”，动画长度自动为240帧。选择第30帧，将望远镜拖放至舞台左上角任一位置，在第60帧上单击鼠标右键选择“插入关键帧/位置”，效果为移动望远镜到左上角并且停顿片刻。4、选择第90帧，将望远镜拖放至舞台左下角任一位置，在第120帧上单击鼠标右键选择“插入关键帧/位置”，效果为移动望远镜到左下角并且停顿片刻。同理，制作动画的第150和180帧，第210和240帧。5、在“望远镜”层上单击鼠标右键，选择“遮罩层”命令，测试并且保存动画。动画最终效果如图5.7所示。图5.5绘制的夜景图5.6绘制的望远镜图5.7动画最终效果图5.1.4实践与练习二：放大镜动画这里我们通过动画“放大镜”的制作，让读者掌握遮罩动画的制作方法与技巧，以及感受多个遮罩效果同时应用的特殊效果。1、新建一个Flash文档，文档尺寸保持默认，背景颜色设置为蓝色。将图层1重命名为“小字”，利用文本工具输入文本“MAGNIFIER”，设置好文本字体为“CooperStd”，大小为50点，字母间距为22，颜色为橙色，将文本置于舞台中央位置，如图5.8所示。将该图层延长至120帧。2、在“小字”图层上新建一个图层并命名为“大字”，复制“小字”图层中的大字，选择“大字”图层第1帧后，执行“编辑/粘贴到当前位置”菜单命令，锁定“小字”图层。将“大字”图层中粘贴的文本大小调整为80点，执行“Ctrl+B”快捷键组合将文本打散成单独的字母，并且调整每个大字字母相对于小字的位置，如图5.9所示。图5.8输入小字图5.9调整大字与小字的位置3、在“大字”图层上新建一个图层并命名为“大字遮罩”，利用椭圆工具绘制一个只有填充的黑色正圆形，放置于舞台外的文本左侧，如图5.10所示。4、在“小字”图层上新建一个图层并命名为“小字遮罩”，这时可以适当缩小窗口显示大小以便于绘图。利用矩形工具绘制一个绿色的矩形，矩形的高度能够遮挡住文本，矩形的长度大于两个舞台宽度，让矩形的右边缘齐平舞台右边缘，如图5.11所示。5、复制“大字遮罩”图层中的圆形后锁定“大字遮罩”图层，选择“小字遮罩”图层的第1帧后执行“编辑/粘贴到当前位置”菜单命令，取消选择舞台的任何内容后选择并删除粘贴的黑色圆形（作用是使用“大字遮罩”图层中的圆形对矩形做一个镂空）。隐藏“大字遮罩”图层后得到如图5.12所示的效果。图5.10绘制用于遮罩大字的圆形并放置于舞台之外的文本左侧图5.11绘制用于遮罩小字的矩形并让矩形的右边缘齐平舞台右边缘图5.12“小字遮罩”图层中的内容图5.13放大镜的绘制效果5、此时锁定除“大字遮罩”图层外的所有图层，在“大字遮罩”图层上方新建一图层并命名为“放大镜”，用于绘制放大镜。复制“大字遮罩”图层中的圆形后锁定“大字遮罩”图层，选择“放大镜”图层的第1帧后执行“编辑/粘贴到当前位置”菜单命令，设置好笔触和颜色后使用墨水瓶工具为粘贴的圆形绘制笔触，绘制好后删除粘贴的圆形，并且利用绘图工具完成放大镜手柄的绘制，最后绘制的放大镜效果如图5.13所示。6、选择“大字遮罩”图层的第120帧后插入关键帧，回到第1帧创建补间形状动画，同理设置“小字遮罩”图层和“放大镜”图层。此时只锁定“大字”图层和“小字”图层，利用选取工具框选120帧处的“大字遮罩”图层、“小字遮罩”图层和“放大镜”图层的所有内容，水平拖放到舞台右侧，如图5.14所示。7、分别在“大字遮罩”图层和“小字遮罩”图层上单击鼠标右键选择“遮罩层”命令，测试并保存动画，得到最终动画效果如图5.15所示。图5.14将“大字遮罩”图层、“小字遮罩”图层和“放大镜”图层的所有内容水平拖放到舞台右侧图5.15动画最终效果图5.2引导层动画的制作5.2.1引导层动画原理

5.2.2引导层动画的实现

5.2.3实践与练习一：掉落的叶子

5.2.1引导层动画原理

1、什么是引导层动画引导层动画是通过引导图层和被引导图层的结合来实现的。引导图层可以在动画运行时起辅助作用，确定对象运动的路径。引导图层只是在Flash文档中能看到，不会出现在引导的影片中。创建和转换引导图层的方法如下：(1)将普通图层转换为引导图层：首先创建一个普通图层，然后在该图层名字附近单击鼠标右键，在弹出的快捷菜单中选择“引导层”命令即可将普通图层转换为引导图层。(2)直接创建引导图层：在【时间轴】面板中，选中需要关联运动路径的图层，在该图层名字附近单击鼠标右键，在弹出的快捷菜单中选择“添加传统运动引导层”命令，即可将该图层转换为被引导层，新增加的图层为运动引导层。(3)将引导图层变为普通图层选中引导图层，再该图层名字附近单击鼠标右键，在弹出的快捷菜单中再次选择“引导层”命令，使它前面的勾消失，这样引导图层就变为了普通图层。2、创建了引导层动画的图层外观只有如图5.16所示的，引导图层前方带有一个符号，被引导图层自动向后缩进的引导层动画才是成功的引导层动画，在该状态下，被引导图层的内容按照引导图层的指定路线进行移动。如图5.17所示的引导层动画引导图层前方带有一个符号，而且被引导图层没有自动向后缩进，该动画为失败的引导图层动画，在该动画中，被引导图层的内容不会按照引导图层的指定路线进行移动。解决办法为：拖动被引导图层至引导图层，在两个图层之间会出现如图5.18所示的一根提示横线，此时松开鼠标，引导图层前方的符号转变为记号，并且被引导图层自动向后缩进，被引导图层与引导图层之间建立关联，被引导图层中的内容将会按照引导图层的指定路线进行移动。图5.16创建了引导层动画的图层外观图5.17失败的引导图层动画图5.18建立引导图层与被引导图层之间的关联图5.19引导层动画【属性】面板3、调整到路径当创建了引导层动画之后，单击被引导图层动画中的任一帧，便会弹出如图5.19所示的【属性】面板。这里我们将调整到路径选项给读者详细介绍一下：如果希望在运动时保持对象的方向不变，就应该去掉“调整到路径”的选择。例如一个小狗围绕椭圆路径运动，如果没有勾选“调整到路径”复选框，运动效果如图5.20所示。可以看到，小狗始终朝着同一个方向运动。如果希望小狗的朝向会随着曲线的形状而改变，就应该勾选“调整到路径”复选框。这样可以始终让对象在运动时保持与路径的切线方向一致，如图5.21所示。图5.20没有勾选“调整到路径”的效果图5.21勾选“调整到路径”的效果5.2.2引导层动画的实现在这里我们通过一个简单的例子来说明创建引导层动画的步骤。1、制作被引导图层动画在舞台上绘制一个五角星，将其选中后按下F8键将其转换为元件。在第25帧处插入关键帧，回到第1帧单击鼠标右键，在弹出的快捷菜单中选择“创建传统补间”，如图5.22所示。2、创建引导图层并绘制引导路径选择被引导图层，在该图层名字附近单击鼠标右键，选择“添加传统运动引导层”命令Flash会自动在所选图层上方创建一个新的运动引导层，在该层中绘制好运动的路径。3、调整动画开始帧和结束帧的位置为了避免误操作，锁定引导图层。选择被引导图层动画的第1帧，将五角星元件拖放到路径的起点，再选择引导图层动画的第25帧，将五角星元件拖放到路径的终点。图5.22制作被引导图层动画图5.23创建引导图层并绘制引导路径图5.24调整动画开始帧和结束帧的位置3、测试动画，可以看到五角星沿着引导路线运动，如图5.25所示。提示：1、当移动元件至路径起点或者终点时，元件中间会出现一个如图5.24所示的用于对齐的小圆圈，只要将动画开始帧和结束帧元件上的圆圈对齐到引导线上，便可让元件沿着路径运动。2、在测试或者导出动画以后，引导线将会被隐藏。图5.25引导层动画的运动轨迹5.2.3实践与练习一：掉落的叶子这里我们通过动画“掉落的叶子”的制作，让读者掌握引导层动画的制作方法与技巧。1、新建一个Flash文档，文档尺寸保持默认。将图层1重命名为“盆花”，利用工具栏中的绘图工具绘制如图5.26所示的盆花，延长至120帧并锁定该图层。2、在“盆花”图层上方新建一个图层，命名为“叶子1”，利用绘图工具绘制一片树叶，按下F8键，转换为图形元件，将该元件适当缩放后放置于盆花的偏右侧，如图5.27所示。在该图层的第70帧处插入关键帧，回到第1帧，创建传统补间动画。3、在“叶子1”图层上方新建一个图层，命名为“叶子2”，在该图层第25帧处插入关键帧，复制“叶子1”图层中的叶子实例，在“叶子2”图层的第25帧处粘贴，修改大小并且做适当的旋转，放置到盆花的偏左侧。在该图层的第95帧处插入关键帧，回到第25帧，创建传统补间动画。图5.26绘制盆花图5.27选中部分即为“叶子1”图层中的叶子元件4、在“叶子2”图层上方新建一个图层，命名为“叶子3”，在该图层第50帧处插入关键帧，复制“叶子1”图层中的叶子实例，在“叶子3”图层的第50帧处粘贴，修改大小并且做适当的旋转，放置到盆花的中上部分。在该图层的第120帧处插入关键帧，回到第50帧，创建传统补间动画。5、在“叶子3”图层上方新建一个图层，命名为“路径”，利用铅笔工具绘制3条叶子飘落的平滑路径，延长至120帧并锁定该图层。注意，路径的终点都绘制到画布之外，以制造叶子飘落不见的效果。6、在“路径”图层的名字附近单击鼠标右键，选择“引导层”命令，这时大家可以看到引导层动画还不成功。拖动“叶子3”图层到“路径”图层，当出现提示横线时松开鼠标，建立“叶子3”图层和“路径”图层的关联，同理设置“叶子1”和“叶子2”两个图层。7、回到“叶子1”图层，分别将该图层动画起点和终点的元件放置到它路径的起点和终点，单击动画的任一帧，在【属性】面板中勾选“调整到路径”。同理调整“叶子2”和“叶子3”图层中的动画。最后效果如图5.28所示。8、测试并保存动画。图5.28绘制3条叶子飘落的路径5.33D效果动画的制作随着网络和多媒体技术的发展，3D动画越来越被人们所看重，因为它比平面图更直观，更能给观赏者以身临其境的感觉，所以在未来的发展中也越来越重要。Flash也开始追随此潮流，在最新的FlashCS4版本中也开始尝试在2D动画制作中加入一些3D的功能，从而给Flash带来更多精彩的元素。在Flash以前的版本中，舞台上只有二维的平面坐标轴，即水平方向的X轴和垂直方向的Y轴。确定了X轴和Y轴的坐标值也就精确定位了对象在舞台当中的位置。FlashCS4中增加了一个新的坐标轴Z轴，它代表的是深度，这样在Flash中就引入了三维空间的概念。如果需要在3D定位中确定对象的位置，就需要同时通过X轴、Y轴和Z轴的坐标值来定位。要制作3D效果动画，就需要借助工具栏中的3D工具组：3D旋转工具和3D平移工具。这两个工具都只对影片剪辑元件起作用。提示：若要成功应用FlashCS4的3D功能，Flash文件的发布设置中必须同时选择FlashPlayer10和ActionScript3.0。5.3.13D旋转工具介绍1、3D旋转工具的使用我们在舞台上新建一个影片剪辑元件，选择3D旋转工具，单击影片剪辑元件，这时在图像中央会出现如图5.29所示的一个类似瞄准镜的图形，十字的外围是两个圈，并且他们呈现不同的颜色。当鼠标移动到红色的中心垂直线时，鼠标右下角会出现一个“X”，此时我们拖动可沿X轴方向调整图形的3D方向，如图5.30所示。图5.30调整X轴当鼠标移动到绿色水平线时，鼠标右下角会出现一个“Y”，此时我们拖动可沿Y轴方向调整图形的3D方向，如图5.31所示。当鼠标移动到蓝色圆圈时，鼠标右下角又出现一个“Z”，此时我们拖动可沿Z轴方向调整图形的3D方向，如图5.32所示。当鼠标移动到橙色的圆圈时，可以对图像的X、Y、Z轴进行综合调整，如图5.33所示。图5.293D旋转工具的使用图5.30调整X轴图5.31调整Y轴图5.32调整Z轴图5.33综合调整图像的3D效果2、属性设置在打开3D旋转工具的同时，我们会看到窗口右侧会出现相应的【属性】面板，其中包含【位置和大小】、【3D定位和查看】、【色彩效果】、【显示】、【滤镜】等几个部分。【位置和大小】面板在此面板中，我们可以调整X和Y轴的坐标值以及图形的宽度和高度。当然调整图形宽度和高度时我们可以通过左侧的锁定按钮来决定是否进行等比例的改变。【3D定位和查看】面板：【透视角度】项：调整透视角度的值，如同调整照相机的焦距，可以让镜头自由的伸缩。【消失点】项：对于同一个物体，从透视关系来看，距离你越近看起来显得越大，距离你越远，看起来显得越小。任何两条非平行的连线都会相交于远处的某一点，这点即为透视图中的消失点。消失点决定了Z轴的走向，Z轴指向消失点。图5.34【位置和大小】面板图5.35【3D定位和查看】面板【色彩效果】面板：在此面板中，我们可以调整元件的亮度、色调、高级和Alpha的值，这些我们在前面章节已经详细阐述，不再赘述。【显示】面板在此面板中，可以调整图层的混合效果，与Photoshop中的图层混合效果相同，我们在后面章节将会详细介绍。【滤镜】面板在此面板中，可以为元件制作出很多特殊效果，我们在后面章节中将详细讲述。图5.36【色彩效果】面板图5.37【显示】面板图5.38【滤镜】面板5.3.23D平移工具介绍1、3D平移工具的使用我们在舞台上新建一个影片剪辑元件，选择3D平移工具，单击影片剪辑元件，这时在图像中央会出现如图5.39所示的一个坐标图。红色为X轴，可以对X轴横向轴进行调整，如图5.40所示。绿色为Y轴，对以对Y轴纵向轴进行调整，如图5.31所示。中间的黑色圆点为Z轴，拖曳可以对Z轴进行调整，如图5.42所示。2、属性设置在打开3D平移工具的同时，我们会看到窗口右侧会出现与3D旋转工具相同的【属性】面板，我们不再赘述。图5.393D平移工具的使用图5.40移动X轴图5.41移动Y轴图5.42拖曳黑色圆点，调整Z轴5.3.3实践与练习：镜头拉伸动画这里我们通过“镜头拉伸”动画的制作，让读者掌握3D动画的制作方法。1、打开光盘中的“镜头拉伸素材”文件，将文件背景色更改为蓝色。2、打开【库】面板，分别将其中的影片剪辑“人物”和“房屋”拖放到舞台上创建实例，并且调整好它们的大小和位置，如图5.43所示。拖放的同时注意调整两个实例的叠加顺序。3、选择工具栏中的3D旋转工具后，单击“人物”元件，调整Y轴的值，让人物沿着房子的方向稍作倾斜，如图5.44所示。4、将该图层延长至120帧，创建补间动画。5、回到第1帧，利用3D平移工具选择舞台中的对象，拖曳Z轴的圆点缩小整个对象，如图5.45所示。图5.43调整两个元件的大小和位置图5.44利用3D旋转工具调整“人物”的Y轴图5.45使用3D平移工具，更改对象的Z轴图5.46使用3D旋转工具，更改对象的Y轴6、继续利用3D旋转工具选择舞台中的对象，更改整个对象的Y轴，得到的效果如图5.46所示。7、选择动画的第80帧，利用3D平移工具选择舞台中的对象，拖曳Z轴的圆点放大整个对象，如图5.47所示。8、继续利用3D旋转工具选择舞台中的对象，更改整个对象的Y轴，旋转对象使其尽量面对观众，得到的效果如图5.48所示。9、利用3D平移工具选择舞台中的对象，更改Y轴让整个对象放置于舞台之中，如图5.49所示。10、测试并将动画另存为名字为“镜头拉伸.fla”的Flash文件。图5.47使用3D平移工具，更改对象的Z轴图5.48使用3D旋转工具，更改对象的Y轴图5.49使用3D平移工具，更改对象的Y轴5.4上机实习5.4.1完成项目中遮罩动画的创作5.4.1完成项目中遮罩动画的创作我们打开上次修改的项目文件，进行以下操作。1、在场景1中，选择“首页动画”图层，在其上新建一个图层并命名为“滚动图片”。在该图层的第3帧和第6帧插入关键帧，在第4帧插入空白关键帧。2、选择第3帧，导入光盘中的图像“image17.jpg”，并将其放置于舞台的左上侧，具体位置如图5.50所示。3、选中该图像，按F8键将其转换为影片剪辑元件，并命名为“遮罩动画”。双击进入影片剪辑元件，进入元件编辑模式。将“遮罩动画”影片剪辑内的图层1重命名为“