第四章-Flash动画网页设计课件

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