动起来──Flash动画制作

IT商界

Pcking

　　网络的发展日新月异，不知不觉Flash动画已经成为网络不可分割的一部分。自从有了 Flash动画，我们的网络世界就变得无比精彩。放眼望去，从游戏，MTV到整个网站效果，无不打上了Flash的鲜明印记！Flash动画的SWF格式，作为现在网络动画的主要表现方式，有着以下几大特点。

　　1.矢量动画保证文件大小适合于网络传输

　　SWF是矢量动画格式，你可以直接在Flash MX中编辑矢量图形，也可以从外部导入矢量图。这样生成的动画可以任意缩放而不失真，并且体积很小。

　　2.简单的动画原理

　　直接使用Flash MX制作SWF动画相当简单，非常方便初学者入门。相对GIF而言，它可以更便捷地以关键帧来生成动画。现在越来越多的周边软件与插件也保证了SWF格式动画在更大的程度上被人认可。

　　3.多媒体特性

　　你可以给你的SWF作品添加音乐，音效，利用强大动画功能制作出MTV、动画短片，教学演示等多媒体作品。

　　4.AS控制交互式动画

　　SWF格式动画最大的特点是内置了强大的AS(actionscript)语言。利用它你可以完成复杂的运算与编程，并可以做出人机交互的游戏。还可以与数据库相连，制作Flash的聊天室，留言本。

　　随着网络软件的不断升级，Flash格式的动画被越来越多的浏览器支持。我们还是用网络上最常见的动画形式──Banner作例子，让大家来领略一下Flash动画的风采。

　　效果描述：

　　本实例为作者自己网站http://www.pckings.net的Banner广告。首先出现本站LOGO，从左至右运动到画面中央后停止，出现6种透明度、大小均不同的LOGO在画面中转动，随后LOGO移出画面，出现本站网址：www.pckings.net，静止一段时间后重复播放动画。由于完全使用矢量图，整段8秒的动画仅仅只有3.19KB。又一次展现出Flash格式动画的强大的网络适用性。

　　步骤1

　　打开Flash，新建一个文件，在工作区域下方的“参数选择”面板上设置大小为468×60像素，背景颜色为黑色，帧速率为16fps(帧速率是指动画每一秒钟播放的帧数，对于相同帧数的动画来说，帧速率越大动画播放越快)。

　　步骤2

　　使用菜单命令“插入→新建元件”，新建一个元件类型为“电影剪辑”，命名为“框”(元件是Flash动画的基本组成部分，具有强大的功能，一般来说Flash中的元件分为“电影剪辑”、“按钮”和“图形”三种。使用元件可以很方便地让我们修改、阅读Flash源文件，并且实现一些动画效果)。

　　步骤3

　　在工具栏上选择矩形工具，设置边框色为白色，填充色为深黄色。绘制一个矩形，在“参数选择”面板上设置此矩形的大小为468×60像素，使用快捷键“Ctrl+K”打开“对齐”面板，设置属性为舞台中央居中对齐。注意一定要将面板上的“相对于舞台”按钮按下(图1)。

　　步骤4

　　新建一个元件，命名为“图标”，在工具栏上选择画圆工具，选择边框色为白色，填充色为深蓝色，绘制一个正圆。绘制正圆的方法是按住键盘的Shift键并拖曳鼠标。

　　步骤5

　　选择边框色为白色，填充色为深绿色，再绘制一个较小的正圆。使用直线工具将它切割为四等份(如图2)，删除其中三个部分，复制剩余部分。使用菜单命令“修改→变形→旋转与缩放”，将它旋转120°(如图3)，再复制一个并旋转120°，最后将所得图形拼合，如图4所示。

　　步骤6

　　新建一个元件，命名为“图标动画”，按下键盘F11键打开“库”面板。“库”是当前Flash动画中所有元件的集合，我们可以方便地使用它管理制作好的元件。使用鼠标将“图标”元件拖曳到场景中，并设置为居中对齐。在时间轴上选第6帧，按下F6键，新建一个关键帧。用鼠标右键单击从第1帧到第6帧之间的任意一帧，选择“创建运动动画”。在“参数选择”面板上设置旋转方式为“顺时针”1圈(图5)。

　　步骤7

　　新建一个元件，命名为“www.pckings.net”，在工具栏上选择文字工具，输入文字www.pckings.net。在“参数选择“面板上设置其大小、颜色与字体。完成了所有元件的制作。

　　步骤8

　　回到“场景一”，从“库”中拖曳“框”元件到“图层1”，设置居中对齐。使用菜单命令“插入”──“图层”，新建一层“图层2”从“库”中拖曳“图标动画”元件到图层2，放置在画面的左侧(如图6)。打开参数选择面板上“颜色”下拉框，选择ALPHA(即不透明度)，设置不透明度为0%(即完全透明)。

　　步骤9

　　在图层2的第15帧建立关键帧。将这一帧上的“图标动画”元件移动到舞台正中央，并设置不透明度为100%。在第60、75、76、85帧建立关键帧，选择第75帧，将这一帧上的“图标动画”元件移动到舞台的右侧，并设置不透明度为0%。选择第76帧，将这一帧上的元件移动到舞台右侧。选择第85帧，将这一帧上的元件移动到舞台的左侧靠近边框的位置。在第1帧到第15帧、第60到第75帧、第76到第85帧之间建立运动动画。在第150帧按下F5键建立中间帧。

　　步骤10

　　新建一层“图层3”，在第15帧建立关键帧。从“库”面板中将“图标动画”元件拖曳到这一层，设置居中对齐，并且利用“变形”工具将它缩小一些。在这一层的第20、第60帧建立关键帧。选择第20帧上的元件，将它向左侧移动一段距离。在第55帧建立关键帧，在第20帧到第25帧、第55帧到第60帧之间建立运动动画。

　　步骤11

　　新建一层“图层4”，在第20帧建立关键帧。从“库”面板中将“图标动画”元件拖曳到这一层，设置居中对齐，并且利用“变形”工具将它缩小一些(比“图层3”上的元件要小)。在这一层的第25、第65帧建立关键帧。选择第25帧上的元件，将它向左侧移动一段距离，使其位置位于“图层3”上元件的左侧。在第60帧建立关键帧，在第25到第30帧、第60帧到第65帧之间建立运动动画。

　　步骤12

　　新建一层“图层5”，在第25帧建立关键帧。从“库”面板中将“图标动画”元件拖曳到这一层，设置居中对齐，并且利用“变形”工具将它缩小一些(比“图层4”上的元件要小)。在这一层的第30、70帧建立关键帧。选择第30帧上的元件，将它向左侧移动一段距离。使其位置位于“图层4”上元件的左侧在第65帧建立关键帧，在第25帧到30帧、65帧到70帧之间建立运动动画。

　　步骤13

　　使用同样的方法制作出右侧的动画效果，制作完成后的时间轴如图7所示。元件位置如图8所示。新建一层，在第86帧建立关键帧，从“库”面板上将“www.pckings.net”元件拖曳到这一帧，在第100帧建立关键帧。选择第86帧上的元件，使用工具栏上的”变形“工具将它放大，移动到Banner画面的下方，在第86与100帧之间建立运动动画。这样就完成了整个Banner动画的制作。

　　本例效果：http://vip.5dmedia.com/pcking/test/flashbanner.htm

　　本例源文件：http://vip.5dmedia.com/pcking/test/flashbanner.fla

　　其实能制作SWF格式动画的软件不止有Macromedia Flash MX，其他软件也可以直接制作，或者转换Flash动画格式。比较常见的有专业的文字动画工具Swish2000，为Flash 实现三维建模功能的Swift 3d，制作Flash屏幕保护的Screenwaver等等。而像3DMAX等大型软件也可以直接(或通过插件)输出SWF格式动画。