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

《04第四章 Flash动画-网页设计.ppt》由会员分享，可在线阅读，更多相关《04第四章 Flash动画-网页设计.ppt（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第4章章 制作制作Web动画动画Flash Flash MX Flash MX是是MacromediaMacromedia公司的一个的网页交互动画制作工具。与网页中标准公司的一个的网页交互动画制作工具。与网页中标准的图像文件的图像文件GIFGIF和和JPGJPG格式不同，用格式不同，用Flash MXFlash MX制作出来的动画是矢量的，不管怎制作出来的动画是矢量的，不管怎样放大、缩小，它还是清晰可见。样放大、缩小，它还是清晰可见。用用Flash MXFlash MX制作的文件很小，这样便于在互制作的文件很小，这样便于在互联网上传输，而且它采用了流技术，只要下载一部分，就能欣赏动画，而且能

2、联网上传输，而且它采用了流技术，只要下载一部分，就能欣赏动画，而且能一边播放一边传输送数据。一边播放一边传输送数据。交互性更是交互性更是Flash MXFlash MX动画的迷人之处，可以通过点动画的迷人之处，可以通过点击按钮、选择菜单来控制动画的播放。正是有了这些优点，才使击按钮、选择菜单来控制动画的播放。正是有了这些优点，才使flashflash日益成为日益成为网络多媒体的主流。网络多媒体的主流。本章将通过一些具体的实例，介绍本章将通过一些具体的实例，介绍FlashFlash的基本功能及其在网页制作中的应用。的基本功能及其在网页制作中的应用。4.1 Flash基础基础4.1.1 Flash

3、 MX4.1.1 Flash MX的特点的特点vvFlash MXFlash MX已经成为网络中最常用的动画制作工具，相对于已经成为网络中最常用的动画制作工具，相对于GIFGIF动动画格式，画格式，Flash MXFlash MX动画具有明显优势，主要表现在以下方面：动画具有明显优势，主要表现在以下方面：vvFlashFlash动画使用矢量图像，文件大小要比动画使用矢量图像，文件大小要比GIFGIF动画小的多，可以进动画小的多，可以进行任意比例的缩放而不会失真。行任意比例的缩放而不会失真。vvGIFGIF动画只能输出动画只能输出256256色，远远不能满足大众对动画图像质量的要色，远远不能满足

4、大众对动画图像质量的要求。求。FlashFlash输出动画图像为真彩色（输出动画图像为真彩色（224224色），更为逼真。色），更为逼真。vvGIFGIF只支持简单的动画，而只支持简单的动画，而FlashFlash具有真正的多媒体意义：支持声具有真正的多媒体意义：支持声音，支持复杂的交互内容。音，支持复杂的交互内容。vvFlashFlash动画采用先进的动画采用先进的“流流”式播放技术，即用户可以边下载边观式播放技术，即用户可以边下载边观看，完全适应网络的环境，使用户观看动画无需等待。看，完全适应网络的环境，使用户观看动画无需等待。vvFlashFlash独有的独有的ActionScriptA

5、ctionScript脚本功能，赋予其强大的功能和灵活性，脚本功能，赋予其强大的功能和灵活性，使其功能远远超过了一个单纯的动画制作软件。使其功能远远超过了一个单纯的动画制作软件。4.1 Flash基础基础4.1.2 Flash 4.1.2 Flash 的基本功能的基本功能vvFlash Flash 从从19981998年的年的Flash 1.0Flash 1.0发布，不断升级，功能也发布，不断升级，功能也不断增强，现在已经发展成为一个功能强大的动画制不断增强，现在已经发展成为一个功能强大的动画制作平台。它的基本功能包括：作平台。它的基本功能包括：rr支持矢量动画的制作支持矢量动画的制作rr支持

6、各种多媒体素材，包括各种图像、声音、视频素材的导入支持各种多媒体素材，包括各种图像、声音、视频素材的导入rr支持支持Action ScriptAction Script即脚本编程，允许用户实现复杂的交互控制即脚本编程，允许用户实现复杂的交互控制rr动画可以保存为各种形式的动画文件动画可以保存为各种形式的动画文件4.1 Flash基础基础4.1.3 Flash 4.1.3 Flash 文件操作文件操作vvFlashFlash具有简单的绘图功能，利用绘图工具可以绘制简具有简单的绘图功能，利用绘图工具可以绘制简单的矢量图，但绘图并不是单的矢量图，但绘图并不是FlashFlash的主要功能，一般在的主

7、要功能，一般在FlashFlash中使用的图形图像都需要从外部导入。中使用的图形图像都需要从外部导入。vv输入和导入的文件类型：输入和导入的文件类型：rr可以直接打开的文件可以直接打开的文件*.flaflarr可以导入各种图形图像文件，可以导入各种图形图像文件，*.swfswf文件，文件，*.gif.gif动画文件。动画文件。rr可以可以mp3mp3、wavwav、aviavi、mpgmpg、movmov等格式的声音和视频文件做等格式的声音和视频文件做为一个元件导入。为一个元件导入。rrCtrl+RCtrl+R可以导入可以导入4.1 Flash基础基础4.1.3 Flash 4.1.3 Fla

8、sh 文件操作文件操作vv由于由于FlashFlash并不善于处理位图图像，因此位图一般只作为静态元素并不善于处理位图图像，因此位图一般只作为静态元素或是背景图像，而不用于制作动画。与位图相比，矢量图具有与或是背景图像，而不用于制作动画。与位图相比，矢量图具有与分辨率无关的特性，可以在不同分辨率的输出设备上显示，对其分辨率无关的特性，可以在不同分辨率的输出设备上显示，对其进行任意缩放都不影响图形的画质和显示质量，因此常用于制作进行任意缩放都不影响图形的画质和显示质量，因此常用于制作动画画面。动画画面。vv在导入了位图后，必须将其转换为矢量图后才能像矢量图一样被在导入了位图后，必须将其转换为矢量

9、图后才能像矢量图一样被操作和编辑。操作和编辑。rr相关操作相关操作把位图转换为矢量图把位图转换为矢量图分离位图分离位图编辑位图编辑位图设置位图的属性设置位图的属性4.1 Flash基础基础4.1.3 Flash 4.1.3 Flash 文件操作文件操作vv动画文件输出和测试发布动画文件输出和测试发布rr选择选择File|SaveFile|Save命令将保存命令将保存FlashFlash源文件格式的文件，其扩展名源文件格式的文件，其扩展名为为*.flafla。rr动画导出的文件格式主要有动画导出的文件格式主要有*.swfswf、*.aviavi、*.movmov、*.gif.gif。rr如果要在

10、网络上使用如果要在网络上使用FlashFlash动画，可以执行动画，可以执行Flie|PublishFlie|Publish命令输命令输出动画。出动画。rr执行菜单命令执行菜单命令Control|TestControl|Test Movie Movie可以测试可以测试FlashFlash动画。动画。4.1 Flash基础基础4.1.4 Flash4.1.4 Flash绘图工具的操作绘图工具的操作vv选取工具（黑色箭头选取工具（黑色箭头V V），），FlashFlash的特点：线和内部的内容可以分别选取，的特点：线和内部的内容可以分别选取，要同时选取时，一般要框选箭头工具：细部选取工具（白色前头

11、要同时选取时，一般要框选箭头工具：细部选取工具（白色前头A A），相），相当于当于PhotoshopPhotoshop中的路径调整工具，可以调整矢量图形的路径。中的路径调整工具，可以调整矢量图形的路径。vv直线工具（直线工具（N)N)，可以画直线，画时按住，可以画直线，画时按住ShiftShift可以画水平或垂直的线，画可以画水平或垂直的线，画完可以用选取工具在属性面板中修改其属性。也可以用直线工具画多边完可以用选取工具在属性面板中修改其属性。也可以用直线工具画多边形，可以画线条。画好后用选取工具进行选取，可以进行颜色、粗细、形，可以画线条。画好后用选取工具进行选取，可以进行颜色、粗细、线型的

12、修改，而且当两条线交错时，线条可以选一部分，可以将线条连线型的修改，而且当两条线交错时，线条可以选一部分，可以将线条连接起来。双击可以选线条的全部。接起来。双击可以选线条的全部。vv套索工具（套索工具（L)L)，用来进行选取，一般多用于对位图局部区域的选取，在，用来进行选取，一般多用于对位图局部区域的选取，在FlashFlash中，将魔术棒工具、多边形套索集成在一起，在位图进行选取时，中，将魔术棒工具、多边形套索集成在一起，在位图进行选取时，需要将其打散。需要将其打散。vv钢笔工具（钢笔工具（P)P)，和，和PhotoshopPhotoshop中一样，是用来画路径的工具。画好后可以中一样，是用

13、来画路径的工具。画好后可以用细部选取工具进行路径的调整。用细部选取工具进行路径的调整。4.1 Flash基础基础4.1.4 Flash绘图工具的操作v文字工具文字工具v椭圆工具和矩形工具椭圆工具和矩形工具v铅笔工具和刷子工具铅笔工具和刷子工具v任意变形工具和填充变形工具任意变形工具和填充变形工具v墨水瓶工具和油漆桶工具墨水瓶工具和油漆桶工具4.1 Flash基础基础4.1.4 Flash4.1.4 Flash图层操作图层操作vv在在FlashFlash动画和动画中中的元件均可以分层管理。将动动画和动画中中的元件均可以分层管理。将动画按照其性质放置在不同的图层是管理动画最常用的画按照其性质放置在

14、不同的图层是管理动画最常用的一种方法。一种方法。FlashFlash支持的图层数目不受限制，在每个图支持的图层数目不受限制，在每个图层上可以包括单独的运动动画、逐帧动画和按钮、位层上可以包括单独的运动动画、逐帧动画和按钮、位图、矢量图甚至群组。图、矢量图甚至群组。vv可以设定每个图层的名称，修改单个或者全部图层的可以设定每个图层的名称，修改单个或者全部图层的显示、锁定属性。显示、锁定属性。vvFlashFlash中有三种类型的图层，分别是普通图层、引导层中有三种类型的图层，分别是普通图层、引导层和遮罩层。和遮罩层。4.1 Flash基础4.1.5 帧的创建与编辑v帧是动画制作中的一个重要的概念

15、，它是组成帧是动画制作中的一个重要的概念，它是组成动画的基本单位，一个动画中可以包含多个帧，动画的基本单位，一个动画中可以包含多个帧，在在FlashFlash中，一个动画可以由多个图层构成，一中，一个动画可以由多个图层构成，一个图层由多个帧构成。个图层由多个帧构成。v图层和帧共同决定了动画的播放形式与时间。图层和帧共同决定了动画的播放形式与时间。4.1 Flash基础4.1.5 4.1.5 帧的创建与编辑帧的创建与编辑vvFlashFlash的帧分为关键帧、普通帧、空白关键帧、空白帧的帧分为关键帧、普通帧、空白关键帧、空白帧四种类型。四种类型。vv1.1.关键帧关键帧 关键帧对定义与控制动画的

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

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

18、的创建与编辑帧的创建与编辑vvFlashFlash的帧分为关键帧、普通帧、空白关键帧、空白帧的帧分为关键帧、普通帧、空白关键帧、空白帧四种类型。四种类型。rr3.3.普通帧普通帧 它是位于两个关键帧之间的帧，是由系统自动生成的。它是位于两个关键帧之间的帧，是由系统自动生成的。用于表示形状或运动等动画中的中间画面。用于表示形状或运动等动画中的中间画面。普通帧在时间轴上表现为灰色的小长方形格子普通帧在时间轴上表现为灰色的小长方形格子rr4.4.空白帧空白帧 空白帧是不可编辑的帧，只有插入帧、关键帧或空白空白帧是不可编辑的帧，只有插入帧、关键帧或空白关键帧后才能进行编辑。实际上，空白帧不是真正的帧，

19、它是关键帧后才能进行编辑。实际上，空白帧不是真正的帧，它是为了便于动画制作而设计的一些用来代表帧的小方块。为了便于动画制作而设计的一些用来代表帧的小方块。4.1 Flash基础基础4.1.64.1.6元件的概念与应用元件的概念与应用vv元件（元件（symbol)symbol)是是FlashFlash中可以重复使用的元素。元件创中可以重复使用的元素。元件创立后，便添加到元件库（立后，便添加到元件库（LibraryLibrary）中，从而可以被任）中，从而可以被任意次使用而不会增减意次使用而不会增减FlashFlash文件的大小。当一个元件被文件的大小。当一个元件被用于动画中时，便生成了这个元件的

20、一个实例用于动画中时，便生成了这个元件的一个实例（InstanceInstance），改变动画中的实例的不会改变其对应的），改变动画中的实例的不会改变其对应的元件。使用元件和实例具有以下一些优点：元件。使用元件和实例具有以下一些优点：rr使动画的大小适合网络下载播放；使动画的大小适合网络下载播放；rr通过修改一个元件达到改变这个元件所有实例的效果，方便更通过修改一个元件达到改变这个元件所有实例的效果，方便更新；新；rr将所有元件都集中在同一窗口，便于分类管理。将所有元件都集中在同一窗口，便于分类管理。4.1.6元件的概念与应用三种基本元件：v图形（图形（Graphic)Graphic)用来存放

21、静态的图形或者动画，用来存放静态的图形或者动画，但动画中的声音和用户交互的元素都将失效。但动画中的声音和用户交互的元素都将失效。v按钮（按钮（Button)Button)是动画与用户动态交互的，可以是动画与用户动态交互的，可以为按钮指定任何鼠标事件。为按钮指定任何鼠标事件。v影片剪辑（影片剪辑（Movie Clip)Movie Clip)用来存放包含交互元素用来存放包含交互元素的动画效果。的动画效果。4.1.6元件的概念与应用建立元件的二种方式复制元件内建元件库、元件库的操作4.2 简单动画的形成4.2.14.2.1FlashFlash动画的类型动画的类型vv逐帧动画（逐帧动画（frame-b

22、y-frame Animation)frame-by-frame Animation)vv运动动画运动动画(Motion(Motion TweeningTweening)vv形变动画形变动画(Shape(Shape TweeningTweening)rr如果要做运动动画，必须是群组的，如果要做形变动画，必须如果要做运动动画，必须是群组的，如果要做形变动画，必须是打散的。是打散的。rr运动动画的三个要素：两个关键帧，然后再添加运动动画，不运动动画的三个要素：两个关键帧，然后再添加运动动画，不同的起始和结束点。同的起始和结束点。rr运动动画的五种变化：一是位置的移动；二是放大缩小动画；运动动画的五

23、种变化：一是位置的移动；二是放大缩小动画；三是旋转的变化；四是颜色的变化；五是透明度的变化。三是旋转的变化；四是颜色的变化；五是透明度的变化。4.2 简单动画的形成4.2.2 Flash工作的五个标准程序rr1.1.设定动画的大小；设定动画的大小；rr2.2.在库中建元件（演员）；在库中建元件（演员）；rr3.3.编辑时间轴；编辑时间轴；rr4.4.保存；保存；rr5.5.发布。发布。4.2 简单动画的形成4.2.34.2.3导引线动画：导引线动画：（1 1）随意导引线：）随意导引线：一般用铅笔工具画导引线，然后把起点和终点都一般用铅笔工具画导引线，然后把起点和终点都“吸吸”导引线上。导引线上

24、。（2 2）园形或方形的导引线，并且要能看到圆或方。）园形或方形的导引线，并且要能看到圆或方。（3 3）弹跳路径的导引线动画，画圆和接线的技巧。）弹跳路径的导引线动画，画圆和接线的技巧。（4 4）文字造型路径动画。）文字造型路径动画。（5 5）技巧：）技巧：A.A.不同的元件使用同一导引线动画。不同的元件使用同一导引线动画。B.B.换成其他的组件表演。换成其他的组件表演。C.C.元件跟着路径方向旋转。元件跟着路径方向旋转。4.2 简单动画的形成4.2.4Flash形状动画三要素：（三要素：（1 1）前后两个关键帧，元件不一样。）前后两个关键帧，元件不一样。（2 2）打散元件（必须）打散元件（必

25、须）打散和群组元件。打散和群组元件。（3 3）添加形状补间。）添加形状补间。v形状动画的提示点的添加形状动画的提示点的添加4.2 简单动画的形成4.2.5遮罩动画：rr要看到的东西放下层，遮挡物放上层，同时锁定两要看到的东西放下层，遮挡物放上层，同时锁定两个图层。个图层。rr遮罩动画：上层元件的移动、下层元件的移动。遮罩动画：上层元件的移动、下层元件的移动。rr遮罩动画：文字动画、彩虹字动画、文字中图形的遮罩动画：文字动画、彩虹字动画、文字中图形的变化。变化。rr遮罩动画：位图的圆角化修饰。遮罩动画：位图的圆角化修饰。4.2 简单动画的形成4.2.5Flash文字动画rr文字的输入文字的输入r

26、r文字的打散文字的打散rr打散至图层打散至图层rr渐变色文字、系统内图形字符的使用（渐变色文字、系统内图形字符的使用（webdingswebdings、windingswindings）、下载图形字体）、下载图形字体4.3 音频导入4.3.3 音频的导入与编辑控制rr1.1.导入声音文件导入声音文件rr2.2.检查声音文件的属性检查声音文件的属性rr3.3.使用声音文件使用声音文件rr4.4.声音重复播放及效果设置声音重复播放及效果设置rr5.5.给按钮添加声音给按钮添加声音4.4 交互功能的实现vFlashFlash可以使动作具有交互功能，交互功能是通可以使动作具有交互功能，交互功能是通过其

27、过其ActionScriptActionScript脚本语言来实现的。脚本语言来实现的。vActionScriptActionScript是一种面向对象的编程语言，与其是一种面向对象的编程语言，与其他程序语言一样，有自己的语法，关键字、也他程序语言一样，有自己的语法，关键字、也有运算符，允许有变量。它包含内置的对象和有运算符，允许有变量。它包含内置的对象和功能，同时允许用户自己创建各种对象和功能。功能，同时允许用户自己创建各种对象和功能。v在在FlashFlash中，用户通过动作（中，用户通过动作（Actions)Actions)面板来编面板来编写简单的写简单的ActionScriptActi

28、onScript，实现交互动作。，实现交互动作。4.4 交互功能的实现4.4.1动作的概念v动作是动作是ActionScriptActionScript中的一种陈述，用来指示一中的一种陈述，用来指示一个个FlashFlash动画播放过程中需要执行的一个交互动动画播放过程中需要执行的一个交互动作。作。v动作必须附属于时间轴上的某一个关键帧、影动作必须附属于时间轴上的某一个关键帧、影片剪辑、按钮。片剪辑、按钮。v可以通过动作面板来添加动作。可以通过动作面板来添加动作。4.4 交互功能的实现4.4.2 4.4.2 动作的概念动作的概念vv在时间轴上的命令在关键帧上。在时间轴上的命令在关键帧上。vvS

29、topStop动作、动作、gotogoto（从某一帧跳到某一帧）动作；播放（从某一帧跳到某一帧）动作；播放按钮（按钮（PlayPlay）vv要被控制，必须是要被控制，必须是MCMC（要有实体名称），要和用户作（要有实体名称），要和用户作互动，必须是按钮。自动发生的动作要设在时间轴上。互动，必须是按钮。自动发生的动作要设在时间轴上。vvS1._x=s1._x+10(S1._x=s1._x+10(通过按钮控制影片的位置。通过按钮控制影片的位置。vvS1._xscale=S1._xscale=S1._xscaleS1._xscale*1.05*1.05vvFscommandFscommand(全屏幕）全屏幕）4.4 交互功能的实现4.4.3 按钮的制作4.4.4 为影片添加动作思考题相对与传统的GIF动画格式，Flash动画有什么优势？Flash中的时间轴主要由哪些部分组成，它们各自的作用是什么？