网页动画的设计与制作方法

鄂晶晶

网页动画的设计与制作方法

鄂晶晶

本文介绍了多个软件制作网页动画的方法，包括Flash、Fireworks、Adobe Image ready、Dreamweaver，对动画在不同开发环境下的制作方法和技巧进行了比较，分析了这些软件制作动画的优缺点。

网页动画；设计方法；制作方法

随着网络的普及，网络利用率不断增长，越来越多的人开始学习和制作网站。网页是网站的基本元素，制作网站必须从做网页开始。动画是网页中不可缺少的元素，学会制作动画是提高网站建设技巧的重要手段。那么，在什么环境下制作动画，在每种环境下如何制作动画，动画的品质优劣就成了制作动画的关键问题，本文针对常用的网页动画制作软件Flash、Fireworks、Adobe Image ready、Dreamweaver阐述了如何制作网页动画及制作的动画的特点。

一、利用Flash制作动画

Flash是网页动画设计软件，随着不断升级与完善，其功能也日趋强大，成为专业化的Web创作工具，用它可以将文字、图形图像、音乐、声效、动画等各种富有新意的界面融合在一起，以制作出高品质的网页动态效果。

Flash中制作动画，是以“时间轴”为基础的动画编制和播放。利用时间轴面板可以查看每一帧的画面，调整动画播放速度，安排帧的内容，改变帧与帧之间的关系。

（一）制作逐帧动画的步骤

1.在舞台的第一帧创建对象；

2.将某一帧转换为关键帧，在其中创建对象；

3.以此类推，把其他的帧转换为关键帧后再创建对象；

4.导入声音文件，结合动画成为MTV。

（二）制作补间动画的步骤

1.创建元件，在舞台的第一帧导入元件；

2.将某一帧转换为关键帧，改变元件的位置、大小等属性，以此类推把其他的帧转换为关键帧后再修改元件的属性；

3.在每两个关键帧中进行动作补间或形状补间；

4.导入声音文件，结合动画成为MTV。

（三）播放动画的步骤

1.在属性面板中通过设置帧频来调整动画的速度；

2.将制作好的动画使用文件菜单中的保存命令，生成扩展名为.fla的可编辑文件；

3.使用文件菜单中的发布命令，生成扩展名为.swf的文件，打开扩展名为.swf的文件进行观看。

（四）动画的品质和特点

Fash文件较小，是基于矢量图形的动画，支持Alpha通道，它可以使用Alpha通道定义或控制矢量图形中色彩的透明度和渐变效果。它还支持导入位图图形携带的Alpha通道信息。动画播放时支持事件响应和交互功能，一个对象可以有多个事件响应，事件响应由程序代码实现。Fash动画可以与声音文件结合制作出声形并茂的MTV，而Fireworks和Adobe Image ready没有这个功能，只能制作出GIF动态图片。

二、利用Fireworks制作动画

Fireworks是图形处理软件，它将位图与矢量图形合二为一，它既能处理静态图形图像，又能制作动画，由它制作的GIF动画是网络上应用最广泛的动画。GIF动画是由一系列的GIF格式图像顺序播放而成，每一幅GIF图称为动画中的一帧，每秒钟播放动画的帧数决定了动画的流畅程度。

（一）制作逐帧动画的步骤

1.在画布中制作第一帧中的画面；

2.选择窗口菜单中的帧命令，使用帧面板上的选项菜单添加或重置帧，在这一帧的画布上制作第二个画面；

3.以此类推，在每个帧分别把动画的每个场景制作出来。

（二）利用元件制作动画

1.在画布中制作第一帧中的对象；

2.选择对象，使用修改菜单中动画命令下的选择动画，设置动画的参数并确定；

3.对象添加了实例标志，并且自动在“库”中生成了元件。

（三）播放动画的步骤

1.使用帧面板的选项菜单中属性命令修改帧延迟时间，这样可以调整动画的播放速度；

2.选择窗口菜单中的优化命令，将导出文件格式设置成GIF动画；

3.文件菜单中导出命令，将动画导出后打开文件观看动画效果

（四）动画的品质和特点

GIF格式动画是为跨平台市场开发的，兼容性好，所有的浏览器都支持这种图像格式。GIF动画的图形格式只支持256种颜色，但支持透明，很适合制作网页上的徽标或横幅。GIF格式动画通过优化可以减小文件大小。利用元件制作动画的方法是自动生成元件，而Flash中必须先创建元件后使用元件。

三、利用Adobe Image ready制作动画

Adobe公司的Photoshop软件提供了运用工具来创建和制作在Web上使用的静态图像的功能，而Image ready软件提供了和它相同的编辑功能外，还包括了一些工具和调板，用来进行创建动态的动画功能。Adobe Image ready是通过在不同的时间显示不同的图层来实现动画效果，比起Flash，操作更为直观而简便，只要掌握好图层的编辑方法和不同帧的相关控制要领就能轻松编辑动画，可用于普通的动态网页制作及较复杂的影视广告的后期制作。

（一）制作动画步骤

1.打开各个帧中需要的图像，对图像分别进行编辑，再通过Photoshop工具面板上的“选择移动工具”按钮拖拽图像到新文件中并成为多个图层；

2.调整图层中的对象，进入Adobe Image ready动画编辑界面，利用Animation动画控制板来设置动画的帧频；

3.新建多个帧并制作每一个帧的画面。

（二）播放动画步骤

1.单击Animation动画控制板下方的播放按钮，预览动画的效果；

2.将制作好的动画保存，选择保存类型为GIF。

（三）动画的品质和特点

制作GIF动画，类似Fireworks软件的使用，但Image Ready不支持CMYK色彩模式，无法进行与印刷相关的图像操作，它是专门的网络图像处理工具，可以做一些QQ表情等。我们通过各种工具和参数可以进行精确调整，在图像质量不明显削弱的前提下，文件的体积会尽可能的小。

四、利用Dreamweaver制作动画

在Dreamweaver中制作动画可以采用时间轴和行为互相支持的方法，还可以利用脚本语言编写程序来实现动态效果。

（一）利用时间轴来制作动画

时间轴与行为结合制作动画。时间轴通过随时间变化改变层的位置、大小、可见性和叠放顺序等来创建动画，网页设计者既可以在时间轴中添加行为，也可以使用行为来控制时间轴。

1.制作动画的步骤。新建一个层，在层中插入对象，选择层厚进入时间轴面板，选择动画对象条末尾的关键帧，把层移动到动画结束位置。

2.添加行为的步骤。选择要添加行为的对象，在行为面板中选择相应的行为命令，设置触发行为的事件。

3.播放动画的步骤。播放磁头置于首帧，按住时间轴面板中的播放按钮，预览动画效果。

（二）动画的品质和特点

时间轴和行为互相支持使Dreamweaver制作动态网页的能力大大加强，在一个时间轴中可以同时为多个对象制作时间进程，这样可以实现多个对象的动态效果。

（三）利用脚本语言编写程序来实现动态效果

1.利用JavaScript脚本语言编写程序来实现动态效果。JavaScript是通过嵌入在标准的HTML语言中使用的。JavaScript代码放在