《网页制作与设计》立体化电子课件 第6章-Flash动画制作

Flash动画制作

Flash概述发布与导出动画元件和实例动画制作总结与习题第6章Flash是Macromedia公司开发的面向Web的矢量图形和动画制作软件，它可以创建具有动感、交互、声音等特点的动画Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内容Flash概述6.1Flash能够创建广告条、动画菜单、网站标志等动画，甚至整个网站Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容Flash文件体积非常小，可同步下载和播放，特别适用于创建网页上的动画和网上游戏Flash概述6.1运行Flash8，启动操作的开始页面，开始页面左边是打开最近用过的项目，中间是创作各种类型的新项目，右边是从模板创建各种动画文件在“开始”页中选择一项进行，就可进入Flash的工作界面Flash概述6.1工作界面启动中文版Flash后，可以看出，Flash的工作界面主要包含标题栏、菜单栏、常用工具栏、时间轴、工具箱、舞台、属性面板和其它控制面板等部分Flash概述6.1Flash的工作界面

Flash概述6.1主工具栏

Flash概述6.1标题栏标题栏注明了程序的名称以及当前所编辑的文档名称Flash概述6.1菜单栏菜单栏中包含了Flash中的所有命令通过在菜单栏中选择相应的菜单项，用户可以制作出精彩的动画Flash概述6.1工具箱工具箱中包含了编辑矢量图形的工具使用这些工具，可以编辑动画元素而不需要调用其他外部程序Flash概述6.1部分工具箱Flash概述6.1舞台舞台即文件窗口，可以在里面绘制图形或编辑图像，也可以测试播放电影，是创作对象的区域，编辑、制作动画的主要区域舞台用于显示动画当前帧的状态动画最终只显示场景中舞台区域的内容Flash概述6.1面板Flash中有很多浮动面板比较常用面板包括动作面板，属性面板，滤镜面板，控制面板等Flash概述6.1动作面板动作面板是是动作脚本的编辑器Flash概述6.1属性面板属性面板可以访问舞台或时间轴上当前选定对象的常用的属性，也可以在面板中更改对象或文档的属性当没有选中对象时，属性面板会显示当前动画文件的属性当选中工作区中的对象后，属性面板中就会显示该对象的属性Flash概述6.1滤镜面板滤镜面板提供了七种滤镜效果，可以对文字、影片剪辑和按钮进行美化和修饰，使其更有趣味如果与补间动画结合起来，还可以制作出各种丰富的动画效果Flash概述6.1控制面板控制面板默认在界面的右边控制面板包含了常用的动画编辑命令，可以根据需要设置面板的数量和类型，以方便动画的编辑Flash概述6.1执行菜单【窗口】|【工具】命令，可打开或关闭工具箱单击菜单【窗口】下其他命令可打开或关闭相应的其他面板执行菜单【窗口】|【时间轴】命令，可打开或关闭时间轴面板Flash概述6.1Flash动画也称为影片或电影Flash动画的制作是以时间轴为主线，利用图层来组织和安排影片中的文字、图像等对象，在舞台区域编辑帧来完成的Flash概述6.1时间轴时间轴是影片编排的主要场所，可以分层摆放各元素并规划它们的出场顺序，显示动画的运行效果，以及不同图层之间的关系Flash概述6.1Flash的时间轴面板

Flash概述6.1时间轴用于组织和控制文档内容在一定时间内播放的图层数和帧数与胶片一样，Flash文档也将时长分为帧图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像时间轴的主要组件是图层、帧和播放头Flash概述6.1图层图层可以理解为一摞透明的纸，每一张都保持独立，对当前图层进行编辑不会影响其他图层，同时又可以层层叠加合成一个完整的电影每个层本身都是透明的，所以图像叠加到一起时仍感觉像在同一个层上Flash概述6.1图层就相当于舞台中演员所处的前后位置；图层靠上，相当于该图层的对象在舞台的前面在同一个纵深位置处，前面的对象会挡住后面的对象；不同纵深位置处，可以透过前层看到后层的对象新创影片只有一个图层；可以增加多个图层，利用图层来组织和安排影片中的对象Flash概述6.1场景场景就好比是舞台剧中的一幕，一幕完成后，再进行下一幕的表演由于各个场景有先后顺序，因此各个场景彼此独立，互不干扰场景的数量没有限制Flash概述6.1帧帧是动画的最小单位Flash动画中，帧就是某个时间点上的图形，不同帧中对象的变化就产生了动画效果，任何动画都是由一个个帧连接而成的在时间轴上，每一个小方格就是一个帧，动画播放的内容即帧的内容动画中帧的数量及其放映速度决定了动画的整个长度动画制作6.2空帧时间轴上的栅格表示空帧空帧不是真正的帧，只是矩形框，框中可以放帧Flash动画中，没有内容的帧占了时间轴的大部分；只有有了帧后动画才能播放，如果在播放时遇到所有图层均为空帧时，就会停止播放动画制作6.2关键帧关键帧是动画中定义的可以更改的帧，通常显示动画的开始与结束的决定画面当希望动画发生改变，或者希望发生某种动作时，必须使用关键帧动画制作6.2关键帧可以为空常规的关键帧以实心的圆点为标志空关键帧以空心的圆点为标志带有附加动作的关键帧以字母阿尔法表示动画制作6.2普通帧静态帧也称普通帧，显示同一层上最后一个关键帧的内容在时间轴上，关键帧总是在普通帧的前面前置关键帧的内容显示在随后的每个普通帧中，直至另一个关键帧为止在已有内容关键帧后面的普通帧为银灰色，在空关键帧后的普通帧为白色动画制作6.2过渡帧过渡帧是起始关键帧动作向结束关键帧动作变化的过渡部分，表示对象在过渡点的外观这部分的延续时间越长，整个动作变化越流畅，动作前后的联系越自然动画制作6.2帧速率帧速率是指动画播放的速度，表现为时间轴上播放指针移动的快慢帧速率的单位是fps，即每秒钟播放的帧数对整个动画只能设置一个帧速率标准动画片的帧速率为24fps，因特网上的动画最合适的帧速率为12fps动画制作6.2Flash的图层是用以组织文档插图、动画和其它元素的工具新建的Flash文档自动包含一个图层，在以后的动画设计中，可以不断添加更多的图层图层提供了普通模式、隐藏模式、锁定模式与轮廓模式等不同的编辑模式各模式的功能如下图所示动画制作6.2图层编辑模式

动画制作6.2普通模式Flash的默认模式，该模式下的图层可编辑。处于普通模式下的图层具有铅笔图标将一个或多个图层设置为隐藏状态。处于该模式下的图层具有红叉图标将图层内的对象设置为锁定或解锁状态。该模式下的图层具有锁状图标，不能进行编辑操作将图层中的所有对象以轮廓的方式显示。处于轮廓模式下的图层具有矩形框图标

轮廓模式隐藏模式锁定模式动画制作6.2Flash能够制作的动画类型很多，根据生成原理和制作方法的不同，Flash动画可分为三种基本类型：逐帧动画、形状渐变动画和运动渐变动画为使Flash作品更加丰富，往往需要在一个Flash作品中综合应用不同的基本类型动画动画制作-基本动画6.2基本动画类型逐帧动画是一种常见的动画形式，原理是在连续的关键帧中分解动画动作，即在每一帧中设置不同的画面，连续播放而形成动画运动渐变动画又称为运动补间动画，简称移动动画，是最常用的动画形式，是创建物体随时间移动、缩放或旋转等动画的一种有效方法形状渐变动画又称为形状补间动画，简称形变动画，是指只定义动画某一部分的起点和终点的内容，两端间各帧的内容由Flash自动生成动画制作6.2逐帧动画在制作逐帧动画时，需要对每一帧的内容进行逐个绘制，在不同帧上设置不同内容，使其连续播放而生成动画，这不但给制作增加了负担，而且造成输出的文件容量很大逐帧动画适合于每一帧的图像都有复杂变化，不能用补间动画完成的动画动画制作-基本动画6.2由于是一帧一帧地画，所以逐帧动画具有很大的灵活性，可以表现几乎任何想表现的内容逐帧动画在时间轴上表现为连续出现的关键帧，如下图所示动画制作-基本动画6.2逐帧动画在时间轴上的表现动画制作-基本动画6.2创建逐帧动画的常见方法有如下几种动画制作-基本动画6.2导入静态图片用jpg、png等各式的静态图片连续导入到Flash中，自动建立一段逐帧动画用文字作为帧中的内容，实现文字跳跃、旋转等文字逐帧动画效果用鼠标或压感笔在场景中一帧一帧地画出每帧的内容，从而绘制矢量逐帧动画可以导入gif序列图像、swf动画文件或者利用3D等第三方软件产生动画系列导入序列图像文字逐帧动画矢量逐帧动画动画制作-基本动画6.2逐帧动画的制作步骤如下动画制作-基本动画6.2Step1Step2单击某个图层使其成为当前层；必要时设置背景图在该层上选择起始帧；把起始帧设置为关键帧在起始帧建立动画内容Step3动画制作-基本动画6.2Step4Step5设置起始帧后的第2帧，将该帧设置为关键帧，然后编辑内容重复第4步，设计其他的每一帧内容执行【控制/测试影片】菜单命令，观看动画效果；如不满意，回到舞台重新编辑，直到满意为止Step6动画制作-基本动画6.2形变动画形变动画描述了在一段时间内将一个形状变形为另一个形状的过程。在Flash中，可以补间或过渡图形对象的形状、颜色、透明度、大小及位置等属性形变动画的对象只能是矢量图形。如果要对实例、组、文字或者位图图像进行形状过渡，需要先将它们打散并转变为矢量图后，再设置形变过渡动画制作-基本动画6.2形变动画建好后，时间帧面板上的背景色变为淡绿色，起始帧和结束帧间有一条箭头形变动画的时间帧如下图所示动画制作-基本动画6.2形变动画在时间轴上的表现动画制作-基本动画6.2形变动画的制作方法如下动画制作-基本动画6.2Step1Step2在动画开始播放的地方创建或选择一个关键帧，并设置要开始变化的形状在动画结束处创建或选择一个关键帧并设置要变成的形状单击开始帧，在【属性】面板上单击【补间】旁边的下拉按钮，在弹出的菜单中选择【形状】选项，即可创建形变动画Step3动画制作-基本动画6.2移动动画移动动画就是改变两帧之间物体的位置，令物体从一个位置移动到另一个位置的动画移动动画的对象是组、元件、文本和位图图像等。除了实现对象位置的移动外，还可以使对象产生大小、旋转和颜色的渐变效果等动画制作-基本动画6.2移动动画建好后，时间帧面板上的背景色变为淡紫色，在起始帧和结束帧之间有一个箭头移动动画的时间帧如下图所示动画制作-基本动画6.2移动动画在时间轴上的表现动画制作-基本动画6.2移动动画的制作只需在一个时间点的关键帧上放置一个对象，然后在另一个时间点的关键帧上改变这个对象的大小、位置、透明度等属性Flash根据二者的设置，自动完成移动动画的创建过程Flash创建移动动画时，各种属性的变化可独立进行，也可合成复杂的动画动画制作-基本动画6.2移动动画的制作方法如下动画制作-基本动画6.2Step1Step2在动画开始播放的地方创建或选择一个关键帧并设置一个元件在动画结束处创建或选择一个关键帧并并设置该元件的属性单击开始帧，在【属性】面板上单击【补间】旁边的下拉按钮，在弹出的菜单中选择【动画】选项，即可创建移动动画Step3动画制作-基本动画6.2运动引导层和遮罩层是两种特殊的图层，Flash借助于它们能制作出非常神奇的动画效果运动引导层能制作运动引导层动画遮罩层能制作遮罩动画动画制作-特殊图层

6.2特殊图层运动引导层利用运动引导层可以创建运动引导层动画，制作出对象沿任意路径运动的动画遮罩层利用遮罩层可以创建遮罩动画，制作出“探照灯、百叶窗、放大镜等动画效果动画制作-特殊图层

6.2运动引导层动画如果想让物体沿着自定义的路径运动，就需要添加一个运动引导层，在引导层里画出运动路径，做一定的设置，对象就能沿着自定义的路径运动将一个或多个层链接到一个引导层，使一个或多个对象沿引导层路径运动的动画形式被称为运动引导层动画动画制作-特殊图层

6.2移动动画只能实现对象从一点直接到另一点的运动，无法实现一些复杂轨迹的运动使用运动引导层可以控制对象沿任意自定义的路径运动，制作出类似于国国冉冉上升或月亮围绕地球旋转等的动画效果动画制作-特殊图层

6.2在引导层内可以用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出曲线、图形等，起到对象运动时的导向作用引导层的内容只能在舞台工作区内看到，不会输出到动画，在发布的影片中也不会出现动画制作-特殊图层

6.2运动引导层动画至少需要两个图层：引导层和被引导层选中一个图层，单击时间轴面板的【添加引导层】按钮，即可为该图层创建引导层动画制作-特殊图层

6.2遮罩遮罩就是遮挡住下面的对象。当遮罩层作用于某个被遮罩层时，被遮罩层的内容会透过遮罩层上有内容的部分(即不是空白的部分)而显示出来Flash作品中许多眩目神奇的效果不少是用遮罩完成的动画制作-特殊图层

6.2遮罩层遮罩层是层的一种特殊用法，用来控制图形的某一部分显示或不显示动画制作-特殊图层

6.2遮罩层的用途在整个场景或一个特定的区域，使场景外的对象或特定区域外的对象不可见用来遮罩某一元件的一部分，从而实现一些特殊的效果动画制作-特殊图层

6.2Flash中不能直接创建遮罩层，遮罩层可由普通图层转化而来，转化方法为：在某个图层上右击鼠标，在弹出的快捷菜单中单击【遮罩层】选项，使选项左边出现勾选符号，则该图层就自动成为遮罩层，层图标就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为被遮罩层动画制作-特殊图层

6.2遮罩动画，通常是先创建了被遮罩的图层后，再创建遮罩层中的具体项目及其动态效果，最后右击遮罩层执行【遮罩层】命令，完成遮罩操作。通常应用遮罩层时，都将遮罩项目运动起来，使其遮罩效果更加逼真。对于用作遮罩的填充形状，可以使用形状动画；对于文字对象、图形实例或影片剪辑，可以使用移动动画动画制作-特殊图层

6.2遮罩层动画遮罩层动画是Flash的重要动画类型，很多效果丰富的动画都是通过遮罩动画来完成的在遮罩图层上创建某类形状的视窗，遮罩层下方的对象就可以通过该视窗显示出来，而视窗之外的对象不会显示动画制作-特殊图层

6.2遮罩动画是通过遮罩层有选择地显示被遮罩层中的内容，从而实现一些特殊的效果在一个遮罩动画中，遮罩层只有一个，被遮罩层可以有任意多个被遮罩层中的内容可以是任意Flash允许的动画元素而遮罩层中的对象只有形状如果想关联更多层被遮罩，只要把这些层拖到遮罩层下面即可动画制作-特殊图层

6.2制作动画时，会遇到某个对象在舞台中多处出现的情况；此时如果把每个对象都分别制作，这样既费事又会增加动画文件的大小解决办法是：将重复使用的对象建立成元件，一个元件的多个实例只占一个元件的空间。这样不仅能方便地重复调用同一个元件，还有利于减少文件的大小、缩短文件下载的时间，加快动画播放的速度元件和实例是制作动画的基础，也是创建Flash动画的重要元素元件和实例6.3元件元件是指存放在元件库中的可被重复利用的图形、动画、按钮、音频、字体等素材元件可由用户创建，也可从其他应用程序中导入元件一旦创建，便成为当前电影库的一部分，可供所有的设计者共享，并可被重复使用元件和实例6.3Flash中，无论是简单的渐变动画，还是复杂的动作脚本，都是基于元件的常用的元件有图形、按钮和影片剪辑三种基本类型元件和实例6.3元件基本类型按钮图形影片剪辑元件和实例6.3实例实例是位于舞台上或嵌套在另一个元件中的元件拷贝，是元件在舞台上的具体应用在需要元件对象上场时，只需用鼠标将元件从元件库面板拖曳到舞台中即可。此时舞台中该元件的复制品称为实例元件和实例6.3元件一旦从库中取出，并拖放到舞台上，便成为一个实例，实例也可以嵌入到其他元件中舞台中可以放置多个相同元件复制的实例，但库面板中与之对应的元件只有一个元件和实例6.3当元件的属性(如大小、颜色等)改变时，由它生成的实例也会随之改变当实例的属性改变时，与它相应的元件和由该元件复制的其他实例不会随之改变元件和实例6.3图形元件图形元件主要用来制作动画中的静态图形，也可以是动画，但不能产生交互效果图形元件具有相对独立的编辑区域和播放时间，当应用到场景中时，会受到当前场景中帧序列和其他交互式设置的影响图形元件所制作的动画依赖于主影片时间轴，会随主影片运转而运转；如果主影片停止，图形元件的动作也会停止元件和实例6.3建立元件的方式使用工作区上的对象将其转换为元件使用元件编辑模式在元件编辑窗口编辑元件和实例6.3按钮元件按钮元件是一个只含有4帧的特殊影片剪辑对象，主要用于创建在影片中对标准的鼠标或键盘事件(如点击、滑过或按键等)做出响应的交互性按钮元件和实例6.3Flash中，首先要为按钮设计不同形状的外观然后为按钮的实例分配对事件产生的动作在编辑按钮元件时，时间轴上显示出四个帧，即按钮的4个状态，如下图所示元件和实例6.3弹起状态默认关键帧，用来表示按钮的一般状态，即鼠标指针没有移到按钮上时的状态用来表示鼠标移动到按钮上时，按钮所呈现的状态用来表示用鼠标单击按钮时，按钮所呈现的状态用来设置鼠标敏感区域；若不设置该状态的区域，则响应范围为按钮图形大小点击状态指针经过状态按下状态元件和实例6.3按钮的创建方法包含6步，如下图所示元件和实例6.3Step1Step2执行【插入/新建元件】菜单命令打开【创建新元件】对话框；输入元件名称，选择【按钮】类型；单击【确定】按钮，切换到按钮元件编辑模式用鼠标选中第l帧(弹起帧)，编辑图形或导入影片剪辑或图形元件实例等，作为按钮弹起状态的外观右击指针经过帧，选择【插入关键帧】；改变图形，设置鼠标经过时的按钮外观；或者按F7键，使该帧成为空白关键帧，重建对象Step3元件和实例6.3Step4Step5按照上述方法，制作鼠标按下、点击时的按钮外观单击元件编辑窗口中的场景名称图标，回到主场景；刚制作的按钮元件出现于【库】面板中；从库面板中将它拖曳到工作区，创建按钮实例执行【控制/测试影片】菜单命令，观看按钮的动画效果；如不满意，重新编辑，直到满意为止Step6元件和实例6.3影片剪辑元件影片剪辑元件又称为影片片段，是可单独重复使用的动画片段影片剪辑元件是Flash中最具有交互性、功能最强的一类元件，这类元件具有独立于影片时间轴的自己的时间轴，可以包含动作、声音及其他的元件元件和实例6.3影片剪辑元件是组成动画的基础，为了避免反复创建相同的动画片段，可以将很多小动画创建为影片剪辑元件影片剪辑元件有自己的时间轴，用来制作独立于主影片时间轴的动画，可以包括交互性控制、声音甚至其他影片的部分剪辑，也可以把影片剪辑实例加载到按钮的时间轴中，从而实现动画按钮元件和实例6.3影片剪辑实例只需要一个关键帧就可以播放，它是完全独立于主场景的如果主场景播放已经结束，但它的时间轴还是继续向前播放，直到影片剪辑播放完，然后它将返回到影片剪辑的第1帧有时候为了实现动画的交互性，可以将单独的图象制作成影片剪辑元件元件和实例6.3对影片剪辑元件执行【控制/播放】菜单命令后，并不能看到由影片剪辑元件和按钮元件产生的实例组成的动画和交互性效果，必须执行【控制/测试影片】或执行【控制/测试场景】命令，才能在播放器窗口内演示它的动画和交互效果元件和实例6.3Flash动画制作完成后，如果要将其发布出去，在发布前首先要对Flash文档进行测试只有经过完整测试并无错误的Flash文档，才能进行发布测试Flash动画的方法有以下几种发布与导出动画6.4测试动画的方法选择【控制/测试影片