Flash动画制作教材

第二章动画制作
动画其实是一门古老的艺术，它是通过把人、物的表情、动作、变化等分段画成许多画，再通过放映手段连续播放，给人的视觉造成连续变化的图画。

随着计算机技术的发展，用计算机制作动画变得越来越简单，非美术专业的人士也能成为制作动画的高手。

本章以Flash动画制作软件为操作平台，来学习如何用计算机制作动画。

第一节动画制作基础
计算机动画就是利用传统的基本原理，将原画作为关键帧的画面，然后再利用计算机自动将中间的连续画面模拟出来，结合科学与艺术，突破静止、平面图像的限制，创造出栩栩如生的动画作品。

一、Flash动画简介
Flash是一款多媒体动画制作软件。

它是一种交互式动画设计工具，用它可以将音乐，声效，动画方便地融合在一起，以制作出高品质的动态效果，或者说是动画。

FLash动画有别于以前我们常用于网络的GIF 动画，它采用的是矢量绘图技术，矢量图是可以无限放大而图像质量不损失的一种格式的图，由于动画是由矢量图构成的，就大大的节省了动画文件的大小，在网络带宽局限的情况下，提升了网络传输的效率；可以方便的下载观看，一个几分钟长度的Flash 动画片可以只有一两兆大小。

二、Flash的编辑环境
通过“开始”菜单来启动Flash，启动后，在“创设新项目”中的选“Flash文档”，就可以新建一个Flash文件，进入到Flash的编辑环境，如图2.1所示。

时间轴面板
工具箱
场景工作区
图2.1 Flash编辑制作环境窗口
1.工具箱
在窗口的左侧有许多常用的编辑工具，这些工具集中在一起，我们管它叫工具箱。

在Flash中绘制图画或对图画进行编辑操作，都离不开工具箱的工具。

2.时间轴面板
时间轴是由许多的小格组成，每一格代表一个帧，每个帧可以存放一幅图片，许多帧图片连续播放，就形成了一个动画影片。

时间轴中显示的数字是单位时间内播放的帧数。

默认情况下，是每秒可以播放12帧。

3.认识帧和帧的类型
帧是构成动画的基本单位，每一个精彩的flash动画都是由很多个精心雕琢的帧构成的，在时间轴上的每一帧都可以包含需要显示的所有内容，包括图形、声音、各种素材和其它多种对象。

在Flash的帧中可以分为关键帧、空白关键帧和普通帧。

在动画制作的开始，只有一个空白关键帧，当我们在空白关键帧上面绘制了一个图形时，它就变成关键帧了，而普通帧和关键帧的不同点在于前者不可编辑，后者可编辑。

关键帧在动画中是不能缺少的，因为它能使画面内容产生变化。

空白关键帧是没有包含舞台上的实例内容的关键帧。

普通帧是在时间轴上能显示实例对象，但不能对实例对象进行编辑操作的帧。

关键帧在时间轴上显示为实心的圆点，空白关键帧在时间轴上显示为空心的圆点，普通帧在时间轴上显示为灰色填充的小方格。

4．场景工作区
场景工作区也称场景，它是制作动画的区域，对动画元素的绘制、修改、编辑等，都是在场景工作区中进行的。

5．属性面板
属性面板位于Flash软件窗口下方，在这里可以设置对象的一些基本属性，如图2.2是“椭圆工具”的属性面板。

图2.2 “椭圆工具”属性面板
6.动作面板
动作面板主要由命令列表窗口、目标列表窗口和程序编辑窗口三大部分组成，如下图2.3所示。

命令列表窗口位于面板的左上角，是用于放置各种ActionScript动作脚本的窗口。

目标列表窗口位于面板的左下角，在该窗口中可以快速地选择需要添加动作脚本的目标元件或关键帧，从而节省了在场景中寻找及切换编辑窗口的步骤，大大提高了工作效率。

动作面板的右侧是程序编辑窗口，它是用于程序编写的地方。

图2.3动作面板
7.混色器面板
混色器面板是Flash中用于色彩处理的一个重要面板，熟练地使用该面板，可以帮助用户快速地完成色彩的填充，编辑出色彩丰富的图形，如图2.4所示。

图2.4 混色器面板
8.元件
元件是FALSH动画的基本组成元素，FALSH里面有很多时候需要重复使用素材，这时我们就可以把素材转换成元件，或者干脆新建元件，以方便重复使用或者再次编辑修改。

也可以把元件理解为原始的素材，通常存放在元件库中。

Flash 元件有三种形式，即影片剪辑、按钮、图形，元件只需创建一次，然后即可在整个文档或其他文档中重复使用。

影片剪辑元件可以理解为电影中的小电影，可以完全独立于场景时间轴，并且可以重复播放。

影片剪辑是一小段动画，用在需要有动作的物体上，它在主场景的时间轴上只占1 帧，就可以包含所需要的动画，影片剪辑就是动画中的动画。

“影片剪辑”必须要进入影片测试里才能观看得到。

按钮元件是用于具有交互功能的动画，当鼠标在按钮上滑过、点击、移开时按钮会产生不同的响应，并转到相应的帧。

图形元件是可以重复使用的静态图像，它是作为一个基本图形来使用的，一般是静止的一副图画，每个图形元件占1 帧。

9．库
动画是由许多的元件组成的，就像演戏一样，要有演员，当需要他们出场演出时，就
会从后台走向前台；在动画制作中，“后台”就是库，平时场景上的图案都以元件的形式保存，存放在库里。

库中有三大类元件：图形、影片剪辑、按钮。

只要是元件，就一定可以在库中找到他们，我们在制作动画的时候，如果需要用到元件，可以直接从库中把元件拖到场景中。

10．功能面板
如颜色、库、对齐等功能，都集中在这里，如图2.5所示。

图2.5 功能面板
三、图层
图层是时间轴面板的一部分，在默认状态下，图层面板位于时间轴面板的左侧，它是按顺序一层一层地相互叠加在一起的。

1.图层的概念
图层是动画制作中的一个非常重要的概念，它犹如一张透明的纸，上面可以绘制任何事物或书写任何文字，所有的图层叠合在一起，就组成了一幅完整的画。

图层有两大特点：除了画有图形或文字的地方，其他部分都是透明的，也就是说，下层的内容可以通过透明的这部分显示出来；图层又是相对独立的，修改其中一层，不会影响到其他层。

如果我们把制作的动画场景看成是一个舞台，图层就相当于舞台中演员所处的前后位置。

上面的图层在舞台的前面，处于不同图层的同一位置的对象，前面的挡住后面的；不同位置的对象，可以透过前面图层看到后面的图层对象，如图2.6所示。

图2.6图层显示
2.图层的作用
图层的作用主要有两个方面：一是可以对某图层中的对象或动画进行编辑和修改，而不会影响到其他图层中的对象；二是使用特殊图层可以制作特殊的动画效果。

3.创建新图层
了解了图层后，就让我们来试一试，为动画添加图层吧！
建立一个新的Flash文档时，系统会自动建立一个图层，默认的名字为“图层1”。

如果想创建一个新的图层，可以单击时间轴面板的增加图层按钮，就增加了一个图层，默认名字为“图层2”。

为了容易辨认，我们可以将新增的图层重新取一个名字，如图 2.7所示。

图2.7更改图层名称
一个图层创建后，我们可以在该图层中使用工具箱中的工具绘图，也可以导入原有的图片或元件。

4.导入图片和元件
我们可以把图片和元件导入到当前的图层或库中。

导入的方法如下：
在“文件”菜单中单击“导入”中的“导入到舞台”或“导入到库”命令，如图2.8所示。

图2.8“文件”菜单的导入
“导入到舞台”，我们可以在场景中看到导入的图片和元件，如果“导入到库”，系统会弹出“导入到库”对话框，如图2.9所示。

导入到库里的图片和元件我们在场景中看不到，使用时需要到库里查找。

图2.9 “导入到库”对话框
如图2.10所示将“小丑鱼”元件导入到场景中。

图2.10将“小丑鱼”元件导入到场景中
5.加入文字
接着我们为动画加上标题文字“海底世界”，具体操作如下：
选择工具箱中的“文本工具”，输入文字“海底世界”，打开如图2.11所示的属性面板，设置文本属性。

图2.11设置文本属性
如图2.12所示，加入了标题的画面是不是更漂亮了？
图2.12加入标题文字
练一练
新建一个图层，绘制或导入一个小孩的图形或图片。

第二节制作动画
制作动画是建立根据时间运动和变化效果的过程，动画可以是对象从一个位置移动到另一个位置的运动过程，可以是一段时间内颜色的变化过程，也可以是从一个形状到另一个形状的改变过程。

任何位置或外观形状根据时间而做的改变都是动画。

一、逐帧动画
逐帧动画是将一个动画的连续动作分解成一个一个图片，把每一个图片用关键帧描绘出来。

当关键帧连续播放，则显现动画效果。

动画效果：
夜色来临,万家灯火逐渐点亮,形成一个欣欣向荣的城市夜景。

图2.13万家灯火
操作步骤：
(1)启动FlashMX，在最下方“属性”对话框中将帧频设置为3，大小为550x400像素，背景颜色为深蓝色。

如图2.14所示。

图2.14属性面板
(2)选择绘图工具箱中的直线工具，在舞台上拖画出楼宇轮廓。

其方法是：选定位置—按下左键不放—拖动鼠标到预期位置—放开左键，放开后不要移动鼠标位置，继续画完图形，以保证各条直线端点很好地连接并形成闭合路径，为以后的填充做准备，如图 2.15所示。

图2.15 楼宇的轮廓线
(3)选择工具面板中的颜料桶工具，把填充颜色设置为灰色，移动鼠标在所选闭合路径区域内填充颜色，如图2.16所示。

图2.16把楼涂成灰色
(4) 选中第2帧，按右键插入关键帧，选择绘图工具条中的矩形工具，将填充颜色设置为黄色，边框颜色设置为无色，在舞台上画一个小正方形。

用黑箭头工具选中这个黄色矩形，右键——转换为元件，弹出“转换为元件”对话框，如图2.17所示。

命名元件为“正方”，类型选“图形”，单击“确定”按钮，将黄色正方形作为“元件”保存。

按此方法，再做一个名为“长方”的元件，其形状和大小如图2.18右上角所示。

图2.17转换为元件对话框
图2.18长方和正方元件
(5)在“菜单栏”中“窗口”菜单中选择“库”命令，打开“库”窗口，发现里面有两个图形类元件，如图2.19所示。

选中第3帧，按右键插入关键帧，从库中把2个元件的实体拖入舞台，将作为楼宇的窗口。

依此类推，第3帧到第15帧中每一帧都按右键插入关键帧，并增添小窗口数目。

因条件所限这里只显示第2，5，15，这3帧的内容，如图2.20所示。

图2.19库
图2.20 第2、5、15帧图示
(6)影片完成后的时间轴状态，如图2.21所示。

按菜单栏“文件”中“保存”保存源文件，并按“控制”中“测试影片”在源文件同一目录下导出影片。

图2.21完成后的时间轴
二、补间动画
补间动画：是通过定义动画两端关键帧的内容，然后让Flash添加它们之间内容的动画，
补间动画有两种——移动补间动画和形状补间动画。

1.移动补间动画
移动补间动画：在一个关键帧上放置元件，在另一个关键帧上更改这个元件的大小、位置、透明度等，flash根据两个关键帧的值来创建中间的动画被称为移动补间动画。

动画效果：
足球小将把足球踢出，足球形成飞速旋转移动效果。

图2.22足球小将
操作步骤：
（1）启动FlashMX，在“属性”对话框中将帧频设置为12，大小为550x400像素。

在图层1的第1帧导入一张带足球小将的图片作为动画背景。

方法是：菜单栏“文件”→选择“导入→导入背景图片，如图2.23所示。

图2.23导入背景图片
（2）选择时间轴左下角的图标，新建图层2，在图层2的空白关键帧上绘制足球。

方法是：首先用椭圆工具绘制足球外框，填充为白色。

然后用线条工具在足球内画个六边形，填充为黑色。

最后用线条工具向边框绘制直线，在适当位置填充黑色，如图2.24所示。

图2.24绘制足球
（3）把足球转换为元件，方法是：用箭头工具选中整个足球，鼠标放在足球上单击右键，选择“转换为元件”，如图2.25所示。

命名为“足球”，行为为“图形”。

图2.25转换为元件
（4）在图层1的第24帧插入帧，在图层2的第24帧插入关键帧。

选择图层2的第1帧，把足球放在起脚位置，选择图层2的第24帧，把足球放在目标位置，并用任意变形工具使足球稍稍变大一点，如图2.26所示。

图2.26 足球在第1帧和第24帧位置
（5）选择图层2的第1帧，在属性对话框“补间”中选择“动作”，“旋转”选择“顺时针”，如图2.27所示。

如动作动画成功，在图层2中第1帧到第24帧显示为紫色，中间有“实线箭头”，如图2.28所示。

图2.27设定动作补间动画
图2.28动作补间在时间轴的状态
（6）这是动画就已经做好了，足球已经可以飞了。

按菜单栏“文件”中“保存”保存源文件，并按“控制”中“测试影片”在源文件同一目录下导出影片。

2.形状补间动画
形状补间动画：在一个关键帧上绘制形状，在另一个关键帧上更改改形状甚至绘制新形状，flash根据两个关键帧的值来创建中间的动画被称为形状补间动画。

动画效果：
我是巴巴爸爸家族的一员，我在家人的关怀下逐渐长大了。

图2.29我长大了
操作步骤：
（1）启动FlashMX，设置“属性”对话框中帧频为12，大小为550x400像素。

在图层1的第1帧导入一张图片作为动画背景。

（2）选择时间轴左下角的图标，新建图层2，在图层2的空白关键帧上小巴巴。

方法是：首先用椭圆工具绘制外形和眼睛。

用画笔工具绘制眼仁，然后用线条工具
在嘴的位置绘制直线，然后使用箭头工具使嘴向下弯曲室外型更圆润，如图2.30所示。

图2.30绘制小巴巴
（3）在图层1的第30帧插入帧，在图层2的第30帧插入空白关键帧。

绘制长大后的巴巴。

如图2.31所示。

图2.31绘制大巴巴
（4）选择图层2的第1帧，在属性对话框“补间”中选择“形状”，如图2.32所示。

如形状动画成功，在图层2中第1帧到第30帧显示为绿色，中间有“实线箭头”，如图2.33所示。

图2.32设定形状补间
图2.33形状补间在时间轴的状态
（5）试试看，小巴巴就会逐渐长大了。

选择“文件”中“保存”保存源文件，并“测试影片”看看效果吧。

三、引导层动画
将一个或多个图层链接到引导层，将会有一个或多个对象沿引导层中的引导线运动的动画形式称为“引导层动画”。

这种动画可以使一个或多个元件完成曲线或不规则远动。

1.用铅笔工具绘制引导线的引导层动画
动画效果：
热带小丑鱼在海底珊瑚间按照我们想法自由的畅游。

图2.34热带小丑鱼
操作步骤：
（1）启动FlashMX，设置“属性”对话框中帧频为12，大小为550x400像素。

在图层1的第1帧导入一张海底图片作为动画背景。

（2）新建图层2，在第1帧导入小丑鱼并转换为元件，在第60帧“插入关键帧”，在图层1第60帧“插入帧”使背景延续，如图2.35所示。

图2.35分别插入“帧”和关键帧
（3）设计小丑鱼运动的轨迹，选中图层2，选择添加引导层，并在引导层的第1帧上用铅笔工具绘制引导线，即我们希望小丑鱼远动的轨迹，如图2.36所示。

图2.36 铅笔绘制引导线
（4）把图层2的第1帧小丑鱼和最后1帧小丑鱼吸附到引导线的起点和终点，方法是：选择图层2的第1帧，鼠标拖动小丑鱼元件中心点到引导线起点，当到起点时中心点小圈会有吸附感，就成功了，如图2.37所示。

最后1帧同理吸附到终点位置。

图2.37关键帧吸附到引导线
（5）选中图层2第1帧，创建动作补间动画，测试影片，小丑鱼就可以按照我们的想法自由的畅游了，程序最后如图2.38所示。

最后选择“文件”中的“保存”，保存动画。

图2.38引导层动画最后状态
2.椭圆工具绘制引导线的引导层动画
动画效果：
2011年，中国第一个空间实验室天宫一号成功发射，这是它绕地球飞行的动画。

图2.39天宫一号环绕飞行
操作步骤：
（1）启动FlashMX，设置“属性”对话框中帧频为12，大小为550x400像素。

在图层1的第1帧导入一张太空图片作为动画背景。

（2）新建图层2，在第1帧导入天宫一号图片并转换为元件，在第60帧“插入关键帧”，在图层1第60帧“插入帧”使背景延续，如图2.40所示。

图2.40导入背景图制作“天宫一号”元件
（3）设计天宫一号的椭圆形轨迹，选中图层2，选择添加引导层，并在引导层的第1帧上用椭圆工具绘制一个只有边线没有填充的圆圈，即我们希望的天宫一号的运动轨迹。

然后使用橡皮擦工具在圆圈上擦出一个小缺口，好确定天宫一号运动的起点和终点，如图2.41所示。

图2.41椭圆工具绘制引导线
（4）把图层2的第1帧天宫一号和最后1帧天宫一号吸附到引导线的起点和终点。

选中图层2第1帧，创建动作补间动画。

（5）新建图层3，导入地球图片作为椭圆轨迹运动围绕的中心，用地球遮挡住部分椭圆轨迹，使其产生环绕飞行的效果，如图2.42所示。

图2.42 环绕效果制作
（6）保存运行动画吧，我们的动画在运行时是看不到引导线的，所以引导线动画和你所画的引导线粗细、颜色都没有关系。

四、遮罩动画
遮罩动画：在Flash的图层中有一个遮罩图层类型，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象只能通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。

动画效果：
这是个对文字产生放大镜效果的动画。

图2.43 文字放大镜
操作步骤：
（1）启动FlashMX，设置“属性”对话框中帧频为12，大小为550x400像素。

在图层1中输入文字“信息技术”，调整字体字号颜色。

（2）新建图层2，复制“图层1”的文字到“图层2”，放大文字，在文字下使用“矩形工具”绘制一个足够大（可以覆盖住文字大小的就比较合适）的白色“矩形”。

如图2.44所示。

移动图层2遮挡图层1文字。

图2.44图层的文字状态
（3）新建图层3，在“图层3”中使用“椭圆工具”绘制一个椭圆图形，并转换为原件,如图2.45所示。

图2.45 绘制要做遮罩的圆
（4）分别在图层2和图层1中第40帧“插入帧”，在图层3的第40帧位置“插入关键帧”，这时，从上到下分别是“图层3”、“图层2”、“图层1”。

把图层3第40帧关键帧移到最后位置，并对图层3创建“动作”补间动画，如图所示2.46所示。

图2.46图层1、图层2、图层3状态
（5）把鼠标移动到“图层3”上，在标题处右键，快捷菜单中选择“遮罩层”，放大镜
效果的动画就制作完毕了。

整体显示如图2.47所示。

图2.47创建遮罩动画
五、制作并使用按钮元件
动画效果：
现在我们实现对前边所讲的天宫一号遮罩动画进行“暂停”“播放”“停止”等按钮控制。

图2.48 按钮动画“天宫一号”
操作步骤：
（1）在前面完成的“天宫一号”遮罩动画基础上，首先添加一个新的图层，在第1帧使用椭圆工具、直线工具等绘制一个“暂停图标”，如图2.49所示。

并且转换为元件，如图2.50所示。

图2.49绘制“暂停”图标
图2.50创建按钮元件
（2）双击“暂停”按钮，我们对按钮元件进行设置，如图2.51所示，按钮有4种状态，分别为“弹起”、“指针经过”“按下”“点击”
弹起：表示鼠标指针不在按钮上时的状态；
指针经过：表示鼠标指针在按钮上时的状态；
按下：表示鼠标单击按钮时的状态；
点击：表示对鼠标作出反应的区域，这个反应区域在电影中是看不见的。

图2.51按钮元件的四种状态
据此，我们对“暂停”按钮也对应绘制四种状态。

弹起指针经过按下点击
（3）设置完“暂停”按钮元件后，回到场景一，方法是单击时间轴下的“场景一”如图2.52所示。

图2.52回到场景一
（4）选中刚刚编辑过的暂停按钮元件，当属性上面的动作面板显示“动作-按钮”时，展开选项，选择左侧的“动作”—“影片控制”—“stop”，双击“stop”右侧命令行会显示“on(release){stop()}”按钮命令设定完成，如图2.53所示。

图2.53动作面板的设置
（5）同理分别新建图层制作“播放”按钮和“返回”按钮，在设置按钮动作时“播放”按钮动作为“动作”—“影片控制”—“play”；“返回”按钮动作为“动作”—“影片控制”—“goto”—帧输入“1”，如图2.54所示。

图2.54“播放”和“返回”的按钮动作设置
（6）接下来我们可以测试影片看看按钮控制动画的效果，最后保存。

六、导入声音和视频
动画效果：
清明上河图如涓涓流水般向右徐徐播放，同时背景响起清新的古筝曲。

图2.55 清明上河图动画
操作步骤：
（1）启动FlashMX，设置“属性”对话框中帧频为“12”，大小为550x400像素。

背景为“灰色”，在图层1中导入“清明上河图”节选图片，并转换为“图形”元件。

（2）把图层1第1帧的“清明上河图”元件对齐在右边起点处，在图层1第15帧和第240帧分别插入关键帧。

把第240帧“清明上河图”元件对齐在左边终点处。

并在第15帧到第240帧之间创建“动作”补间动画。

目的是让图片在1-15帧间作短暂停留，如图2.56所示。

图2.56 “清明上河图”元件的关键帧位置
(3)新建图层2，在第1帧输入文字“清明上河图”，在第15帧插入空白关键帧。

目的是在前15帧显示文字。

如图2.57所示。

图2.57输入文字并延续14帧
（4）新建图层3，插入背景音乐。

方法是：首先选择“文件”→“导入”→选择音乐，这样就把文件导入到库中了，然后选择菜单栏“窗口”→“库”→打开“库”窗口，最后选择刚刚导入的音频文件，拖动到场景1画布中。

图层3就显现了音频波形，如图2.58所示。

图2.58 创建声音图层
（5）最后我们在图片播放完后让图片和声音停止下来，选中图层1的第240帧关键帧，当动作框显示“动作-帧”时，展开选项，选择左侧的“动作”→“影片控制”→“stop”，
双击“stop”右侧命令行会显示“stop()”，图层1关键帧上会显现，帧命令设定完成。

在图层三的第240帧插入空白关键帧，选中，同理，当框显示“动作-帧”时，选择左侧的“动作”—“影片控制”—“stopAllSounds”，双击“stopAllSounds”右侧命令行会显示
“stopAllSounds()”，图层3关键帧上会显现，帧命令设定完成。

如图2.59所示，由此可见，帧命令必须在关键帧上完成。

图2.59 帧动作的设置
（6）最后我们测试影片看看“清明上河图”配背景音乐的播放效果，最后保存。

第三节综合实践：拼出家乡好风光
家乡，是每个人永远记忆的地方,不管我们走到哪里，它的样子永远印在我们的心上。

我们深爱我们的家乡，为他的每一点发展而欣喜。

你了解家乡吗？
作品赏析
图2.60 拼图游戏界面
上面是用家乡图画制的Flash拼图游戏，运用你的聪明与才智，让我们一起动手试一试。

思考交流
●你了解家乡的哪些方面。

●你能为家乡的变化做哪些事情。

●如何选择图片，怎样分割才是合理的。

综合实践
我们伟大的祖国，每天都在发生日新月异的变化；我们身边的生活，每天也有感动你的画面。

你可以收集你喜欢的图片，将它们制作成拼图小游戏，并将它展示给大家。

相信你一定会有更多创意的！
制作步骤
１.利用“文件”菜单，导入选定准备好的图片。

在场景里调整好图片的大小（注意不要把图片调整得和主场景一样大，要留一点空隙）。

然后选中图片，按快捷键Ctrl+B将图片打散。