曲小納

摘 要：現(xiàn)在越來(lái)越多的網(wǎng)站開(kāi)始頻繁使用動(dòng)畫(huà)，動(dòng)畫(huà)以其動(dòng)態(tài)性、交互性和良好的兼容性為網(wǎng)絡(luò)技術(shù)帶來(lái)新的客戶體驗(yàn)。文章對(duì)動(dòng)畫(huà)在網(wǎng)頁(yè)設(shè)計(jì)與制作中的應(yīng)用做了簡(jiǎn)單分析。

關(guān)鍵詞：動(dòng)畫(huà)；網(wǎng)頁(yè)設(shè)計(jì)；網(wǎng)頁(yè)制作

中圖分類(lèi)號(hào)：TP317.4 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1006-8937（2015）20-0087-02

隨著動(dòng)畫(huà)技術(shù)的發(fā)展，flash動(dòng)畫(huà)已經(jīng)成為網(wǎng)頁(yè)設(shè)計(jì)人們所關(guān)注的一種動(dòng)畫(huà)發(fā)展趨勢(shì)。

作為網(wǎng)站的一個(gè)重要視覺(jué)組成元素，在網(wǎng)頁(yè)設(shè)計(jì)中合理地使用Flash技術(shù)，能增加與瀏覽者的互動(dòng)性，使網(wǎng)頁(yè)更加生動(dòng)，更加有吸引力，也恰好滿足了大眾的這一審美需求。

1 flash動(dòng)畫(huà)特點(diǎn)

Flash之所以能夠在短短的幾年內(nèi)風(fēng)靡全球，和它自身鮮明的特點(diǎn)是分不開(kāi)的。

在網(wǎng)絡(luò)動(dòng)畫(huà)軟件競(jìng)爭(zhēng)日益激烈的今天，Adobe公司正憑借其對(duì)Flash的正確定位和雄厚的開(kāi)發(fā)實(shí)力，使Flash的新功能層出不窮，從而奠定了Flash在網(wǎng)絡(luò)交互動(dòng)畫(huà)上不可動(dòng)搖的霸主地位。

Flash動(dòng)畫(huà)的特點(diǎn)，主要有以下幾個(gè)方面。

①體積小

FLASH的編輯對(duì)象大部分是矢量圖形，它只需要用很少的矢量數(shù)據(jù)便可以描述相當(dāng)復(fù)雜的對(duì)象，因而生成的文件體積特別小。

②適用于網(wǎng)絡(luò)傳播

Flash動(dòng)畫(huà)可以放置于網(wǎng)頁(yè)中，供瀏覽者欣賞和下載，可以利用這一優(yōu)勢(shì)在網(wǎng)上廣泛傳播，比如Flash制作的MV比傳統(tǒng)的MTV更容易在網(wǎng)絡(luò)上傳播，而且網(wǎng)絡(luò)傳播無(wú)地域之分，也無(wú)國(guó)界之別。

③交互性強(qiáng)

這是Flash得以稱雄的最主要的原因之一，通過(guò)使用交互功能，觀眾不僅能夠欣賞到動(dòng)畫(huà)，且借助于鼠標(biāo)觸發(fā)交互功能，從而實(shí)現(xiàn)人機(jī)對(duì)話。

④節(jié)省成本

使用Flash制作動(dòng)畫(huà)，極大地降低了制作成本，可以大大減少人力、物力資源的消耗。同時(shí)Flash全新的制作技術(shù)可以讓動(dòng)漫制作的周期大大縮短，并且可以做出更酷更炫的效果。

⑤跨媒體

Flash動(dòng)畫(huà)不僅可以在網(wǎng)絡(luò)上傳播，同時(shí)也可以在電視甚至電影中播放，大大拓寬了它的應(yīng)用領(lǐng)域。

⑥更具特色的視覺(jué)效果

憑借Flash交互功能強(qiáng)等獨(dú)特的優(yōu)點(diǎn)，F(xiàn)lash動(dòng)畫(huà)有更新穎的視覺(jué)效果，比傳統(tǒng)動(dòng)畫(huà)更能親近觀眾。

2 flash的基礎(chǔ)動(dòng)畫(huà)

2.1 圖形編輯

繪圖和編輯圖形是制作Flash動(dòng)畫(huà)的基本功，只有基本功扎實(shí)，才能使用Flash繪圖和編輯圖形。在繪圖的過(guò)程當(dāng)中要學(xué)習(xí)怎樣使用元件來(lái)組織圖形元素。

2.2 補(bǔ)間動(dòng)畫(huà)

在flash幀動(dòng)畫(huà)中，從起始幀到結(jié)束幀動(dòng)畫(huà)中間的過(guò)程就是補(bǔ)間動(dòng)畫(huà)。另外flash可以補(bǔ)間圖形的顏色，創(chuàng)建漸變的顏色切換或使實(shí)例淡入或淡出，要補(bǔ)間組或類(lèi)型的顏色，必須把它們變?yōu)樵?。補(bǔ)間動(dòng)畫(huà)是Flash動(dòng)畫(huà)設(shè)計(jì)的核心，也是Flash動(dòng)畫(huà)的最大優(yōu)點(diǎn)，它有動(dòng)畫(huà)補(bǔ)間和形狀變化補(bǔ)間兩種形式。

動(dòng)畫(huà)補(bǔ)間：實(shí)際是在起始幀和結(jié)束幀之間對(duì)某個(gè)或者多個(gè)屬性的參數(shù)進(jìn)行改變而形成的動(dòng)畫(huà)。

形狀變化補(bǔ)間：適用于圖形對(duì)象，將一種形狀變化成另一種形狀的動(dòng)畫(huà)，只要設(shè)置起始幀的形狀和結(jié)束幀的形狀，中間的幀通過(guò)flash自動(dòng)形狀擬合方式插值。

2.3 遮 罩

遮罩的原理就是將某層作為遮罩層，遮罩層的下一層是被遮罩層，一個(gè)遮罩層可以罩多個(gè)被遮罩層。遮罩就好比一個(gè)鏡子，鏡子照哪兒，哪兒就顯現(xiàn)，遮罩層決定形狀，被遮罩層決定顯示的內(nèi)容。

3 Flash交互動(dòng)畫(huà)的應(yīng)用實(shí)例

Flash交互動(dòng)畫(huà)實(shí)際就是瀏覽者在觀賞動(dòng)畫(huà)的同時(shí)，可以自由控制動(dòng)畫(huà)的播放進(jìn)程。

制作單擊按鈕后跳轉(zhuǎn)到不同畫(huà)面效果有以下幾個(gè)步驟。

3.1 制作三個(gè)按鈕

創(chuàng)建“第一個(gè)窗口”按鈕。

{1}執(zhí)行菜單中的“插入”/“新建元件”，在彈出的對(duì)話框中，如圖1所示，輸入“第一個(gè)窗口”，單擊“確定”。

{2}制作“第一個(gè)窗口”按鈕上的文字效果，如圖2所示。

創(chuàng)建“第二個(gè)窗口”按鈕”按鈕，方法同上。

3.2 交互動(dòng)畫(huà)的應(yīng)用

①單擊時(shí)間軸上方的按鈕，從彈出的下拉列表中選擇“場(chǎng)景1”選項(xiàng)，然后新建第一個(gè)窗口層，從“庫(kù)”面板中將第一個(gè)窗口元件、第二個(gè)窗口元件、第三個(gè)窗口元件拖入到舞臺(tái)，放置位置如圖3所示。

②右擊舞臺(tái)中的“第一個(gè)窗口”元件，從彈出的快捷菜單中選擇“動(dòng)作”命令，然后再“動(dòng)作”面板右側(cè)輸入語(yǔ)句：on（prese）{gotoAndplay（“場(chǎng)景1”，1）；}，如圖4所示。

同理，右擊“第二個(gè)窗口”元件，從彈出的快捷菜單中選擇“動(dòng)作”命令，然后在“動(dòng)作”面板右側(cè)輸入語(yǔ)句：on（prese）{gotoAndplay（“場(chǎng)景2”，1）；}

同理，右擊“第二個(gè)窗口”元件，從彈出的快捷菜單中選擇“動(dòng)作”命令，然后在“動(dòng)作”面板右側(cè)輸入語(yǔ)句：on（prese）{gotoAndplay（“場(chǎng)景3”，1）；}。

③同理，進(jìn)入“場(chǎng)景2”，然后新建第二個(gè)窗口層，從“庫(kù)”面板中將“第一個(gè)窗口”元件、“第二個(gè)窗口”元件、“第三個(gè)窗口”元件拖入舞臺(tái)。第二個(gè)窗口元件設(shè)置與上一步的動(dòng)作相同。

④同理，進(jìn)入“場(chǎng)景3”，然后新建第三個(gè)窗口層，從“庫(kù)”面板中將“第一個(gè)窗口”元件、“第二個(gè)窗口”元件、“第三個(gè)窗口”元件拖入舞臺(tái)。第三個(gè)窗口元件設(shè)置與上一步的動(dòng)作相同。

⑤至此，整個(gè)動(dòng)畫(huà)制作完畢。

參考文獻(xiàn)：

[1] 楊帆.Flash MX 2004動(dòng)畫(huà)制作標(biāo)準(zhǔn)教程[M].北京：中國(guó)電力出版社，2005.

[2] 涂杰.Flash技術(shù)的網(wǎng)站交互式設(shè)計(jì)[J].藝海，2010，（7）.