网页动画制作工具Flash.ppt

网页动画制作工具Flash,11.1 Flash 8简介 11.2 Flash 8的基本概念与操作 11.3 动画制作 11.4 动画的测试、优化与发布,第11章 网页动画制作工具Flash 8,11.1.1 Flash的特点 1友好的操作界面 无须任何编程基础就可以轻松制作出动画效果。 2生成的动画文件可以独立播放 用Flash制作的动画作品不仅可以在线观看，也可以离线观看，并保留其原来动画中的各种交互式操作功能。 3流媒体动画 Flash文件还没有完全下载完毕时就播放动画，即下载的同时进行播放。,11.1 Flash 8简介,11.1.1 Flash的特点 4文件体积较小 由于Flash采用的图像方式是矢量图，生成的文件相对于传统网页动画中同等面积的像素图来说要小很多。 5具有交互式作用的多媒体影片 Flash影片可以通过Action Script脚本语言与使用者建立交互式关系，使用者可以通过键盘操作或鼠标操作与影片实现互动。 6易用性 由于其操作界面与其他程序（如Office、Photoshop等）相似，因此用户很容易上手。,11.1 Flash 8简介,Flash界面,菜单栏 常用工具栏 绘图工具栏 控制工具栏 状态栏,常 用 工 具 栏,绘制工具栏,Flash其它栏目,属性面板 工具面板区：混色器面板、组件面板、颜色样本面板 动作面板 库窗口：存储和组织元素的对象,场景和舞台 场景是指在当前动画编辑窗口中，编辑动画内容的整个区域 。 动画是在场景中被制作完成的，而场景中又包括舞台与工作区。 例：拍电影，摄影棚可以被理解为场景，而镜头对准的地方就是舞台。 舞台中显示的动画效果才是影片的实际效果，舞台以外的区域是工作区，最终的影片中不会显示工作区中的对象。工作区也是不可或缺的，它可以使画面运动更加流畅自然，画面的边缘不会消失得那么唐突。 在场景编辑窗口中，除了舞台和工作区外，还有以下几项内容：场景名、“编辑场景”按钮、“编辑元件”按钮和显示比例。,11.2 Flash 8的基本概念与操作,动画实例,线性动画 旋转动画 缩放动画 色彩动画 沿引导线运动 遮罩动画,绘制简单动画欢迎来到欢乐之家,页面属性设置 制作新元件：欢迎 制作新元件：来到欢乐之家 设置动作：具有先后顺序,制作矢量动画,每个矢量都是一个对象； 每个对象都有自己的属性：如颜色、粗细 绘制直线（普通、水平、垂直、45度角）、矩形（普通、圆角矩形）、椭圆型（椭圆、正圆）、曲线 铅笔模式：伸直、平滑、墨水（接近手绘）,编辑对象,“修改”“变形”菜单项 缩放对象 旋转对象 倾斜对象 中心点 水平翻转与垂直翻转 取消变形,调整对象,按建立的顺序排列对象；先建立的对象排在底层，后建立的对象排在上层； 改变顺序：“修改”“排列”中的移至底层、移至顶层、上移一层、下移一层； 组合：多个对象组合便于移动； “修改”“组合”； 分离：对群组对象中的单个对象处理； 复制对象、粘贴对象（粘贴位置） 对齐对象,辅助绘图功能,编辑中的“撤销”与“重复”选项 标尺：定位；“视图”“标尺” 网格：对齐； “视图”“标尺” “编辑”“首选参数”“编辑”“绘图工具”选项：辅助绘图功能；直线选项、曲线选项等,点阵图处理分离对象,将文字对象、元件、点阵图分离成线条和填色区域； 可使用墨水瓶和油漆桶进行线条的编辑和填色； 例：分离文字对象，用油漆桶填色； 去除背景效果：分离对象； 选用套索，设置魔术棒模式，套索对象；用箭头对象选定背景，删除背景。,文字处理,文字的输入、修改、复制、删除； 格式化文字：改变字体、大小、样式（上、下标）、对齐、间距； 编辑文字框：旋转、倾斜、缩放； 变形、渐变：先分离文字；后变形、渐变。,时间轴面板,用于控制动画； 管理图层，处理帧；显示动画中各帧的排列顺序，也包括各层的前后顺序； 由时间标尺和代表帧的小方格构成 Flash动画由帧顺序排列,时间轴按钮,绘图纸按钮,绘图纸外观：工作区内同时出现数个帧，帧内对象以颜色逐渐淡化表示先后顺序，关键帧以颜色表示； 绘图纸外观轮廓：与绘图纸外观相同，但只显示物件的外框； 编辑多个帧：看到每个帧中的对象，并可对对象编辑 修改绘图纸标记：总是显示标记、锚定绘图纸、绘图纸2、绘图纸 5、绘制全部。,帧,每一幅静态的画面就是一个单独的帧 按时间顺序放映这些连续画面，画面将会动起来,帧的属性操作,显示和播放帧：可拖拽帧指针位置 调节帧面板： 改变帧播放速率：“修改”“文档”,实例：光碟的运动,新建光碟元件； 切换到场景，设置动画； 预览；,帧的基本操作,插入操作 复制操作 移动操作 删除操作： 实例：圆形的填充,帧的分类,关键帧：关键画面，主导关键性位置或动作,是决定一段动画的必要帧。一般放在动画开始点、控制转折点或结束点。“黑色小圆点”表示；其中可以放置图形，播放对象，并可以对所包含的内容进行编辑。 空白帧：不含任何影像 空白关键帧：不含任何影像的关键帧；将前面的关键帧的内容清除掉，使画面中的内容变为空白，使对象消失掉；添加了内容后，它自动变成关键帧。 普通帧：二个关键画面之间由电脑自动绘出的过渡画面。“方形”表示；确定了两端的关键帧后，利用命令可以自动计算添加过渡帧，无须人工添加。,2对象,Flash中任何被选中的东西，都可以叫做对象。 对象被选中后，可以通过设置实现用户要求的变形或运动。 可以通过工具对它进行填充、修改、移动、变形等编辑。,三角形的绘画,一、创建影片：尺寸300X300，帧频6px； 二、创建动画： 画一红色直线，线粗为3，在第10帧插入关键帧，回到第一帧，任意变形工具，把直线拉短，注意要与原直线重合。 在第一层的第10帧增加普通帧，目的是延长第10帧的效果。 再增加一层，在第二层的第10帧插入空白关键帧，画三角形第二边。第20帧加关键帧，回到第10帧使第二边变短设置变形动画。 同理，画第三边 在第31帧的选中三边，改变颜色为黄色（闪动效果），第32帧再改回为红色第35帧加普通帧延长效果。,图层,功能：数个角色与背景分别制作 默认一个标准层（图层1） 添加图层 改变图层名称 改变图层顺序：拖拽；,普通层:通常建立的层 运动引导层:通过运动引导建立的层是引导层，提供引导线作为被引导层中对象的运动轨迹； 遮罩层:设定遮罩关系建立的层，它的作用是为了实现遮罩关系下的特别效果； 注释说明层:可以添加一些说明性文字，而输出时不输出该层内容。,11.2 Flash 8的基本概念与操作,图层,显示/隐藏层 锁定/解锁层 显示图层的轮廓 图层的属性更改； 添加引导层 添加文件夹 删除层,多图层管理,显示所有图层： 锁定其他图层： 隐藏其他图层,实例,载入动画,建立新元件,元件（组件）：通过工具栏中绘制的图形(形变动画除外）通常不能作为动画对象设置动作创建动画，要转化成元件。 元件占用的体积小,以库项目方式存储在库中 即使在场景中将所有元件全部删除掉，也不会影响库面板中的元件。 元件的建立是以重复使用为目的的，不但可以将其应用于当前影片，还可以将其应用于其他影片。,11.2 Flash 8的基本概念与操作,元件中可以包含位图、图形、组合、声音甚至是其他元件，但不可以将元件置于其自身内部。 Flash中包括3种元件类型，分别为图形元件、影片剪辑元件和按钮元件。 图形元件：存放单独图形； 影片剪辑元件：动画符号，具有互动式功能，也可播放声音； 按钮元件：检测鼠标动作并产生互动功能，夹带音效； 每个元件都具有独立的时间轴、工作区和图层，每种元件类型都具有独特的属性,元件与实例,应用于影片的元件被称做“实例”。 对实例的编辑只针对实例本身，不会影响到库面板中的元件。 库是Flash组织、编辑和管理动画中创建的和使用的各种元件的仓库。所有元件都会被自动载入到当前影片的库面板中，还可以从其他影片的库面板中调用元件，或者根据需要建立自己的库。,管理元件,库面板的操作 新增 删除 编辑 改名 改属性 增加文件夹 移动元件,11.2.2 动画的基本概念 1计算机动画的概念与原理 动画：将静止状态下的一幅幅图画或照片连续地演播出来的技术，又有以下两种说法： 动画是一种通过一系列连续的画面来显示运动的技术，是以一定的播放速度来达到连续运动的效果的； 动画是一系列具有各种物体的动态画面的处理过程，每一个画面都可以与前一个画面有着微小的变化。,11.2 Flash 8的基本概念与操作,动画原理,人的“视觉原理”。 人的眼睛看到图像后的1/24s内，图像不会从大脑中消失。 如果在前一图像没有消失之前，播放下一图像，就会给人造成一种连续变化的视觉效果。 电影、电视都是利用了这一原理。,2计算机动画的分类 （1）按计算机在动画制作中的作用分类 计算机辅助动画： 属于二维动画，辅助动画师们制作类似于传统动画的动画，以及对各类动画片段的编辑（合成、连接）等后期制作。 造型动画。,11.2 Flash 8的基本概念与操作,计算机动画的分类,（2）按运动的控制方式分类 关键帧动画：通过对关键画面的控制来获得中间画面的动画序列， 算法动画：采用算法实现对物体的运动控制或模拟摄像机的运动控制。,2计算机动画的分类 （3）从制作原理上分类 逐帧动画：通过更改每一帧中的舞台内容而获得动画效果，它最适合于每一帧中的图像都在改变，而不是仅仅简单地在舞台中移动的复杂动画。缺点是太耗费时间和精力，而且最终生成的动画文件偏大。优点是能最大限度地控制动画的变化细节。 补间动画：在两个关键帧之间建立渐变的一种动画。补间动画关键帧的对象是元件的实例、群组体或文字。补间动画的原理是：在第一个关键帧中设置元件实例、群组体或文字的属性，然后在第二个关键帧中修改对象的属性，从而在两帧之间产生动画效果，可以修改的属性包括大小、颜色、旋转和倾斜、位置、透明度及各种属性的组合。,11.2 Flash 8的基本概念与操作,3Flash动画的格式 （1）Flash源文件格式 Flash源文件格式的扩展名为fla，该类型文件只能在Flash应用程序中被打开和编辑。用户可以在Flash应用程序中打开该文件，然后导出扩展名为swf或swt的文件，以便在浏览器中使用。 （2）Flash电影文件格式 Flash电影文件格式的扩展名为swf。这种类型的文件可以在浏览器中播放，但是要求浏览器安装Flash Player播放器插件后才能播放，不能在Flash应用程序中编辑。在Dreamweaver中允许用户直接插入Flash动画对象，该对象的扩展名为swf。,11.2 Flash 8的基本概念与操作,11.3.1 逐帧动画的制作 逐帧动画的制作方法与传统的动画相似，将对象的运动过程分解成多个静态图形，再将这些连续的静态图形置于连续关键帧中，就构成了逐帧动画。 由于其中的每一帧都是关键帧，所以生成的影片相对较大，仅适用于制作较为精细复杂的小动画。 【例11-1】制作圣诞老人走路的动画效果。,11.3 动画制作,【例11-1】,图11-4 素材图像的源文件,11.3.2 运动渐变动画的制作 运动渐变动画是补间动画的一种。 通过为对象创建运动渐变，可以改变对象的位置、大小、旋转或倾斜，做出物体运动的各种效果。 通过设置实例的颜色属性，还可以制作出丰富的渐变效果 导致运动渐变动画失败的原因有很多，主要是以下3种原因 缺少起始帧或终止帧； 起始帧或终止帧包含多个对象； 起始帧或终止帧中包含的对象不是元件实例。,11.3 动画制作,图片的使用,导入图片 处理导入的图像：组合与分离 转换位图 设置导入的位图：在库面板中双击元件，显示位图属性窗口；显示文件名称、路径、平滑；改变压缩格式、导入、测试；,相片动起来,建立组件 运动效果 放大效果； 淡出且变小效果 ：变小，透明度20 推进效果 ：变大，透明度100 由正面到反面的渐变效果 ：倾斜，垂直斜度180,要正确使用运动渐变必须满足以下创作条件： 运动渐变只能作用于元件实例，要对形状、组合、位图或文本对象应用运动渐变，必须先将这些对象转换为元件； 运动渐变中的元件只能是一对一的渐变，多对一或一对多均会导致渐变失败； 运动渐变中的元件只能在同一图层中。 【例11-2】使用运动渐变动画实现文字被风吹走的效果，如图11-13所示。,11.3 动画制作,图11-13 实例效果,【例11-2】,运动渐变,过程：新建八个元件，分别位于每个层的第一祯 对元件相隔第20祯添加关键祯，设置任意变形（水平翻转），alpha属性值为0，移动到右上角，设置运动渐变，缓动值为-100,形变动画,和运动动画不同的是，其动画对象只能是矢量图形对象； 群组对象、图符引例对象、符号和位图图像均不能够作为变形动画的对象（除非把它们打散成矢量图形）。,形变动画,可以在两个关键帧之间制作出变形的效果，让一种形状随时间变化成另外一种形状； 还可以对形状的位置、大小和颜色进行渐变；,11.3.3运动渐变动画和形状渐变动画区别 运动渐变动画要求运动对象作为一个整体，通过位置、大小、色彩等属性发生变化来实现效果； 形状渐变动画的对象是打散的对象，对于入库的元件（如文字），只有元件被打散后才能实现形状渐变的。在动画过程中改变的是对象的形状，从一种形状平滑地变化到另一种形状，即使是文字，在这里也只有形状，不再算是文字。 形状渐变动画允许一个图层上安排多个对象，同时进行形状渐变，而且有时还会产生意料之外的变化。,11.3 动画制作,正确创建形状渐变时，首先需定义两个关键帧起始帧与结束帧，并分别在其中绘制好图形。接着就可以在两个关键帧之间创建形状渐变动画了。 动画中过渡的部分，即补间，是由Flash自行计算得来的。,11.3.3 形状渐变动画的制作 【例11-3】利用形状渐变制作从图形向文字的渐变，效果如图11-31所示。,11.3 动画制作,图11-31 从图形向文字的渐变,【例11-3】,简单变形动画：欢渡国庆,一、创建影片：尺寸400X300，背景浅桔色。 二、创建动画： 第1帧：画出一个没有边框的红色矩形； 第10帧插入空白关键帧，画出一个没有边框的蓝色小球。点第1帧，设置变形动画，选择形状渐变。 第20帧插入空白关键帧，选取字体Webdings，输入字母v。会出现一辆汽车符号，任意变形调整汽车大小,“修改/分离”，汽车变彩虹色。点第10帧，设置变形动画，选择图形变化。 第40帧插入空白关键帧，输入“欢渡国庆”，打散文字两次。点第20帧设置变形动画。 按F5在第50帧插入一帧，以延长第40帧的效果,提示：在英文字体中有很多特殊的字体，如Webdings，它可以产生各类图案。 提示：因为Flash不能对群组、图符（组件）、字符或者位图图像进行动画变形，所以要将字符打散。有的要打散两次。,11.3.4 遮罩动画的制作 也叫蒙板，是Flash中一种特殊的图层。 实现对它下层被遮罩的图层显示区域或显示范围的控制，即在遮罩层上非透明的区域，下层对应的地方就显示，否则不显示。 遮罩层位于被遮罩的图层的上面，次序绝对不可以颠倒。 遮罩动画的实现步骤一般如下所述： 制作一段运动渐变动画或形状渐变动画； 然后添加一个图层，并设置属性为遮罩层； 在遮罩图层和被遮罩图层之间建立关联关系，实现遮罩动画的效果。,11.3 动画制作,11.3.4 遮罩动画的制作 【例11-4】利用遮罩技术实现电影序幕效果，动画开始时文字隐藏，然后逐渐显现，最后再慢慢消失，即淡入淡出的效果，如图11-37所示。,11.3 动画制作,图11-37 文字的电影序幕效果,【例11-4】,遮罩动画的制作实例2,遮罩文字,11.3.5 引导层运动动画的制作 一般情况下，运动动画产生补间动画时，都是按照最简单的方式产生的，即按直线从起点运动到终点方式产生 Flash中有一种专门的图层引导层。在引导层中，利用可以产生曲线的工具绘制一条曲线，再利用属性面板的设置，使它作为运动对象或实体的运动轨迹。 演播时，这条曲线并不出现，但它的使用可以实现完美的曲线运动效果。 为了让运动的对象能沿着曲线进行运动，需要添加引导层及引导线。,11.3 动画制作,【例11-5】利用引导层运动动画制作一个纸飞机在舞台上沿着不规则路径飞翔的动画，实例效果如图11-45所示。,11.3 动画制作,图11-45 实例效果,【例11-5】,沿引导层运动,注意： 引导图层添加到被引导图层的上面； 在引导图层中绘制引导线 在被引导图层中设置位置，添加动作 实例2：多轨道运动的小球 实例3:制作书写动画,色彩动画实例声音模拟,新建影片剪辑动画 新加关键帧-复制矩形，改变色彩 最后一帧求随机变量f=random(n) 第一关键帧：gotoplayframe(f);,场景构成,场景构成：画布层和浮动层； 画布层在最底部，上面重叠数个浮动层； 利用绘图工具在编辑区绘图属于画布层； 改变浮动层的顺序：移至顶层、上移一层，下移一层、 创建场景；,调整场景,将元件拖拽到工作区后，就变成场景，也就是元件的分身； 每个场景都连接着元件，属性从元件的获得； 场景拥有各自属性，可独自运作,显示和排列场景,新建场景： “插入”场景 场景切换：“视图”“转到”； 编辑场景：“窗口”“设计面板”“场景”实现新建场景、复制、删除场景；,按钮,四个状态：弹起、鼠标经过、按下、点击，具备其中的几项即可 制作按钮 测试按钮 简单按钮制作 在原来的动画中增加按钮,实例制作按钮控制场景切换,新建元件按钮 在场景中导入图片，插入按钮 新建场景，导入图片,插入按钮 设置按钮动作,按钮实例图片播放器,上一页，下一页动作脚本的添加 新建元件上一页，下一页 多次建立相连关键帧，每个关键帧导入图片 新建图层，插入二个按钮，延长按钮作用时间 设置按钮动作 on (press) prevFrame()/nextframe(),脚本实例夜空,新建图形元件星星； 新建影片剪辑设置星星从有到无到有的过程 新建影片剪辑，添加三个空白关键帧，设置脚本；(1:num=0;3:gotoandPlay(2);) 切换到场景，拖入二个影片剪辑，并且设置星星从有到无到有的剪辑实例为star.,if (num45) num = 0; _root.star.stop(); _root.star._x = random(600); _root.star._y = random(450); _root.star.duplicateMovieClip(num,num); num = num+1;,插入路径,绝对路径 相对路径 目标,11.3.6 MTV制作基础 1音乐的准备 WAV格式 MP3格式 输出.swf文件时，会自动完成音频格式的转换和压缩。,11.3 动画制作,声音操作,导入声音文件 声音属性设置 添加声音到动画中 编辑声音 在按钮上添加声音特效,2音乐的设置 执行“文件”“导入”“导入到库”命令，将音乐导入到库中 拖动库中的音乐到舞台上，选中时间轴面板中的任意一帧， 执行“插入帧”命令，这样音乐便添加到图层中 音乐编辑:设置自定义效果模式，定义左、右声道均为淡入效果,11.3 动画制作,图11-53 将音乐添加到图层上 图11-54 设置自定义效果模式,2音乐的设置 默认设置是按“事件”同步 最好选择“数据流”同步方式:声音文件会平均分配在所需要的帧中，声音文件的播放与同它相配的动画的播放完全同步，而且取决于动画的播放速度。动画结束，声音的播放也结束。下载的过程中播放，下载了多少，就播放多少，非常适合在网络上传播。,11.3 动画制作,图11-55 选择“数据流”同步方式,3同步的实现 同步:在播放声音时，画面内容是对应的，字幕显示也是对应的。同步关键:确定歌曲中演唱的每一句歌词的时间，因此首先要清楚整个音乐究竟有多长。 例：声音文件的时间长度是193.6s。在一般的Flash作品中，默认将动画的播放速度设置为12.0fps（即每秒12帧）。用户很容易就可以计算出播放完整个歌曲所需要的帧数：12.0193.6=2323.2帧。展开歌曲后最后的帧数为2324。,11.3 动画制作,图11-56 整个歌曲展开后的时间轴,脚本实例时钟,创建图形元件clock; 创建影片剪辑：hours,minutes,seconds 并为影片剪辑添加脚本； 切换到场景，拖入clock;增加层,拖入hours,minutes,seconds;增加层，绘画圆心；增加层，增加脚本。,脚本实例圣诞快乐,导入背景 新建元件雪花； 新建影片剪辑沿引导线运动的雪花 新建图层拖入影片剪辑（沿引导线运动的雪花），设置实例为snow； 新建图层act,新家三个空白关键帧，分别添加脚本： 新建一个图层：添加音乐,运动的环,新建影片剪辑1，设置单环的运动 新建影片剪辑2，多个环的不同角度的复制 将影片剪辑拖入到场景中,Flash制作的动画是fla格式的 动画制作完成后，需要将fla格式的文件发布成swf格式的文件。,11.4 动画的测试、优化与发布,11.4.1 动画的测试 1在动画编辑环境下测试影片 用户按Enter键可以对动画进行简单的测试，但动画中的影片剪辑元件、按钮元件等交互式效果均不能得到测试。 测试动画得到的动画速度比输出或优化后的动画速度慢，所以动画编辑环境不是用户的首选测试环境。,11.4 动画的测试、优化与发布,11.4.1 动画的测试 2测试动画与场景 测试动画与场景主要通过“控制”菜单实现, 执行“控制”“测试影片”命令，Flash将自动导出当前动画中的所有场景，然后将文件在新窗口中打开。 要测试一个场景的全部内容，执行“控制”“测试场景”命令，Flash仅导出当前动画中的当前场景，然后将文件在新窗口中打开，且在“文件”选项卡中标出当前测试的场景。,11.4 动画的测试、优化与发布,图11-57 “控制”菜单,11.4.2 优化动画文件 Flash自动对动画执行一些优化，例如，它可以在导出时检测重复的形状，在文件中只把它们放置一次，并且把嵌套组合转换成单个组合。 1总体上优化 对于多次出现的元素，使用元件、动画或者其他对象。 只要可能，就要使用补间动画，补间动画与一系列的关键帧相比，占用的文件空间更少。 对于动画序列，要使用影片剪辑而不是图形元件。 限制每个关键帧中的改变的区域，在尽可能小的区域中执行动作。 避免使用动画位图元素，使用位图图像作为背景或者静态元素。 对于声音，尽可能使用MP3这种占用空间最小的声音格式。,11.4 动画的测试、优化与发布,2优化元素和线条 尽量组合元素。 使用层把随动画过程改变的元素和不随动画过程改变的元素分开。 限制特殊线条类型的数量，如虚线、点状线、锯齿状线等，实线所需的内存空间较小，铅笔工具生成的线条比画笔笔触生成的线条所需的内存空间更小。 3优化文本和字体 限制字体和字形的数量，尽量少使用嵌入字体，因为它们会增加文件的大小。 对于“嵌入字体”选项，只选中需要的字符，不要包括所有字体。,11.4 动画的测试、优化与发布,4优化颜色 在元件属性检查器中，使用“颜色”菜单创建一个元件的具有不同颜色的多个实例。 使用混色器来使影片的颜色调色板与浏览器专用的调色板匹配。 尽量少使用渐变色，使用渐变色填充区域比使用纯色填充大概多需要50B空间。 尽量少使用Alpha透明度，它会减慢回放速度。,11.4 动画的测试、优化与发布,11.4.3 动画文件的发布 Flash动画可发布成多种