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

Dreamweaver8，Flash8，Fireworks8网页制作培训教程第7课制作动画本课要点具体要求本课导读上机练习Dreamweaver8，Flash8，Fireworks8网页制作培训教程本课要点基础动画引导动画遮罩动画Dreamweaver8，Flash8，Fireworks8网页制作培训教程具体要求掌握元件的创建、编辑及调用方法掌握库的使用方法掌握形状补间动画的创建方法及形状提示的使用方法掌握动画补间动画的创建方法及元件实例属性的设置方法掌握引导动画的原理及创建方法掌握遮罩动画的原理及创建方法Dreamweaver8，Flash8，Fireworks8网页制作培训教程本课导读使用Flash就是为了制作出漂亮的动画效果，本课就来讲解Flash的这个核心内容。根据创建方式的不同，Flash动画分为基础动画和特殊动画。其中，基础动画可分为逐帧动画和补间动画，补间动画根据不同对象又可分为形状补间动画和动画补间动画两种；根据不同的辅助对象，特殊动画可分为引导动画和遮罩动画两种。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1制作基础动画基础动画主要包括逐帧动画、形状补间动画和动画补间动画3类。此外，利用时间轴的特效功能还可以将对象制作为有模糊、扩展等效果的动画。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1制作基础动画7.1.1知识讲解7.1.2典型案例——制作banner动画Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1.1知识讲解元件是动画补间动画的基本单位，因此创建元件是学习动画的基础。本节将介绍如何创建、编辑、调用元件以及如何应用元件创建补间动画和时间轴动画。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1.1知识讲解1.创建与编辑元件2.调用元件3.逐帧动画4.形状补间动画5.为形状补间动画添加形状提示6.动画补间动画7.时间轴特效动画Dreamweaver8，Flash8，Fireworks8网页制作培训教程1.创建与编辑元件元件有影片剪辑、图形和按钮3种，各类元件的区别与作用如下。影片剪辑：该类元件可以包含Flash动画的一个片段，也可以是静止的对象。作为动画片段时，它能独立于场景动画进行播放。此外，在影片剪辑元件实例上还可以添加交互动作。Dreamweaver8，Flash8，Fireworks8网页制作培训教程1.创建与编辑元件图形：该类元件中也可以包含动画片段，但不能独立于场景播放；在调用该类元件时，时间轴的帧数必须与图形元件中的帧数相同，否则不能播放。一般将它作为静止的对象处理。注意，图形元件上不能添加交互行为。Dreamweaver8，Flash8，Fireworks8网页制作培训教程1.创建与编辑元件按钮：用于创建动画的交互控制按钮，以响应鼠标事件（如单击、释放和滑过等），实现按钮的功能。按钮有“弹起”、“指针经过”、“按下”和“点击”4个不同状态的帧，“点击”帧中创建鼠标对按钮起作用的范围；其他帧中可以是静止图形，也可是影片剪辑。Dreamweaver8，Flash8，Fireworks8网页制作培训教程2.调用元件元件从库中被拖到场景或编辑区的过程称为调用元件。元件是可以反复调用的对象，当元件作为一个对象从库中调用到场景或其他元件编辑区时，它变为该元件的一个具体的实例。因此，当修改元件后，其对应的元件实例也会相应地改变，这就使编辑动画变得十分方便，不需逐一地修改每个元件实例。当然，元件实例也有独立的属性，这部分内容将在创建动画补间动画时介绍。Dreamweaver8，Flash8，Fireworks8网页制作培训教程2.调用元件调用元件的方法为：在库中选取要调用的元件，将其拖入场景或编辑区后释放鼠标。Dreamweaver8，Flash8，Fireworks8网页制作培训教程3.逐帧动画逐帧动画已经在第6课的典型案例中应用过了，它是以单帧中内容的变化来实现动画效果的。这种动画文件占用的存储空间较大，因此，变化过程太长的动画不宜采用该类型；但变化比较复杂、不易体现出变化过程的动画，如表现举手、抬足或面部表情等，应采用该类型。Dreamweaver8，Flash8，Fireworks8网页制作培训教程4.形状补间动画形状补间动画指外观形状变化的动画；在实际的动画创建过程中，除了外观形状的变化外，也可以是位置、颜色的变化。在Flash中，要创建形状补间动画，需首先确定首末两个关键帧的内容，中间的变化过程由计算机自动完成。关键帧中的内容可以是一个或多个不同的对象，但对象必须是可分离的图形。Dreamweaver8，Flash8，Fireworks8网页制作培训教程5.为形状补间动画添加形状提示形状补间动画的中间过程由计算机自动完成，这说明中间过程的变化是不可控制的。如果要使某点在动画变形过程中固定不变，那么可以添加形状提示。Dreamweaver8，Flash8，Fireworks8网页制作培训教程6.动画补间动画在动画补间动画中，首末关键帧中的对象必须是同一个元件的实例，并且一个关键帧中只能有一个元件实例。动画补间动画有位置、大小、旋转、倾斜和颜色几方面的变化，这些变化可以单独存在，也可以加多个变化于一个元件上。例如，对象在舞台中一边移动，一边旋转，并且呈淡入效果。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.时间轴特效动画时间轴特效动画是Flash8的新增功能。使用它，可以用最少的步骤创建复杂动画。时间轴特效的对象包括文本、影片剪辑和按钮。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1.2典型案例——制作banner动画案例目标本案例将为第6课中制作的banner.fla添加形状补间动画、动画补间动画和时间轴特效动画，添加后的效果如下图所示。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1.2典型案例——制作banner动画操作思路：（1）确定画面中需要创建为动画的元素：“welcome”、“幻铃”文字及环状对象将创建为影片剪辑元件，而“一号通”文字将创建为按钮。（2）给“welcome”文字添加时间轴特效，将“幻铃”文字创建为透明度渐变动画，将环状对象创建为图形变为3个圆环的形状补间动画，将“一号通”文字创建为指针经过时状态显示“#FF6600”颜色的按钮。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1.2典型案例——制作banner动画（3）在制作过程中，可以随时按【Ctrl+Enter】组合键查看动画效果。操作步骤请老师参照软件讲解Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.1.2典型案例——制作banner动画案例小结本案例中练习了形状补间动画、动画补间动画的创建和时间轴特效的添加，以及元件的转换、元件实例属性的更改等。本案例中采用的元件转换方式比通过创建元件再调用元件来创建动画更方便快捷，因为转换为元件前对象已在需要的位置上了，转换为元件后再进入元件编辑区进行编辑便可以看到场景中对象的相对位置，因此采用这种方法创建动画的直观性更强。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2制作引导动画引导动画是使对象沿某条路径运动而产生的动画，例如，雪花飘落、树叶落下、汽车或人沿某路线行走等都可使用引导动画来制作。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2制作引导动画7.2.1知识讲解7.2.2典型案例——变幻光环Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2.1知识讲解本节将介绍引导动画的构成原理及其创建方法。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2.1知识讲解1.引导动画的构成原理2.创建引导动画Dreamweaver8，Flash8，Fireworks8网页制作培训教程1.引导动画的构成原理引导动画是由引导层和被引导层构成的，引导层位于被引导层的上方。被引导层的对象沿着引导层的对象运动，引导层的对象必须是不封闭的路径，并且以普通帧（而不是关键帧）结束。被引导层的对象必须是元件实例，通过动画补间动画来完成对象的运动。一条引导路径可以被多个被引导层对象共用，即多个对象沿同一条路径运动。Dreamweaver8，Flash8，Fireworks8网页制作培训教程2.创建引导动画创建引导动画的具体操作如下：（1）创建引导层。单击图层区中的按钮新建引导层，此时建立的引导层与下方的图层已建立了链接关系。（2）在引导层中绘制路径。选中引导层，选择工具箱中的铅笔、钢笔、多边形、矩形或椭圆工具进行绘制。绘制完成的路径只能为笔触线，而不能有填充色。Dreamweaver8，Flash8，Fireworks8网页制作培训教程2.创建引导动画（3）在被引导层中创建动画补间动画，并且首末关键帧中的元件实例必须位于路径中的不同位置。（4）设置动画。在被引导层的时间轴上单击鼠标，选中【属性】面板中的复选框，使动画补间动画中的元件实例在播放过程中为了适合路径的变化方向做一定角度的旋转。如果不选中该复选框，则元件实例保持初始状态进行运动。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2.2典型案例——变幻光环案例目标本案例将制作变幻光环，主要练习引导动画的创建，完成后的效果如下图所示。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2.2典型案例——变幻光环操作思路：（1）设置动画场景大小为550×400像素，背景色为“#000000”，帧频为20fps。（2）在场景中创建圆，并逐层创建“yj”元件、“引导动画”元件和“环图”元件。（3）在“引导动画”元件中创建以圆为路径的引导动画。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2.2典型案例——变幻光环（4）在“环图”元件中编辑圆，使其为圆的一小部分，并进行渐变和柔化填充。（5）在“yj”元件中复制多个“引导动画”元件实例，并调整出造型。操作步骤请老师参照软件讲解Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.2.2典型案例——变幻光环案例小结本案例通过制作变幻光环练习了引导层和引层动画的创建、元件的转换、柔化填充、【混色器】面板的使用等。读者应主要掌握引导动画的创建及设置方法，当然，其他辅助知识点也是创建动画效果时随时要用到的，也应该逐步掌握。另外，在“引导动画”元件的编辑区中，如果在【属性】面板中将旋转方式设置为“顺时针”或“逆时针”，则会产生另一种动画效果。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.3制作遮罩动画遮罩动画在Flash动画制作中使用得十分广泛，因为它实现的许多效果是普通动画无法实现的，如在一个圆形内看其他对象的变化状态、神奇的万花筒效果等。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.3制作遮罩动画7.3.1知识讲解7.3.2典型案例——展卷画Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.3.1知识讲解本节将介绍遮罩动画的构成原理和创建方法。Dreamweaver8，Flash8，Fireworks8网页制作培训教程7.3.1知识讲解1.遮罩动画的构成原理2.创建遮罩动画Dreamweaver8，Flash8，Fireworks8网页制作培训教程1.遮罩动画的构成原理遮罩动画是由遮罩层和被遮罩层构成的，遮罩层位于被遮罩层的上方。遮罩动画就是从遮罩层的图形区域观看被遮罩层中的对象，遮