網(wǎng)頁(yè)動(dòng)畫(huà)的設(shè)計(jì)與制作方法

鄂晶晶

網(wǎng)頁(yè)動(dòng)畫(huà)的設(shè)計(jì)與制作方法

鄂晶晶

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

網(wǎng)頁(yè)動(dòng)畫(huà)；設(shè)計(jì)方法；制作方法

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

一、利用Flash制作動(dòng)畫(huà)

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

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

（一）制作逐幀動(dòng)畫(huà)的步驟

1.在舞臺(tái)的第一幀創(chuàng)建對(duì)象；

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

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

4.導(dǎo)入聲音文件，結(jié)合動(dòng)畫(huà)成為MTV。

（二）制作補(bǔ)間動(dòng)畫(huà)的步驟

1.創(chuàng)建元件，在舞臺(tái)的第一幀導(dǎo)入元件；

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

3.在每?jī)蓚€(gè)關(guān)鍵幀中進(jìn)行動(dòng)作補(bǔ)間或形狀補(bǔ)間；

4.導(dǎo)入聲音文件，結(jié)合動(dòng)畫(huà)成為MTV。

（三）播放動(dòng)畫(huà)的步驟

1.在屬性面板中通過(guò)設(shè)置幀頻來(lái)調(diào)整動(dòng)畫(huà)的速度；

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

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

（四）動(dòng)畫(huà)的品質(zhì)和特點(diǎn)

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

二、利用Fireworks制作動(dòng)畫(huà)

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

（一）制作逐幀動(dòng)畫(huà)的步驟

1.在畫(huà)布中制作第一幀中的畫(huà)面；

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

3.以此類推，在每個(gè)幀分別把動(dòng)畫(huà)的每個(gè)場(chǎng)景制作出來(lái)。

（二）利用元件制作動(dòng)畫(huà)

1.在畫(huà)布中制作第一幀中的對(duì)象；

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

3.對(duì)象添加了實(shí)例標(biāo)志，并且自動(dòng)在“庫(kù)”中生成了元件。

（三）播放動(dòng)畫(huà)的步驟

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

2.選擇窗口菜單中的優(yōu)化命令，將導(dǎo)出文件格式設(shè)置成GIF動(dòng)畫(huà)；

3.文件菜單中導(dǎo)出命令，將動(dòng)畫(huà)導(dǎo)出后打開(kāi)文件觀看動(dòng)畫(huà)效果

（四）動(dòng)畫(huà)的品質(zhì)和特點(diǎn)

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

三、利用Adobe Image ready制作動(dòng)畫(huà)

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

（一）制作動(dòng)畫(huà)步驟

1.打開(kāi)各個(gè)幀中需要的圖像，對(duì)圖像分別進(jìn)行編輯，再通過(guò)Photoshop工具面板上的“選擇移動(dòng)工具”按鈕拖拽圖像到新文件中并成為多個(gè)圖層；

2.調(diào)整圖層中的對(duì)象，進(jìn)入Adobe Image ready動(dòng)畫(huà)編輯界面，利用Animation動(dòng)畫(huà)控制板來(lái)設(shè)置動(dòng)畫(huà)的幀頻；

3.新建多個(gè)幀并制作每一個(gè)幀的畫(huà)面。

（二）播放動(dòng)畫(huà)步驟

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

2.將制作好的動(dòng)畫(huà)保存，選擇保存類型為GIF。

（三）動(dòng)畫(huà)的品質(zhì)和特點(diǎn)

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

四、利用Dreamweaver制作動(dòng)畫(huà)

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

（一）利用時(shí)間軸來(lái)制作動(dòng)畫(huà)

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

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

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

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

（二）動(dòng)畫(huà)的品質(zhì)和特點(diǎn)

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

（三）利用腳本語(yǔ)言編寫(xiě)程序來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果

1.利用JavaScript腳本語(yǔ)言編寫(xiě)程序來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果。JavaScript是通過(guò)嵌入在標(biāo)準(zhǔn)的HTML語(yǔ)言中使用的。JavaScript代碼放在