1、第4章 制作Web动画Flash,Flash MX是Macromedia公司的一个的网页交互动画制作工具。与网页中标准的图像文件GIF和JPG格式不同，用Flash MX制作出来的动画是矢量的，不管怎样放大、缩小，它还是清晰可见。 用Flash MX制作的文件很小，这样便于在互联网上传输，而且它采用了流技术，只要下载一部分，就能欣赏动画，而且能一边播放一边传输送数据。 交互性更是Flash MX动画的迷人之处，可以通过点击按钮、选择菜单来控制动画的播放。正是有了这些优点，才使flash日益成为网络多媒体的主流。 本章将通过一些具体的实例，介绍Flash的基本功能及其在网页制作中的应用。,4.1
2、 Flash基础,4.1.1 Flash MX的特点 Flash MX已经成为网络中最常用的动画制作工具，相对于GIF动画格式，Flash MX动画具有明显优势，主要表现在以下方面： Flash动画使用矢量图像，文件大小要比GIF动画小的多，可以进行任意比例的缩放而不会失真。 GIF动画只能输出256色，远远不能满足大众对动画图像质量的要求。Flash输出动画图像为真彩色（224色），更为逼真。 GIF只支持简单的动画，而Flash具有真正的多媒体意义：支持声音，支持复杂的交互内容。 Flash动画采用先进的“流”式播放技术，即用户可以边下载边观看，完全适应网络的环境，使用户观看动画无需等待。
3、 Flash独有的ActionScript脚本功能，赋予其强大的功能和灵活性，使其功能远远超过了一个单纯的动画制作软件。,4.1 Flash基础,4.1.2 Flash 的基本功能 Flash 从1998年的Flash 1.0发布，不断升级，功能也不断增强，现在已经发展成为一个功能强大的动画制作平台。它的基本功能包括： 支持矢量动画的制作 支持各种多媒体素材，包括各种图像、声音、视频素材的导入 支持Action Script即脚本编程，允许用户实现复杂的交互控制 动画可以保存为各种形式的动画文件,4.1 Flash基础,4.1.3 Flash 文件操作 Flash具有简单的绘图功能，利用绘图工
4、具可以绘制简单的矢量图，但绘图并不是Flash的主要功能，一般在Flash中使用的图形图像都需要从外部导入。 输入和导入的文件类型： 可以直接打开的文件 *.fla 可以导入各种图形图像文件，*.swf文件，*.gif动画文件。 可以mp3、wav、avi、mpg、mov等格式的声音和视频文件做为一个元件导入。 Ctrl+R 可以导入,4.1 Flash基础,4.1.3 Flash 文件操作 由于Flash并不善于处理位图图像，因此位图一般只作为静态元素或是背景图像，而不用于制作动画。与位图相比，矢量图具有与分辨率无关的特性，可以在不同分辨率的输出设备上显示，对其进行任意缩放都不影响图形的画质
5、和显示质量，因此常用于制作动画画面。 在导入了位图后，必须将其转换为矢量图后才能像矢量图一样被操作和编辑。 相关操作 把位图转换为矢量图 分离位图 编辑位图 设置位图的属性,4.1 Flash基础,4.1.3 Flash 文件操作 动画文件输出和测试发布 选择File|Save命令将保存Flash源文件格式的文件，其扩展名为*.fla。 动画导出的文件格式主要有*.swf、*.avi、*.mov、*.gif。 如果要在网络上使用Flash动画，可以执行Flie|Publish命令输出动画。 执行菜单命令Control|Test Movie可以测试Flash动画。,4.1 Flash基础,4.1
6、.4 Flash绘图工具的操作 选取工具（黑色箭头V），Flash的特点：线和内部的内容可以分别选取，要同时选取时，一般要框选箭头工具：细部选取工具（白色前头A），相当于Photoshop中的路径调整工具，可以调整矢量图形的路径。 直线工具（N)，可以画直线，画时按住Shift可以画水平或垂直的线，画完可以用选取工具在属性面板中修改其属性。也可以用直线工具画多边形，可以画线条。画好后用选取工具进行选取，可以进行颜色、粗细、线型的修改，而且当两条线交错时，线条可以选一部分，可以将线条连接起来。双击可以选线条的全部。 套索工具（L)，用来进行选取，一般多用于对位图局部区域的选取，在Flash中，将
7、魔术棒工具、多边形套索集成在一起，在位图进行选取时，需要将其打散。 钢笔工具（P)，和Photoshop中一样，是用来画路径的工具。画好后可以用细部选取工具进行路径的调整。,4.1 Flash基础,4.1.4 Flash绘图工具的操作 文字工具 椭圆工具和矩形工具 铅笔工具和刷子工具 任意变形工具和填充变形工具 墨水瓶工具和油漆桶工具,4.1 Flash基础,4.1.4 Flash图层操作 在Flash动画和动画中中的元件均可以分层管理。将动画按照其性质放置在不同的图层是管理动画最常用的一种方法。Flash支持的图层数目不受限制，在每个图层上可以包括单独的运动动画、逐帧动画和按钮、位图、矢量图
8、甚至群组。 可以设定每个图层的名称，修改单个或者全部图层的显示、锁定属性。 Flash中有三种类型的图层，分别是普通图层、引导层和遮罩层。,4.1 Flash基础,4.1.5 帧的创建与编辑帧是动画制作中的一个重要的概念，它是组成动画的基本单位，一个动画中可以包含多个帧，在Flash中，一个动画可以由多个图层构成，一个图层由多个帧构成。 图层和帧共同决定了动画的播放形式与时间。,4.1 Flash基础,4.1.5 帧的创建与编辑Flash的帧分为关键帧、普通帧、空白关键帧、空白帧四种类型。 1.关键帧 关键帧对定义与控制动画的变化起到关键性的作用。在制作Flash动画时，只有关键帧是可编辑的。
9、在关键帧中可以放置所有的动画对象，如图形、文字、群组、实例和位图等，也可以放置声音、动作以及注释等。 当关键帧中旋转了动画对象后，它的表现状态为一个黑色的实心圆点。,4.1 Flash基础,4.1.5 帧的创建与编辑Flash的帧分为关键帧、普通帧、空白关键帧、空白帧四种类型。 2.空白关键帧 它是一种特殊的关键帧，是没有放置任何动画对象的关键帧。在动画中插入空关键帧的目的是清除前面的动画对象，这对于转换动画的场景与角色具有十分重要的作用。 在时间轴面板中插入空白关键帧之后，它的表现状况为一个空心的圆点。,4.1 Flash基础,4.1.5 帧的创建与编辑Flash的帧分为关键帧、普通帧、空白
10、关键帧、空白帧四种类型。 3.普通帧 它是位于两个关键帧之间的帧，是由系统自动生成的。用于表示形状或运动等动画中的中间画面。 普通帧在时间轴上表现为灰色的小长方形格子 4.空白帧 空白帧是不可编辑的帧，只有插入帧、关键帧或空白关键帧后才能进行编辑。实际上，空白帧不是真正的帧，它是为了便于动画制作而设计的一些用来代表帧的小方块。,4.1 Flash基础,4.1.6元件的概念与应用 元件（symbol)是Flash中可以重复使用的元素。元件创立后，便添加到元件库（Library）中，从而可以被任意次使用而不会增减Flash文件的大小。当一个元件被用于动画中时，便生成了这个元件的一个实例（Insta
11、nce），改变动画中的实例的不会改变其对应的元件。使用元件和实例具有以下一些优点： 使动画的大小适合网络下载播放； 通过修改一个元件达到改变这个元件所有实例的效果，方便更新； 将所有元件都集中在同一窗口，便于分类管理。,4.1.6元件的概念与应用,三种基本元件： 图形（Graphic)用来存放静态的图形或者动画，但动画中的声音和用户交互的元素都将失效。 按钮（Button)是动画与用户动态交互的，可以为按钮指定任何鼠标事件。 影片剪辑（Movie Clip)用来存放包含交互元素的动画效果。,4.1.6元件的概念与应用,建立元件的二种方式 复制元件 内建元件库、元件库的操作,4.2 简单动画的形
12、成,4.2.1 Flash动画的类型 逐帧动画（frame-by-frame Animation) 运动动画(Motion Tweening) 形变动画(Shape Tweening) 如果要做运动动画，必须是群组的，如果要做形变动画，必须是打散的。 运动动画的三个要素：两个关键帧，然后再添加运动动画，不同的起始和结束点。 运动动画的五种变化：一是位置的移动；二是放大缩小动画；三是旋转的变化；四是颜色的变化；五是透明度的变化。,4.2 简单动画的形成,4.2.2 Flash工作的五个标准程序 1.设定动画的大小； 2.在库中建元件（演员）； 3.编辑时间轴； 4.保存； 5.发布。,4.2 简
13、单动画的形成,4.2.3 导引线动画： （1）随意导引线： 一般用铅笔工具画导引线，然后把起点和终点都“吸”导引线上。 （2）园形或方形的导引线，并且要能看到圆或方。 （3）弹跳路径的导引线动画，画圆和接线的技巧。 （4）文字造型路径动画。 （5）技巧：A.不同的元件使用同一导引线动画。B.换成其他的组件表演。C.元件跟着路径方向旋转。,4.2 简单动画的形成,4.2.4 Flash形状动画 三要素：（1）前后两个关键帧，元件不一样。（2）打散元件（必须）打散和群组元件。（3）添加形状补间。 形状动画的提示点的添加,4.2 简单动画的形成,4.2.5 遮罩动画： 要看到的东西放下层，遮挡物放上
14、层，同时锁定两个图层。 遮罩动画：上层元件的移动、下层元件的移动。 遮罩动画：文字动画、彩虹字动画、文字中图形的变化。 遮罩动画：位图的圆角化修饰。,4.2 简单动画的形成,4.2.5 Flash文字动画 文字的输入 文字的打散 打散至图层 渐变色文字、系统内图形字符的使用（webdings、windings）、下载图形字体,4.3 音频导入,4.3.3 音频的导入与编辑控制 1.导入声音文件 2.检查声音文件的属性 3.使用声音文件 4.声音重复播放及效果设置 5.给按钮添加声音,4.4 交互功能的实现,Flash可以使动作具有交互功能，交互功能是通过其ActionScript脚本语言来实现
15、的。 ActionScript是一种面向对象的编程语言，与其他程序语言一样，有自己的语法，关键字、也有运算符，允许有变量。它包含内置的对象和功能，同时允许用户自己创建各种对象和功能。 在Flash中，用户通过动作（Actions)面板来编写简单的ActionScript，实现交互动作。,4.4 交互功能的实现,4.4.1 动作的概念 动作是ActionScript中的一种陈述，用来指示一个Flash动画播放过程中需要执行的一个交互动作。 动作必须附属于时间轴上的某一个关键帧、影片剪辑、按钮。 可以通过动作面板来添加动作。,4.4 交互功能的实现,4.4.2 动作的概念 在时间轴上的命令在关键帧上。 Stop动作、goto（从某一帧跳到某一帧）动作；播放按钮（Play） 要被控制，必须是MC（要有实体名称），要和用户作互动，必须是按钮。自动发生的动作要设在时间轴上。 S1._x=s1._x+10(通过按钮控制影片的位置。 S1._xscale=S1._xscale*1.05 Fscommand (全屏幕）,4.4 交互功能的实现,4.4.3 按钮的制作 4.4.4 为影片添加动作,思考题,相对与传统的GIF动画格式，Flash动画有什么优势？ Flash中的时间轴主要由哪些部分组成，它们各自的作用是什么？,
