網(wǎng)絡動畫詳解

引言

現(xiàn)在，您在互聯(lián)網(wǎng)上到處都能看到動態(tài)圖片！Web設計者們可以使用多種技術(shù)來制作動畫，包括：

• GIF動畫-
• 動態(tài)HTML
• Java
• Shockwave和Flash

在本文中，我們將向您介紹這些技術(shù)的工作原理，以及它們的優(yōu)缺點。我們還將了解可進一步擴展Web動畫的最新技術(shù)。

網(wǎng)絡動畫的發(fā)展

在其簡短的歷史中，互聯(lián)網(wǎng)一直在不斷地快速發(fā)展。這種發(fā)展在很大程度上得益于兩種相反力量的推動作用：

• 互聯(lián)網(wǎng)創(chuàng)作者和讀者總是希望能夠通過互聯(lián)網(wǎng)傳送更加精彩的內(nèi)容。
• 為了讓大多數(shù)用戶能夠訪問，Web內(nèi)容的文件大小必須足夠小，才能在標準互聯(lián)網(wǎng)連接（電話調(diào)制解調(diào)器）上快速傳輸。

這些因素迫使互聯(lián)網(wǎng)革新者想出了一些巧妙的點子，以便在有限的帶寬連接下傳送復雜的內(nèi)容。

在下面幾部分中，我們將了解各種技術(shù)的原理以及它們?nèi)绾翁幚磉@兩種對立因素。

GIF動畫

互聯(lián)網(wǎng)歷史上最大的創(chuàng)新之一就是能夠在網(wǎng)頁的文字中插入圖片和圖表。這些插圖最初以位圖文件的形式出現(xiàn)。位圖文件完整描述了圖像中每個像素的顏色。為了減少這些位圖文件的大小，人們采用了多種不同的技術(shù)來壓縮圖像數(shù)據(jù)。通常，網(wǎng)站會以JPEG文件或GIF文件的形式發(fā)布這些圖像。

動畫其實是由一系列靜態(tài)圖像連續(xù)出現(xiàn)而形成的，因此很明顯地，要向網(wǎng)站中添加動畫的最簡單的方法就是張貼一系列的位圖圖像，并讓用戶瀏覽器連續(xù)顯示這些圖像。這種類型的動畫稱為GIF動畫或GIF89，它是互聯(lián)網(wǎng)中出現(xiàn)的第一種Web動畫，而且直到今天依然非常流行。

GIF動畫的主要優(yōu)勢是制作過程極其簡單，而且大多數(shù)Web瀏覽器都可以自動識別它。利用共享軟件程序，例如用于Windows平臺的GIF Construction Set或用于Macintosh平臺的GifBuilder，您只需提供多張位圖圖像來組成動畫的各個幀。然后您只要將文件發(fā)布出去，并給圖像加上標簽代碼即可，這和發(fā)布普通的靜態(tài)GIF一樣。

GIF動畫的不足之處在于，您必須確保動畫非常簡單，以達到縮減文件大小的目的。畢竟，每一幀都是一張完整的位圖圖像。如果您的動畫只由4個簡單的幀組成，那么它可以很方便傳送給大多數(shù)用戶，但如果幀數(shù)達到了20個，那文件可能就有點大了。而且即使能用20個幀，也并不能達到多好的效果——我們在電影中看到的流暢畫面每秒鐘至少由24張靜態(tài)圖像組成——因此GIF動畫是有相當?shù)木窒扌缘摹榱酥谱鞒鲚^長時間的電影，您必須在每個幀之間加入很大的跳轉(zhuǎn)，這就意味著畫面不會很流暢，和您在下面的示例中看到的一樣。

這對于闡釋簡單概念或只是在站點中加入一些醒目的修飾來說是一種很好的方法。但Web設計者和Web用戶發(fā)現(xiàn)，它遠遠不足以用來表達較為復雜的概念或是在網(wǎng)站中加入真正意義上的動畫。此外，GIF動畫中還不能加入聲音。

動態(tài)HTML

正如我們前面所看到的，GIF動畫的主要問題是“電影”的各個幀會顯著增加文件的總體大小。要解決這個問題，一種辦法是減少幀的數(shù)量。換句話說，您只需讓計算機選中一張靜態(tài)圖像，然后在屏幕中移動這張圖像。從某種意義上說，您其實常常在計算機上做這樣的事情，例如利用鼠標在屏幕中移動光標時。

最早的網(wǎng)頁大部分都是靜態(tài)文件。也就是說，只要加載了這些網(wǎng)頁，它們基本上就不會有什么變化了。這是超文本標記語言（HTML）這種網(wǎng)頁基本編程語言的固有屬性。HTML主要由一些簡單的標記組成，它們會告訴Web瀏覽器要在哪里顯示網(wǎng)頁元素。

隨著互聯(lián)網(wǎng)的不斷發(fā)展，Web設計者發(fā)現(xiàn)這種靜態(tài)內(nèi)容的顯示方式具有一些局限性。他們想要在網(wǎng)站中加入動態(tài)內(nèi)容——也就是說，當用戶下載某個特定網(wǎng)頁后，其中的內(nèi)容要能夠發(fā)生變化。動態(tài)HTML或dHTML是一種軟件技術(shù)術(shù)語，它可以幫助實現(xiàn)這個目的。dHTML內(nèi)容實際上是使用許多復雜的腳本語言（例如Javascript）生成的，它可以訪問互聯(lián)網(wǎng)瀏覽器中一種被稱作文檔對象模型的內(nèi)容。從原理上來說，文檔對象模型（DOM）控制著瀏覽器如何顯示網(wǎng)頁上的內(nèi)容。現(xiàn)在，幾乎所有用戶的瀏覽器都允許將DOM公開給腳本語言，因此這種腳本可以更改HTML元素（比如說，當您將鼠標移到某個詞匯上面時，它可以改變文本的顏色）。

dHTML最初的設計并沒有考慮到動畫，但它可以讓您通過更改HTML元素在網(wǎng)頁中加入動態(tài)效果。dHTML腳本只需告訴瀏覽器不斷在頁面上改變某張圖像的位置，圖像就會在屏幕中到處移動了。如果您對多張不同的圖像執(zhí)行此操作，就可以相對移動一系列圖像元素，從而制作出有趣的電影。

同GIF動畫一樣，dHTML動畫也可以被大多數(shù)Web瀏覽器自動識別，用戶不需要下載任何額外的組件。但是，要想制作出在所有瀏覽器中行為一致的dHTML內(nèi)容并不容易，它并不像GIF動畫那么簡單。一般來說，自己編寫動畫程序是非常困難的，不過您可以使用一些用戶界面友好的應用程序軟件，例如Macromedia Dreamweaver，它可以為您生成正確的腳本代碼。

dHTML的動畫應用是相當有限的，因為它所能做的只是在屏幕中移動靜態(tài)圖像。它雖比GIF動畫流暢許多，但對于很多應用來說，用它來顯示不斷變化的圖像并不是一種有效的方式。Web瀏覽器內(nèi)置的動畫功能對于dHTML只能提供比較有限的支持。為了在互聯(lián)網(wǎng)中加入更加復雜的動畫功能，創(chuàng)造者還需要設計出一些程序來彌補用戶瀏覽器的不足。

Java小程序

另外一種提供Web動畫的方式是使用一種叫做Java的面向網(wǎng)絡的通用編程語言。使用Java，編程人員可以創(chuàng)造出一些供用戶從互聯(lián)網(wǎng)下載的應用程序。能激活Java的瀏覽器使用的是虛擬機，這是一種可識別Java語言并將其轉(zhuǎn)換成可被用戶的計算機系統(tǒng)（Windows、MacOS、Unix）識別的軟件。虛擬機實質(zhì)上是一種插件，必須安裝在瀏覽器中。

Java語言的Web內(nèi)容通常被創(chuàng)建成稱為小程序的程序。小程序并不是完整的軟件應用程序，它們只能與瀏覽器一起使用。Web設計者們可以利用小程序來實現(xiàn)各種目的，其中一種最普遍的應用就是動畫。Java的主要優(yōu)點是它兼容所有的操作系統(tǒng)，而且非常靈活。您可以創(chuàng)建一個用于為單幀繪制簡單矢量圖形的動畫程序，也可以創(chuàng)建一個使用位圖圖像的動畫程序。Java非常適合用于創(chuàng)建交互動畫以及將動畫與其他網(wǎng)頁元素組合到一起。有關Java的更多信息，請查看計算機程序工作原理一文。

插件

互聯(lián)網(wǎng)于上世紀90年代初真正開始流行，當時的網(wǎng)站數(shù)量急劇增長。突然有一天涌現(xiàn)出各種各樣的網(wǎng)頁制作人員，他們希望能夠?qū)⑹诸^的各種多媒體內(nèi)容都放到網(wǎng)頁中。這些Web革新者并不是努力改變?yōu)g覽器以使其能夠識別和顯示這些不同形式的內(nèi)容，而是引入了瀏覽器插件這一概念。

插件是一些與瀏覽器一起使用的程序，可以幫助瀏覽器讀取和播放某些類型的文件。它們是一些體積相對較小的軟件，因此用戶可以很快地從互聯(lián)網(wǎng)下載它們。插件是專門為處理某類文件而設計的，因此可以實現(xiàn)許多標準瀏覽器無法實現(xiàn)的目的。

視頻
流式視頻通常采用可以在Web中觀看視頻內(nèi)容的插件方法。Web視頻可以包含聲音和更為精致的動畫。

現(xiàn)在，Web設計者可以利用dHTML腳本來檢測您是否安裝了特定插件。如果尚未安裝，瀏覽器會顯示一條信息，告訴您如何下載該插件。每個應用程序的情況都會有所不同，但通常要花費較長時間才能完成整個過程，這毫無疑問是使用這種方式處理動畫的一個不足之處。如果您已經(jīng)安裝了插件，那么當下載了足夠多的數(shù)據(jù)后，大多數(shù)瀏覽器就會開始播放電影了。

不同的插件有不同的工作方式。就像GIF動畫或視頻電影一樣，QuickTime和Media Player等視頻播放器顯示的是一系列靜態(tài)圖像，但它們能夠通過壓縮和流方式更快地傳輸這些圖像。壓縮是通過減少組成圖像的信息以降低文件大小的過程。流方式則是指播放器可以在整個文件被下載之前播放內(nèi)容。

盡管具有這些功能，但這類電影文件的下載還是需要很長的時間，或者如果連接速度較低的話，文件的圖像質(zhì)量會比較差。

Flash和Shockwave

到目前為止，最常見的動畫處理插件是Flash和Shockwave，它們都是Macromedia的產(chǎn)品。這兩種程序都是基于矢量的二維動畫查看器。下面幾部分將詳細介紹Flash和Shockwave。

????????????????????????????????????????????????????? 飛鏢文章中的Flash動畫

Flash和Shockwave

Macromedia憑借下面兩種緊密聯(lián)系的程序格式取得了巨大的成功：Flash和Shockwave。Flash現(xiàn)在是Web上大量動畫的標準格式，而Shockwave則是一種非常流行的用來提供更加復雜的動態(tài)內(nèi)容的格式。與Real Player和QuickTime文件不同，F(xiàn)lash和Shockwave電影實際上是作為網(wǎng)頁的一部分出現(xiàn)的，而且包括高層次的互動性，就像一個直觀的HTML頁面一樣。Shockwave播放器不僅可以播放動畫，而且可以識別用戶輸入，進而控制瀏覽器的響應方式。

Flash和Shockwave并不是用于這類動畫的唯一格式，但它們比任何其他類似格式都更受歡迎。尤其是Flash獲得了很大的成功，因為大多數(shù)瀏覽器都與它捆綁在一起，而且它可以更快速地傳輸流暢且吸引人的動畫。

快速下載
有幾個因素使得快速下載成為可能。首先是Flash文件和Shockwave文件的很多屬性。Flash文件和Shockwave文件不同于GIF動畫，它們大部分都是基于矢量的。這意味著和將圖片另存為一連串的像素值相反，authorware程序把圖像描述成一系列的線條和形狀，然后把這些線條和形狀記錄成數(shù)值。例如，一條直線是按它抬起的角度、它相對于其他形狀的坐標位置以及它相對于其他形狀的長度來描述的。這種描述方式讓程序能夠把圖像的幾個大的部分保存為幾個數(shù)據(jù)——這些部分可能由位圖文件中的數(shù)百個像素組成。Shockwave和Flash都可以使用位圖圖像，網(wǎng)絡管理員可以對位圖圖像進行壓縮，以縮小文件大小。這些位圖圖像還可以通過路徑的方式在屏幕內(nèi)移動，這非常類似靜態(tài)圖像在dHTML動畫中的移動，從而有助于降低整個文件的大小。不過，大多數(shù)Flash文件都是完全基于矢量的，因此可以很快地被加載。

如果您的圖像是使用這種方式創(chuàng)建的，那么它可以減少動畫制作者需要使用的幀數(shù)。通過計算兩幅圖像之間幾何信息的變化，F(xiàn)lash和Shockwave技術(shù)可以很輕松地在兩個基于矢量的關鍵幀之間創(chuàng)建12個幀。同必須將每個幀作為獨立圖像存儲的位圖動畫相比，這種辦法可以大大減少所需的磁盤空間。

另一項重要創(chuàng)新體現(xiàn)在文件的實際傳輸方式上。Flash文件和Shockwave文件都是互聯(lián)網(wǎng)上的流式文件，因此瀏覽器無需等到整個文件都下載完畢后才開始播放“電影”。正如服務器首先發(fā)送網(wǎng)頁的文本內(nèi)容，然后再發(fā)送所有圖像文件一樣，F(xiàn)lash站點在經(jīng)過配置后，也可以在瀏覽器加載其余Flash內(nèi)容的同時發(fā)送電影簡介。網(wǎng)站管理員可以對文件進行編碼，這樣在下載了部分文件內(nèi)容之后，瀏覽器就可以播放電影了。這個時間是經(jīng)過計算的，從而確保文件的每個部分在電影播到該部分之前完成傳輸。這也是流式視頻的工作原理。

可用性
Flash和Shockwave之所以能牢牢抓住這么多Web用戶和Web設計者的心，很大程度上是因為Macromedia的分發(fā)策略。現(xiàn)在，這些插件都是同互聯(lián)網(wǎng)瀏覽器和計算機操作系統(tǒng)封裝在一起提供的，因此即使您沒有安裝它們，也可以很容易得到免費的插件。所有安裝過程都發(fā)生在后臺，用戶根本不必退出瀏覽器程序，然后進行漫長的下載過程。authorware比較昂貴，但它具有非常可靠的實用性。

插件的更新也非常容易，使得Macromedia可以繼續(xù)研究和分發(fā)新的技術(shù)。這家公司有意將Flash和Shockwave播放器設計成可以適應未來的修改，因此用戶完全不必擔心升級的事情，只要下載文件就可以了。由于這些文件的體積都相對較小，因此用戶不必花費太長時間來下載。此外，如果站點檢測到您還沒有安裝最新版本的插件，瀏覽器就會提示您，并導航到Macromedia站點以下載更新程序。

Web上的各種動畫格式都有其特定的優(yōu)點和缺點。但很多網(wǎng)絡管理員最后還是選擇使用Flash，即使其他格式可能會更好地適應他們的需求。原因很簡單，因為大多數(shù)Web用戶都可以播放Flash文件，而且就算他們現(xiàn)在不能播放這類文件，也可以很容易地獲得Flash播放器。Flash和Shockwave的通用性讓更多的網(wǎng)絡管理員都選擇采用Flash內(nèi)容，從而進一步擴大了這些格式的使用范圍。

Flash和Shockwave的不同之處

盡管Flash和Shockwave軟件在很多應用領域上都相同，而且又同屬于一家公司，但它們還是有幾點顯著的不同。首先，兩種文件格式的制作程序不同。用于創(chuàng)建Shockwave文件的是Director，這是一種應用廣泛并使用已久的軟件應用程序，它的推出甚至比現(xiàn)代互聯(lián)網(wǎng)的出現(xiàn)還早。最初開發(fā)這種程序是為了創(chuàng)建光盤存儲器的動態(tài)內(nèi)容，而且至今仍用于這個目的。但隨著動態(tài)內(nèi)容在互聯(lián)網(wǎng)上越來越受到青睞，更新版本的Director也提供了更多適應Shockwave文件在 Web上使用的功能。

而Flash從一開始就是完全為了Web應用而產(chǎn)生的。Macromedia把Future Splash Animator（一種矢量藝術(shù)動畫程序）改造成為Flash。Macromedia的Flash版本是專為通過電話線連接的傳輸而打造的。所以從Flash和Shockwave的本質(zhì)來看，它們具有兩種不同的特性。相應地，它們也具有一系列截然不同的優(yōu)缺點：

• 加載Flash文件要比加載Shockwave文件快。
• Shockwave的功能更加豐富。您可以用它來創(chuàng)建更加復雜的游戲、更加精巧的互動和細節(jié)更加豐富的動畫。
• Shockwave可以兼容更多的文件類型。比如說，您可以將Flash文件導入到Shockwave電影中，反之則不行。
• Flash更加通用。超過90%的Web用戶都安裝了Flash插件，而安裝Shockwave插件的用戶還不到60%。
• Flash制作軟件比較便宜。Director的售價接近1,000美元，而Flash只要大約400美元。
• Flash是一種開源格式。任何人都可以知道它的工作原理，而且能夠自由改寫它以滿足自己的需要。Director使用的則是一種經(jīng)過編譯的文件格式，因此要修改程序極其困難。

隨著每一次的軟件更新，這兩種格式都在變得越來越相似。Shockwave的每次更新都增強了Web功能，而Flash的功能則變得越來越豐富。最終，這兩種格式可能會被合并成一種囊括了它們?nèi)績?yōu)點的綜合格式。

??????????????????????????????????????????????????????????? Flash電影

制作Flash和Shockwave電影

Flash和Director的使用都相當容易和有趣，這也正是當初設計它們的本意——它們都具有直觀的界面和大量自動化任務。這兩種程序在電影制作上的處理略有不同，而且?guī)缀跛薪M件的名稱也不盡相同，但它們卻又共用著一些基本組件。若要制作電影，您需要從三個方面來控制電影元素：

• 制作和剪輯組成電影的各個圖像。
• 按照這些圖像在電影的各個幀中出現(xiàn)的方式排列它們。
• 指定幀的順序，從而制作成電影。

Flash和Shockwave都提供了導入、生成和編輯電影元素的方法。Flash會將這些元素存儲在庫中；而在Shockwave中，則把它們存儲在演員表中。在兩種程序里，您都可以給這些元素分配任何動態(tài)效果，然后在舞臺上編排它們。舞臺上所呈現(xiàn)的將是實際出現(xiàn)在電影中的內(nèi)容。使用舞臺，您可以創(chuàng)建關鍵幀，并將它們按順序排列，以形成最終的電影。在Flash中，用于安排幀的區(qū)域被稱作時間線，而在Shockwave中，這個區(qū)域被稱作劇本。

現(xiàn)在您之所以能夠在Web中看到這么多的Flash動畫，原因之一是它非常容易生成。Flash和Director就像是在您的桌面放上了一個功能豐富的動畫制作室，而且可以自動完成很多復雜的多媒體任務。例如，您想讓地球從屏幕一端滾到另一端時，您根本不必去制作地球滾動過程中的每個幀，而只要告訴Flash起點和終點，并在這些幀之間分配滾動動作就可以了。

?????????????????????????????????????????????? 發(fā)動機文章中的Flash動畫

網(wǎng)絡動畫的未來

Web動畫史上下一次重大事件將是三維Web圖形，它將讓Web用戶能夠在另一個層次上實現(xiàn)與在線內(nèi)容的交互。在二維動畫中，Web設計者決定了您所能看到的內(nèi)容，這就像動畫制作者決定了您從電視動畫片中能看到什么內(nèi)容一樣。但在三維圖形中，您可以實際訪問三維模型，從而控制所顯示的內(nèi)容。您可以轉(zhuǎn)動模型，激活某些功能，在某些情況下還可以改變它的尺寸。博聞網(wǎng)正是以這樣的一些三維模型為特色的。

與Flash和Shockwave二維動畫一樣，您需要下載插件才能觀看三維Web圖形。現(xiàn)在已經(jīng)有許多公司開發(fā)出了這種軟件。Viewpoint已取得了一些成績，而NxView也在他們的網(wǎng)站上提供了插件。2000年7月，Macromedia和Intel共同宣布他們正在開發(fā)Shockwave的三維功能。用戶將只需下載一個更新程序，即可將三維功能添加到他們的Shockwave播放器中。Intel之所以選擇在三維領域同Macromedia合作，是因為后者在多媒體播放器方面所取得的成功。兩家公司希望Shockwave三維格式能夠成為三維圖形的Web標準。

Shockwave技術(shù)能夠縮放三維圖形的大小，因此能夠很好地適應不同的連接速度。從原理上來說，如果您的連接速度較低，Shockwave播放器將會下載具有較少多邊形的模型，而三維模型正是由這些幾何形狀組合而成的。也就是說，您將會丟失一些細節(jié)，但圖像的清晰度和動畫的流暢性不會下降。

這種三維Web技術(shù)可以讓您制作出各種有趣的網(wǎng)站內(nèi)容。其中一項最有前景的應用是電子商務。在線購物者在購物時不用再跟靜態(tài)圖像打交道，而能夠從各個角度去觀看商品，就像在商店中購物一樣。有些站點還使用三維圖形創(chuàng)造出“虛擬試衣間”。用戶可以創(chuàng)建一個適合他們體形的三維模型，并查看不同衣服在他們身上是否合身。

這項技術(shù)還可以在類似博聞網(wǎng)這樣的教育類站點中增加新層次的內(nèi)容。我們已經(jīng)發(fā)布了一些使用NxView生成的三維圖形的文章，而且計劃在未來開發(fā)出更多的三維內(nèi)容。這些圖形可以讓用戶更清楚地了解各項技術(shù)及其工作過程——例如，他們可以從各個角度觀察引擎，就像引擎真的擺放在他們面前一樣。

這項技術(shù)的確非常神奇，它將會改變整個互聯(lián)網(wǎng)的面貌，就像靜態(tài)圖像和Flash動畫曾給互聯(lián)網(wǎng)帶來的變革一樣。在以后的文章中，我們將深入探討這項技術(shù)的工作原理及其功能，并會特別關注Macromedia和Intel在開發(fā)作為Web標準的Shockwave播放器方面的進展情況。

隨著越來越多的Web用戶利用高帶寬連接，Web動畫在未來也會有一些較大的改變。一種想法就是讓Web越來越不像書本，而更多地像視頻游戲——您可以在三維交互世界中獲得信息。另一個主張則是把Web變得更接近于電視，從而具有更多高質(zhì)量的動畫和視頻。這實際上都要取決于Web設計者們想在他們的站點中安排什么內(nèi)容，而這反過來又取決于Web用戶想看到什么樣的內(nèi)容。不管如何，有一點是很清楚的，那就是互聯(lián)網(wǎng)仍將繼續(xù)高速發(fā)展。