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

時間：2022-07-13 11:30:01 | 來源：建站知識

時間：2022-07-13 11:30:01 來源：建站知識

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

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

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

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

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

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

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

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

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

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

2.前期構(gòu)思：在確認(rèn)主題后，就需要在該主題的結(jié)構(gòu)內(nèi)進(jìn)行前期構(gòu)思，要確定網(wǎng)站的制作風(fēng)格以及表現(xiàn)方式等。

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

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

5.編輯網(wǎng)站頁面：結(jié)合前期構(gòu)思對網(wǎng)站進(jìn)行整體編輯，根據(jù)網(wǎng)站整體結(jié)構(gòu)設(shè)計網(wǎng)站首頁及內(nèi)頁，并進(jìn)行整個網(wǎng)站的整合。

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

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

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

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

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

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

可以在一級導(dǎo)航欄目的影片元件實例的鼠標(biāo)事件中添加代碼如下：

functionbutClick1(event:MouseEvent):void

{

sd1.gotoAndPlay(2);

}

sd1.addEventListener(MouseEvent.CLICK,butClick1);

//表示當(dāng)鼠標(biāo)單擊實例“菜單1”時，開始播放菜單1中的第2幀

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

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

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

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

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

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

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

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

5網(wǎng)頁間的跳轉(zhuǎn)設(shè)計

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

loadMovieNum(“show.swf”,1);

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

6.文件大小的處理

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

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

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

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

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

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

轉(zhuǎn)載文章請注明：該文章來自"flashplayer"