第3章动画制作基础

第3章 动画制作基础

本章教学目标

本章介绍了制作Flash动画的基础，并给出了大量的实例。通过对本章的学习，读者应了解到Flash的动画制作环境以及制作动画的基本步骤，并能通过结大量实例的学习，掌握常用的动画制作技巧。

本章教学要点

 基于帧的动画制作方法  形状补间与动作补间的制作  遮罩动画的制作  动画引导路径的制作

本章教学内容及过程

3.1 Flash动画基础

 与Flash文档相关的文件类型  时间轴  场景  动画元素

3.1.1 与Flash文档相关的文件类型 概念

 FLA格式：是Flash用保存设计时的各种信息的格式。FLA格式的文件通常比较大。

 SWF格式：发布Flash动画时主要使用SWF格式，SWF文件是播放器和网页中实际加载的Flash文件格式。

- 1 -

云南机电职业技术学院教案

 SWC格式：是Flash组件的压缩格式。 3.1.2 时间轴 1 概念

 时间轴就是用来组织和控制文档内容在一定时间内播放的图层数和帧数。

 与胶片一样，Flash 文档也将时长分为帧。

 图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。 2 时间轴面板介绍

 时间轴面板分成4个部分：顶区、图层区、时间帧区、状态区。

3 时间轴—顶区

 时间轴的顶区由两行组成。

 第1行是切换行，只要单击相应的文件名就可以在几个FLA或SWF文件之间进行切换。

 第2行从左向右是当前场景的名称、编辑场景和编辑元件间的切换、场景显示比例。

- 2 -

云南机电职业技术学院教案

4 时间轴—图层按钮

 每个图层都包含一些动画元素，上面图层中的元素遮盖下面图层中的元素。  图层控制按钮如下：  显示/隐藏图层  锁定/解除锁定图层  显示图层的轮廓 5 时间轴—图层类型  图层有以下几种类型：

 层文件夹  引导层  遮罩层  普通层

6 时间轴—时间帧区

 Flash影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序及时间等。默认时为每秒播放12帧。  关键帧  普通帧  帧标签  帧注释  播放头

7 时间轴—状态栏

- 3 -

云南机电职业技术学院教案

 指示所选的帧编号、当前帧频以及到当前帧为止的运行时间。  “帧显示模式”按钮，主要用于控制绘图纸效果。

 所谓绘制纸就是允许同时显示当前帧附近的多个帧，这对于估计动画的下一帧的位置有很大的好处。 3.1.3 场景 1 场景面板

 在时间轴面板的下面，占据界面最大的区域就是“场景”。 可以增加或删除“场景”。 2 场景面板的使用

 在场景中可以实现以下操作：

 复制场景  增加场景  删除场景  更改场景名称  更改场景顺序  转换场景

3.1.4 动画元素 1 常用动画元素一

 Flash场景中常用的动画元素有：  矢量图形  位图图像  文字对象

- 4 -

云南机电职业技术学院教案

 静态文本  动态文本  输入文本

2 常用动画元素二  声音对象  按钮对象  影片剪辑  动作脚本语句 3.2 逐帧动画

 创建逐帧动画的方法  绘图纸

 上机实训—飞翔的老鹰  上机实训—制作会旋转的动画 3.2.1 创建逐帧动画的方法 1 创建逐帧动画

 用导入的静态图片建立逐帧动画  绘制矢量逐帧动画  文字逐帧动画  指令逐帧动画  导入序列图像 3.2.2 绘图纸 1 绘图纸的用途

- 5 -

云南机电职业技术学院教案

 绘画纸是定位和编辑动画的辅助功能。  这个功能对于制作逐帧动画特别有用。

 通常情况下，Flash 在舞台中一次只能动画序列的一个帧，使用绘画纸功能后，就可以在舞台中一次查看两个或多个帧了。 2 绘图纸的用途演示

 使用绘图纸功能后的场景效果。

 可以看出，当前帧中内容用全彩色显示，其他帧内容以半透明显示。

3 绘图纸各个按钮的用途

 【绘图纸外观】按钮：拉动外观标记的两端，可以扩大或缩小显示范围。

 【绘图纸外观轮廓】按钮：场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。

 【编辑多个帧】按钮，可以显示全部帧内容，并且可以进行“多帧同时编辑”。

 【修改绘图纸标记】按钮，按下此按钮后弹出一个菜单，菜单中各选项含义如下  【总是显示标记】

- 6 -

云南机电职业技术学院教案

 【锚定绘图纸】  【绘图纸2】  【绘图纸5】  【绘图全部】

3.2.3 上机实训—飞翔的老鹰 1 效果预览

 这是利用导入gif动画而创建的逐帧动画。

2 新建文档

 新建一个Flash文档。

 设置大小为288像素×209像素。  背景颜色为白色。

- 7 -

云南机电职业技术学院教案

3 创建背景图层  导入“背景.bmp”文件  选择第30帧，增加过渡帧

4 导入gif动画

 新建一个图层，选中第1帧，执行【文件】|【导入】|【导入到舞台】命令，导入 “老鹰.gif”文件。

- 8 -

云南机电职业技术学院教案

5 调整对象大小及位置

 将老鹰适当缩小一些，并适当调节它的位置。

6 添加文字

 新建一个图层，输入“天高任鸟飞”。

7 测试存盘

- 9 -

云南机电职业技术学院教案

 执行【控制】|【测试影片】命令，观察动画的效果。  如果满意，执行【文件】|【保存】命令，将文件保存成“飞翔的老鹰.fla”文件。

 如果要导出Flash的播放文件，执行【文件】|【导出】|【导出影片】命令。

3.2.4 上机实训—制作旋转动画 1 效果预览  逐帧动画

2 新建文档

 新建一个Flash文档。

 文件大小为550像素×400像素。  【背景颜色】为白色。

3 创建背景

 选择第1帧，执行【文件】|【导入】|【导入到舞台】命令，将 “背景”图片导入到场景中。 4 新建影片剪辑元件

 新建一个名为“立方体”的影片剪辑元件。

- 10 -

云南机电职业技术学院教案

 依次绘制各帧中立方体的外形并填充相应的颜色，共18帧。

5 创建“立方体”图层  新建一层。

 在时间轴的第1帧上，把库中的“立方体”影片剪辑拖入主场景中。

 放在场景的中下部。  按Ctrl+回车预览动画效果。 3.3 形状补间动画

 通过补间形状，可以创建类似于形变的效果，使一个形状看起来随着时间变成另一个形状。

 运用它可以制作出各种奇妙的变形效果。 3.3.1 形状补间动画基础 1 制作原理

 在一个关键帧中绘制一个形状。

 在另一个关键帧中更改该形状或绘制另一个形状。

 Flash根据二者之间的形状来创建的动画被称为“形状补间动画”。 2 动画的元素

 形状补间动画可以实现两个图形之间颜色、形状、大小、位置

- 11 -

云南机电职业技术学院教案

的相互变化。

 其变形的灵活性介于逐帧动画和动作补间动画二者之间。  如果使用图形元件、按钮、文字，则必须先“分离”才能创建变形动画。 3 在时间轴上的表现

 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头。

4 制作方法

 在动画开始处创建或选择一个关键帧，并设置要开始变形的形状。

 在动画结束处创建或选择一个关键帧并设置要变成的形状。  再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，选择【形状】。

3.3.2 形状补间动画的属性面板

3.3.3 使用形状提示

- 12 -

云南机电职业技术学院教案

1 形状提示的作用

 在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。

2 添加形状提示的方法

 单击动画开始帧，执行【修改】|【形状】|【添加形状提示】命令。该帧的形状上就会增加一个带字母的红色圆圈，在结束帧形状中也会出现一个“提示圆圈”。

 用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置。

3 添加形状提示的技巧

 “形状提示”可以连续添加，最多26个。

 将变形提示从形状的左上角开始按逆时针顺序摆放，将使变形提示工作更有效。

 形状提示的摆放位置也要符合逻辑顺序。  形状提示要在形状的边缘才能起作用。

 调整形状提示位置前，按下“贴紧至对象”按钮，会自动把“形状提示”吸附到边缘上。 3.3.4 上机实训—珍惜水源 1 效果预览

- 13 -

云南机电职业技术学院教案

2 新建文档  新建文档

 文件大小为500×410像素  【背景颜色】为白色 3 加入背景

 将名为“珍惜水源.jpg”图片导入到舞台。

 选择第80帧，按键盘上的F5键，增加一个普通帧。4 创建水珠

 新建一个名为“水珠1”图层。  使用【椭圆工具】画一个无边的圆。  用【颜料桶工具】填充圆。

- 14 -

云南机电职业技术学院教案

5 复制4个水珠  复制刚画好的水珠。

 新建3个图层，在每个图层中粘贴一个水珠，调整水珠的位置。  在第20、40帧处为各图层添加关键帧。 6 将文字转为形状取代水珠

 选取第一个水珠，在第40帧处用文字“珍”取代水珠。  对“庆”字执行【分离】命令，把文字转为形状。

 在第40帧处的相应图层上依次用“惜”、“水”、“源”3个字取代另外3个水珠，并执行【分散】命令。 7 文字到水珠的转变

 在“水珠”各图层的第60帧及第80帧处，分别添加关键帧。  分别复制第20帧中的“水珠”图形，再分别粘贴到第80帧中。

 注意： 应该先清除第80帧处4个“水珠”图层中的内容。

8 创建形状补间动画

 在“水珠”各图层的第20、60帧处单击帧，建立形状补间动画。 3.3.5 上机实训—添加形状提示 1 效果预览

- 15 -

云南机电职业技术学院教案

2 制作步骤  新建文档  创建变形对象  把字符转为形状  创建补间动画  添加形状提示  添加文字 3.4 动作补间动画

 运用动作补间动画可以做出令人称奇的仿3D的效果。 3.4.1 动作补间动画的概念 1 基本概念

 在一个关键帧上放置一个元件。

 在另一个关键帧改变这个元件的大小、颜色、位置、透明度等。  Flash根据二者之间的帧创建的动画被称为动作补间动画。 2 动作补间动画的构成元素

 构成动作补间动画的元素是元件。

- 16 -

云南机电职业技术学院教案

 包括影片剪辑、图形元件、按钮、文字、位图、组合等，但不能是形状。

 只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。

3 在时间帧面板上的表现

 动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头。

4 形状、动作补间动画的区别

5 创建方法

 在动画开始处创建或选择一个关键帧并设置一个元件。  在动画结束处创建或选择一个关键帧并设置该元件的属性。  再单击开始帧，用右键单击帧，在弹出的菜单中选择【创建补间动画】。

- 17 -

云南机电职业技术学院教案

3.4.2 动作补间动画的属性设置 1 帧属性面板  【缓动】选项  【旋转】选项  【调整到路径】  【同步】复选框  【对齐】选项

3.4.3 上机实训—网站横幅广告的制作 1 效果预览

2 新建影片文档  新建一个Flash文档

 文件大小为520×60像素  【背景颜色】为白色  将名为“启航背景.bmp” 导入到舞台  调整图片的大小和位置

- 18 -

云南机电职业技术学院教案

 选中第205帧，按F5键添加普通帧 3 创建动画

 创建“电脑动画”文字效果  创建“网页设计”文字效果  创建“图像制作”文字效果  创建“闪客启航”文字效果  创建“语音教学”文字效果 3.5 遮罩动画

 常见的遮罩动画效果

 水波  万花筒  百叶窗  放大镜  望远镜

3.5.1 遮罩动画的概念 1 什么是遮罩

 在Flash中，可以在遮罩层上创建一个任意形状的“视窗”。  遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 2 遮罩有什么用

 用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见。

- 19 -

云南机电职业技术学院教案

 用来遮罩住某一元件的一部分，从而实现一些特殊的效果。 3.5.2 创建遮罩的方法 1 创建遮罩

 遮罩层其实是由普通图层转化的。

 在某个图层上单击鼠标右键，在弹出的菜单中选择【遮罩层】，该图层就会成为遮罩层。

2 构成遮罩和被遮罩层的元素  遮罩层中内容：

 按钮、影片剪辑、图形、位图、文字、和转化为“填充”的线条等。

 被遮罩层中内容：

 按钮、影片剪辑、图形、位图、文字、线条。

3 可以使用的动画形式

 可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段。 应用遮罩时的技巧

1 技巧一

- 20 -

云南机电职业技术学院教案

 遮罩层中对象的许多属性如渐变色、透明度、颜色和线条样式等是被忽略的。

 要显示遮罩效果，要锁定遮罩层和被遮罩层。

 可以用“Actions”动作语句建立遮罩，但只能有一个“被遮罩层”，同时不能设置_Alpha属性。

2 技巧二  不能用一个遮罩层试图遮蔽另一个遮罩层。  遮罩可以应用在gif动画上。  在被遮罩层中不能放置动态文本 3.5.4 上机实训—辉光文字 1 效果预览

2 新建文档  新建一个Flash文档

 文件大小为400×200像素  【背景色】为深蓝色

3 新建元件

- 21 -

云南机电职业技术学院教案

 新建一个名为“保护环境”的元件。  将文字分离2次。

 用【颜料桶工具】，把字体中心填充成绿色。  新建一个名为“白光”的图形元件。  在场景中画一个无边矩形。

4 创建动画  创建一个“文字”图层  创建被遮罩层  创建遮罩层

3.5.5 上机实训—制作星光闪闪的动画

1 效果预览

- 22 -

云南机电职业技术学院教案

2 制作方法  创建影片文档  创建元件  创建动画 3.6 引导路径动画

 将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式被称为“引导路径动画”。  这种动画可以使一个或多个元件完成曲线或不规则运动。 3.6.1 创建引导路径动画的方法 1 创建引导层和被引导层

 引导层的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。

 “被引导层”中的对象可以使用影片剪辑、图形元件、按钮、文字等，但不能用形状。

- 23 -

云南机电职业技术学院教案

2 向被引导层中添加元件

 创建引导路径动画时，要注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头。

3.6.2 应用引导路径动画的技巧 1 技巧一

 选中【路径调整】复选框，对象的基线就会调整到运动路径。  如果选中【对齐】复选框，元件的注册点就会与运动路径对齐。  可以单独定义一个不含“被引导层”的“引导层”。该引导层中可以放置一些文字说明、元件位置参考等。 2 技巧二

 【贴紧至对象】按钮，可以使“对象附着于引导线”的操作更容易成功，拖动对象时，对象的中心会自动吸附到路径端点上。  过于陡峭的引导线可能使引导动画失败，平滑圆润的线段才有利于引导动画成功。

 向被引导层中放元件时，在动画开始和结束的关键帧上，要让

- 24 -

云南机电职业技术学院教案

元件的注册点对准线段的开始和结束的端点，否则无法引导。 3 技巧三

 如果想解除引导，可以把被引导层拖离“引导层”。

 如果要做圆周运动，可在“引导层”画一根半圆形线条，再把对象的起始、终点分别对准端点即可。

 引导线允许重叠，但在重叠处的线段必须保持圆润，否则会使引导失败。

3.6.3 上机实训—制作光芒四射的文字 效果预览

3.6.4 上机实训—神奇的海底世界 效果预览

- 25 -

云南机电职业技术学院教案

3.7 习题与上机操作 选择题

 （1）常见的Flash动画有（ ）用途。

 A．网站应用 B．广告制作  C．MTV动画 D．多媒体动画  （2）在Flash中，图层有（ ）几种。

 A．引导层 B．普通层  C．时间层 D．遮罩层  （3）在Flash中，常见的动画元素有（ ）几种。

 A．形状 B．图形  C．影片剪辑 D．按钮

 （4）形状补间动画可以实现两个图形之间（ ）的相互变化。

 A．颜色 B．形状  C．位置 D．大小

- 26 -

云南机电职业技术学院教案

 上机操作

 （1）制作探照灯照射文字的效果，某一静帧的效果如下图所示。

 （2）制作一个运动着的静止吸烟标志，标志从右边运动出来，最后停留在中央处。

 （3）制作一个旋转的风车，风车在旋转时，大小和颜色都会发生变化，而且要求风车先由大变小，在由小变大。

- 27 -

云南机电职业技术学院教案

 （4）参照光盘中提供的“心.fla”文件，制作一个心形闪烁动画效果。

- 28 -