04第四章 Flash动画-网页设计

第4章 制作Web动画— FlashFlash MX是Macromedia公司的一个的网页交互动画制作工具。与网页中标准 的图像文件GIF和JPG格式不同，用Flash MX制作出来的动画是矢量的，不管怎 样放大、缩小，它还是清晰可见。 用Flash MX制作的文件很小，这样便于在互 联网上传输，而且它采用了流技术，只要下载一部分，就能欣赏动画，而且能 一边播放一边传输送数据。 交互性更是Flash MX动画的迷人之处，可以通过点 击按钮、选择菜单来控制动画的播放。正是有了这些优点，才使flash日益成为 网络多媒体的主流。 本章将通过一些具体的实例，介绍Flash的基本功能及其在网页制作中的应用。

4.1 Flash基础 4.1.1 Flash MX的特点 Flash MX已经成为网络中最常用的动画制作工具，相对于GIF动 画格式，Flash MX动画具有明显优势，主要表现在以下方面： Flash动画使用矢量图像，文件大小要比GIF动画小的多，可以进 行任意比例的缩放而不会失真。 GIF动画只能输出256色，远远不能满足大众对动画图像质量的要 求。Flash输出动画图像为真彩色(224色),更为逼真。 GIF只支持简单的动画，而Flash具有真正的多媒体意义：支持声 音，支持复杂的交互内容。 Flash动画采用先进的“流”式播放技术，即用户可以边下载边观 看，完全适应网络的环境，使用户观看动画无需等待。 Flash独有的ActionScript脚本功能，赋予其强大的功能和灵活性， 使其功能远远超过了一个单纯的动画制作软件。

4.1 Flash基础 4.1.2 Flash 的基本功能 Flash 从1998年的Flash 1.0发布，不断升级，功能也 不断增强，现在已经发展成为一个功能强大的动画制 作平台。它的基本功能包括： 支持矢量动画的制作 支持各种多媒体素材，包括各种图像、声音、视频素材的导入 支持Action Script即脚本编程，允许用户实现复杂的交互控制 动画可以保存为各种形式的动画文件

4.1 Flash基础 4.1.3 Flash 文件操作 Flash具有简单的绘图功能，利用绘图工具可以绘制简 单的矢量图，但绘图并不是Flash的主要功能，一般在 Flash中使用的图形图像都需要从外部导入。 输入和导入的文件类型： 可以直接打开的文件 *.fla 可以导入各种图形图像文件，*.swf文件，*.gif动画文件。 可以mp3、wav、avi、mpg、mov等格式的声音和视频文件做 为一个元件导入。 Ctrl+R 可以导入

4.1 Flash基础 4.1.3 Flash 文件操作 由于Flash并不善于处理位图图像，因此位图一般只作为静态元素 或是背景图像，而不用于制作动画。与位图相比，矢量图具有与 分辨率无关的特性，可以在不同分辨率的输出设备上显示，对其 进行任意缩放都不影

响图形的画质和显示质量，因此常用于制作 动画画面。 在导入了位图后，必须将其转换为矢量图后才能像矢量图一样被 操作和编辑。 相关操作 把位图转换为矢量图 分离位图 编辑位图 设置位图的属性

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.4 Flash绘图工具的操作 选取工具(黑色箭头V),Flash的特点：线和内部的内容可以分别选取， 要同时选取时，一般要框选箭头工具：细部选取工具(白色前头A),相 当于Photoshop中的路径调整工具，可以调整矢量图形的路径。 直线工具(N),可以画直线，画时按住Shift可以画水平或垂直的线，画 完可以用选取工具在属性面板中修改其属性。也可以用直线工具画多边 形，可以画线条。画好后用选取工具进行选取，可以进行颜色、粗细、 线型的修改，而且当两条线交错时，线条可以选一部分，可以将线条连 接起来。双击可以选线条的全部。 套索工具(L),用来进行选取，一般多用于对位图局部区域的选取，在 Flash中，将魔术棒工具、多边形套索集成在一起，在位图进行选取时， 需要将其打散。 钢笔工具(P),和Photoshop中一样，是用来画路径的工具。画好后可以 用细部选取工具进行路径的调整。

4.1 Flash基础 4.1.4 Flash绘图工具的操作 文字工具 椭圆工具和矩形工具 铅笔工具和刷子工具 任意变形工具和填充变形工具

墨水瓶工具和油漆桶工具

4.1 Flash基础 4.1.4 Flash图层操作 在Flash动画和动画中中的元件均可以分层管理。将动 画按照其性质放置在不同的图层是管理动画最常用的 一种方法。Flash支持的图层数目不受限制，在每个图 层上可以包括单独的运动动画、逐帧动画和按钮、位 图、矢量图甚至群组。 可以设定每个图层的名称，修改单个或者全部图层的 显示、锁定属性。 Flash中有三种类型的图层，分别是普通图层、引导层 和遮罩层。

4.1 Flash基础 4.1.5 帧的创建与编辑 帧是动画制作中的一个重要的概念，它是组成 动画的基本单位，一个动画中可以包含多个帧， 在Flash中，一个动画可以由多个图层构成，一 个图层由多个帧构成。 图层和帧共同决定了动画的播放形式与时间。

4.1 Flash基础 4.1.5 帧的创建与编辑 Flash的帧分为关键帧、普通帧、空白关键帧、空

白 帧四种类型。 1.关键帧 关键帧对定义与控制动画的变化起到关键性 的作用。在制作Flash动画时，只有关键帧是可编辑的。 在关键帧中可以放置所有的动画对象，如图形、文字、 群组、实例和位图等，也可以放置声音、动作以及注 释等。 当关键帧中旋转了动画对象后，它的表现状态为一个 黑色的实心圆点。

4.1 Flash基础 4.1.5 帧的创建与编辑 Flash的帧分为关键帧、普通帧、空白关键帧、空白 帧四种类型。 2.空白关键帧 它是一种特殊的关键帧，是没有放置任 何动画对象的关键帧。在动画中插入空关键帧的目的 是清除前面的动画对象，这对于转换动画的场景与角 色具有十分重要的作用。 在时间轴面板中插入空白关键帧之后，它的表现状况 为一个空心的圆点。

4.1 Flash基础 4.1.5 帧的创建与编辑 Flash的帧分为关键帧、普通帧、空白关键帧、空白 帧四种类型。 3.普通帧 它是位于两个关键帧之间的帧，是由系统自动生成的。 用于表示形状或运动等动画中的中间画面。 普通帧在时间轴上表现为灰色的小长方形格子

4.空白帧 空白帧是不可编辑的帧，只有插入帧、关键帧或空白 关键帧后才能进行编辑。实际上，空白帧不是真正的帧，它是 为了便于动画制作而设计的一些用来代表帧的小方块。

4.1 Flash基础 4.1.6元件的概念与应用 元件(symbol)是Flash中可以重复使用的元素。元件创 立后，便添加到元件库(Library)中，从而可以被任 意次使用而不会增减Flash文件的大小。当一个元件被 用于动画中时，便生成了这个元件的一个实例 (Instance),改变动画中的实例的不会改变其对应的 元件。使用元件和实例具有以下一些优点： 使动画的大小适合网络下载播放； 通过修改一个元件达到改变这个元件所有实例的效果，方便更 新； 将所有元件都集中在同一窗口，便于分类管理。

4.1.6元件的概念与应用 三种基本元件： 图形(Graphic)用来存放静态的图形或者动画， 但动画中的声音和用户交互的元素都将失效。

按钮(Button)是动画与用户动态交互的，可以 为按钮指定任何鼠标事件。 影片剪辑(Movie Clip)用来存放包含交互元素 的动画效果。

4.1.6元件的概念与应用 建立元件的二种方式 复制元件 内建元件库、元件库的操作

4.2 简单动画的形成 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 简单动画的形成 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 遮罩动画： 要看到的东西放下层，遮挡物放上层，同时锁定两 个图层。

遮罩动画：上层元件的移动、下层元件的移动。 遮罩动画：文字动画、彩虹字动画、文字中图形的 变化。

遮罩动画：位图的圆角化修饰。

本文来源：https://www.bwwdw.com/article/wm01.html