网页设计与制作教程第八章网页动画制作工具FlashMXppt课件

.,1,8.1FlashMX2004简介8.2FlashMX2004的基本知识8.3动画制作8.4动画的测试、优化与发布,第8章网页动画制作工具FlashMX2004,.,2,FlashMX2004是Web设计人员、交互式媒体专业人员进行设计的理想制作工具。该版本注重于创建、导入和处理多种类型的媒体（包括音频、视频、位图、矢量、文本和数据），提供了对Web团队（由设计人员和开发人员组成）成员之间的工作流程进行优化的项目管理工具。目前，Flash中文版的最新版本是FlashMX2004v7.01，英文版是v7.02。1.友好的操作界面2.生成的动画文件可以独立播放3.流媒体动画4.文件体积较小5.具有交互式作用的多媒体影片6.易用性,8.1FlashMX2004简介8.1.1Flash的特点,.,3,Flash的界面由几个主要部分组成，最上方的是“主菜单栏”。“主工具栏”下方是“文档选项卡”；“时间轴”和“舞台”位于工作界面的中心位置；左边是功能强大的“工具箱”；多个“面板”围绕在“舞台”的下面和右面，包括常用的“属性”和“帮助”面板，还有浮动面板，如图8-1所示。,8.1FlashMX2004简介8.1.2FlashMX2004的用户界面,图8-1FlashMX2004的用户界面,.,4,1.帧在Flash中，帧是构成动画作品的基本单位，它装载了Flash播放的内容。关键帧：关键帧是决定一段动画的必要帧。其中可以放置图形，能播放对象，并可以对所包含的内容进行编辑。关键帧一般在动画开始点、控制转折点和结束点。空白关键帧：空白关键帧就是什么内容都没有的关键帧。启动Flash后，默认状态下，每个层的第一帧，都是空白关键帧。在动画制作工作区添加了内容后，自动变成关键帧。过渡帧：在两个关键帧中间的普通帧被称为过渡帧。在Flash中，确定了两端的关键帧后，利用命令可以自动计算添加过渡帧，无须人工添加。,8.2FlashMX2004的基本知识8.2.1FlashMX2004的基本概念,.,5,2.层Flash中层就像一张“透明纸”，在上面可以画一些图形、写一些文字，然后将多层“透明纸”重叠在一起，就实现最终的效果了。层在时间轴窗口中就是一个横行，它包含着若干个帧。在Flash中有普通层、运动引导层、遮罩层和注释说明层。通常建立的层都是普通层；通过运动引导建立的层是引导层，它的作用是提供引导线作为被引导层中对象的运动轨迹；而遮罩层是通过设定遮罩关系建立的层，它的作用是为了实现遮罩关系下的特别效果；注释说明层本质上是一个运动运动引导层，可以在其中添加一些说明性文字，而输出时不输出该层内容。,8.2FlashMX2004的基本知识8.2.1FlashMX2004的基本概念,.,6,8.2FlashMX2004的基本知识8.2.1FlashMX2004的基本概念,3.对象在Flash中任何被选中的东西，都可以叫做对象。对象被选中后可以通过设置实现用户要求的变形或运动。如果绘制了一个圆，并选中这个圆的话，它就是一个对象，可以通过工具对它进行填充、修改、移动、变形等编辑。4.元件、实例和库元件也被称作符号或图符，是Flash动画的重要组成部分，元件的主要特性是可以被重复利用，且不会影响影片的大小。Flash中的所有元件都被归纳在库面板中，可以被随时调用，十分方便。Flash文档中的库存储了导入的文件（如视频剪辑、声音剪辑、位图）、导入的矢量插图以及元件。库是Flash组织、编辑和管理动画中创建的和使用的各种元件的仓库。,.,7,8.2FlashMX2004的基本知识8.2.1FlashMX2004的基本概念,5.场景和舞台场景是指在当前动画编辑窗口中，编辑动画内容的整个区域，如图8-2所示。动画是在场景中被制作完成的，而场景中又包括舞台与工作区，舞台中显示的动画效果是影片的实际效果，舞台以外的区域是工作区，最终的影片不会显示工作区中的对象。,图8-2场景和舞台的主界面,.,8,8.2FlashMX2004的基本知识8.2.2动画的基本概念,1.计算机动画的概念与原理所谓动画，简单地说，就是将静止状态下的一幅幅图画或照片连续地演播出来的技术，具体说来有以下两种说法：动画是一种通过一系列连续的画面来显示运动的技术，是以一定的播放速度来达到连续运动的效果的。动画是一系列具有各种物体的动态画面的处理过程，每一个画面都可以与前一个画面有着微小的变化。动画的概念已经明确，那么原理就自然清楚了人的“视觉原理”。医学证明，人类的视觉系统有视觉暂留的特性，也就是说，人的眼睛看到对象后在1/24秒内，图像不会在大脑当中消失，利用这一原理，在前一图像没有消失之前，如果播放下一图像，自然会给人造成一种连续变化的视觉效果，电影、电视都是利用了这一原理。,.,9,8.2FlashMX2004的基本知识8.2.2动画的基本概念,2.计算机动画的分类(1)按电脑在动画制作中的作用分类按电脑在动画制作中的作用分类，可将电脑动画系统分为两类：电脑辅助动画和造形动画。(2)按动画的控制方式分类根据运动的控制方式不同，可将电脑动画分为关键帧动画和算法动画。(3)从制作原理上分类从制作原理上分类，动画可简单划分成两大类：逐帧动画、补间动画。逐帧动画就是通过更改每一帧中的舞台内容而获得动画效果，它最适合于每一帧中的图像都在更改而不是仅仅简单地在舞台中移动的复杂动画。逐帧动画的缺点是太耗费时间和精力。优点是能最大限度地控制动画的变化细节。,.,10,补间动画是在两个关键帧之间建立渐变的一种动画。补间动画关键帧的对象是元件的实例、群组体或文字。补间动画的原理是：在第一个关键帧中设置元件实例、群组体或文字的属性，然后在第二个关键帧中修改对象的属性，从而在两帧之间产生动画效果，可以修改的属性包括大小、颜色、旋转和倾斜、位置、透明度及各种属性组合，如图8-3所示。,图8-3补间动画的原理,8.2FlashMX2004的基本知识8.2.2动画的基本概念,.,11,3.Flash动画的格式(1)Flash源文件格式Flash源文件格式的扩展名fla，该类型文件只能在Flash应用程序中被打开和编辑，在其他软件中是无法到达开的。用户可以在Flash应用程序中打开该文件，然后导出扩展名为swf或swt的文件，以便在浏览器中使用。(2)Flash电影文件格式Flash电影文件格式的扩展名为swf。该类型文件是电影文件格式源文件的压缩生成的文件，已经为网络中查看而进行了优化处理。因此，这种类型的文件可以在浏览器中播放，但是要求浏览器安装FlashPlayer播放器插件才能播放，也可以在Dreamweaver中预览，但是却不能在Flash应用程序中编辑。另外，在Dreamweaver中允许用户直接插入Flash动画对象，该对象的扩展名就是swf。,8.2FlashMX2004的基本知识8.2.2动画的基本概念,.,12,设计目标制作导入系列图片的逐帧动画，生成一个连续奔跑的骏马动画效果，如图8-4所示。【例8-1】,8.3动画制作8.3.1逐帧动画的制作,图8-4实例效果,.,13,运动渐变动画是补间动画的一种。通过为对象创建运动渐变，可以改变对象的位置、大小、旋转或倾斜，做出物体运动的各种效果。通过设置实例的颜色属性，还可以制作出丰富的渐变效果，例如实例的淡入淡出效果。导致运动渐变动画失败的原因有很多，但主要是由于以下几种原因：第一种为缺少起始帧或终止帧；第二种为起始帧或终止帧包含多个的对象；第三种为起始帧或终止帧中包含的对象不是元件实例。要正确使用运动渐变必须满足以下创作条件：运动渐变只能作用于元件实例。要对形状、组合、位图或文本对象应用运动渐变，必须先将这些对象转换为元件。运动渐变中的元件只能是一对一的渐变，多对一或一对多均会导致渐变失败。运动渐变中的元件只能在同一图层。,8.3动画制作8.3.2运动渐变动画的制作,.,14,设计目标制作文字动画的广告条来说明自己网站的特点，提升网站的形象，增加网站的吸引力，动画效果如图8-14所示。【例8-2】,8.3动画制作8.3.2运动渐变动画的制作,图8-14实例效果,.,15,形变动画是Flash中另一大类基本动画。运动渐变动画要求运动对象作为一个整体，通过位置、大小、色彩等属性发生变化来实现效果；而形变动画的对象是打散的对象，也就是说入库的元件，包括文字也一样，对象被打散后才能实现形变的，在动画过程中改变的是对象的形状，从一种形状平滑地变化到另一种形状。例如圆形变成方形的动画效果，如图8-39所示。形状渐变属性面板如图8-40所示。,8.3动画制作8.3.3形状渐变动画的制作,图8-39形状渐变,图8-40形状渐变的属性面板,.,16,设计目标利用形状渐变制作图形向文字从色彩到形状的过渡变化，渐变效果如图8-41所示。【例8-3】,8.3动画制作8.3.3形状渐变动画的制作,图8-41从色彩到形状的渐变效果,.,17,为了更好的管理各层，Flash中增加了“图层文件夹”，可以把完成一个任务或和某个动作相关的同类层放在一个“图层文件夹”里，这样便于快速查找层和管理层，效率更高。如图8-48所示。在时间轴窗口中选中层后，单击鼠标右键弹出菜单，单击“属性”命令，弹出图8-49所示的属性对话框。在图层的属性中包括图层的名称、类型、轮廓颜色、图层高度四项内容。,8.3动画制作8.3.4遮罩动画的制作,图8-48时间轴窗口中的各种类型的层,图8-49“图层属性”对话框,.,18,遮罩层也叫蒙板，是Flash中的一种特殊图层。它本身是一个不会被显示的图形区域，利用特殊的遮罩关系，可以实现它下层被遮罩的图层显示区域或显示范围的控制，即在遮罩层上非透明的区域，下层对应的地方就显示，否则不显示。需要注意的是，遮罩层和它下层被遮罩的图层有严格的上下层关系，次序绝对不可以颠倒。遮罩动画的实现步骤一般如下：制作一段运动渐变动画或形状渐变动画。然后添加一个图层，并设置属性为遮罩层。在遮罩图层和被遮罩图层之间建立关联关系，实现遮罩动画的效果。,8.3动画制作8.3.4遮罩动画的制作,.,19,设计目标利用遮罩技术实现探照灯扫描文字的效果，当一束光束扫过较为昏暗的文字时，光束所到文字部分变亮，如图8-50所示。【例8-4】,8.3动画制作8.3.4遮罩动画的制作,图8-50探照灯扫描文字的效果,.,20,在Flash中有一种专门的图层引导层，在引导层中利用一切可以产生曲线的工具绘制一条曲线，再利用属性面板的设置，使它作为运动对象或实体的运动轨迹，在演播时这条曲线并不出现，可以实现完美效果的曲线运动。为了让运动的对象能沿着曲线进行运动需要添加引导层以及引导线。在添加了对象，并设定了开始帧和结束帧，添加了补间动画后，可以单击时间轴面板中的“添加引导层”按钮，添加一个引导层，添加成功后本层自动内缩，变成被引导层，如图8-58所示。,8.3动画制作8.3.5引导层运动动画的制作,图8-58添加了引导层的时间轴窗口,.,21,设计目标利用引导层运动动画制作一个出现在舞台上方沿着不规则路径慢慢飘落的花朵，最后在舞台下方消失，实例效果如图8-59所示。【例8-5】,8.3动画制作8.3.5引导层运动动画的制作,图8-59实例效果,.,22,FlashMTV已经逐渐被人们熟悉，FlashMTV的制作也从开始的大量使用位图，制作简单的动画，发展到现在的广泛使用矢量图甚至手工作图；从以前的生硬呆板，发展到今天的生动、逼真。但是其中的关键问题依旧还是音乐文件的尺寸问题，音乐和画面、音乐和歌词的同步问题。1.音乐文件的大小一般导入的音乐文件长度多在3分钟左右，大小也在36MB之间，比较难以在网络上传输。在FlashMX中在，支持流行的MP3音频压缩方式，因此可以将波型声音文件（.wav）载入到Flash中进行编辑，在输出.swf时，会自动完成音频格式的转换和压缩。,8.3动画制作8.3.6MTV制作基础,.,23,2.一般制作步骤由于MTV的制作是一个很大的工程，所以一般情况下，分为几个大的步骤来完成：(1)音乐的准备所谓音乐的准备。就是准备好MTV中使用的音乐。音乐的来源，在FlashMX2004中非常广泛，既可以是WAV格式的音乐，也可以是最常用的MP3格式的音乐。如果音乐来自于CD，需要转换为WAV或是MP3格式。(2)音乐的设置执行“文件”“导入”“导入到库”命令，将一首音乐“小薇.MP3”导入到库中。拖动库中的音乐到舞台上，选中时间轴面板中的任意一帧，例如第60帧，执行“插入帧”，这样音乐便添加到图层上。,8.3动画制作8.3.6MTV制作基础,.,24,然后单击属性面板中的“编辑”按钮，如图8-76所示，对音乐进行必要的编辑并设置效果，例如设置自定义效果模式，定义左、右声道均为淡入效果，如图8-77所示。,8.3动画制作8.3.6MTV制作基础,图8-76属性面板中选择“编辑”,图8-77设置自定义效果模式,.,25,(3)同步的实现音乐同步默认的是按“事件”同步，最好选择“数据流”同步方式，如图8-78所示。同步与否关键在于确定歌曲中演唱的每一句歌词的时间。通过时间轴面板中添加帧，最后得到时间轴窗口如图8-79所示。由属性面板可以看出声音文件的时间长度是193.6s。默认的将动画的播放速度设置为“12.0fps”(即每秒12帧)。用户很容易就可以计算出来播放完整个歌曲所需要的帧数：12.0193.6=2323.2帧，在图中也显示了展开音乐后最后的帧数“2324帧”,8.3动画制作8.3.6MTV制作基础,图8-78选择“数据流”同步方式,图8-79整个音乐展开后的时间轴,.,26,(4)歌词帧的添加和效果的制作在上面的步骤中，找到了各段歌词开始和结束的时间点，这样就可以添加歌词了。添加一个图层，给它命名为“歌词”。根据取得的各段歌词开始和结束的时间点所在的帧的数据，在每段歌词的开始和结束的帧中都添加一个关键帧。然后回到歌词开始时间的那个关键帧，将歌词填入。但是这样添加的歌词还需要制作动作和效果，而且在Flash中制作这种效果很费时费力。通常是利用专用的文字动画制作软件Swish（可从,8.3动画制作8.3.6MTV制作基础,.,27,1.在影片编辑环境下测试影片在影片编辑环境下，用户按Enter键可以对影片进行简单的测试，但影片中的影片剪辑元件、按钮元件等交互式效果均不能得到测试。而且在影片编辑模式下测试影片得到的动画速度比输出或优化后的影片慢，所以影片编辑环境不是用户的首选测试环境。但在编辑环境下通过设置，可以对按钮元件以及简单的帧动作（play、stop、gotoplay和gotoandstop）进行测试。,8.4动画的测试、优化与发布8.4.1动画的测试,.,28,2.测试影片与场景测试影片与场景主要是通过“控制”菜单实现的，“控制”菜单如图8-59所示。要测试一个动画的全部内容，执行“控制”“测试影片”命令，Flash将自动导出当前影片中的所有场景，然后将文件在新窗口中打开。要测试一个场景的全部内容，执行“控制”“测试场景”命令。Flash仅导出当前影片中的当前场景，然后将文件在新窗口中打开，且在文件选项卡中标示出当前测试的场景。,8.4动画的测试、优化与发布8.4.1动画的测试,图8-59“控制”菜单,.,29,在导出影片之前，可以使用多种策略来减少文件的大小，从而对其进行进一步的优化。在影片发布的时候，也可以把它压缩成文件。1.总体上优化影片对于多次出现的元素，使用元件、动画或者其他对象。只要可能，就要使用补间动画，补间动画与一系列的关键帧相比，它占用的文件空间更少。对于动画序列，要使用影片剪辑而不是图形元件。限制每个关键帧中的改变的区域；在尽可能小的区域中执行动作。避免使用动画位图元素；使用位图图像作为背景或者静态元素。对于声音，尽可能使用MP3这种最小的声音格式。,8.4动画的测试、优化与发布8.4.2优化动画文件,.,30,2.优化元素和线条尽量组合元素。使用层把随动画过程改变的元素和不随动画过程改变的元素分开。限制特殊线条类型的数量，比如虚线、点状线、锯齿状线等等，实线所需的内存较少，铅笔工具生成的线条比画笔笔触生成的线条所需的内存更少。3.优化文本和字体限制字体和字形的数量。尽量少使用嵌入字体，因为它们增加文件的大小。对于“嵌入字体”选项，只选中需要的字符，不要包括所有字体。,8.4动画的测试、优化与发布8.4.2优化动画文件,.,31,4.优化颜色在元件属性检查器中，使用“颜色”菜单创建一个元件的具有不同颜色的多个实例。使用混色器来使影片的颜色调色板与浏览器专用的调色板匹配。尽量少使用渐变色。使用渐变色填充区域时比使用纯色填充时大概多需要50个字节。尽量少使用alpha透明度，它会减慢回放速度。,8.4动画的测试、优化与发布8.4.2优化动画文件,.,32,1.发布设置执行“文件”“发布设置”命令，弹出如图8-60所示对话框。(1)格式选项卡在格式选项卡中，可以选择发布后输出的文件格式，默认的是Flash和HTML，因此在对话框中就有相应的选项卡，如果用户选中其他输出格式，自然也会引出相应的选项卡。还可选择发布成为GIF图像、JPEG图像、PNG图像、Windows放映文件、Macintosh放映文件、QuickTime识别的.mov文件。,8.4动画的测试、优化与发布8.4.3动画文件的发布,图8-60发布设置对话框,.,33,(2