admin 管理员组

文章数量: 1086019


2024年3月21日发(作者：java在线看视频)

第１１卷第１期　

２Ｏｌ２年１月　

软件导刊　

Ｓｏｆｔｗａｒｅ　Ｇｕｉｄｅ　

Ｖｏ１．１１　Ｎ０．１　

Ｊａｎ．２０ｌ２　

网页动画设计与制作方法　

鄂晶晶　

（呼伦贝尔学院计算机科学与技术学院，内蒙古呼伦贝尔０２１０００）　

摘　要：针对多个软件制作网页动画的方法分别进行了介绍，包括Ａｄｏｂｅ　Ｉｍａｇｅｒｅａｄｙ，Ｆｌａｓｈ，Ｆｉｒｅｗｏｒｋｓ，Ｄｒｅａｍ—　

ｗｅａｖｅｒ，对动画在不同开发环境下的制作方法和技巧进行了比较，分析了在这些软件中制作动画的优缺点　

关键词：网页动画；设计与制作；方法　

中图分类号：ＴＰ３１１．５２　文献标识码：Ａ　文章编号：１６７２—７８Ｏ０（２０１２）ＯＯ１—００７６—０２　

１．２播放动画　

０　引言　

随着网络的普及，人们接触和使用网络的时间不断增　

在属性面板中通过设置帧频来调整动画的速度，将制　

作好的动画使用文件菜单中的保存命令，生成扩展名为．　

ｆｌａ的可编辑文件，使用文件菜单中的发布命令，生成扩展　

名为．ｓｗｆ的文件，打开扩展名为．ｓｗｆ的文件进行观看　

１．３动画的品质和特点　

长，计算机操作水平也不断的提高。越来越多的人对网站　

设计与网页制作这个领域感兴趣，他们就开始学习和制作　

网站。网页是网站的基本元素，所以制作网站必须从做网　

页开始。动画是网页中不可缺少的元素，学会制作动画是　

Ｆａｓｈ文件较小，是基于矢量图形的动画，支持Ａｌｐｈａ　

通道，它可以使用Ａｌｐｈａ通道定义或控制矢量图形中色彩　

的透明度和渐变效果。它还支持导人位图图形携带的　

Ａｌｐｈａ通道信息。动画播放时支持事件响应和交互功能，　

一

提高网站建设技巧的重要手段。那么，在什么环境下制作　

动画，在每种环境下如何制作动画，制作出的动画的品质　

优劣就成了制作动画的关键问题。本文针对常用的网页　

动画制作软件Ｆｌａｓｈ，Ａｄｏｂｅ　Ｉｍａｇｅｒｅａｄｙ，Ｆｉｒｅｗｏｒｋｓ，　

个对象可以有多个事件响应，事件响应由程序代码实　

现。Ｆａｓｈ动画可以与声音文件结合制作出声形并茂的　

ＭＴＶ，而Ｆｉｒｅｗｏｒｋｓ和Ａｄｏｂｅ　Ｉｍａｇｅｒｅａｄｙ没有这个功能，　

Ｄｒｅａｍｗｅａｖｅｒ阐述了如何制作网页动画，制作的动画有什　

么特点等相关内容。　只能制作出ｇｉｆ动态图片。　

１利用Ｆｌａｓｈ制作动画　

Ｆｌａｓｈ是网页动画设计软件，随着不断升级与完善，其　

功能也日趋强大，成为专业化的ｗｅｂ创作工具，用它可以　

将文字，图形图像，音乐，声效，动画，受骗等各种富有新意　

的界面融合在一起，以制作出高品质的网页动态效果。　

Ｆｌａｓｈ中制作动画，是以“时间轴”为基础的动画编制　

２利用Ｆｉｒｅｗｏｒｋｓ制作动画　

Ｆｉｒｅｗｏｒｋｓ是图形处理软件，它将位图与矢量图形合　

二为一，它既能处理静态图形图像，又能制作动画，由它制　

作的ＧＩＦ动画是网络上应用最广泛的动画。　

２．１制作动画　

在画布中制作第一帧中的画面，选择窗口菜单中的帧　

命令，使用帧面板上的选项菜单添加或重置帧，在这一帧　

的画布上制作第二个画面，以此类推，在每个帧分别把动　

和播放。利用时间轴面板可以查看每一帧的画面，调整动　

画播放速度，安排帧的内容，改变帧与帧之间的关系。　

１．１制作动画　

画的每个场景制作出来，完成逐帧动画的制作。如果利用　

在舞台的第一帧创建对象，将某一帧转换为关键帧，　

在其中创建对象，以此类推，把其他的帧转换为关键帧后　

再创建对象，导人声音文件，结合动画成为ＭＴＶ，制作出　

逐帧动画。如果在关键帧之间进行补间则制作出补间动　

元件做动画需要在画布中制作第一帧中的对象，选择对　

象，使用修改菜单中动画命令下的选择动画，设置动画的　

参数并确定，对象添加了实例标志，并且自动在“库”中生　

成了元件，　

２．２播放动画　

画。如果在一个舞台上制作多个动画，需要将每个动画分　

别在不同的图层中制作，声音的导入也需要在独立于动画　

的图层中进行。　

使用帧面板的选项菜单中属性命令修改帧延迟时间，　

这样可以调整动画的播放速度，选择窗１２Ｉ菜单中的优化命　

，

作者简介：鄂晶晶（１９８０一），女，黑龙江齐齐哈尔人，硕士，呼伦贝尔学院计算机科学与技术学院讲师

研究方向为计算机应用。　

第１期　鄂晶晶：网页动画设计与制作方法　．７７．　

令，将导出文件格式设置成ＧＩＦ动画，打开文件观看动画　

效果　

２．３动画的品质和特点　

面板，选择动画对象条末尾的关键帧，把层移动到动画结　

束位置，选择要添加行为的对象，在行为面板中选择相应　

的行为命令，设置触发行为的事件。设置帧速Ｆｐｓ，自动　

播放，循环等项，将播放磁头置于首帧，按住时间轴面板中　

的播放按钮，预览动画效果　

４．２利用脚本语言编写程序来实现动态效果　

ＧＩＦ格式动画是为跨平台市场开发的，兼容性好，所　

有的浏览器都支持这种图像格式。ＧＩＦ动画的图形格式　

只支持２５６种颜色，但支持透明，很适合制作网页上的徽　

标或横幅。ＧＩＦ格式动画通过优化可以减小文件大小。　

利用元件制作动画的方法是自动生成元件，而ｆｌａｓｈ中必　

须先创建元件后使用元件。　

ＪａｖａＳｃｒｉｐｔ是通过嵌入在标准的ＨＴＭＬ语言中使用　

的。ＪａｖａＳｃｒｉｐｔ代码放在＜ｓｃｒｉｐｔ＞与＜ｓｃｒｉｐｔ＞标记之　

间，以便将脚本代码与ＨＴＭＬ标记符区分开来　Ｓｃｒｉｐｔ　

块可以放在＜ｈｅａｄ＞与＜ｈｅａｄ￣之间，也可以放在＜ｂｏｄｙ　

＞与＜ｂｏｄｙ＞之间。基本结构如下：　

＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝“ＪａｖａＳｃｒｉｐｔ”＞　

３利用Ａｄｏｂｅ　Ｉｍａｇｅｒｅａｄｙ制作动画　

Ａｄｏｂｅ公司的ＰｈｏｔｏＳｈｏｐ软件包括了一些工具和调　

板，用来进行创建动态的动画功能。Ａｄｏｂｅ　Ｉｍａｇｅｒｅａｄｙ是　

ＪａｖａＳｃｒｉｐｔ脚本代码　

＜ｓｃｒｉｐｔ＞　

通过在不同的时间显示不同的图层来实现动画效果，比起　

Ｆｌａｓｈ，操作更为直观而简便，只要掌握好图层的编辑方法　

和不同帧的相关控制要领就能轻松编辑动画，可用于普通　

的动态网页制作及较复杂的影视广告的后期制作。　

３．１制作动画　

４．３动画的品质和特点　

结合时间轴与行为做动画可以在一个时间轴中同时　

为多个对象制作时间进程，这样可以实现多个对象的动态　

效果。使用脚本语言与ＨＴＭＬ结合可以在网页中建立飞　

舞的图片，弹出式窗口，鼠标滚动，自动变色的超级链接等　

动态效果。当需要使用数据库，建立用户与数据库的信息　

交互，就要使用服务器端动态页面技术。　

打开各个帧中需要的图像，对图像分别进行编辑，再　

通过ｐｈｏｔｏｓｈｏｐ工具面板上的“选择移动工具”按钮拖拽　

图像到新文件中并成为多个图层。调整图层中的对象，进　

入Ａｄｏｂｅ　Ｉｍａｇｅｒｅａｄｙ动画编辑界面，利用Ａｎｉｍａｔｉｏｎ动画　

５结束语　

本文主要论述了网页中动画的制作原理，方法，环境，　

控制板来设置动画的帧频。新建多个帧并制作每一个帧　

的画面　

３．２播放动画　

以及各种动画的特点。这几个软件在制作网页动画方面　

各有优缺点，所以，真正制作动画时它们需要相互支持，取　

长补短，综合应用在网页上。　

参考文献：　

Ｅ１］王传华，段青玲，马钦．网页设计与制作技术教程（第２版）［Ｍ］．北　

京：清华大学出版社．２００７．　

单击Ａｎｉｍａｔｉｏｎ动画控制板下方的播放按钮，预览动　

画的效果，将制作好的动画保存，选择保存类型为ｇｉｆ　

３．３动画的品质和特点　

制作ＧＩＦ动画，类似Ｆｉｒｅｗｏｒｋｓ软件的使用，但Ｉｍａｇ—　

ｅＲｅａｄｙ不支持ＣＭＹＫ色彩模式，无法进行与印刷相关的　

图像操作，它是专门的网络图像处理工具，可以做一些　

ＱＱ表情等。　

Ｅ２］　韩雪涛．动画设计与制作（第１　ｇｔ）［Ｍ］．北京：中国水利水电出版　

社，２００５．　

Ｅ３］王嘉佳．网页制作实务教程（第１版）［Ｍ］．北京：清华大学出版社，　

４利用Ｄｒｅａｍｗｅａｖｅｒ制作动画　

在Ｄｒｅａｍｗｅａｖｅｒ中制作动画可以采用时间轴和行为　

２００９．　

［－４３李珂．Ｆｌａｓｈ在中国网络新闻传播中的应用［Ｊ］．当代电视，２００９．　

Ｅ５３王春艳．Ｆｌａｓｈ动画设计制作的基本素质与技能［Ｊ］．今日科苑，　

２００９．　

互相支持的方法，还可以利用脚本语言编写程序来实现动　

态效果。　

４．１　利用时间轴与行为结合来制作动画　

［６３阳西述．网页制作与网站设计［Ｍ］．武汉：武汉大学出版社，２００６．　

（责任编辑：王钊）　

新建一个层，在层中插入对象，选择层厚进入时间轴　

Ｍｅｔｈｏｄｓ　ｏｆ　Ｄｅｓｉｇｎ　ａｎｄ　Ｐｒｏｄｕｃｔｉｏｎ　ｏｆ　Ｗｅｂ　Ａｎｉｍａｔｉｏｎ　

Ａｂｓｔｒａｃｔ：Ｉｎ　ｔｈｉｓ　ｐａｐｅｒ，ｍｅｔｈｏｄｓ　ｏｆ　ｐｒｏｄｕｃｔｉｎｇ　Ｗｅｂ　ａｎｉｍａｔｉｏｎ　ｂｙ　ｓｅｖｅｒａｌ　ｓｏｆｔｗａｒｅ　ａｒｅ　ｄｅｓｃｒｉｂｅｄ　ｒｅｓｐｅｃｔｉｖｅｌｙ．Ｉｔ　ｉｎｃｌｕｄｅｓ　

Ａｄｏｂｅ　Ｉｍａｇｅｒｅａｄｙ，Ｆｌａｓｈ，Ｆｉｒｅｗｏｒｋｓ，Ｄｒｅａｍｗｅａｖｅｒ．Ｔｈｉｓ　ａｒｔｉｃｌｅ　ｃｏｍｐａｒｅｓ　ｔｈｅ　ｐｒｏｄｕｃｔｉｏｎ　ｍｅｔｈｏｄｓ　ａｎｄ　ｔｅｃｈｎｉｑｕｅｓ　ｏｆ　ａｎ—　

ｉｍａｔｉｏｎ　ｉｎ　ｄｉｆｆｅｒｅｎｔ　ｄｅｖｅｌｏｐｍｅｎｔ　ｅｎｖｉｒｏｎｍｅｎｔｓ　ａｎｄ　ａｎａｌｙｚｅｓ　ｔｈｅ　ａｄｖａｎｔａｇｅｓ　ａｎｄ　ｄｉｓａｄｖａｎｔａｇｅｓ　ｏｆ　ｍａｋｉｎｇ　ａｎｉｍａｔｉｏｎ　ｂｙ　

ｔｈｅｍ．　

Ｋｅｙ　Ｗｏｒｄｓ：Ｗｅｂ　Ａｎｉｍａｔｉｏｎ；Ｄｅｓｉｇｎ　ａｎｄ　Ｐｒｏｄｕｃｔｉｏｎ；Ｍｅｔｈｏｄｓ　


本文标签： 动画 制作 网页

版权声明：本文标题：网页动画设计与制作方法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1711021164a584429.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。