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

鄂晶晶

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

鄂晶晶

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

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

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

一、利用Flash制作動畫

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

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

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

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

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

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

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

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

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

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

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

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

（三）播放動畫的步驟

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

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

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

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

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

二、利用Fireworks制作動畫

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

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

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

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

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

（二）利用元件制作動畫

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

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

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

（三）播放動畫的步驟

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

2.選擇窗口菜單中的優(yōu)化命令，將導出文件格式設(shè)置成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，操作更為直觀而簡便，只要掌握好圖層的編輯方法和不同幀的相關(guān)控制要領(lǐng)就能輕松編輯動畫，可用于普通的動態(tài)網(wǎng)頁制作及較復雜的影視廣告的后期制作。

（一）制作動畫步驟

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

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

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

（二）播放動畫步驟

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

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

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

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

四、利用Dreamweaver制作動畫

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

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

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

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

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

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

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

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

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

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