网络动画详解

网络动画详解

引言

现在，您在互联网上到处都能看到动态图片！Web设计者们可以使用多种技术来制作动画，包括：

• GIF动画­
• 动态HTML
• Java
• Shockwave和Flash

在本文中，我们将向您介绍这些技术的工作原理，以及它们的优缺点。我们还将了解可进一步扩展Web动画的最新技术。

网络动画的发展

在其简短的历史中，互联网一直在不断地快速发展。这种发展在很大程度上得益于两种相反力量的推动作用：

• 互联网创作者和读者总是希望能够通过互联网传送更加精彩的内容。
• 为了让大多数用户能够访问，Web内容的文件大小必须足够小，才能在标准互联网连接（电话调制解调器）上快速传输。

这些因素迫使互联网革新者想出了一些巧妙的点子，以便在有限的带宽连接下传送复杂的内容。

在核辐射文章中的Flash动画。这是一幅颇为复杂的图片，但它的大小却不超过7,000个字节！

在下面几部分中，我们将了解各种技术的原理以及它们如何处理这两种对立因素。

GIF动画

互联网历史上最大的创新之一就是能够在网页的文字中插入图片和图表。这些插图最初以位图文件的形式出现。位图文件完整描述了图像中每个像素的颜色。为了减少这些位图文件的大小，人们采用了多种不同的技术来压缩图像数据。通常，网站会以JPEG文件或GIF文件的形式发布这些图像。

动画其实是由一系列静态图像连续出现而形成的，因此很明显地，要向网站中添加动画的最简单的方法就是张贴一系列的位图图像，并让用户浏览器连续显示这些图像。这种类型的动画称为GIF动画或GIF89，它是互联网中出现的第一种Web动画，而且直到今天依然非常流行。

GIF动画的主要优势是制作过程极其简单，而且大多数Web浏览器都可以自动识别它。利用共享软件程序，例如用于Windows平台的GIF Construction Set或用于Macintosh平台的GifBuilder，您只需提供多张位图图像来组成动画的各个帧。然后您只要将文件发布出去，并给图像加上标签代码即可，这和发布普通的静态GIF一样。

GIF动画的不足之处在于，您必须确保动画非常简单，以达到缩减文件大小的目的。毕竟，每一帧都是一张完整的位图图像。如果您的动画只由4个简单的帧组成，那么它可以很方便传送给大多数用户，但如果帧数达到了20个，那文件可能就有点大了。而且即使能用20个帧，也并不能达到多好的效果——我们在电影中看到的流畅画面每秒钟至少由24张静态图像组成——因此GIF动画是有相当的局限性的。为了制作出较长时间的电影，您必须在每个帧之间加入很大的跳转，这就意味着画面不会很流畅，和您在下面的示例中看到的一样。

GIF动画中的各个帧

最终形成的动画

这对于阐释简单概念或只是在站点中加入一些醒目的修饰来说是一种很好的方法。但Web设计者和Web用户发现，它远远不足以用来表达较为复杂的概念或是在网站中加入真正意义上的动画。此外，GIF动画中还不能加入声音。

动态HTML

正如我们前面所看到的，GIF动画的主要问题是“电影”的各个帧会显著增加文件的总体大小。要解决这个问题，一种办法是减少帧的数量。换句话说，您只需让计算机选中一张静态图像，然后在屏幕中移动这张图像。从某种意义上说，您其实常常在计算机上做这样的事情，例如利用鼠标在屏幕中移动光标时。

最早的网页大部分都是静态文件。也就是说，只要加载了这些网页，它们基本上就不会有什么变化了。这是超文本标记语言（HTML）这种网页基本编程语言的固有属性。HTML主要由一些简单的标记组成，它们会告诉Web浏览器要在哪里显示网页元素。

随着互联网的不断发展，Web设计者发现这种静态内容的显示方式具有一些局限性。他们想要在网站中加入动态内容——也就是说，当用户下载某个特定网页后，其中的内容要能够发生变化。动态HTML或dHTML是一种软件技术术语，它可以帮助实现这个目的。dHTML内容实际上是使用许多复杂的脚本语言（例如Javascript）生成的，它可以访问互联网浏览器中一种被称作文档对象模型的内容。从原理上来说，文档对象模型（DOM）控制着浏览器如何显示网页上的内容。现在，几乎所有用户的浏览器都允许将DOM公开给脚本语言，因此这种脚本可以更改HTML元素（比如说，当您将鼠标移到某个词汇上面时，它可以改变文本的颜色）。

dHTML最初的设计并没有考虑到动画，但它可以让您通过更改HTML元素在网页中加入动态效果。dHTML脚本只需告诉浏览器不断在页面上改变某张图像的位置，图像就会在屏幕中到处移动了。如果您对多张不同的图像执行此操作，就可以相对移动一系列图像元素，从而制作出有趣的电影。

同GIF动画一样，dHTML动画也可以被大多数Web浏览器自动识别，用户不需要下载任何额外的组件。但是，要想制作出在所有浏览器中行为一致的dHTML内容并不容易，它并不像GIF动画那么简单。一般来说，自己编写动画程序是非常困难的，不过您可以使用一些用户界面友好的应用程序软件，例如Macromedia Dreamweaver，它可以为您生成正确的脚本代码。

dHTML的动画应用是相当有限的，因为它所能做的只是在屏幕中移动静态图像。它虽比GIF动画流畅许多，但对于很多应用来说，用它来显示不断变化的图像并不是一种有效的方式。Web浏览器内置的动画功能对于dHTML只能提供比较有限的支持。为了在互联网中加入更加复杂的动画功能，创造者还需要设计出一些程序来弥补用户浏览器的不足。

Java小程序

另外一种提供Web动画的方式是使用一种叫做Java的面向网络的通用编程语言。使用Java，编程人员可以创造出一些供用户从互联网下载的应用程序。能激活Java的浏览器使用的是虚拟机，这是一种可识别Java语言并将其转换成可被用户的计算机系统（Windows、MacOS、Unix）识别的软件。虚拟机实质上是一种插件，必须安装在浏览器中。

Java语言的Web内容通常被创建成称为小程序的程序。小程序并不是完整的软件应用程序，它们只能与浏览器一起使用。Web设计者们可以利用小程序来实现各种目的，其中一种最普遍的应用就是动画。Java的主要优点是它兼容所有的操作系统，而且非常灵活。您可以创建一个用于为单帧绘制简单矢量图形的动画程序，也可以创建一个使用位图图像的动画程序。Java非常适合用于创建交互动画以及将动画与其他网页元素组合到一起。有关Java的更多信息，请查看计算机程序工作原理一文。

插件

互联网于上世纪90年代初真正开始流行，当时的网站数量急剧增长。突然有一天涌现出各种各样的网页制作人员，他们希望能够将手头的各种多媒体内容都放到网页中。这些Web革新者并不是努力改变浏览器以使其能够识别和显示这些不同形式的内容，而是引入了浏览器插件这一概念。

插件是一些与浏览器一起使用的程序，可以帮助浏览器读取和播放某些类型的文件。它们是一些体积相对较小的软件，因此用户可以很快地从互联网下载它们。插件是专门为处理某类文件而设计的，因此可以实现许多标准浏览器无法实现的目的。

视频
流式视频通常采用可以在Web中观看视频内容的插件方法。Web视频可以包含声音和更为精致的动画。

现在，Web设计者可以利用dHTML脚本来检测您是否安装了特定插件。如果尚未安装，浏览器会显示一条信息，告诉您如何下载该插件。每个应用程序的情况都会有所不同，但通常要花费较长时间才能完成整个过程，这毫无疑问是使用这种方式处理动画的一个不足之处。如果您已经安装了插件，那么当下载了足够多的数据后，大多数浏览器就会开始播放电影了。

不同的插件有不同的工作方式。就像GIF动画或视频电影一样，QuickTime和Media Player等视频播放器显示的是一系列静态图像，但它们能够通过压缩和流方式更快地传输这些图像。压缩是通过减少组成图像的信息以降低文件大小的过程。流方式则是指播放器可以在整个文件被下载之前播放内容。

尽管具有这些功能，但这类电影文件的下载还是需要很长的时间，或者如果连接速度较低的话，文件的图像质量会比较差。

Flash和Shockwave

到目前为止，最常见的动画处理插件是Flash和Shockwave，它们都是Macromedia的产品。这两种程序都是基于矢量的二维动画查看器。下面几部分将详细介绍Flash和Shockwave。

                                                      飞镖文章中的Flash动画

Flash和Shockwave

Macromedia凭借下面两种紧密联系的程序格式取得了巨大的成功：Flash和Shockwave。Flash现在是Web上大量动画的标准格式，而Shockwave则是一种非常流行的用来提供更加复杂的动态内容的格式。与Real Player和QuickTime文件不同，Flash和Shockwave电影实际上是作为网页的一部分出现的，而且包括高层次的互动性，就像一个直观的HTML页面一样。Shockwave播放器不仅可以播放动画，而且可以识别用户输入，进而控制浏览器的响应方式。

潜水艇文章中的互动Flash电影。单击按钮可以让潜水艇上升和下沉。

Flash和Shockwave并不是用于这类动画的唯一格式，但它们比任何其他类似格式都更受欢迎。尤其是Flash获得了很大的成功，因为大多数浏览器都与它捆绑在一起，而且它可以更快速地传输流畅且吸引人的动画。

快速下载
有几个因素使得快速下载成为可能。首先是Flash文件和Shockwave文件的很多属性。Flash文件和Shockwave文件不同于GIF动画，它们大部分都是基于矢量的。这意味着和将图片另存为一连串的像素值相反，authorware程序把图像描述成一系列的线条和形状，然后把这些线条和形状记录成数值。例如，一条直线是按它抬起的角度、它相对于其他形状的坐标位置以及它相对于其他形状的长度来描述的。这种描述方式让程序能够把图像的几个大的部分保存为几个数据——这些部分可能由位图文件中的数百个像素组成。Shockwave和Flash都可以使用位图图像，网络管理员可以对位图图像进行压缩，以缩小文件大小。这些位图图像还可以通过路径的方式在屏幕内移动，这非常类似静态图像在dHTML动画中的移动，从而有助于降低整个文件的大小。不过，大多数Flash文件都是完全基于矢量的，因此可以很快地被加载。

如果您的图像是使用这种方式创建的，那么它可以减少动画制作者需要使用的帧数。通过计算两幅图像之间几何信息的变化，Flash和Shockwave技术可以很轻松地在两个基于矢量的关键帧之间创建12个帧。同必须将每个帧作为独立图像存储的位图动画相比，这种办法可以大大减少所需的磁盘空间。

另一项重要创新体现在文件的实际传输方式上。Flash文件和Shockwave文件都是互联网上的流式文件，因此浏览器无需等到整个文件都下载完毕后才开始播放“电影”。正如服务器首先发送网页的文本内容，然后再发送所有图像文件一样，Flash站点在经过配置后，也可以在浏览器加载其余Flash内容的同时发送电影简介。网站管理员可以对文件进行编码，这样在下载了部分文件内容之后，浏览器就可以播放电影了。这个时间是经过计算的，从而确保文件的每个部分在电影播到该部分之前完成传输。这也是流式视频的工作原理。

可用性
Flash和Shockwave之所以能牢牢抓住这么多Web用户和Web设计者的心，很大程度上是因为Macromedia的分发策略。现在，这些插件都是同互联网浏览器和计算机操作系统封装在一起提供的，因此即使您没有安装它们，也可以很容易得到免费的插件。所有安装过程都发生在后台，用户根本不必退出浏览器程序，然后进行漫长的下载过程。authorware比较昂贵，但它具有非常可靠的实用性。

插件的更新也非常容易，使得Macromedia可以继续研究和分发新的技术。这家公司有意将Flash和Shockwave播放器设计成可以适应未来的修改，因此用户完全不必担心升级的事情，只要下载文件就可以了。由于这些文件的体积都相对较小，因此用户不必花费太长时间来下载。此外，如果站点检测到您还没有安装最新版本的插件，浏览器就会提示您，并导航到Macromedia站点以下载更新程序。

Web上的各种动画格式都有其特定的优点和缺点。但很多网络管理员最后还是选择使用Flash，即使其他格式可能会更好地适应他们的需求。原因很简单，因为大多数Web用户都可以播放Flash文件，而且就算他们现在不能播放这类文件，也可以很容易地获得Flash播放器。Flash和Shockwave的通用性让更多的网络管理员都选择采用Flash内容，从而进一步扩大了这些格式的使用范围。

Flash和Shockwave的不同之处

尽管Flash和Shockwave软件在很多应用领域上都相同，而且又同属于一家公司，但它们还是有几点显著的不同。首先，两种文件格式的制作程序不同。用于创建Shockwave文件的是Director，这是一种应用广泛并使用已久的软件应用程序，它的推出甚至比现代互联网的出现还早。最初开发这种程序是为了创建光盘存储器的动态内容，而且至今仍用于这个目的。但随着动态内容在互联网上越来越受到青睐，更新版本的Director也提供了更多适应Shockwave文件在 Web上使用的功能。

而Flash从一开始就是完全为了Web应用而产生的。Macromedia把Future Splash Animator（一种矢量艺术动画程序）改造成为Flash。Macromedia的Flash版本是专为通过电话线连接的传输而打造的。所以从Flash和Shockwave的本质来看，它们具有两种不同的特性。相应地，它们也具有一系列截然不同的优缺点：

• 加载Flash文件要比加载Shockwave文件快。
• Shockwave的功能更加丰富。您可以用它来创建更加复杂的游戏、更加精巧的互动和细节更加丰富的动画。
• Shockwave可以兼容更多的文件类型。比如说，您可以将Flash文件导入到Shockwave电影中，反之则不行。
• Flash更加通用。超过90%的Web用户都安装了Flash插件，而安装Shockwave插件的用户还不到60%。
• Flash制作软件比较便宜。Director的售价接近1,000美元，而Flash只要大约400美元。
• Flash是一种开源格式。任何人都可以知道它的工作原理，而且能够自由改写它以满足自己的需要。Director使用的则是一种经过编译的文件格式，因此要修改程序极其困难。

随着每一次的软件更新，这两种格式都在变得越来越相似。Shockwave的每次更新都增强了Web功能，而Flash的功能则变得越来越丰富。最终，这两种格式可能会被合并成一种囊括了它们全部优点的综合格式。

                                                            Flash电影

制作Flash和Shockwave电影

Flash和Director的使用都相当容易和有趣，这也正是当初设计它们的本意——它们都具有直观的界面和大量自动化任务。这两种程序在电影制作上的处理略有不同，而且几乎所有组件的名称也不尽相同，但它们却又共用着一些基本组件。若要制作电影，您需要从三个方面来控制电影元素：

• 制作和剪辑组成电影的各个图像。
• 按照这些图像在电影的各个帧中出现的方式排列它们。
• 指定帧的顺序，从而制作成电影。

Flash和Shockwave都提供了导入、生成和编辑电影元素的方法。Flash会将这些元素存储在库中；而在Shockwave中，则把它们存储在演员表中。在两种程序里，您都可以给这些元素分配任何动态效果，然后在舞台上编排它们。舞台上所呈现的将是实际出现在电影中的内容。使用舞台，您可以创建关键帧，并将它们按顺序排列，以形成最终的电影。在Flash中，用于安排帧的区域被称作时间线，而在Shockwave中，这个区域被称作剧本。

现在您之所以能够在Web中看到这么多的Flash动画，原因之一是它非常容易生成。Flash和Director就像是在您的桌面放上了一个功能丰富的动画制作室，而且可以自动完成很多复杂的多媒体任务。例如，您想让地球从屏幕一端滚到另一端时，您根本不必去制作地球滚动过程中的每个帧，而只要告诉Flash起点和终点，并在这些帧之间分配滚动动作就可以了。

                                               发动机文章中的Flash动画

网络动画的未来

Web动画史上下一次重大事件将是三维Web图形，它将让Web用户能够在另一个层次上实现与在线内容的交互。在二维动画中，Web设计者决定了您所能看到的内容，这就像动画制作者决定了您从电视动画片中能看到什么内容一样。但在三维图形中，您可以实际访问三维模型，从而控制所显示的内容。您可以转动模型，激活某些功能，在某些情况下还可以改变它的尺寸。博闻网正是以这样的一些三维模型为特色的。

与Flash和Shockwave二维动画一样，您需要下载插件才能观看三维Web图形。现在已经有许多公司开发出了这种软件。Viewpoint已取得了一些成绩，而NxView也在他们的网站上提供了插件。2000年7月，Macromedia和Intel共同宣布他们正在开发Shockwave的三维功能。用户将只需下载一个更新程序，即可将三维功能添加到他们的Shockwave播放器中。Intel之所以选择在三维领域同Macromedia合作，是因为后者在多媒体播放器方面所取得的成功。两家公司希望Shockwave三维格式能够成为三维图形的Web标准。

Shockwave技术能够缩放三维图形的大小，因此能够很好地适应不同的连接速度。从原理上来说，如果您的连接速度较低，Shockwave播放器将会下载具有较少多边形的模型，而三维模型正是由这些几何形状组合而成的。也就是说，您将会丢失一些细节，但图像的清晰度和动画的流畅性不会下降。

这种三维Web技术可以让您制作出各种有趣的网站内容。其中一项最有前景的应用是电子商务。在线购物者在购物时不用再跟静态图像打交道，而能够从各个角度去观看商品，就像在商店中购物一样。有些站点还使用三维图形创造出“虚拟试衣间”。用户可以创建一个适合他们体形的三维模型，并查看不同衣服在他们身上是否合身。

这项技术还可以在类似博闻网这样的教育类站点中增加新层次的内容。我们已经发布了一些使用NxView生成的三维图形的文章，而且计划在未来开发出更多的三维内容。这些图形可以让用户更清楚地了解各项技术及其工作过程——例如，他们可以从各个角度观察引擎，就像引擎真的摆放在他们面前一样。

这项技术的确非常神奇，它将会改变整个互联网的面貌，就像静态图像和Flash动画曾给互联网带来的变革一样。在以后的文章中，我们将深入探讨这项技术的工作原理及其功能，并会特别关注Macromedia和Intel在开发作为Web标准的Shockwave播放器方面的进展情况。

随着越来越多的Web用户利用高带宽连接，Web动画在未来也会有一些较大的改变。一种想法就是让Web越来越不像书本，而更多地像视频游戏——您可以在三维交互世界中获得信息。另一个主张则是把Web变得更接近于电视，从而具有更多高质量的动画和视频。这实际上都要取决于Web设计者们想在他们的站点中安排什么内容，而这反过来又取决于Web用户想看到什么样的内容。不管如何，有一点是很清楚的，那就是互联网仍将继续高速发展。