鄂晶晶

網(wǎng)頁動畫的設計與制作方法

鄂晶晶

本文介紹了多個軟件制作網(wǎng)頁動畫的方法，包括Flash、Fireworks、Adobe Image ready、Dreamweaver，對動畫在不同開發(fā)環(huán)境下的制作方法和技巧進行了比較，分析了這些軟件制作動畫的優(yōu)缺點。

網(wǎng)頁動畫；設計方法；制作方法

隨著網(wǎng)絡的普及，網(wǎng)絡利用率不斷增長，越來越多的人開始學習和制作網(wǎng)站。網(wǎng)頁是網(wǎng)站的基本元素，制作網(wǎng)站必須從做網(wǎng)頁開始。動畫是網(wǎng)頁中不可缺少的元素，學會制作動畫是提高網(wǎng)站建設技巧的重要手段。那么，在什么環(huán)境下制作動畫，在每種環(huán)境下如何制作動畫，動畫的品質(zhì)優(yōu)劣就成了制作動畫的關鍵問題，本文針對常用的網(wǎng)頁動畫制作軟件Flash、Fireworks、Adobe Image ready、Dreamweaver闡述了如何制作網(wǎng)頁動畫及制作的動畫的特點。

一、利用Flash制作動畫

Flash是網(wǎng)頁動畫設計軟件，隨著不斷升級與完善，其功能也日趨強大，成為專業(yè)化的Web創(chuàng)作工具，用它可以將文字、圖形圖像、音樂、聲效、動畫等各種富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。

Flash中制作動畫，是以“時間軸”為基礎的動畫編制和播放。利用時間軸面板可以查看每一幀的畫面，調(diào)整動畫播放速度，安排幀的內(nèi)容，改變幀與幀之間的關系。

（一）制作逐幀動畫的步驟

1.在舞臺的第一幀創(chuàng)建對象；

2.將某一幀轉(zhuǎn)換為關鍵幀，在其中創(chuàng)建對象；

3.以此類推，把其他的幀轉(zhuǎn)換為關鍵幀后再創(chuàng)建對象；

4.導入聲音文件，結(jié)合動畫成為MTV。

（二）制作補間動畫的步驟

1.創(chuàng)建元件，在舞臺的第一幀導入元件；

2.將某一幀轉(zhuǎn)換為關鍵幀，改變元件的位置、大小等屬性，以此類推把其他的幀轉(zhuǎn)換為關鍵幀后再修改元件的屬性；

3.在每兩個關鍵幀中進行動作補間或形狀補間；

4.導入聲音文件，結(jié)合動畫成為MTV。

（三）播放動畫的步驟

1.在屬性面板中通過設置幀頻來調(diào)整動畫的速度；

2.將制作好的動畫使用文件菜單中的保存命令，生成擴展名為.fla的可編輯文件；

3.使用文件菜單中的發(fā)布命令，生成擴展名為.swf的文件，打開擴展名為.swf的文件進行觀看。

（四）動畫的品質(zhì)和特點

Fash文件較小，是基于矢量圖形的動畫，支持Alpha通道，它可以使用Alpha通道定義或控制矢量圖形中色彩的透明度和漸變效果。它還支持導入位圖圖形攜帶的Alpha通道信息。動畫播放時支持事件響應和交互功能，一個對象可以有多個事件響應，事件響應由程序代碼實現(xiàn)。Fash動畫可以與聲音文件結(jié)合制作出聲形并茂的MTV，而Fireworks和Adobe Image ready沒有這個功能，只能制作出GIF動態(tài)圖片。

二、利用Fireworks制作動畫

Fireworks是圖形處理軟件，它將位圖與矢量圖形合二為一，它既能處理靜態(tài)圖形圖像，又能制作動畫，由它制作的GIF動畫是網(wǎng)絡上應用最廣泛的動畫。GIF動畫是由一系列的GIF格式圖像順序播放而成，每一幅GIF圖稱為動畫中的一幀，每秒鐘播放動畫的幀數(shù)決定了動畫的流暢程度。

（一）制作逐幀動畫的步驟

1.在畫布中制作第一幀中的畫面；

2.選擇窗口菜單中的幀命令，使用幀面板上的選項菜單添加或重置幀，在這一幀的畫布上制作第二個畫面；

3.以此類推，在每個幀分別把動畫的每個場景制作出來。

（二）利用元件制作動畫

1.在畫布中制作第一幀中的對象；

2.選擇對象，使用修改菜單中動畫命令下的選擇動畫，設置動畫的參數(shù)并確定；

3.對象添加了實例標志，并且自動在“庫”中生成了元件。

（三）播放動畫的步驟

1.使用幀面板的選項菜單中屬性命令修改幀延遲時間，這樣可以調(diào)整動畫的播放速度；

2.選擇窗口菜單中的優(yōu)化命令，將導出文件格式設置成GIF動畫；

3.文件菜單中導出命令，將動畫導出后打開文件觀看動畫效果

（四）動畫的品質(zhì)和特點

GIF格式動畫是為跨平臺市場開發(fā)的，兼容性好，所有的瀏覽器都支持這種圖像格式。GIF動畫的圖形格式只支持256種顏色，但支持透明，很適合制作網(wǎng)頁上的徽標或橫幅。GIF格式動畫通過優(yōu)化可以減小文件大小。利用元件制作動畫的方法是自動生成元件，而Flash中必須先創(chuàng)建元件后使用元件。

三、利用Adobe Image ready制作動畫

Adobe公司的Photoshop軟件提供了運用工具來創(chuàng)建和制作在Web上使用的靜態(tài)圖像的功能，而Image ready軟件提供了和它相同的編輯功能外，還包括了一些工具和調(diào)板，用來進行創(chuàng)建動態(tài)的動畫功能。Adobe Image ready是通過在不同的時間顯示不同的圖層來實現(xiàn)動畫效果，比起Flash，操作更為直觀而簡便，只要掌握好圖層的編輯方法和不同幀的相關控制要領就能輕松編輯動畫，可用于普通的動態(tài)網(wǎng)頁制作及較復雜的影視廣告的后期制作。

（一）制作動畫步驟

1.打開各個幀中需要的圖像，對圖像分別進行編輯，再通過Photoshop工具面板上的“選擇移動工具”按鈕拖拽圖像到新文件中并成為多個圖層；

2.調(diào)整圖層中的對象，進入Adobe Image ready動畫編輯界面，利用Animation動畫控制板來設置動畫的幀頻；

3.新建多個幀并制作每一個幀的畫面。

（二）播放動畫步驟

1.單擊Animation動畫控制板下方的播放按鈕，預覽動畫的效果；

2.將制作好的動畫保存，選擇保存類型為GIF。

（三）動畫的品質(zhì)和特點

制作GIF動畫，類似Fireworks軟件的使用，但Image Ready不支持CMYK色彩模式，無法進行與印刷相關的圖像操作，它是專門的網(wǎng)絡圖像處理工具，可以做一些QQ表情等。我們通過各種工具和參數(shù)可以進行精確調(diào)整，在圖像質(zhì)量不明顯削弱的前提下，文件的體積會盡可能的小。

四、利用Dreamweaver制作動畫

在Dreamweaver中制作動畫可以采用時間軸和行為互相支持的方法，還可以利用腳本語言編寫程序來實現(xiàn)動態(tài)效果。

（一）利用時間軸來制作動畫

時間軸與行為結(jié)合制作動畫。時間軸通過隨時間變化改變層的位置、大小、可見性和疊放順序等來創(chuàng)建動畫，網(wǎng)頁設計者既可以在時間軸中添加行為，也可以使用行為來控制時間軸。

1.制作動畫的步驟。新建一個層，在層中插入對象，選擇層厚進入時間軸面板，選擇動畫對象條末尾的關鍵幀，把層移動到動畫結(jié)束位置。

2.添加行為的步驟。選擇要添加行為的對象，在行為面板中選擇相應的行為命令，設置觸發(fā)行為的事件。

3.播放動畫的步驟。播放磁頭置于首幀，按住時間軸面板中的播放按鈕，預覽動畫效果。

（二）動畫的品質(zhì)和特點

時間軸和行為互相支持使Dreamweaver制作動態(tài)網(wǎng)頁的能力大大加強，在一個時間軸中可以同時為多個對象制作時間進程，這樣可以實現(xiàn)多個對象的動態(tài)效果。

（三）利用腳本語言編寫程序來實現(xiàn)動態(tài)效果

1.利用JavaScript腳本語言編寫程序來實現(xiàn)動態(tài)效果。JavaScript是通過嵌入在標準的HTML語言中使用的。JavaScript代碼放在