3.3Flash动画制作指导

Flash是由Macromedia公司推出的交互式矢量图和 Web 动画的标准，被Adobe公司收购。用Flash制作动画的人被称为闪客。网页设计者可以使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。后又于2005年12月3日被Adobe公司收购。Flash通常也指Macromedia Flash Player（即现在的Adobe Flash Player）。2012年8月15日，Flash退出Android平台，正式告别移动端。

3.3.1　Flash界面初识

Flash CS6的用户界面根据使用习惯不同，界面也是不同的，这里主要以传统界面为例进行讲解（如果你的界面与这里讲的不同，那么请看一下你的工作区是否设置成传统界面）。在传统工作区状态下，用户界面主要由五个主要部分组成：菜单栏、时间轴、工具面板、属性设置面板、舞台（场景）。

（1）菜单栏

和任何一个教程一样，对菜单栏肯定是要介绍的，但是要说明的是，在学习Flash的过程中，菜单栏的内容不一定都要熟悉，只了解一下就行了。当然，如果你想要更深入的了解，那就一个个点开看一下。其实日常操作中只要我们记住了快捷键，基本不需要去使用菜单栏里的内容。这里建议可以重点看下文件、编辑、修改、窗口这四个菜单，其他的可以大概了解下，至少知道用到什么功能，在哪个菜单下可以快速找到。菜单栏如图3-1所示。

图3-1

（2）时间轴

无论是动画制作、视频编辑还是声音处理软件，基本上都会有一个时间轴，因此，搞清楚这里时间轴的概念，那么其他软件的时间轴你也可以很容易地理解和掌握了。

时间轴，正如其名称，是指一个画面在某个时间在轴上所在的位置或样子。你也可以这样理解，时间轴就相当于一张长长的电影胶片，每一帧就相当于电影胶片的一张，当连续播放每一帧上的图像时就形成了连续的动画。而时间轴上的多个层就相当于你可以使用多个胶片，每个胶片可以控制不同的角色，比如第一层的胶片主要用于背景动画，第二层的胶片用来显示角色的运动动画等，为每一层赋予不同的角色就会使你的动画更加丰富。时间轴如图3-2所示。

图3-2

（3）工具面板

工具面板上主要包含了绘图所需要的各种工具和调整工具，这个应该算是Flash学习的一个重点，毕竟Flash是矢量动画制作软件，首先要用到的就是矢量绘图。在一般的布局中，工具栏一般位于界面的左侧。

（4）属性设置面板

称其为属性设置面板应该不够准确，这里包括了很多的工具面板及各种属性参数设置，可以先关闭，之后在窗口菜单中打开，一般情况下也是视情况进行使用的。属性设置各个面板在窗口菜单里，这部分面板其实是一个组合，根据自己的需要可以关闭相应的面板，也可以从窗口菜单中打开需要的面板。

（5）舞台（场景）

舞台是指各种元件的展示场所，也是最终输出后的场景，所以一般又叫作场景。一个动画可以由多个场景组成，也可以只有一个场景。

3.3.2　Flash动画中的基本概念

要使用Flash制作动画，首先要对以下概念有充分了解。

（1）矢量图

矢量图也称为面向对象的图像或绘图图像，繁体版本上称之为向量图，是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示的图像。

矢量图形最大的优点是无论放大、缩小或旋转等都不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果。矢量图的每个对象都是一个自成一体的实体，可以维持它原有的清晰度和弯曲度。这意味着它们可以按最高分辨率显示到输出设备上。

（2）位图

位图图像（Bitmap），亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。常用的位图处理软件是Photoshop。

处理位图时要着重考虑分辨率。处理位图时，输出图像的质量决定于处理过程开始时设置的分辨率高低。分辨率是一个笼统的术语，它指一个图像文件中包含的细节和信息的大小，以及输入、输出或显示设备能够产生的细节程度。操作位图时，分辨率既会影响最后输出的质量，也会影响文件的大小。处理位图需要三思而后行，因为给图像选择的分辨率通常在整个过程中都伴随着文件。无论是在一个300 dpi的打印机上打印图片，还是在一个2 570 dpi的照排设备上印刷图片，文件总是以创建图像时所设的分辨率大小进行打印或印刷，除非打印机的分辨率低于图像的分辨率。如果希望最终输出看起来和屏幕上显示的一样，那么在开始工作前，就需要了解图像的分辨率和不同设备分辨率之间的关系。显然矢量图就不必考虑这么多。

（3）帧

帧，就是影像动画中最小单位的单幅影像画面。一帧就是一幅静止的画面，连续的帧就形成动画，如电视图像等。

在Flash中，帧分为关键帧、过渡帧、空白关键帧、空白帧四种。

我们通常说的帧数，简单地说，就是在1秒钟时间里传输的图片的帧数，也可以理解为图形处理器每秒钟能够刷新的次数，通常用FPS（Frames Per Second）表示。每一帧都是静止的图像，快速连续地显示帧便形成了运动的假象。高的帧率可以得到更流畅、更逼真的动画。每秒钟的帧数（FPS）愈多，所显示的动作就会愈流畅。一般Flash动画是每秒12帧。

（4）关键帧

关键帧是这样一个帧：其中的新元件实例显示在时间轴中。关键帧也可以是包含 ActionScript代码以控制文档的某些方面的帧。还可以将空白关键帧添加到时间轴作为计划稍后添加的元件的占位符，或者显式地将该帧保留为空。

（5）过渡帧

在定义了起始关键帧和结束关键帧后，在起始关键帧和结束关键帧之间的帧被称为过渡帧。过渡帧是动画实现的详细过程，它能具体体现动画的变化过程。当用鼠标左键单击过渡帧时，在工作区可以预览这一帧的动画情况。过渡帧的画面由计算机生成，无法进行编辑操作。

（6）空白关键帧

空白关键帧是没有任何对象存在的帧，主要用于在画面与画面之间形成间隔，它在时间轴上是以空心圆的形式显示，用户可以在其上绘制图形，一旦在空白关键帧中创建了内容，空白关键帧就会自动转变为关键帧，按F7快捷键可创建空白关键帧。

（7）时间轴

时间轴表示整个动画与时间之间的关系，这一定义已经在上文中解释过了。

（8）图层

关于图层（Layer）的概念，学过Photoshop的人都不会陌生。形象地说，图层可以看成是叠放在一起的透明的胶片，如果层上没有任何东西的话，你就可以透过它直接看到下一层。所以我们可以根据需要，在不同层上编辑不同的动画而互不影响，并在放映时得到合成的效果。使用图层并不会增加动画文件的大小，相反它可以更好地帮助我们安排和组织图形、文字和动画。图层是Flash中最基本而且重要的内容，因而需要很好地掌握。

（9）场景

场景中的动作组合成一个连贯的电影。当我们开始要编辑电影时，都是在第一个场景“Scene 1”中开始，场景的数量是没有限制的。在Flash中可以有多个场景，在不同场景中跳转可以用gotoandplay功能。场景面板的位置在：窗口-其他面板-场景。

（10）元件

元件是在Flash中创建的图形、按钮或影片剪辑，它们都保存在“库”面板中。元件只需要创建一次，即可在整个文档中重复使用。当修改元件的内容后，所修改的内容就会运用到所有包含此元件的文件中，这样就使得用户对影片的编辑更加容易。在文档中使用元件会明显地减小文件的大小。Flash元件可以套用。

Flash元件有三种：影片剪辑、图形元件、按钮。

影片剪辑：可以独立于主时间轴播放的动画剪辑，可以加入动作代码。

图形元件：依赖主时间轴播放的动画剪辑，不可以加入动作代码。(www.xing528.com)

按钮：有“常规”“弹起”“按下”和“点击”四帧的特殊影片剪辑，可以加入动作代码。

影片剪辑顾名思义可以存放影片（即动画），当图形元件和影片剪辑都有动画时，把影片剪辑元件放到主场景时，它会循环地不停地播放。而把图形元件放到主场景时，它不会播放。

3.3.3　Flash动画的制作步骤

本节通过项目流程，说明动画制作每一步的思维方式和该避免的错误，但没有实际的操作步骤。因此，这里的教程不适合学软件操作的同学。初学者可以先看本节的内容，再去进行详细的软件操作学习，从而更好地理解Flash动画制作的流程。

（1）图形绘制

在一个Flash动画中，画面主要出现的是动画角色和动画背景。

如图3-3所示，画面中的女孩是在Flash中绘制的，是矢量图像，而背景则是经过一定处理的位图。简单看一下女孩图像，每一个我们看见的色块都是一个绘制出来的图形，如女孩的嘴，由半圆形的带描边的大轮廓、白色的牙齿和浅色的舌头三个部分构成。女孩其他部位的图形则更加丰富，比如头发部分，底色本身就分了好几层（这一点可以从头发的描边线条看出），高光也做了两种，每一个高光细节的图形都需要制作者一一进行绘制。

图3-3

关于动画角色和背景到底应该是矢量图像还是位图的问题，其实并不是特别重要，重要的是，凡是你希望在画面中动的图像，都应该以独立的图形元件、独立图层的形式存在。就比如上述案例中，女孩眼睛里的高光会闪动，表现女孩的期待感，因此，女孩眼中的高光和女孩的眼睛就不应该合并成在同一个图层。女孩会晃动的辫子也是同样的道理。

适当地将没有动画效果的图形进行合并，对于后续动画的制作，会带来极大的便利，便于制作者梳理自己的逻辑。

（2）制作帧动画

帧，是进行Flash动画制作的最基本的单位，每一个精彩的Flash动画都是由很多个精心雕琢的帧构成的，在时间轴上的每一帧都可以包含需要显示的所有内容，包括图形、声音、各种素材和其他多种对象。Flash动画中，实现动画的途径就是使用关键帧。在前文，我们已经对四种帧有了简单的了解。现在，让我们进一步了解这些特殊帧的具体用法。

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

同一层中，在前一个关键帧的后面任一帧处插入关键帧，是复制前一个关键帧上的对象，并可对其进行编辑操作；如果插入普通帧，是延续前一个关键帧上的内容，不可对其进行编辑操作；插入空白关键帧，可清除该帧后面的延续内容，可以在空白关键帧上添加新的实例对象。

需要注意的是，关键帧和空白关键帧上都可以添加帧动作脚本，普通帧上则不能。

普通帧是对关键帧时候的形态的时间延长，让物体保持同一状态更长时间；关键帧就是当你需要物体运动或变化的时候需要用到的，第一个关键帧是物体的开始状态，而第二个关键帧就是物体的结束状态，而中间的补间的帧就是物体有第一个关键帧到第二个关键帧的变化过程；空白关键帧就是舞台什么东西都没有，在做物体出现、消失的时候很有用，如果需要物体在中间某个时间消失就可以在时间轴上对应某处插入空白关键帧。

案例十三中女孩做出的动作，就是让她的两个胳膊，分别以肩关节为圆心进行旋转，从旋转开始，到旋转结束，分别在两个端点打上关键帧，中间生成补间动画。这个动作本身是比较简单的动画，而为了让女孩的动作更加自然，案例作品后面还加入了让女孩微微下蹲（表现为女孩整体高度变低，裙子宽度变大）等细节。

在对Flash进行进一步学习以后，可以制作出更为复杂的动画动作。

案例十三

（3）场景设置

场景的数量是没有限制的。一个完整的动画可以由多个场景组成，也可以只有一个场景，这个视自己的习惯而定，多场景还是单场景不是绝对的。

但是一般来说，联系其他制作软件的制作思路，多场景的动画在后续的编辑、修改的过程中会比较方便。

案例十四

如案例十四所示，动画开头出现了好几个不同的场景片段。每个场景都有细节动画（如背景中的人物等）。这些片段如果放置在同一个场景中，那么场景中图层整理的逻辑就是“画面1”“画面2”等。如果设置为多场景动画，则每个场景的图层整理逻辑就是“前景”“角色”“背景”等。

自测题十三

一、填空题

1.时间轴相当于一个画面在某个时间在轴上所在的______________。

2.矢量图是计算机图形学中用_________________等基于数学方程的几何图元表示的图像。

3.位图是由__________________________________________组成的。

4.在Flash中，帧分为_________________、_________________、_________________、________________四种。

5.时间轴表示___________与___________之间的关系。

6.Flash元件有三种：___________、__________、__________。

7.关键帧在时间轴上显示为___________，空白关键帧在时间轴上显示为空心的圆点，普通帧在时间轴上显示为___________。

二、单选题

1.对于以下图片格式，处理时不需要考虑分辨率的是（　）

（A）JPEG；（B）BMP；

（C）PNG；（D）Flash中绘制的图形。

2.以下哪个面板可以设置舞台背景？（　）

（A）对齐面板；（B）颜色面板；

（C）动作面板；（D）属性面板。

3.制作地球绕太阳转的效果时，应该用到以下哪种类型的图层？（　）

（A）遮罩层；（B）普通层；

（C）运动引导层；（D）以上均可。