淺析Flash動畫網(wǎng)站設計的思路、布局、技巧及文件

時間：2022-07-06 18:51:01 | 來源：建站知識

時間：2022-07-06 18:51:01 來源：建站知識

隨著網(wǎng)絡的普及，電子商務越來越廣泛的深入到現(xiàn)代人的日常生活中，人們希望能在互聯(lián)網(wǎng)上獲取各種各樣的信息。一個新穎、動感、漂亮的網(wǎng)頁內容能有效提升企業(yè)形象及突出產(chǎn)品特征。雖然使用各種語言建立網(wǎng)站，能使網(wǎng)站功能完整，但是網(wǎng)站界面效果無法完美地實現(xiàn)。Flash則是一個可以實現(xiàn)功能完整、界面美觀并且動感效果十足的網(wǎng)站設計工具。

與傳統(tǒng)方式的網(wǎng)頁平面制作相比，flash給網(wǎng)站帶來的好處非常明顯。結合Flash動畫在網(wǎng)絡應用中的實際表現(xiàn)，可將其特點歸納為以下5點：

1.適合網(wǎng)絡應用：動畫文件是Flash動畫的基本特點，根據(jù)其內容的不同，使用矢量技術使得產(chǎn)生的網(wǎng)頁文件非常小。Flash動畫網(wǎng)頁以“流”的方式邊下載邊播放，打破了帶寬的局限。即使是在網(wǎng)絡狀況很差的時候也無需長時間等待。

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

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

4.具有交互功能：Flash可以通過Actionscript語句來實現(xiàn)交互功能。如瀏覽者可以通過單擊網(wǎng)頁導航條選項來獲取自己感興趣的內容，或通過單擊Flash動畫按鈕連接到相關頁面，以了解更加詳細的信息。

5.布局靈活：由于Flash其靈活性，可以多層次地建立顯示區(qū)域，實現(xiàn)在同一個區(qū)域中顯示不同欄目內容的功能;可以隨意排列網(wǎng)頁原始內容;可以在同一個網(wǎng)站中出現(xiàn)不同的布局，并且布局之間的過渡非常自然。

動畫網(wǎng)頁的設計與傳統(tǒng)網(wǎng)頁設計一樣，在設計前必須先對整個網(wǎng)站進行整體的規(guī)劃，設計好網(wǎng)頁的結構。

利用Flash制作網(wǎng)站時，可按照如下基本流程來進行：

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

2.前期構思：在確認主題后，就需要在該主題的結構內進行前期構思，要確定網(wǎng)站的制作風格以及表現(xiàn)方式等。

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

4.制作網(wǎng)站所需要元素：可根據(jù)策劃的相關內容及收集到的素材，在Flash中制作網(wǎng)站所需要的各種元素。例網(wǎng)站LOGO、導航菜單、內容展示以及版權信息等。

5.編輯網(wǎng)站頁面：結合前期構思對網(wǎng)站進行整體編輯，根據(jù)網(wǎng)站整體結構設計網(wǎng)站首頁及內頁，并進行整個網(wǎng)站的整合。

6.網(wǎng)站文件修改發(fā)布：對編輯好的內容分別測試和調整，最后根據(jù)網(wǎng)站的應用目的和需要，將其以相應格式進行發(fā)布。

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

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

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

導航菜單的樣式有很多，包括橫排導航、豎排導航、圖片式導航和下拉菜單導航等。多種樣式的導航設計，可以與不同風格的頁面設計協(xié)調統(tǒng)一。

一個網(wǎng)站中，不一定只有一個導航菜單，同一頁面可能會出現(xiàn)兩種以上的導航菜單。通常設計導航菜單時都是使用按鈕來完成的，但當網(wǎng)站中的信息過多，導致導航欄目繁多時，按鈕元件無法完成時。可以將欄目歸類，采用二級欄目的形式。將一級導航欄目設計用影片元件代替按鈕元件，定義影片元件的鼠標事件即實現(xiàn)按鈕效果，而將按鈕元件作為二級欄目。

可以在一級導航欄目的影片元件實例的鼠標事件中添加代碼如下：

functionbutClick1(event:MouseEvent):void

{

sd1.gotoAndPlay(2);

}

sd1.addEventListener(MouseEvent.CLICK,butClick1);

//表示當鼠標單擊實例“菜單1”時，開始播放菜單1中的第2幀

以上代碼實現(xiàn)了一級菜單到二級菜單的跳轉。

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

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

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

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

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

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

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

5網(wǎng)頁間的跳轉設計

當網(wǎng)站結構有多級導航菜單時，如果在同一個文檔中制作所有的動畫效果，文件容量就會過大。既想保留所有的動畫效果，又想減少文件容量，可以將動畫效果分別制作在不同的文件中，然后使用載入文件動作，分別載入相應的動畫，實現(xiàn)相同的動畫效果。如導入SWF文件代碼：

loadMovieNum(“show.swf”,1);

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

6.文件大小的處理

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

(1)先將需要的圖片用PS處理成為JPG或PNG格式的圖片文件。還可以在flash中進入“庫面板”，在庫中對著要壓縮的圖片文件右擊鼠標，在彈出的菜單中選中“屬性”，去掉“使用導入的JPEG數(shù)據(jù)”選項，在彈出的“品質”中填入小于100的較低的數(shù)據(jù)(一般選50就可以了)，最后“確定”。

(2)對于要插入的音樂文件，應該選擇MP3格式文件，或用音頻轉換器轉換成MP3格式的文件。同時可以在Flash中的“庫面板”中，選中要壓縮的mp3文件右擊鼠標，在彈出的菜單中選中“屬性”，去掉“使用導入的MP3品質”選項，在打開的窗口中選較低的“比特率”，再點“確定”。

(3)盡量不要使用特殊的字體，為了避免動畫文件中的文字到其他的計算機上顯示不了，建議使用設備字體，字體較小的時候用設備字體會比較清晰，而且不占用文件大小。

(4)為了避免無用的變量、聲音、圖像、影片剪輯等對象發(fā)布到動畫文件中，要在發(fā)布前把它們刪除，以釋放內存，減少網(wǎng)頁加載的時間?？梢赃x擇“庫面板”菜單，單擊“選擇未用項目”命令，然后右擊選“刪除”。

結語：在網(wǎng)絡傳輸速度不斷提升的今天，利用Flash的矢量圖形和流式媒體播放技術設計出動感亮麗的網(wǎng)頁越來越受到歡迎。

轉載文章請注明：該文章來自"flashplayer"