第3章网页动画制作.ppt

《第3章网页动画制作.ppt》由会员分享，可在线阅读，更多相关《第3章网页动画制作.ppt（87页珍藏版）》请在第壹文秘上搜索。

1、多媒体网页设计教程多媒体网页设计教程第第3章章 网页动画制作网页动画制作多媒体网页设计教程多媒体网页设计教程内容概要Flash的基本概念与术语1Flash的界面2简单的Flash动画3多媒体网页设计教程多媒体网页设计教程Flash的启动界面舞台主工具栏时间轴多媒体网页设计教程多媒体网页设计教程帧vFlash的动画是由帧组成，的动画是由帧组成，“帧帧”指的是每一个时指的是每一个时刻该层所示画面的状态。在刻该层所示画面的状态。在Flash中动画制作中有中动画制作中有三种重要的帧：空白帧、关键帧和空白关键帧。三种重要的帧：空白帧、关键帧和空白关键帧。多媒体网页设计教程多媒体网页设计教程关键帧v关键帧

2、是这样一个帧：您在其中定义了对动画的对关键帧是这样一个帧：您在其中定义了对动画的对象属性所做的更改，或者包含了象属性所做的更改，或者包含了 ActionScript 代码以控制文档的某些方面。代码以控制文档的某些方面。Flash 可以在您定可以在您定义的关键帧之间补间或自动填充帧，从而生成流畅义的关键帧之间补间或自动填充帧，从而生成流畅的动画。因为关键帧可以使您不用画出每个帧就可的动画。因为关键帧可以使您不用画出每个帧就可以生成动画，所以使您能够更轻松地创建动画。可以生成动画，所以使您能够更轻松地创建动画。可以通过在时间轴中拖动关键帧来轻松更改补间动画以通过在时间轴中拖动关键帧来轻松更改补间动

3、画的长度。的长度。多媒体网页设计教程多媒体网页设计教程普通帧v普通帧只能将关键帧的状态进行延续，一般是用普通帧只能将关键帧的状态进行延续，一般是用来将元素保持在场景中。而过渡帧是将过渡帧前来将元素保持在场景中。而过渡帧是将过渡帧前后的两个关键帧进行计算得到，它所包含的元素后的两个关键帧进行计算得到，它所包含的元素属性的变化是计算得来的。属性的变化是计算得来的。多媒体网页设计教程多媒体网页设计教程图层v 图层就像透明的幻灯胶片一样，在舞台上一层层地向上叠图层就像透明的幻灯胶片一样，在舞台上一层层地向上叠加。图层可以帮助您组织文档中的插图。可以在图层上绘加。图层可以帮助您组织文档中的插图。可以在图

4、层上绘制和编辑对象，而不会影响其它图层上的对象。如果一个制和编辑对象，而不会影响其它图层上的对象。如果一个图层上没有内容，那么就可以透过它看到下面的图层。图层上没有内容，那么就可以透过它看到下面的图层。v 要绘制、上色或者对图层或文件夹进行修改，需要在时间要绘制、上色或者对图层或文件夹进行修改，需要在时间轴中选择该图层以激活它。时间轴中图层或文件夹名称旁轴中选择该图层以激活它。时间轴中图层或文件夹名称旁边的铅笔图标表示该图层或文件夹处于活动状态。一次只边的铅笔图标表示该图层或文件夹处于活动状态。一次只能有一个图层处于活动状态（尽管一次可以选择多个图能有一个图层处于活动状态（尽管一次可以选择多个

5、图层）。层）。多媒体网页设计教程多媒体网页设计教程时间轴v时间轴，它是，它是 Flash 中的一个位置，用于确定中的一个位置，用于确定 Flash 应何时将特定媒体对象显示在舞台上。时应何时将特定媒体对象显示在舞台上。时间轴类似于一个时间从左向右推移的电子表格，它间轴类似于一个时间从左向右推移的电子表格，它用列表示时间，用行表示图层。在舞台上，较高图用列表示时间，用行表示图层。在舞台上，较高图层中的内容显示在较低图层中的内容的上面。层中的内容显示在较低图层中的内容的上面。多媒体网页设计教程多媒体网页设计教程时间轴v时间轴用于组织和控制文档内容在一定时间内播放时间轴用于组织和控制文档内容在一定时

6、间内播放的图层数和帧数。的图层数和帧数。v时间轴顶部的时间轴标题指示帧编号。播放头指示时间轴顶部的时间轴标题指示帧编号。播放头指示当前在舞台中显示的帧。当前在舞台中显示的帧。v时间轴状态显示在时间轴的底部，它指示所选的帧时间轴状态显示在时间轴的底部，它指示所选的帧编号、当前帧频以及到当前帧为止的运行时间。编号、当前帧频以及到当前帧为止的运行时间。多媒体网页设计教程多媒体网页设计教程舞台v舞台是您在创建舞台是您在创建 Flash 文档时放置图形内容的矩文档时放置图形内容的矩形区域，这些图形内容包括矢量插图、文本框、按形区域，这些图形内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑，诸如此

7、类。钮、导入的位图图形或视频剪辑，诸如此类。Flash 创作环境中的舞台相当于创作环境中的舞台相当于 Macromedia Flash Player 或或 Web 浏览器窗口中在回放期浏览器窗口中在回放期间显示间显示 Flash 文档的矩形空间。您可以在工作时文档的矩形空间。您可以在工作时放大和缩小以更改舞台的视图。放大和缩小以更改舞台的视图。多媒体网页设计教程多媒体网页设计教程“库”面板（图符库）v库库面板是存储和组织在面板是存储和组织在 Flash 中中创建的各种元件的地方，它还用于创建的各种元件的地方，它还用于存储和组织导入的文件，包括位图存储和组织导入的文件，包括位图图形、声音文件和视

8、频剪辑。图形、声音文件和视频剪辑。库库面板使您可以组织文件夹中的库项面板使您可以组织文件夹中的库项目，查看项目在文档中使用的频率，目，查看项目在文档中使用的频率，并按类型对项目排序。并按类型对项目排序。多媒体网页设计教程多媒体网页设计教程元件v动画设计时可以将相对独立的部分制成元件（符号）动画设计时可以将相对独立的部分制成元件（符号）存放在元件库中，需要使用时再从元件库中拖放到存放在元件库中，需要使用时再从元件库中拖放到场景，拖放到场景中的对象称为实体（实例），一场景，拖放到场景中的对象称为实体（实例），一个元件可以被多次拖放而形成多个不同的实体（实个元件可以被多次拖放而形成多个不同的实体（实

9、例）。元件既可以自制，也可以从外部导入，还可例）。元件既可以自制，也可以从外部导入，还可从别人的作品中分离出有用的元件加以利用。从别人的作品中分离出有用的元件加以利用。多媒体网页设计教程多媒体网页设计教程创建元件 v创建元件时，指定以下其中一个元件行为：创建元件时，指定以下其中一个元件行为：v图形图形 v影片剪辑影片剪辑 v按钮按钮 多媒体网页设计教程多媒体网页设计教程使用面板 v面板可帮助您查看、组织和更改文档中的元素。面面板可帮助您查看、组织和更改文档中的元素。面板中的可用选项控制着元件、实例、颜色、类型、板中的可用选项控制着元件、实例、颜色、类型、帧和其它元素的特征。可以通过显示特定任务

10、所需帧和其它元素的特征。可以通过显示特定任务所需的面板并隐藏其它面板来自定义的面板并隐藏其它面板来自定义 Flash 界面。界面。多媒体网页设计教程多媒体网页设计教程动画基础v 动画是指物体在一定的时间内发生的变化过程，包括动作、动画是指物体在一定的时间内发生的变化过程，包括动作、位置、颜色、形状、角度等等的变化，在电脑中用一幅幅位置、颜色、形状、角度等等的变化，在电脑中用一幅幅的图片来表现这一段时间内物体的变化，每一幅图片称为的图片来表现这一段时间内物体的变化，每一幅图片称为一帧（以后我们就用帧表示图片），当这些图片以一定的一帧（以后我们就用帧表示图片），当这些图片以一定的速度连续播放时，就

11、会给人以动画的感觉，而静止的物体速度连续播放时，就会给人以动画的感觉，而静止的物体则用一幅幅相同的图片来表示，在电脑中只要告诉则用一幅幅相同的图片来表示，在电脑中只要告诉Flash动动画的第一幅和最后一幅图片，而中间的变化电脑会自动生画的第一幅和最后一幅图片，而中间的变化电脑会自动生成，大大减轻了动画创作的负担，使得动画创作由传统的成，大大减轻了动画创作的负担，使得动画创作由传统的手工制作，转变为电脑合成，从而为动画制作开创一个新手工制作，转变为电脑合成，从而为动画制作开创一个新的天地。的天地。多媒体网页设计教程多媒体网页设计教程第一个动画v移动的小车移动的小车多媒体网页设计教程多媒体网页设计

12、教程Flash动画的分类v逐帧动画逐帧动画v补间动画补间动画 补间动画补间形状多媒体网页设计教程多媒体网页设计教程逐帧动画vK字书写字书写多媒体网页设计教程多媒体网页设计教程形变动画（补间形状）v滚动的小球滚动的小球（滚动过程当中颜色也发生了变化）（滚动过程当中颜色也发生了变化）多媒体网页设计教程多媒体网页设计教程运动动画（补间动画）v移动的小车就是一种运动动画移动的小车就是一种运动动画多媒体网页设计教程多媒体网页设计教程补间动画实例-滚动的笑脸多媒体网页设计教程多媒体网页设计教程上机作业v 1、3.1实验实验1-制作一个运动动画（移动的小车或飘动的制作一个运动动画（移动的小车或飘动的白云或斜

13、面上滑下的小木块白云或斜面上滑下的小木块)交作业系统交作业系统v 2、制作一个变形动画（滚动的小球或方块与圆的转换、制作一个变形动画（滚动的小球或方块与圆的转换)交作业系统交作业系统v 3、制作一个逐帧动画（书写、制作一个逐帧动画（书写K字）字）v 4、3.1实验实验2转动的花瓣转动的花瓣v 5、3.1实验实验3跳动的心跳动的心多媒体网页设计教程多媒体网页设计教程内容概要Flash界面再熟悉1多层动画制作2引导线动画3多媒体网页设计教程多媒体网页设计教程帧的分类与编辑v FLASH中最小的时间单位是帧。根据帧的作用区分，可以中最小的时间单位是帧。根据帧的作用区分，可以将帧分为以下三类，如图。将

14、帧分为以下三类，如图。v A、普通帧：包括普通帧和空帧。、普通帧：包括普通帧和空帧。B、关键帧：包装关键帧和空白关键帧。、关键帧：包装关键帧和空白关键帧。C、过渡帧：包括形状过渡帧和运动过渡帧。、过渡帧：包括形状过渡帧和运动过渡帧。多媒体网页设计教程多媒体网页设计教程关键帧v关键帧是这样一个帧：您在其中定义了对动画的对关键帧是这样一个帧：您在其中定义了对动画的对象属性所做的更改，或者包含了象属性所做的更改，或者包含了 ActionScript 代码以控制文档的某些方面。代码以控制文档的某些方面。Flash 可以在您定可以在您定义的关键帧之间补间或自动填充帧，从而生成流畅义的关键帧之间补间或自动

15、填充帧，从而生成流畅的动画。因为关键帧可以使您不用画出每个帧就可的动画。因为关键帧可以使您不用画出每个帧就可以生成动画，所以使您能够更轻松地创建动画。可以生成动画，所以使您能够更轻松地创建动画。可以通过在时间轴中拖动关键帧来轻松更改补间动画以通过在时间轴中拖动关键帧来轻松更改补间动画的长度。的长度。多媒体网页设计教程多媒体网页设计教程普通帧v普通帧只能将关键帧的状态进行延续，一般是用普通帧只能将关键帧的状态进行延续，一般是用来将元素保持在场景中。而过渡帧是将过渡帧前来将元素保持在场景中。而过渡帧是将过渡帧前后的两个关键帧进行计算得到，它所包含的元素后的两个关键帧进行计算得到，它所包含的元素属性

16、的变化是计算得来的。属性的变化是计算得来的。多媒体网页设计教程多媒体网页设计教程图层v 图层就像透明的幻灯胶片一样，在舞台上一层层地向上叠图层就像透明的幻灯胶片一样，在舞台上一层层地向上叠加。图层可以帮助您组织文档中的插图。可以在图层上绘加。图层可以帮助您组织文档中的插图。可以在图层上绘制和编辑对象，而不会影响其它图层上的对象。如果一个制和编辑对象，而不会影响其它图层上的对象。如果一个图层上没有内容，那么就可以透过它看到下面的图层。图层上没有内容，那么就可以透过它看到下面的图层。v 要绘制、上色或者对图层或文件夹进行修改，需要在时间要绘制、上色或者对图层或文件夹进行修改，需要在时间轴中选择该图层以激活它。时间轴中图层或文件夹名称旁轴中选择该图层以激活它。时间轴中图层或文件夹名称旁边的铅笔图标表示该图层或文件夹处于活动状态。一次只边的铅笔图标表示该图层或文件夹处于活动状态。一次只能有一个图层处于活动状态（尽管一次可以选择多个图能有一个图层处于活动状态（尽管一次可以选择多个图层）。层）。多媒体网页设计教程多媒体网页设计教程图层的类型v A、普通层：就是我们通常制作动画、安排元素所使用的图、