Dreamweaver-Flash-Fireworks网页制作培训教程第7课

1、第7课 制作动画本课要点具体要求本课导读上机练习本课要点点基础动画画引导动画画遮罩动画画具体要求求掌握元件件的创建建、编辑辑及调用用方法掌握库的的使用方方法掌握形状状补间动动画的创创建方法法及形状状提示的的使用方方法掌握动画画补间动动画的创创建方法法及元件件实例属属性的设设置方法法掌握引导导动画的的原理及及创建方方法掌握遮罩罩动画的的原理及及创建方方法本课导读读使用Flash就是为了了制作出出漂亮的的动画效效果，本本课就来来讲解Flash的这个核核心内容容。根据据创建方方式的不不同，Flash动画分为为基础动动画和特特殊动画画。其中中，基础础动画可可分为逐逐帧动画画和补间间动画，补间动动画根据

2、据不同对对象又可可分为形形状补间间动画和和动画补补间动画画两种；根据不不同的辅辅助对象象，特殊殊动画可可分为引引导动画画和遮罩罩动画两两种。7.1制制作作基础动动画基础动画画主要包包括逐帧帧动画、形状补补间动画画和动画画补间动动画3类。此外外，利用用时间轴轴的特效效功能还还可以将将对象制制作为有有模糊、扩展等等效果的的动画。7.1制作基础础动画7.1.1知识讲解解7.1.2典型案例例制制作banner动画画7.1.1知知识讲讲解元件是动动画补间间动画的的基本单单位，因因此创建建元件是是学习动动画的基基础。本本节将介介绍如何何创建、编辑、调用元元件以及及如何应应用元件件创建补补间动画画和时间间轴

3、动画画。7.1.1知知识讲讲解1.创建与编编辑元件件2.调用元件件3.逐帧动画画4.形状补间间动画5.为形状补补间动画画添加形形状提示示6.动画补间间动画7.时间轴特特效动画画1.创建与编编辑元件件元件有影影片剪辑辑、图形形和按钮钮3种，各类类元件的的区别与与作用如如下。影片剪辑辑：该类类元件可可以包含含Flash动画的一一个片段段，也可可以是静静止的对对象。作作为动画画片段时时，它能能独立于于场景动动画进行行播放。此外，在影片片剪辑元元件实例例上还可可以添加加交互动动作。1.创建与编编辑元件件图形：该该类元件件中也可可以包含含动画片片段，但但不能独独立于场场景播放放；在调调用该类类元件时时，

4、时间间轴的帧帧数必须须与图形形元件中中的帧数数相同，否则不不能播放放。一般般将它作作为静止止的对象象处理。注意，图形元元件上不不能添加加交互行行为。1.创建与编编辑元件件按钮：用用于创建建动画的的交互控控制按钮钮，以响响应鼠标标事件（如单击击、释放放和滑过过等），实现按按钮的功功能。按按钮有“弹起”、“指指针经过过”、“按下”和“点点击”4个不同同状态的的帧，“点击”帧中创创建鼠标标对按钮钮起作用用的范围围；其他他帧中可可以是静静止图形形，也可可是影片片剪辑。2.调用元件件元件从库库中被拖拖到场景景或编辑辑区的过过程称为为调用元元件。元元件是可可以反复复调用的的对象，当元件件作为一一个对象象从

5、库中中调用到到场景或或其他元元件编辑辑区时，它变为为该元件件的一个个具体的的实例。因此，当修改改元件后后，其对对应的元元件实例例也会相相应地改改变，这这就使编编辑动画画变得十十分方便便，不需需逐一地地修改每每个元件件实例。当然，元件实实例也有有独立的的属性，这部分分内容将将在创建建动画补补间动画画时介绍绍。2.调用元件件调用元件件的方法法为：在在库中选选取要调调用的元元件，将将其拖入入场景或或编辑区区后释放放鼠标。3.逐帧动画画逐帧动画画已经在在第6课的典型型案例中中应用过过了，它它是以单单帧中内内容的变变化来实实现动画画效果的的。这种种动画文文件占用用的存储储空间较较大，因因此，变变化过程程

6、太长的的动画不不宜采用用该类型型；但变变化比较较复杂、不易体体现出变变化过程程的动画画，如表表现举手手、抬足足或面部部表情等等，应采采用该类类型。4.形状补间间动画形状补间间动画指指外观形形状变化化的动画画；在实实际的动动画创建建过程中中，除了了外观形形状的变变化外，也可以以是位置置、颜色色的变化化。在Flash中，要创创建形状状补间动动画，需需首先确确定首末末两个关关键帧的的内容，中间的的变化过过程由计计算机自自动完成成。关键键帧中的的内容可可以是一一个或多多个不同同的对象象，但对对象必须须是可分分离的图图形。5.为形状补补间动画画添加形形状提示示形状补间间动画的的中间过过程由计计算机自自动

7、完成成，这说说明中间间过程的的变化是是不可控控制的。如果要要使某点点在动画画变形过过程中固固定不变变，那么么可以添添加形状状提示。6.动画补间间动画在动画补补间动画画中，首首末关键键帧中的的对象必必须是同同一个元元件的实实例，并并且一个个关键帧帧中只能能有一个个元件实实例。动动画补间间动画有有位置、大小、旋转、倾斜和和颜色几几方面的的变化，这些变变化可以以单独存存在，也也可以加加多个变变化于一一个元件件上。例例如，对对象在舞舞台中一一边移动动，一边边旋转，并且呈呈淡入效效果。7.时间轴特特效动画画时间轴特特效动画画是Flash8的新增功功能。使使用它，可以用用最少的的步骤创创建复杂杂动画。时间

8、轴轴特效的的对象包包括文本本、影片片剪辑和和按钮。7.1.2典型案例例制作banner动画案例目标标本案例将将为第6课中制作作的banner.fla添加形状状补间动动画、动动画补间间动画和和时间轴轴特效动动画，添添加后的的效果如如下图所所示。7.1.2典型案例例制作banner动画操作思路路：（1）确定画画面中需需要创建建为动画画的元素素：“welcome”、“幻铃铃”文字字及环状状对象将将创建为为影片剪剪辑元件件，而“一号通通”文字字将创建建为按钮钮。（2）给“welcome”文字添加加时间轴轴特效，将“幻幻铃”文文字创建建为透明明度渐变变动画，将环状状对象创创建为图图形变为为3个圆环的的形

9、状补补间动画画，将“一号通通”文字字创建为为指针经经过时状状态显示示“#FF6600”颜色的按按钮。7.1.2典型案例例制作banner动画（3）在制作作过程中中，可以以随时按按【Ctrl+Enter】组合键查查看动画画效果。操作步骤骤请老师师参照软软件讲解解7.1.2典型案例例制作banner动画案例小结结本案例中中练习了了形状补补间动画画、动画画补间动动画的创创建和时时间轴特特效的添添加，以以及元件件的转换换、元件件实例属属性的更更改等。本案例例中采用用的元件件转换方方式比通通过创建建元件再再调用元元件来创创建动画画更方便便快捷，因为转转换为元元件前对对象已在在需要的的位置上上了，转转换为

10、元元件后再再进入元元件编辑辑区进行行编辑便便可以看看到场景景中对象象的相对对位置，因此采采用这种种方法创创建动画画的直观观性更强强。7.2制作引导导动画引导动画画是使对对象沿某某条路径径运动而而产生的的动画，例如，雪花飘飘落、树树叶落下下、汽车车或人沿沿某路线线行走等等都可使使用引导导动画来来制作。7.2制作引导导动画7.2.1知识讲解解7.2.2典型案例例变变幻光环环7.2.1知知识讲讲解本节将介介绍引导导动画的的构成原原理及其其创建方方法。7.2.1知知识讲讲解1.引导动画画的构成成原理2.创建引导导动画1.引导动画画的构成成原理引导动画画是由引引导层和和被引导导层构成成的，引引导层位位于

11、被引引导层的的上方。被引导层层的对象象沿着引引导层的的对象运运动，引引导层的的对象必必须是不不封闭的的路径，并且以以普通帧帧（而不不是关键键帧）结结束。被被引导层层的对象象必须是是元件实实例，通通过动画画补间动动画来完完成对象象的运动动。一条条引导路路径可以以被多个个被引导导层对象象共用，即多个个对象沿沿同一条条路径运运动。2.创建引导导动画创建引导导动画的的具体操操作如下下：（1）创建引引导层。单击图图层区中中的按按钮新建建引导层层，此时时建立的的引导层层与下方方的图层层已建立立了链接接关系。（2）在引导导层中绘绘制路径径。选中中引导层层，选择择工具箱箱中的铅铅笔、钢钢笔、多多边形、矩形或或

12、椭圆工工具进行行绘制。绘制完完成的路路径只能能为笔触触线，而而不能有有填充色色。2.创建引导导动画（3）在被引引导层中中创建动动画补间间动画，并且首首末关键键帧中的的元件实实例必须须位于路路径中的的不同位位置。（4）设置动动画。在在被引导导层的时时间轴上上单击鼠鼠标，选选中【属性】面板中的的复复选框，使动画画补间动动画中的的元件实实例在播播放过程程中为了了适合路路径的变变化方向向做一定定角度的的旋转。如果不不选中该该复选框框，则元元件实例例保持初初始状态态进行运运动。7.2.2典型案例例变幻光环环案例目标标本案例将将制作变变幻光环环，主要要练习引引导动画画的创建建，完成成后的效效果如下下图所示

13、示。7.2.2典型案例例变幻光环环操作思路路：（1）设置动动画场景景大小为为550400像素，背背景色为为“#000000”，帧频为为20fps。（2）在场景景中创建建圆，并并逐层创创建“yj”元件、“引导动动画”元元件和“环图”元件。（3）在“引引导动画画”元件件中创建建以圆为为路径的的引导动动画。7.2.2典型案例例变幻光环环（4）在“环环图”元元件中编编辑圆，使其为为圆的一一小部分分，并进进行渐变变和柔化化填充。（5）在“yj”元件中复复制多个个“引导导动画”元件实实例，并并调整出出造型。操作步骤骤请老师师参照软软件讲解解 7.2.2典型案例例变幻光环环案例小结结本案例通通过制作作变幻光

14、光环练习习了引导导层和引引层动画画的创建建、元件件的转换换、柔化化填充、【混色色器】面面板的使使用等。读者应应主要掌掌握引导导动画的的创建及及设置方方法，当当然，其其他辅助助知识点点也是创创建动画画效果时时随时要要用到的的，也应应该逐步步掌握。另外，在“引引导动画画”元件件的编辑辑区中，如果在在【属性性】面板板中将旋旋转方式式设置为为“顺时时针”或或“逆时时针”，则会产产生另一一种动画画效果。7.3制制作作遮罩动动画遮罩动画画在Flash动画制作作中使用用得十分分广泛，因为它它实现的的许多效效果是普普通动画画无法实实现的，如在一一个圆形形内看其其他对象象的变化化状态、神奇的的万花筒筒效果等等。

15、7.3制制作作遮罩动动画7.3.1知识讲解解7.3.2典型案例例展展卷画7.3.1知识讲解解本节将介介绍遮罩罩动画的的构成原原理和创创建方法法。7.3.1知识讲解解1.遮罩动画画的构成成原理2.创建遮罩罩动画 1.遮遮罩动画画的构成成原理遮罩动画画是由遮遮罩层和和被遮罩罩层构成成的，遮遮罩层位位于被遮遮罩层的的上方。遮罩动动画就是是从遮罩罩层的图图形区域域观看被被遮罩层层中的对对象，遮遮罩层中中图形外外的区域域将隐藏藏被遮罩罩层中的的对象。1.遮遮罩动画画的构成成原理遮罩层中中的对象象可以是是填充的的形状、文字、图形元元件的实实例或影影片剪辑辑元件，但是遮遮罩层中中只能有有一个独独立的对对象，

16、形形状例外外。在一一个遮罩罩动画中中，遮罩罩层只能能有一个个，但被被遮罩层层可以有有多个。2.创创建遮罩罩动画遮罩动画画有以下下3种情况：遮罩层与与被遮罩罩层中的的对象都都为静态态对象，创建的的遮罩图图形相当当于Fireworks的蒙版效效果。遮罩层中中为静态态对象，被遮罩罩层中有有补间动动画；或或遮罩层层中有补补间动画画，被遮遮罩层中中为静态态对象。遮罩层与与被遮罩罩层中都都有补间间动画。7.3.2典型案例例展卷画案例目标标本案例将将制作展展卷画，主要练练习遮罩罩动画的的创建，完成后后的效果果如下图图所示。7.3.2典型案例例展卷画操作思路路：（1）设置动动画场景景大小为为800300像素，

17、帧帧频为12fps。（2）分别创创建外框框的展卷卷遮罩及及框内画画面的移移动遮罩罩。（3）创建画画轴的展展开与闭闭合动画画。（4）使用元元件实例例【属性】面板的【颜色】下拉列表表框中的的【高级】选项设置置制作画画面出现现与离开开的动画画效果。操作步骤骤请老师师参照软软件讲解解7.3.2典型案例例展卷画案例小结结本案例通通过制作作展卷画画练习了了遮罩动动画的创创建、元元件颜色色的高级级设置、各个面面画的转转换等。读者应应主要掌掌握遮罩罩动画的的创建和和元件颜颜色的高高级设置置方法。在本案案例中，还需注注意如何何从一个个画面转转换到另另一个面面画。7.4上上机机练习7.4.1流水7.4.2秋叶飘飞

18、飞7.4.1流水本练习制制作流水水效果，如下图图所示，主要练练习遮罩罩动画的的创建。7.4.1流水操作思路路：新建大小小为540390像素的场场景，帧帧频为12fps。导入shui.jpg图像，使使图像顶顶部与场场景上方方对齐。7.4.1流流水新建图层层2，复复制shui.jpg图像与与下方的的图像重重合，并并将它们们分别转转换成名名为“svi”和“svi0”的影影片剪辑辑元件。7.4.1流流水进入“svi0”影片片剪辑元元件的编编辑区，用套索索工具将将水选择择出来。进入“svi”影片剪剪辑元件件的编辑辑区，在在新建的的图层2中绘制制水波若若干，并并将其转转换为“ze”影片剪剪辑元件件，再创创建从上上往下移移动的动动画补间间动画，建立上上下两层层的遮罩罩关系。7.4.2秋秋叶飘飘飞本练习制制作秋叶叶飘飞的的动画效效果，如如下图所所示，主主要练习习引导动动画的创创建。7.4.2秋秋叶飘飘飞操作思路路：新建文档档，设置置场景大大小为540340像素，帧帧频为20fps。导入“风风景1.jpg”图片。新新建图层层2，导入“叶.jpg”图片。7.4.2秋秋叶飘飘飞将“叶.jp