第12章 网页动画制作工具Flash CS3.ppt

网站规划与网页设计,理工部,12.1FlashCS3简介12.2FlashCS3的基本概念与操作12.3动画制作12.4动画的测试、优化与发布,第12章网页动画制作工具FlashCS3,11.1.1Flash的特点1友好的操作界面Flash的操作界面经过重新设计，使界面更加美观，层次更清晰，各面板布局更合理。相对于其他制作动画的程序，Flash更加容易操作，无须任何编程基础就可以轻松制作出动画效果。2生成的动画文件可以独立播放用Flash制作的动画作品不仅可以在线观看，也可以离线观看，并保留其原来动画中的各种交互式操作功能。3流媒体动画Flash播放器在下载Flash影片时采用流媒体方式，也就是说，在Flash文件还没有完全下载完毕时就播放动画，即下载的同时进行播放。,12.1FlashCS3简介,11.1.1Flash的特点4文件体积较小由于Flash采用的图像方式是矢量图，生成的文件相对于传统网页动画中同等面积的像素图来说要小很多。5具有交互式作用的多媒体影片Flash影片可以通过ActionScript脚本语言与使用者建立交互式关系，使用者可以通过键盘操作或鼠标操作与影片实现互动。6易用性由于其操作界面与其他程序（如Office、Photoshop等）相似，因此用户很容易上手。,12.1FlashCS3简介,12.1.2Flash的用户界面Flash的用户界面由几个主要部分组成，最上方的是主菜单栏。执行“窗口”“工具栏”“主工具栏”命令，可在主菜单栏下方打开主工具栏。主工具栏下方是文档选项卡，用于切换打开的当前文档。时间轴和舞台位于工作界面的中心位置。左边是功能强大的工具箱，用于创建和修改矢量图形内容。多个面板围绕在舞台的下面和右面，包括常用的属性面板和动作面板，还有其他浮动面板，如图所示。,12.1FlashCS3简介,图Flash的用户界面,12.2.1Flash的基本概念1帧在Flash中，帧是构成动画作品的基本单位，它装载了Flash播放的内容。在Flash中包含几种类型的帧：关键帧、空白关键帧和过渡帧。关键帧是决定一段动画的必要帧。在其中可以放置图形，播放对象，并可以对所包含的内容进行编辑。关键帧一般放在动画开始点、控制转折点或结束点。空白关键帧就是什么内容都没有的关键帧。启动Flash后，在默认状态下，每个层的第一帧，都是空白关键帧。在动画制作工作区中添加了内容后，它自动变成关键帧。在两个关键帧中间的普通帧称为过渡帧。在Flash中，确定了两端的关键帧后，利用命令可以自动计算添加过渡帧，无须人工添加。,12.2FlashCS3的基本概念与操作,12.2.1Flash的基本概念2层在Flash中，层就像一张“透明纸”，在上面可以画一些图形，分为普通层、运动引导层、遮罩层和注释说明层4种层。通常建立的层都是普通层；通过运动引导建立的层是引导层，它的作用是提供引导线作为被引导层中对象的运动轨迹；遮罩层是通过设定遮罩关系建立的层，它的作用是为了实现遮罩关系下的特别效果；在注释说明层中可以添加一些说明性文字，而输出时不输出该层内容。3对象在Flash中任何被选中的东西，都可以叫做对象。对象被选中后，可以通过设置实现用户要求的变形或运动。如果绘制了一个圆，并选中这个圆的话，它就是一个对象，可以通过工具对它进行填充、修改、移动、变形等编辑。,12.2FlashCS3的基本概念与操作,12.2.1Flash的基本概念4元件、实例和库元件也称做符号或图符，是Flash动画的重要组成部分。元件的主要特性是可以被重复利用，且不会影响影片的大小。Flash中的所有元件都被归纳在库面板中，可以被随时调用，十分方便。即使在场景中将所有元件全部删除掉，也不会影响库面板中的元件。元件的建立是以重复使用为目的的，不但可以将其应用于当前影片，还可以将其应用于其他影片。元件中可以包含位图、图形、组合、声音甚至是其他元件，但不可以将元件置于其自身内部。Flash中包括3种元件类型，分别为图形元件、影片剪辑元件和按钮元件。,12.2FlashCS3的基本概念与操作,12.2.1Flash的基本概念每个元件都具有独立的时间轴、工作区和图层，除此外，每种元件类型都具有独特的属性，只有了解三种元件类型的特性，才能使元件的作用得到充分的发挥。在Flash中创建的所有元件都会出现在库面板中，拖曳库面板中的元件到场景中，就可以反复利用元件。应用于影片的元件被称做“实例”。在工作区中选中实例，通过元件属性面板中的设置，可以改变实例的尺寸、颜色与元件类型，但这些改动只针对实例本身，不会影响到库面板中的元件。Flash文档的库中存储了用户创建或导入的媒体资源。库是Flash组织、编辑和管理动画中创建的和使用的各种元件的仓库。所有元件都会被自动载入到当前影片的库面板中，以便以后灵活调用。另外，还可以从其他影片的库面板中调用元件，或者根据需要建立自己的库。,12.2FlashCS3的基本概念与操作,5场景和舞台场景是指在当前动画编辑窗口中，编辑动画内容的整个区域。动画是在场景中被制作完成的，而场景中又包括舞台与工作区，就像拍电影一样，是在一个大的摄影棚中拍摄的，这个摄影棚可以被理解为场景，而镜头对准的地方就是舞台。也就是说，舞台中显示的动画效果才是影片的实际效果，舞台以外的区域是工作区，最终的影片中不会显示工作区中的对象。工作区也是不可或缺的，它可以使画面运动更加流畅自然，画面的边缘不会消失得那么唐突。在场景编辑窗口中，除了舞台和工作区外，还有以下几项内容：场景名、“编辑场景”按钮、“编辑元件”按钮和显示比例。,12.2FlashCS3的基本概念与操作,12.2.2动画的基本概念1计算机动画的概念与原理所谓动画，简单地说，就是将静止状态下的一幅幅图画或照片连续地演播出来的技术，具体来说又有以下两种说法：动画是一种通过一系列连续的画面来显示运动的技术，是以一定的播放速度来达到连续运动的效果的；动画是一系列具有各种物体的动态画面的处理过程，每一个画面都可以与前一个画面有着微小的变化。动画的概念已经明确，原理就自然清楚了人的“视觉原理”。医学证明，人类的视觉系统有视觉暂留的特性，也就是说，人的眼睛看到图像后的1/24s内，图像不会从大脑中消失。利用这一原理，如果在前一图像没有消失之前，播放下一图像，就会给人造成一种连续变化的视觉效果。电影、电视都是利用了这一原理。,12.2FlashCS3的基本概念与操作,2计算机动画的分类近年来，涌现出许多计算机动画系统，它们的方式、目的、特点各不相同。在此，对这些系统进行大致的分类。（1）按计算机在动画制作中的作用分类按计算机在动画制作中的作用分类，可将计算机动画系统分为两类：计算机辅助动画和造型动画。前者属于二维动画，其主要用途是辅助动画师们制作类似于传统动画的动画，以及对各类动画片段的编辑（合成、连接）等后期制作。（2）按运动的控制方式分类根据运动的控制方式不同，可将计算机动画分为关键帧动画和算法动画。关键帧动画通过对关键画面的控制来获得中间画面的动画序列，算法动画则采用算法实现对物体的运动控制或模拟摄像机的运动控制。,12.2FlashCS3的基本概念与操作,2计算机动画的分类（3）从制作原理上分类从制作原理上分类，动画可简单划分为两大类：逐帧动画和补间动画。逐帧动画就是通过更改每一帧中的舞台内容而获得动画效果，它最适合于每一帧中的图像都在改变，而不是仅仅简单地在舞台中移动的复杂动画。逐帧动画的缺点是太耗费时间和精力，而且最终生成的动画文件偏大。但是，它也有自己的优点，即能最大限度地控制动画的变化细节。补间动画是在两个关键帧之间建立渐变的一种动画。补间动画关键帧的对象是元件的实例、群组体或文字。补间动画的原理是：在第一个关键帧中设置元件实例、群组体或文字的属性，然后在第二个关键帧中修改对象的属性，从而在两帧之间产生动画效果，可以修改的属性包括大小、颜色、旋转和倾斜、位置、透明度及各种属性的组合。,12.2FlashCS3的基本概念与操作,3Flash动画的格式（1）Flash源文件格式Flash源文件格式的扩展名为fla，该类型文件只能在Flash应用程序中被打开和编辑，在其他软件中是无法打开的。用户可以在Flash应用程序中打开该文件，然后导出扩展名为swf或swt的文件，以便在浏览器中使用。（2）Flash电影文件格式Flash电影文件格式的扩展名为swf。该类型文件是由电影文件格式源文件压缩生成的文件，为方便在网络中查看，已对其进行了优化处理。因此，这种类型的文件可以在浏览器中播放，但是要求浏览器安装FlashPlayer播放器插件后才能播放，也可以在Dreamweaver中预览，但是不能在Flash应用程序中编辑。另外，在Dreamweaver中允许用户直接插入Flash动画对象，该对象的扩展名为swf。,12.2FlashCS3的基本概念与操作,12.3.2运动渐变动画的制作运动渐变动画是补间动画的一种。通过为对象创建运动渐变，可以改变对象的位置、大小、旋转或倾斜，做出物体运动的各种效果。通过设置实例的颜色属性，还可以制作出丰富的渐变效果，例如，实例的淡入淡出效果。导致运动渐变动画失败的原因有很多，主要是以下3种原因缺少起始帧或终止帧；起始帧或终止帧包含多个对象；起始帧或终止帧中包含的对象不是元件实例。关于帧的使用方法，用户需要注意以下几个方面。时间轴中有很多单元格，每一个横行代表一个层，层内的每一个小单元格表示一帧。帧是创建动画的基本单位。过渡帧的显示状态与过渡方式有关，如果是运动渐变过渡，过渡帧就显示为带有箭头直线段的浅蓝色单元格；如果是形状渐变过渡，过渡帧就显示为带有箭头直线段的浅绿色单元格。,12.3动画制作,12.3.3形状渐变动画的制作与运动渐变动画相对应，形状渐变动画是Flash中另一大类基本动画。运动渐变动画要求运动对象作为一个整体，通过位置、大小、色彩等属性发生变化来实现效果；而形状渐变动画的对象是打散的对象，也就是说，对于入库的元件（如文字），只有元件被打散后才能实现形状渐变的。在动画过程中改变的是对象的形状，从一种形状平滑地变化到另一种形状，即使是文字，在这里也只有形状，不再算是文字。另外，与运动渐变动画不同的是，形状渐变动画允许一个图层上安排多个对象，同时进行形状渐变，而且有时还会产生意料之外的变化。正确创建形状渐变时，首先需定义两个关键帧起始帧与结束帧，并分别在其中绘制好图形。接着就可以在两个关键帧之间创建形状渐变动画了。而动画中过渡的部分，即补间，是由Flash自行计算得来的。,12.3动画制作,12.3.4遮罩动画的制作遮罩层也叫蒙板，是Flash中一种特殊的图层。它本身是一个不会被显示的图形区域，利用特殊的遮罩关系，可以实现对它下层被遮罩的图层显示区域或显示范围的控制，即在遮罩层上非透明的区域，下层对应的地方就显示，否则不显示。需要注意的是，遮罩层和它下层被遮罩的图层有严格的上下层关系，次序绝对不可以颠倒。遮罩动画的实现步骤一般如下所述：制作一段运动渐变动画或形状渐变动画；然后添加一个图层，并设置属性为遮罩层；在遮罩图层和被遮罩图层之间建立关联关系，实现遮罩动画的效果。,12.3动画制作,12.3.5引导层运动动画的制作在一般情况下，运动动画产生补间动画时，都是按照最简单的方式产生的，即按直线从起点运动到终点方式产生，但事实上，很多运动并不按照直线轨迹运动，例如，雪花的飘落、小鸟的飞翔等。当然，如果将曲线分解成一个个小的直线线段来完成也未尝不可，但在接点处的跳跃感仍会影响观看的效果。因此，在Flash中有一种专门的图层引导层。在引导层中，利用可以产生曲线的工具绘制一条曲线，再利用属性面板的设置，使它作为运动对象或实体的运动轨迹。在演播时，这条曲线并不出现，但它的使用可以实现完美的曲线运动效果。为了让运动的对象能沿着曲线进行运动，需要添加引导层及引导线。在添加对象，设定开始帧和结束帧，并添加补间动画后，可以单击时间轴面板中的“添加引导层”按钮，添加一个引导层，添加成功后本层自动内缩，变成被引导层。,12.3动画制作,当所有的动画效果、交互效果、声音效果都被融入到一个Flash作品中以后，就要考虑如何将之输出为一个完整的文件了。在输出前，要对所有的动画效果、交互效果及声音效果做一个整体的测试，如果存在问题，就要进行调试、排除。测试除了解决动画中存在的问题以外，还有一项重要的功能，就是优化。优化后的影片体积较小，可以达到最佳的传播效果。用Flash制作的动画是fla格式的，所以在动画制作完成后，需要将fla格式的文件发布成swf格式的文件（能被Flash播放器播放的动画文件），用于网页播放。,12.4动画的测试、优化与发布,12.4.1动画的测试可以在两种环境下测试动画，一种为动画编辑环境，另一种为动画测试环境。下面就针对两种测试环境的特点，分别进行介绍。1在动画编辑环境下测试影片在动画编辑环境下，用户按Enter键可以对动画进行简单的测试，但动画中的影片剪辑元件、按钮元件等交互式效果均不能得到测试。而且在动画编辑模式下，测试动画得到的动画速度比输出或优化后的动画速度慢，所以动画编辑环境不是用户的首选测试环境。而在动画编辑环境下通过设置，可以对按钮元件及简单的帧动作（play，stop，gotoplay和gotoandstop）进行测试。,12.4动画的测试、优化与发布,12.4.1动画的测试2测试动画与场景测试动画与场景主要通过“控制”菜单实现，“控制”菜单如图所示。要测试一个动画的全部内容，执行“控制”“测试影片”命令，Flash将自动导出当前动画中的所有场景，然后将文件在新窗口中打开。要测试一个场景的全部内容，执行“控制”“测试场景”命令，Flash仅导出当前动画中的当前场景，然后将文件在新窗口中打开，且在“文件”选项卡中标出当前测试的场景。,12.4动画的测试、优化与发布,图“控制”菜单,12.4.2优化动画文件随着动画文件大小的增大，它的下载和回放时间也会增加。作为发布过程中的一部分，Flash自动对动画执行一些优化，例如，它可以在导出时检测重复的形状，在文件中只把它们放置一次，并且把嵌套组合转换成单个组合。1总体上优化对于多次出现的元素，使用元件、动画或者其他对象。只要可能，就要使用补间动画，补间动画与一系列的关键帧相比，占用的文件空间更少。对于动画序列，要使用影片剪辑而不是图形元件。限制每个关键帧中的改变的区域，在尽可能小的区域中执行动作。避免使用动画位图元素，使用位图图像作为背景或者静态元素。对于声音，尽可能使用MP3这种占用空间最小的声音格式。,12.4动画的测试、优化与发布,2优化元素和线条尽量组合元素。使用层把随动画过程改变的元素和不随动画过程改变的元素分开。限制特殊线条类型的数量，如虚线、点状线、锯齿状线等，实线所需的内存空间较小，铅笔工具生成的线条比画笔笔触生成的线条所需的内存空间更小。3优化文本和字体限制字体和字形的数量，尽量少使用嵌入字体，因为它们会增加文件的大小。对于“嵌入字体”选项，只选中需要的字符，不要包括所有字体。,12.4动画的测试、优化与发布,4优化颜色在元件属性检查器中，使用“颜色”菜单创建一个元件的具有不同颜色的多个实例。使用混色器来使影片的颜色调色板与浏览器专用的调色板匹配。尽量少使用渐变色，使用渐变色填充区域比使用纯色填充大概多需要50B空间。尽量少使用Alpha透明度，它会减慢回放速度。,12.4动画的测试、优化与发布,12.4.3动画文件的发布可以将Flash动画发布成多种格式，而在发布之前需进行必要的发布设置，定义发布的格式及相应的设置，达到最佳效果。在“发布设置”对话框中，可以一次性发布多种格式，且每种格式均保存为指定的发布设置，可以拥有不同的名字。接下来介绍发布动画的方法。1发布设置执行“文件”“发布设置”命令，弹出如图所示的对话框。在其中默认的有3个选项卡：“格式”选项卡、Flash选项卡和HTML选项卡。,12.4动画的测试、优化与发布,图“发布设置”对话框,2发布预览执行“文件”“发布预览”命令，打开发