Flash中交互動畫的應用研究

曲小納

摘 要：現在越來越多的網站開始頻繁使用動畫，動畫以其動態性、交互性和良好的兼容性為網絡技術帶來新的客戶體驗。文章對動畫在網頁設計與制作中的應用做了簡單分析。

關鍵詞：動畫；網頁設計；網頁制作

中圖分類號：TP317.4 文獻標識碼：A 文章編號：1006-8937（2015）20-0087-02

隨著動畫技術的發展，flash動畫已經成為網頁設計人們所關注的一種動畫發展趨勢。

作為網站的一個重要視覺組成元素，在網頁設計中合理地使用Flash技術，能增加與瀏覽者的互動性，使網頁更加生動，更加有吸引力，也恰好滿足了大眾的這一審美需求。

1 flash動畫特點

Flash之所以能夠在短短的幾年內風靡全球，和它自身鮮明的特點是分不開的。

在網絡動畫軟件競爭日益激烈的今天，Adobe公司正憑借其對Flash的正確定位和雄厚的開發實力，使Flash的新功能層出不窮，從而奠定了Flash在網絡交互動畫上不可動搖的霸主地位。

Flash動畫的特點，主要有以下幾個方面。

①體積小

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

②適用于網絡傳播

Flash動畫可以放置于網頁中，供瀏覽者欣賞和下載，可以利用這一優勢在網上廣泛傳播，比如Flash制作的MV比傳統的MTV更容易在網絡上傳播，而且網絡傳播無地域之分，也無國界之別。

③交互性強

這是Flash得以稱雄的最主要的原因之一，通過使用交互功能，觀眾不僅能夠欣賞到動畫，且借助于鼠標觸發交互功能，從而實現人機對話。

④節省成本

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

⑤跨媒體

Flash動畫不僅可以在網絡上傳播，同時也可以在電視甚至電影中播放，大大拓寬了它的應用領域。

⑥更具特色的視覺效果

憑借Flash交互功能強等獨特的優點，Flash動畫有更新穎的視覺效果，比傳統動畫更能親近觀眾。

2 flash的基礎動畫

2.1 圖形編輯

繪圖和編輯圖形是制作Flash動畫的基本功，只有基本功扎實，才能使用Flash繪圖和編輯圖形。在繪圖的過程當中要學習怎樣使用元件來組織圖形元素。

2.2 補間動畫

在flash幀動畫中，從起始幀到結束幀動畫中間的過程就是補間動畫。另外flash可以補間圖形的顏色，創建漸變的顏色切換或使實例淡入或淡出，要補間組或類型的顏色，必須把它們變為元件。補間動畫是Flash動畫設計的核心，也是Flash動畫的最大優點，它有動畫補間和形狀變化補間兩種形式。

動畫補間：實際是在起始幀和結束幀之間對某個或者多個屬性的參數進行改變而形成的動畫。

形狀變化補間：適用于圖形對象，將一種形狀變化成另一種形狀的動畫，只要設置起始幀的形狀和結束幀的形狀，中間的幀通過flash自動形狀擬合方式插值。

2.3 遮 罩

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

3 Flash交互動畫的應用實例

Flash交互動畫實際就是瀏覽者在觀賞動畫的同時，可以自由控制動畫的播放進程。

制作單擊按鈕后跳轉到不同畫面效果有以下幾個步驟。

3.1 制作三個按鈕

創建“第一個窗口”按鈕。

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

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

創建“第二個窗口”按鈕”按鈕，方法同上。

3.2 交互動畫的應用

①單擊時間軸上方的按鈕，從彈出的下拉列表中選擇“場景1”選項，然后新建第一個窗口層，從“庫”面板中將第一個窗口元件、第二個窗口元件、第三個窗口元件拖入到舞臺，放置位置如圖3所示。

②右擊舞臺中的“第一個窗口”元件，從彈出的快捷菜單中選擇“動作”命令，然后再“動作”面板右側輸入語句：on（prese）{gotoAndplay（“場景1”，1）；}，如圖4所示。

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

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

③同理，進入“場景2”，然后新建第二個窗口層，從“庫”面板中將“第一個窗口”元件、“第二個窗口”元件、“第三個窗口”元件拖入舞臺。第二個窗口元件設置與上一步的動作相同。

④同理，進入“場景3”，然后新建第三個窗口層，從“庫”面板中將“第一個窗口”元件、“第二個窗口”元件、“第三個窗口”元件拖入舞臺。第三個窗口元件設置與上一步的動作相同。

⑤至此，整個動畫制作完畢。

參考文獻：

[1] 楊帆.Flash MX 2004動畫制作標準教程[M].北京：中國電力出版社，2005.

[2] 涂杰.Flash技術的網站交互式設計[J].藝海，2010，（7）.