《网页制作精品教程(8.0版)》第14章.ppt

《《网页制作精品教程(8.0版)》第14章.ppt》由会员分享，可在线阅读，更多相关《《网页制作精品教程(8.0版)》第14章.ppt（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1414章章 基本动画制作基本动画制作 帧和图层基本操作帧和图层基本操作 认识元件认识元件 制作动画的典型方法制作动画的典型方法 使用时间轴特效使用时间轴特效 14.1 14.1 帧和图层基本操作帧和图层基本操作 14.1.1 flash14.1.1 flash动画原理动画原理 传统动画和影视都是通过连续播放一组静态画面实现，每一幅静态画面就是一个帧，Flash动画也是如此。在第在第1 1帧上帧上绘制一颗心绘制一颗心在第在第6 6帧上稍微缩帧上稍微缩小一下心。当播放小一下心。当播放头在第头在第1 1帧和第帧和第6 6帧帧之间跳转时，便会之间跳转时，便会形成怦怦跳动的心形成怦怦跳动的心14.

2、1.2 14.1.2 帧的种类及基本操作帧的种类及基本操作 1 1帧的种类帧的种类 Flash中主要有关键帧、普通帧和空白关键帧。2 2帧的基本操作帧的基本操作 创建帧的最基本方法是右键单击空白帧，在弹出的菜创建帧的最基本方法是右键单击空白帧，在弹出的菜单中选择相应的帧类型。单中选择相应的帧类型。选择帧的方法相当简单，只需在相应帧上单击即可。选择帧的方法相当简单，只需在相应帧上单击即可。选中要删除的帧，在选中的帧上单击鼠标右键，然后选中要删除的帧，在选中的帧上单击鼠标右键，然后选择选择“删除帧删除帧”菜单项。菜单项。右击要清除的帧，选择右击要清除的帧，选择“清除帧清除帧”菜单项，即可清除菜单项

3、，即可清除帧。帧。选择要复制的帧，单击鼠标右键，选择选择要复制的帧，单击鼠标右键，选择“复制帧复制帧”菜菜单项；然后右击需要粘贴帧的目标帧，选择单项；然后右击需要粘贴帧的目标帧，选择“粘贴帧粘贴帧”菜单项，即可将源帧复制到目标位置。菜单项，即可将源帧复制到目标位置。14.1.3 14.1.3 图层种类及基本操作图层种类及基本操作 FlashFlash中的图层主要有以下几种类型。中的图层主要有以下几种类型。对图层的操作都是在对图层的操作都是在“时间轴时间轴”面板中进行的。面板中进行的。范例范例1 1 创建一个简单动画创建一个简单动画 本例通过制作一个简单动画，让大家初步了解本例通过制作一个简单动

4、画，让大家初步了解使用使用FlashFlash制作动画的流程（具体操作见视频制作动画的流程（具体操作见视频14-114-1）。）。14.2 14.2 认识元件认识元件 元件是可以重复应用的资源，应用元件，您无元件是可以重复应用的资源，应用元件，您无需复制就能够在需复制就能够在 Flash Flash 文档中多次使用同一文档中多次使用同一个资源。另外，制作动作补间动画时，也必须个资源。另外，制作动作补间动画时，也必须要使用元件。要使用元件。Flash Flash 文档中的所有元件都存储在文档中的所有元件都存储在“库库”面板面板中。要使用某个元件，可直接将其从中。要使用某个元件，可直接将其从“库库

5、”面面板中拖动到舞台上。板中拖动到舞台上。14.2.1 14.2.1 创建元件创建元件 通过选择通过选择“插入插入”“新建元件新建元件”菜单或按菜单或按【Ctrl+F8Ctrl+F8】组合键，可打开组合键，可打开“创建新元件创建新元件”对对话框。设置好元件名称和类型后，单击话框。设置好元件名称和类型后，单击“确定确定”按钮，将进入元件编辑模式，此时在场景名按钮，将进入元件编辑模式，此时在场景名的右侧将显示元件名，的右侧将显示元件名，“库库”面板中也将显示面板中也将显示创建的元件创建的元件 。14.2.2 14.2.2 将动画片段转换为元件将动画片段转换为元件 有时需要将文档中的某个动画片段转换

6、成元件，有时需要将文档中的某个动画片段转换成元件，此时只要将该段动画帧拷贝到元件中即可。此时只要将该段动画帧拷贝到元件中即可。复复制制帧帧创建新元创建新元件，并粘件，并粘贴帧贴帧14.2.3 14.2.3 使用其他影片中的元件使用其他影片中的元件 在很多情况下，用户在创建动画时都需要使用在很多情况下，用户在创建动画时都需要使用其他其他FlashFlash影片中的元件，这样可以节省很多不影片中的元件，这样可以节省很多不必要的重复工作。必要的重复工作。选择选择“文件文件”“导入导入”“打开外打开外部库部库”菜单，系菜单，系统将打开统将打开“作为作为库打开库打开”对话框对话框选定影片，单击选定影片，

7、单击“打开打开”按钮，按钮，则该影片的库将则该影片的库将显示在显示在“库库”面面板中板中 范例范例2 2 创建按钮元件创建按钮元件 按钮实际上是包含四帧的交互式影片剪辑。创按钮实际上是包含四帧的交互式影片剪辑。创建按钮元件时，建按钮元件时，FlashFlash会自动创建包括会自动创建包括4 4帧的时帧的时间轴。其中，前间轴。其中，前3 3帧分别定义了按钮的帧分别定义了按钮的3 3个可能个可能发生的状态，第发生的状态，第4 4帧用来定义按钮的响应区域。帧用来定义按钮的响应区域。创建按钮实际上是绘制按钮在不同状态下的显创建按钮实际上是绘制按钮在不同状态下的显示效果。本节通过一个简单的实例介绍一下按

8、示效果。本节通过一个简单的实例介绍一下按钮元件的创建方法（具体操作见视频钮元件的创建方法（具体操作见视频14-214-2）。）。14.3 14.3 制作动画的典型方法制作动画的典型方法 14.3.1 “14.3.1 “帧帧-帧帧”动画动画 “帧-帧”动画是最传统的动画创建形式，也是Flash动画的一个重要类型。“帧-帧”动画适于创建非常复杂的动画，它的每一帧都是关键帧或扩展帧，每一帧都需要由设计者确定，而不是由Flash通过计算得到。本节通过创建一个胡须飘动的小动画来说明这类动画的制作方法（具体操作见视频14.3.1）。14.3.2 14.3.2 动作补间动画动作补间动画 在范例在范例1 1中

9、我们曾用到过动作补间动画，本节简中我们曾用到过动作补间动画，本节简单叙述一下动作补间动画的创建过程。单叙述一下动作补间动画的创建过程。动作补间动画动作补间动画“属性属性”面板面板14.3.3 14.3.3 形状补间动画形状补间动画 除了动作补间动画外，还可以创建形状补间动除了动作补间动画外，还可以创建形状补间动画。形状补间动画是指一个图形变成另一个图画。形状补间动画是指一个图形变成另一个图形的动画效果，例如一个苹果变成一颗心，或形的动画效果，例如一个苹果变成一颗心，或一个文字变成一个图形。一个文字变成一个图形。形状补间动画在形状补间动画在“时间轴时间轴”面板面板中的表现形式中的表现形式某个关键

10、帧上的图某个关键帧上的图形没有被分离，而形没有被分离，而造成形状补间动画造成形状补间动画不成功不成功范例范例3 3 创建创建“燃烧的蜡烛燃烧的蜡烛”动画动画 下面我们通过创建一个燃烧的蜡烛动画，来帮下面我们通过创建一个燃烧的蜡烛动画，来帮助读者熟悉创建形状补间动画的方法（具体操助读者熟悉创建形状补间动画的方法（具体操作见视频作见视频14-314-3）。）。14.3.4 14.3.4 改进形状补间动画改进形状补间动画 形状提示就是在变形的初始图形与结束图形形状提示就是在变形的初始图形与结束图形上分别指定一些变形关键点，并使这些点在上分别指定一些变形关键点，并使这些点在起始帧和结束帧中一一对应，这

11、样起始帧和结束帧中一一对应，这样FlashFlash就会就会根据这些点的对应关系来计算变形的过程。根据这些点的对应关系来计算变形的过程。1 1使用形状提示时应遵循的原则使用形状提示时应遵循的原则2 2形状提示的创建和应用形状提示的创建和应用3 3与形状提示相关的操作与形状提示相关的操作 14.3.5 14.3.5 路径引导动画路径引导动画 一个最基本的路径引导动画由两个图层组成，一个最基本的路径引导动画由两个图层组成，上面一层是上面一层是“引导层引导层”，它的图层图标为，它的图层图标为 ，下面一层是下面一层是“被引导层被引导层”，图标为，图标为 ，同普通，同普通图层一样。图层一样。14.3.6

12、 14.3.6 遮罩动画遮罩动画 在在FlashFlash中，使用遮罩层可以制作一些特殊效中，使用遮罩层可以制作一些特殊效果，如聚光灯效果、过渡效果等。遮罩的对象果，如聚光灯效果、过渡效果等。遮罩的对象可以是填充的形状、文字对象、图形元件的实可以是填充的形状、文字对象、图形元件的实例或影片剪辑。还可以将多个图层组织在一个例或影片剪辑。还可以将多个图层组织在一个遮罩层之下，或者让遮罩层动起来以创建复杂遮罩层之下，或者让遮罩层动起来以创建复杂的效果。的效果。本节通过制作一个本节通过制作一个“闪光的文字闪光的文字”动画来讲解动画来讲解遮罩层的使用方法（具体操作见视频遮罩层的使用方法（具体操作见视频1

13、4.3.614.3.6所所示）。示）。典型范例典型范例 制作液晶电视广告制作液晶电视广告 1 1制作路径引导动画制作路径引导动画 本节制作一个名为“lujing”的影片剪辑元件，该元件主要用到动作补间动画和路径引导动画（具体操作见视频14-4）。2 2制作遮罩动画制作遮罩动画 本节制作一个名为本节制作一个名为“zhezhaozhezhao”的影片剪辑元的影片剪辑元件，主要用到形状补间动画和遮罩动画（具件，主要用到形状补间动画和遮罩动画（具体操作见视频体操作见视频14-514-5）。）。3 3布置主场景布置主场景 制作好影片中的所有元件后，还需要在主场景制作好影片中的所有元件后，还需要在主场景中

14、将这些元件组织起来，动画才算制作完成，中将这些元件组织起来，动画才算制作完成，本节来看一下如何布置主场景（具体操作见视本节来看一下如何布置主场景（具体操作见视频频14-614-6）。）。14.4 14.4 使用时间轴特效使用时间轴特效 14.4.1 14.4.1 添加时间轴特效添加时间轴特效 在在FlashFlash中，时间轴特效被分为中，时间轴特效被分为“变形变形/转换转换”、“帮助帮助”和和“效果效果”三类共三类共8 8种特效。种特效。为对象添加时间轴特效的方法很简单，只需选中为对象添加时间轴特效的方法很简单，只需选中对象后，选择对象后，选择“插入插入”“时间轴特效时间轴特效”下级菜下级菜单中的一种，然后在显示的对话框中设置相应参单中的一种，然后在显示的对话框中设置相应参数即可。数即可。14.4.2 14.4.2 编辑时间轴特效编辑时间轴特效 为对象添加时间轴特效后，还可以编辑时间轴为对象添加时间轴特效后，还可以编辑时间轴特效。特效。单击选择已应用时间轴特效的对象，选择单击选择已应用时间轴特效的对象，选择“修修改改”“时间轴特效时间轴特效”“编辑特效编辑特效”菜单，或菜单，或单击单击“属性属性”面板上的面板上的“编辑编辑”按钮，可编辑按钮，可编辑特效。特效。