淺析Flash動畫網站設計的思路、佈局、技巧及檔處理

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

隨著網路的普及，電子商務越來越廣泛的深入到現代人的日常生活中，人們希望能在互聯網上獲取各種各樣的資訊。 一個新穎、動感、漂亮的網頁內容能有效提升企業形象及突出產品特徵。 雖然使用各種語言建立網站，能使網站功能完整，但是網站介面效果無法完美地實現。 Flash則是一個可以實現功能完整、介面美觀並且動感效果十足的網站設計工具。

與傳統方式的網頁平面製作相比，flash給網站帶來的好處非常明顯。 結合Flash動畫在網路應用中的實際表現，可將其特點歸納為以下5點：

1.適合網路應用：動畫檔是Flash動畫的基本特點，根據其內容的不同，使用向量技術使得產生的網頁檔非常小。 Flash動畫網頁以「流」的方式邊下載邊播放，打破了頻寬的局限。 即使是在網路狀況很差的時候也無需長時間等待。

2.表現形式多樣：Flash動畫網頁的表現形式多樣，可以包含文字、圖片、聲音以及動畫等內容，如果不考慮檔的大小因素，還可在網頁中插入視頻片斷。 豐富的表現形式使Flash網頁可以更好地表現了網站的主題。

3.內容針對性強：Flash動畫網頁可根據網站的特點，對網站進行針對性的宣傳和表現，如促銷廣告可直接著手于促銷手段的表現，而產品演示廣告則著重與產品的功能和特點表現。 這就使得Flash動畫網頁的表現能夠更為直觀，使流覽者更好地理解網站的意圖。

4.具有交互功能：Flash可以通過Actionscript語句來實現交互功能。 如流覽者可以通過按一下網頁導航條選項來獲取自己感興趣的內容，或通過按一下Flash動畫按鈕連接到相關頁面，以瞭解更加詳細的資訊。

5.佈局靈活：由於Flash其靈活性，可以多層次地建立顯示區域，實現在同一個區域中顯示不同欄目內容的功能;可以隨意排列網頁原始內容;可以在同一個網站中出現不同的佈局，並且佈局之間的過渡非常自然。

動畫網頁的設計與傳統網頁設計一樣，在設計前必須先對整個網站進行整體的規劃，設計好網頁的結構。

利用Flash製作網站時，可按照如下基本流程來進行：

1.確認網站主題：根據網站建立的目的，確認網站建立的主題，以及在該主題下需要表現的內容等。 設計整體結構，策劃好欄目和板塊的編排問題。

2.前期構思：在確認主題後，就需要在該主題的結構內進行前期構思，要確定網站的製作風格以及表現方式等。

3.收集素材：根據前期構思策劃的內容，有針對性地收集網站設計需要用到的文字、圖片以及聲音等素材。 對於無法直接獲取的素材，可以通過其他製作軟體對相關的素材進行相應的製作和修改來獲取。

4.製作網站所需要元素：可根據策劃的相關內容及收集到的素材，在Flash中製作網站所需要的各種元素。 例網站LOGO、導航功能表、內容展示以及版權資訊等。

5.編輯網站頁面：結合前期構思對網站進行整體編輯，根據網站整體結構設計網站首頁及內頁，並進行整個網站的整合。

6.網站檔修改發佈：對編輯好的內容分別測試和調整，最後根據網站的應用目的和需要，將其以相應格式進行發佈。

動畫所表現的內容是以客觀事物為基礎的，但它具有獨特個性，絕不是簡單的類比。 因此，它需要具有豐富的色彩、獨特的風格、精美的製作等，才能創造出強大吸引力的作品。

Flash網站設計時為了獲得更好的動畫效果，可以運用一些技巧。

1網頁式導航功能表的設計：導航作為網頁的重要視覺元素，是必要的。 將它放置在明顯、易找、易讀的區域，當流覽者進入網站時，就能夠第一時間看到它，並指引流覽者更快速地獲取自己感興趣的內容。

導航功能表的樣式有很多，包括橫排導航、豎排導航、圖片式導航和下拉式功能表導航等。 多種樣式的導航設計，可以與不同風格的頁面設計協調統一。

一個網站中，不一定只有一個導航功能表，同一頁面可能會出現兩種以上的導航功能表。 通常設計導航功能表時都是使用按鈕來完成的，但當網站中的資訊過多，導致巡覽列目繁多時，按鈕元件無法完成時。 可以將欄目歸類，採用二級欄目的形式。 將一級巡覽列目設計用影片元件代替按鈕元件，定義影片元件的滑鼠事件即實現按鈕效果，而將按鈕元件作為二級欄目。

可以在一級巡覽列目的影片元件實例的滑鼠事件中添加代碼如下：

functionbutClick1(event:MouseEvent):void

{

sd1.gotoAndPlay(2);

}

sd1.addEventListener(MouseEvent.CLICK,butClick1);

表示當滑鼠按一下實例「功能表1」時，開始播放功能表1中的第2幀

以上代碼實現了一級功能表到二級功能表的跳轉。

2個人化LOGO設計：Logo設計是將具體的事物、場景、事件和抽象的理念、精神、方向通過特殊的圖形固定下來，使人們通過logo標誌，自然的聯想到企業形象。 標誌(logo)與企業的經營緊密相關，logo標誌是企業日常經營活動、廣告宣傳、文化建設、對外交流必不可少的元素，它隨著企業的成長，其價值也不斷增長。 LOGO有文字的形式和圖形化的形式，動態的或靜態的。 動態的LOGO，比靜態的更能吸引人的注意。 製作一個精美的LOGO，即是給網站一個的靈魂，起到一個畫龍點睛的作用。

要想設計出簡單、精美、獨特、富有代表性及具有較強應用性的LOGO，必須具備一定的美術功底、影像處理能力及動畫製作能力。 首先應根據網站的類型、內容和風格，設計符合國際標準、代表企業形象的精美圖案，如日本全日空航空公司採用仙鶴展翅的形象比擬飛行和祥瑞，日本佐川急便車採用奔跑的人物形象比擬特快專遞等; 然後利用影像處理軟體PS來完成圖形和文字的藝術設計，運用動畫製作軟體Flash完成標誌的動畫設計，為標誌添加動畫效果。 如：用遮罩動畫實現圖形的由無到有的顯示動畫、形狀動畫實現文字的動態變化等。 最後，將LOGO的動畫效果設計轉換成元件，以供反復利用，並將LOGO元件放置在首頁醒目的位置上。

3網站色彩風格設計：網頁風格的四個基本要素是：顏色、線條、形狀和版式。 不同色彩搭配的效果，給人的第一感覺也是不一樣的。 一個網站不可能單一地運用一種顏色，這會讓人單調、乏味的感覺;但也不可能將所有的顏色都運用到網站中，給人輕浮、不穩重的感覺。

一個網站必須有一種或兩種主題色，既不至於讓流覽者失去方向，也不至於單調、乏味。 通常情況下，一個頁面內儘量不要多於4種色彩，太多的色彩容易讓人沒有歸宿感。 當主色調確定好以後，考慮其他配色時，一定要考慮其他配色與主色調的搭配，要實現什麼樣的效果。 如，紅色系象徵著活躍、熱情、勇敢、愛情、健康;綠色系代表公平、自然、和平、幸福、理智;藍色系代表自信、永恆、真理、真實、沉默、冷靜;紫色系代表權威、尊敬、高貴、優雅、信仰、孤獨。 因此，婚慶網站多採用紅色系，旅遊和園林類型的網站使用綠色系比較多，藍色則被譽為是企業色，被很多企業和政府機關所偏愛。 也有幾種顏色在網頁設計中是幾乎不被大面積使用的，比如棕色、紫色。

4醒目的網站首頁設計：首頁是網站面向流覽者的門戶，有了好內容還必須有吸引大眾目光的有創意的版面設計，才能更好地宣傳與推廣網站。 設計時必須從四個方面考慮：一是加強文字的可讀性;二是加強視覺效果;三是統一的簡單風格;四是新穎和個人化的佈局。

經常用到的版面佈局形式有：」T」結構佈局、」口」型佈局、」三」型佈局、對稱對比佈局等。 我們可以根據網站的整體風格及內容選擇合適的佈局。 如，「T」結構佈局，優點是頁面主次分明、結構清晰，缺點是太死板，很容易讓人」看之無味」;「 口」型佈局，優點是資訊量大、充分利用版面，缺點是頁面擁擠、不夠靈活。 還有一種POP佈局，POP引自廣告術語，就是指頁面配置象一張宣傳海報，以一張精美圖片作為頁面的設計中心，常用於時尚類網站，優點是漂亮吸引人，缺點就是網頁下載速度慢。

首頁無論選擇何種佈局，網站結構必須滿足使用者的需要，都必須有效的傳播主要資訊，快速的將使用者引導至其目標位置。 通常設計時，應該簡單、明瞭、醒目，內容突出，為了保證減少初始頁面的下載時間，儘量的少用動畫，使用向量圖形。 首頁一定要包含首頁向內頁的畫面跳轉，即必須有醒目的導航功能表。 設計時只需要四個層：背景層、內容層、導航條及動作層，見圖二。

5網頁間的跳轉設計

當網站結構有多級導航功能表時，如果在同一個文檔中製作所有的動畫效果，檔容量就會過大。 既想保留所有的動畫效果，又想減少檔容量，可以將動畫效果分別製作在不同的檔中，然後使用載入檔動作，分別載入相應的動畫，實現相同的動畫效果。 如導入SWF檔代碼：

loadMovieNum(「show.swf」,1);

注意必須將所有相關的SWF檔都存放在同一個資料夾下。

6.檔案大小的處理

在流覽網站時，能否快速地流覽到所要的內容，是每一個流覽者最關注的事。 所以，一定要考慮網頁在載入時是否能快速地打開，要將動畫檔處理得比較小，有幾種方法：

(1)先將需要的圖片用PS處理成為JPG或PNG格式的圖片檔。 還可以在flash中進入「庫面板」，在庫中對著要壓縮的圖片檔右擊滑鼠，在彈出的功能表中選中「屬性」，去掉「使用導入的JPEG資料」選項，在彈出的「品質」中填入小於100的較低的資料(一般選50就可以了)，最後「確定」。

(2)對於要插入的音樂檔，應該選擇MP3格式檔，或用音訊轉換器轉換成MP3格式的檔。 同時可以在Flash中的「庫面板」中，選中要壓縮的mp3檔右擊滑鼠，在彈出的功能表中選中「屬性」，去掉「使用導入的MP3品質」選項，在打開的視窗中選較低的「位元速率」，再點「確定」。

(3)儘量不要使用特殊的字體，為了避免動畫檔中的文字到其他的電腦上顯示不了，建議使用設備字體，字體較小的時候用設備字體會比較清晰，而且不佔用檔案大小。

(4)為了避免無用的變數、聲音、圖像、影片剪輯等物件發佈到動畫檔中，要在發佈前把它們刪除，以釋放記憶體，減少網頁載入的時間。 可以選擇「庫面板」功能表，按一下「選擇未用專案」命令，然後右擊選「刪除」。

結語：在網路傳送速率不斷提升的今天，利用Flash的向量圖形和流式媒體播放技術設計出動感亮麗的網頁越來越受到歡迎。

轉載文章請注明：該文章來自"flashplayer"HTTP://www.flashplayer.org.cn/1158