第3章网页动画制作.ppt

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

1、多媒体网页设计教程,第3章 网页动画制作,多媒体网页设计教程,内容概要,多媒体网页设计教程,Flash的启动界面,舞台,主工具栏,时间轴,多媒体网页设计教程,帧,Flash的动画是由帧组成，“帧”指的是每一个时刻该层所示画面的状态。在Flash中动画制作中有三种重要的帧：空白帧、关键帧和空白关键帧。,多媒体网页设计教程,关键帧,关键帧是这样一个帧：您在其中定义了对动画的对象属性所做的更改，或者包含了 ActionScript 代码以控制文档的某些方面。Flash 可以在您定义的关键帧之间补间或自动填充帧，从而生成流畅的动画。因为关键帧可以使您不用画出每个帧就可以生成动画，所以使您能够更轻松地创

2、建动画。可以通过在时间轴中拖动关键帧来轻松更改补间动画的长度。,多媒体网页设计教程,普通帧,普通帧只能将关键帧的状态进行延续，一般是用来将元素保持在场景中。而过渡帧是将过渡帧前后的两个关键帧进行计算得到，它所包含的元素属性的变化是计算得来的。,多媒体网页设计教程,图层,图层就像透明的幻灯胶片一样，在舞台上一层层地向上叠加。图层可以帮助您组织文档中的插图。可以在图层上绘制和编辑对象，而不会影响其它图层上的对象。如果一个图层上没有内容，那么就可以透过它看到下面的图层。要绘制、上色或者对图层或文件夹进行修改，需要在时间轴中选择该图层以激活它。时间轴中图层或文件夹名称旁边的铅笔图标表示该图层或文件夹处

3、于活动状态。一次只能有一个图层处于活动状态（尽管一次可以选择多个图层）。,多媒体网页设计教程,时间轴,时间轴，它是 Flash 中的一个位置，用于确定 Flash 应何时将特定媒体对象显示在舞台上。时间轴类似于一个时间从左向右推移的电子表格，它用列表示时间，用行表示图层。在舞台上，较高图层中的内容显示在较低图层中的内容的上面。,多媒体网页设计教程,时间轴,时间轴用于组织和控制文档内容在一定时间内播放的图层数和帧数。时间轴顶部的时间轴标题指示帧编号。播放头指示当前在舞台中显示的帧。时间轴状态显示在时间轴的底部，它指示所选的帧编号、当前帧频以及到当前帧为止的运行时间。,多媒体网页设计教程,舞台,舞

4、台是您在创建 Flash 文档时放置图形内容的矩形区域，这些图形内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑，诸如此类。Flash 创作环境中的舞台相当于 Macromedia Flash Player 或 Web 浏览器窗口中在回放期间显示 Flash 文档的矩形空间。您可以在工作时放大和缩小以更改舞台的视图。,多媒体网页设计教程,“库”面板（图符库）,库面板是存储和组织在 Flash 中创建的各种元件的地方，它还用于存储和组织导入的文件，包括位图图形、声音文件和视频剪辑。库面板使您可以组织文件夹中的库项目，查看项目在文档中使用的频率，并按类型对项目排序。,多媒体网页设计教程,元

5、件,动画设计时可以将相对独立的部分制成元件（符号）存放在元件库中，需要使用时再从元件库中拖放到场景，拖放到场景中的对象称为实体（实例），一个元件可以被多次拖放而形成多个不同的实体（实例）。元件既可以自制，也可以从外部导入，还可从别人的作品中分离出有用的元件加以利用。,多媒体网页设计教程,创建元件,创建元件时，指定以下其中一个元件行为：图形 影片剪辑 按钮,多媒体网页设计教程,使用面板,面板可帮助您查看、组织和更改文档中的元素。面板中的可用选项控制着元件、实例、颜色、类型、帧和其它元素的特征。可以通过显示特定任务所需的面板并隐藏其它面板来自定义 Flash 界面。,多媒体网页设计教程,动画基础,

6、动画是指物体在一定的时间内发生的变化过程，包括动作、位置、颜色、形状、角度等等的变化，在电脑中用一幅幅的图片来表现这一段时间内物体的变化，每一幅图片称为一帧（以后我们就用帧表示图片），当这些图片以一定的速度连续播放时，就会给人以动画的感觉，而静止的物体则用一幅幅相同的图片来表示，在电脑中只要告诉Flash动画的第一幅和最后一幅图片，而中间的变化电脑会自动生成，大大减轻了动画创作的负担，使得动画创作由传统的手工制作，转变为电脑合成，从而为动画制作开创一个新的天地。,多媒体网页设计教程,第一个动画,移动的小车,多媒体网页设计教程,Flash动画的分类,逐帧动画补间动画,补间动画补间形状,多媒体网页

7、设计教程,逐帧动画,K字书写,多媒体网页设计教程,形变动画（补间形状）,滚动的小球（滚动过程当中颜色也发生了变化）,多媒体网页设计教程,运动动画（补间动画）,移动的小车就是一种运动动画,多媒体网页设计教程,补间动画实例-滚动的笑脸,多媒体网页设计教程,上机作业,1、3.1实验1-制作一个运动动画（移动的小车或飘动的白云或斜面上滑下的小木块)交作业系统2、制作一个变形动画（滚动的小球或方块与圆的转换)交作业系统3、制作一个逐帧动画（书写K字）4、3.1实验2转动的花瓣5、3.1实验3跳动的心,多媒体网页设计教程,内容概要,多媒体网页设计教程,帧的分类与编辑,FLASH中最小的时间单位是帧。根据帧

8、的作用区分，可以将帧分为以下三类，如图。A、普通帧：包括普通帧和空帧。B、关键帧：包装关键帧和空白关键帧。C、过渡帧：包括形状过渡帧和运动过渡帧。,多媒体网页设计教程,关键帧,关键帧是这样一个帧：您在其中定义了对动画的对象属性所做的更改，或者包含了 ActionScript 代码以控制文档的某些方面。Flash 可以在您定义的关键帧之间补间或自动填充帧，从而生成流畅的动画。因为关键帧可以使您不用画出每个帧就可以生成动画，所以使您能够更轻松地创建动画。可以通过在时间轴中拖动关键帧来轻松更改补间动画的长度。,多媒体网页设计教程,普通帧,普通帧只能将关键帧的状态进行延续，一般是用来将元素保持在场景中

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

10、的图层，和PS中的层是类似的概念和功能。B、遮罩层：只用遮罩层的可显示区域来显示被遮罩层的内容，与PS中的遮罩类似。C、运动引导层：运动引导层包含的是一条路径，运动引导线所引导的层的运动过渡动画将会按照这条路径进行运动。注释说明层：这是FLASHMX以后新增加的一个功能，本质上是一个运动引导层。可以在其中增加一些说明性文字，而输出的时候层中所包含的内容将不被输出。,多媒体网页设计教程,图层示范,遮罩层引导层,多媒体网页设计教程,时间轴,时间轴用于组织和控制文档内容在一定时间内播放的图层数和帧数。时间轴顶部的时间轴标题指示帧编号。播放头指示当前在舞台中显示的帧。时间轴状态显示在时间轴的底部，它指

11、示所选的帧编号、当前帧频以及到当前帧为止的运行时间。,多媒体网页设计教程,舞台,舞台位于工作界面的正中间的矩形部分，是放置动画内容的区域。这些内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑等。,多媒体网页设计教程,元件,动画设计时可以将相对独立的部分制成元件（符号）存放在元件库中，需要使用时再从元件库中拖放到场景，拖放到场景中的对象称为实体（实例），一个元件可以被多次拖放而形成多个不同的实体（实例）。元件既可以自制，也可以从外部导入，还可从别人的作品中分离出有用的元件加以利用。,多媒体网页设计教程,元件类型,元件分为三种类型，影片剪辑、按钮和图形，不同的元件类型有不同的使用特点。（1

12、）影片剪辑元件是位于影片中的小片断，影片剪辑的运行独立于主要影片的时间线，相当于是影片中的影片。（2）图形元件主要适用于静态图片和通过主图片的时间线来控制的简单动画。在图形元件中不能使用交互和声音。（3）按钮元件用于创建交互式按钮，可以响应鼠标动作，当创建的时间线变成四种不同的帧，分别是弹起、指针经过、按下和点击。,多媒体网页设计教程,制作动画的一般过程,制作动画的一般过程都包含了动画的构思、动画的设计和动画的制作过程。1动画的构思 2动画的设计 3动画的制作,多媒体网页设计教程,多层动画实例上升的水泡,多媒体网页设计教程,上升的水泡关键步骤,1、制作背景 a、设置文档大小（600*420px

13、)，修改背景为蓝色 b、绘制一个无边框的矩形，填充为蓝白渐变2、新建水泡影片剪辑元件 a、新建4个图层 b、在第1层“图层1”绘制一个小球逐渐变大的动画 c、把“图层1”当中的所有帧复制到2、3、4图层3、切换回场景1 a、把元件拖动到场景上，制作很多水泡,多媒体网页设计教程,多层动画实例多彩的文字,飘动的多彩文字,多媒体网页设计教程,多彩的文字关键步骤,1、分别创建四个文字元件，每个文字都是一个元件，每个文字的颜色都不一样2、创建四个图层，把文字元件拖动到四个图层当中（第1帧）3、分别都创建补间动画4、使用“变形”转变文字当中的大小,多媒体网页设计教程,图文混和动画实例,走遍中国主页动画,多

14、媒体网页设计教程,关键步骤,1、导入图片2、创建文字元件3、拖动文字，设置文字颜色alpha为0%,多媒体网页设计教程,沿着路径运动动画实例小球,多媒体网页设计教程,沿着路径运动动画实例曲线飞行的文字,多媒体网页设计教程,沿着路径运动动画实例地球绕太阳,多媒体网页设计教程,地球绕太阳关键步骤,1、在“图层1”上画一个椭圆，把里面的填充色删除2、使用“变形”把椭圆转成倾斜，隐藏和锁定“图层1”3、添加一个地球元件（插入-新建元件）,绘制一个地球4、添加“图层2”，把地球元件拖动到图层2当中5、添加一个引导层，使得能够引导图层26、把图层1上的椭圆复制到“引导层：图层2”当中的第1帧7、用橡皮把椭

15、圆擦出一个缺口8、给所有图层创建关键帧9、给“图层2”创建补间动画，把地球元件拖动到椭圆缺口的两端10、显示所有图层,多媒体网页设计教程,沿着路径运动动画实例沿曲线转动的风车,多媒体网页设计教程,曲线运动的风车关键步骤,1、创建影片剪辑，实现会转的风车2、创建沿着曲线运动的动画,多媒体网页设计教程,上机作业,上机作业 1、上升的水泡-交作业系统 2、飘彩的文字-交作业系统 3、图文混合动画（实验指导3.2实验4）-交多媒体练习平台 4、地球绕太阳-交作业系统 5、沿曲线运动的风车-交作业系统,多媒体网页设计教程,内容概要,多媒体网页设计教程,关键帧,关键帧是这样一个帧：您在其中定义了对动画的对

16、象属性所做的更改，或者包含了 ActionScript 代码以控制文档的某些方面。Flash 可以在您定义的关键帧之间补间或自动填充帧，从而生成流畅的动画。因为关键帧可以使您不用画出每个帧就可以生成动画，所以使您能够更轻松地创建动画。可以通过在时间轴中拖动关键帧来轻松更改补间动画的长度。,多媒体网页设计教程,图层的类型,A、普通层：就是我们通常制作动画、安排元素所使用的图层，和PS中的层是类似的概念和功能。B、遮罩层：只用遮罩层的可显示区域来显示被遮罩层的内容，与PS中的遮罩类似。C、运动引导层：运动引导层包含的是一条路径，运动引导线所引导的层的运动过渡动画将会按照这条路径进行运动。注释说明层

17、：这是FLASHMX以后新增加的一个功能，本质上是一个运动引导层。可以在其中增加一些说明性文字，而输出的时候层中所包含的内容将不被输出。,多媒体网页设计教程,图层示范,遮罩层引导层,多媒体网页设计教程,元件类型,元件分为三种类型，影片剪辑、按钮和图形，不同的元件类型有不同的使用特点。（1）影片剪辑元件是位于影片中的小片断，影片剪辑的运行独立于主要影片的时间线，相当于是影片中的影片。（2）图形元件主要适用于静态图片和通过主图片的时间线来控制的简单动画。在图形元件中不能使用交互和声音。（3）按钮元件用于创建交互式按钮，可以响应鼠标动作，当创建的时间线变成四种不同的帧，分别是弹起、指针经过、按下和点

18、击。,多媒体网页设计教程,多层动画实例日出动画,多媒体网页设计教程,日出动画关键步骤,1、制作元件（山峰、太阳、背景）2、在场景上添加3个图层3、把三个元件分别拖动到三个图层4、元件的颜色亮度5、太阳上升前，黑色比较深，太阳升起后，黑色变淡,多媒体网页设计教程,遮罩层,对于遮罩层的理解可以将其看作是普通层的反转，其中，有对象存在位置为透明，空白区域则不透明。遮罩层只能对之相连的层起作用。Flash的遮罩功能只需要设置一个遮罩层，就可以遮盖视线中的某些区域或空间，遮罩层，是显示指定范围内的内容。可以把摄像机理解为遮罩特效，在电视里看见的只能是摄像机拍摄的画面，而不能看见摄像机本身和镜头以外的景象

19、。,多媒体网页设计教程,简单的遮罩效果,多媒体网页设计教程,简单的遮罩效果操作步骤,1、导入一张背景图像，作为聚光灯照射对象。2、执行“插入”“创建新元件”命令，创建“聚光灯”元件，在元件编辑区域内，绘制椭圆形状的聚光灯镜头。3、导入背景图片到被遮罩层4、添加“聚光灯”元件到遮罩层。5、为遮罩层的“聚光灯”元件创建补间动画,多媒体网页设计教程,遮罩动画实例-文字遮盖图像动画,多媒体网页设计教程,遮罩层关键步骤,1、导入一张背景图像，作为聚光灯照射对象。2、执行“插入”“创建新元件”命令，创建“文字遮盖”元件，注意：需要打散文字。3、导入背景图片到被遮罩层4、添加“聚光灯”元件到遮罩层。5、为被

20、遮罩层的背景图片创建补间动画,多媒体网页设计教程,遮罩层动画实例放大镜效果,多媒体网页设计教程,探照灯效果,多媒体网页设计教程,探照灯效果关键步骤,1、绘制放大镜元件2、创建放大镜图层的补间动画3、创建“背景色”图层，画出一个矩形框，使用渐变填充背景4、创建“背景文字”图层，在该图层上输入文字，设置相应字体颜色5、绘制镜头元件，创建镜头图层，把镜头元件拖动到镜头图层上，并创建相应补间动画6、创建“照射后的文字”图层，复制“背景文字”图层上的文字到该图层7、修改“镜头”图层为遮罩图层,多媒体网页设计教程,放大镜效果关键步骤,1、为放大后的效果建立大字遮罩层的遮罩对象（一个大圆）元件2、为原来文字

21、创建没有被放大的文字显示遮罩对象（一个长条，挖除一个大圆）元件 注意：1、2步骤所创建的2个元件应该能够刚好组合成一个完整的长条3、建立四个图层，分别为 大字遮罩层，大字层，小字遮罩层，小字层（从上到下）4、在大字层输入放大后的文字5、在小字层输入原来的文字6、把大字遮罩对象（大圆）元件，拖动到大字遮罩层当中7、把小字遮罩对象（长条，挖除大圆）元件，拖动到小字遮罩层当中8、分别为大字遮罩层和小字遮罩层创建补间动画9、创建一个放大镜图形的补间动画,多媒体网页设计教程,遮罩层动画实例闪光的五角星,多媒体网页设计教程,闪光的五角星关键步骤,1、绘制五角星元件2、制作五角星旋转的补间动画3、绘制射线元

22、件4、绘制射线的遮罩动画,多媒体网页设计教程,上机作业,上机作业 1、我形我秀图片叠加动画-交多媒体练习平台 2、闪光的五角星-交作业系统 3、放大镜特效-交作业系统 4、完成其他作业,多媒体网页设计教程,课后作业：,阅读网页教程第3章3.4节阅读应用基础第5章第5小节注意：网页教程即多媒体网页设计教程应用基础即大学计算机应用基础教程,多媒体网页设计教程,内容概要,多媒体网页设计教程,按钮元件的制作,按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。,多媒体网页设计教程,Flash动画按钮按钮,Flash动画按钮,弹起状态 指

23、针经过状态 按下状态,多媒体网页设计教程,笑脸按钮关键步骤,1、创建按钮元件2、分别在“弹起”、“指针经过”和“按下”帧 绘制相应的图形3、拖动元件到场景上,多媒体网页设计教程,Flash声音的导入,在Flash中不仅可以制作动画，还可以处理丰富的声音效果。Flash 提供了多种声音的使用方法，既可以使用声音独立于时间轴连续播放，也可以使声音和动画保持同步播放。在 Flash中有两种类型声音：事件声音和流式声音：,多媒体网页设计教程,Flash中的声音,事件声音：在播放前必须下载完全，它可以连续播放直到有明确的命令来停止播放，多是应用在按钮或是固定动作中。l流式声音：在下载了前几帧后，只要数据

24、足够，它就可以开始播放，而且它可以做到和WEB上播放的时间同步，一般应用于背景音乐，或是不需要与场景内容配合的情况。,多媒体网页设计教程,Flash中声音的应用,一般情况下，在Flash中应用声音主要包括以下几个重要内容：导入声音、引用声音、编辑声音、压缩声音。1 导入声音 2引用声音 3编辑声音 4给按钮加上声效 5压缩声音,多媒体网页设计教程,交互动画,所谓交互动画是指动画浏览者可使用键盘，鼠标操作来控制动画的播放，或调转到影片的其它部份，移动对像，在表格里填写数据及执行其它的各种操作。交互动画是通过动作脚本语言（Actionscript）设置动作来产生的，交互动画的基本要素是场景，帧，时

25、间和动作脚本语法和其它脚本撰写语言一样动作脚本遵循自己的语法规则，保留关键字，提供运算符，并且允许使用变量存储和获取信息，动作脚本包含大量的对像和函数，并允许创建自己的对像各函数,多媒体网页设计教程,动作,Flash 8.0的ActionScript是2.0版，它支持更多的功能，如类、继承等。不过作为动作脚本，最基本的功能变化不大。,多媒体网页设计教程,动作范例超链按钮,按钮“弹起”状态图形形状 按钮“经过”状态图形形状,多媒体网页设计教程,超级链接按钮关键步骤,1、创建“友情链接”按钮元件2、拖动“友情链接”按钮元件到场景上3、选择“友情链接”按钮实例，单击“动作”面板4、输入代码,多媒体网

26、页设计教程,动作范例按钮控制影片播放和停止,多媒体网页设计教程,按钮控制影片播放和停止关键步骤,1、创建“照片”图形元件（可以导入图片，也可以绘制图形）2、创建“旋转”和“停止”按钮元件3、创建2个图层分别为“按钮层”，“照片层”4、拖动“旋转”和“停止”按钮元件 到“按钮层”，拖动照片元件到“照片层”5、选择“旋转”按钮，输入相关代码6、选择“停止”按钮，输入相关代码,多媒体网页设计教程,鼠标响应动画实例,多媒体网页设计教程,鼠标响应动画实例关键步骤,多媒体网页设计教程,Flash的优化、测试与发布,Flash动画制作完成后，最终是要放在网络环境下让用户浏览的。Flash提供了模拟各种网络环

27、境的测试方法。使用这些测试方法，可以清楚地了解动画的下载状况，从而对Flash动画进行调整和优化，使它被浏览时播放的更流畅。要让用户在网络环境下浏览到Flash动画，必须对其进行发布。根据不同的发布选项设置，可以产生各种格式的Flash动画文件，同时还可以产生播放Flash动画所必需的的一些文件。,多媒体网页设计教程,Flash文件的优化,动画文件的大小影响它在网上的下载时间和速度，所以要在不有损电影播放质量的前提下，对Flash电影进行优化减小文件大小。下面列出了优化动画的一般原则。（1）多使用元件。（2）尽量使用渐变动画。（3）多采用实线，少用虚线。（4）多用矢量图形，少用位图图像。（5）

28、多用构图简单的矢量图形。（6）导入的位图图像文件尽可能小一点，并以JPEG方式进行压缩。（7）音效文件最好以MP3方式压缩。,多媒体网页设计教程,Flash的发布,当完成Flash动画作品之后，可以使用Dreamweaver、FrontPage等网页编辑工具来实现将Flash动画嵌入到网页中，不过，Flash的出版发布功能，也可以将完成的作品输出成动画、图像以及HTML等文件。制作完动画后，首先将动画保存起来。然后按键盘上的Ctrl+Enter快捷键，可以测试动画播放。这时保存动画的目录会出现一个Swf类型文件。这种Swf类型的动画可以用Dreamweaver或者FrontPage等工具，插入到网页中去。,多媒体网页设计教程,Flash的发布示范说明,Flash发布的参数等,多媒体网页设计教程,上机作业,1、笑脸按钮的制作2、按钮控制影片播放和停止动画3、超链按钮的制作4、鼠标影响动画的制作,