Flash網絡廣告動畫優化技巧探討

申小春

摘要：Flash憑借其操作簡便、功能強大的特點，成為了網絡廣告動畫的寵兒。但面對日益擁擠的網絡資源和帶寬的限制，要減少網絡廣告動畫的下載和回放時間，制作出高品質的Flash動畫就必須對廣告作品進行優化處理。筆者在文中主要討論了通過對圖片、圖形、聲音、文字以及Flash中其他要素進行優化等方法來達到對Flash作品瘦身的目的。

關鍵詞：Flash；網絡廣告；動畫；優化

隨著網絡技術的不斷更新發展，Flash已大量滲透于教育、廣告、影視傳媒、音樂、游戲等各個領域。雖然目前我們迎來了3G網絡時代，數據交換也都采用了尖端的光纜技術，然而網絡傳輸依然受硬件的限制。就拿一個支持同時在線過億訪問量的門戶網站來說，其所承受的下載壓力可想而知。因此，如何在保證不損失其質量的情況下，讓Flash作品小巧精致、播放流暢就成為必須考慮的問題。很顯然，對Flash影片文件進行瘦身優化成為優選，下面筆者就來跟大家探討一下幾種優化方法。

圖片的優化

圖片因為包含的色彩較多導入到Flash后按大小不同占用相應的字節數，所以很多Flash設計師常常會通過壓縮圖片質量的方法使SWF文件變小。其實這是個無奈之舉，因為圖片的壓縮所節省的字節數往往是以犧牲圖片的質量作為代價的。同樣是圖片，不同的文件格式其大小亦不同，多數人會使用JPG格式的圖片或PNG格式的圖片做廣告，JPG格式的還好，如果在一個限定20KB的廣告中用了PNG格式的圖片，這個廣告就不好做了，因為沒法控制其大小。

通常的做法是用BMP格式的圖片代替JPG和PNG格式的圖片，當需要用透明底時，在Flash中將圖片打散，然后通過摳圖將透明底部分去掉即可。但需注意的是：在導入位圖前需要對圖片的背景做特殊的填色處理，一來將不需要的畫面填充單色，這樣可使導入的圖片文件小一些；二來摳邊的位圖在動畫輸出時往往由于矢量邊緣計算到像素單位顯示，使得位圖的邊緣漏出背景的雜色，所以將背景色盡量填充成與圖片邊緣相近的顏色，或者與Flash背景相似的顏色。這樣摳出來的圖片就能得到更清晰的邊緣，因為此時圖片的壓縮是不會影響被矢量摳邊的邊緣的，從而能以更小的字節數得到更清晰的視覺感受。

圖片在具體使用時我們還得注意以下幾點：①能不用圖片的地方盡量不要用圖片。復雜的背景一般是最占空間的元素，而且超出場景的圖片一定要切除，免得增加無謂的大小。②無關緊要的圖片可降低質量。那些在動畫中表現為動作快，并一閃而過的配角圖片可適當將質量降低以減少文件大小。③圖片可使用Photoshop進行縮放。如果導入的圖片在使用時需要縮放到需要的尺寸，最好不要在Flash里直接縮放，那樣Flash輸出時還是按照圖片的原尺寸大小輸出。④連續圖案背景可用位圖填充方式解決。遇到連續圖案背景時，可先用Photoshop裁剪一部分輸出，然后在Flash里畫一個與需要背景一樣大的矢量形狀，用位圖填充，最后用漸變變形工具調節填充區域，一樣可以達到與之前導入位圖一樣的效果[1]。這樣處理的話，僅計算這一小部分位圖大小，也能節省不少空間。具體操作方法如上頁圖1所示。⑤盡量不要打散圖片。如果非特殊需要，就不要把圖片分離打散，圖片打散后會增加文件大小。⑥發布時可以適當調整圖片質量。正式發布時，在“發布設置”里統一將JPG圖片設置為一般50%～80%。

圖形的優化

矢量圖形的使用是Flash的一個重要特點，相比位圖而言，矢量圖在縮放時不會改變畫質，非常適合做縮放、旋轉和位置移動的動畫。通常很多人都想當然地認為矢量就是大小不變的，是沒法再壓縮的，甚至連一些設計師都不例外。其實不然，矢量元素的復雜程度、節點的數量、節點的類型都是影響字節數的重要因素。我們都知道兩點之間直線距離最短，同樣兩點之間直線也是最優化的，因此在直線中間添加一個點，字節數就會大一點。也許微乎其微，但是一個廣告中矢量元素數量一旦增加就會積少成多，最終造成比較大的影響。當然我們也可以通過對矢量圖形進行整體壓縮以達到優化的目的，快捷鍵（Ctrl+Alt+Shift+C）選擇一個壓縮參數即可。

同樣，我們在具體使用矢量圖形時也要注意以下幾個方面：①盡量使用簡單的矢量圖形。矢量圖形越復雜，CPU運算起來就越費力，也會占用很多的空間。因此，可以使用菜單命令“修改→形狀→優化”，將矢量圖形中不必要的線條刪除，從而減小文件。②AI矢量圖形應整理后再使用。從Illustrator導入進來的AI矢量圖形，有些結構太復雜，同樣會增加文件大小，適當打散處理，刪除不需要的部分，或者選擇輸出位圖再導入。③多用實線，少用虛線。限制特殊線條類型如短劃線、虛線、波浪線等的數量。由于實線的線條構圖最簡單，因此使用實線將使文件更小。④對矢量圖形的填充盡量少使用過渡色，因為使用過渡色填充一個區域比使用純色填充區域要多占50字節左右。⑤矢量背景的處理技巧也是影響文件大小的關鍵性因素之一。我們經常因遇到廣告中無法使用大的圖片背景而困擾，因為強行使用后得進行壓縮，而過度壓縮效果會變得很差。對于廣告背景我們往往采取矢量繪制的辦法，這是一個相當有難度的技術，我們可以將其分為兩種情況，沒有循環規律的背景圖片和有一定循環規律的背景圖片。對于能找到循環規律的用復制元件的方法排列或對稱出所需背景，通過對各個元件的相關屬性參數調節實現需要的變化效果。

如圖2所示要在20KB的廣告中表現這樣復雜的畫面，尤其是玉米地的背景該如何處理，是一個比較棘手的問題。如果因為復雜完全刪除，那廣告的效果就會大打折扣。當然我們可采取矢量繪制的方法來實現，畫面看起來復雜其實也是有規律可循的。只要用基本的綠色繪制玉米地大致的輪廓，然后概括地添加暗部和亮部的葉子，接著單獨繪制一個大致相似的玉米來。繪制時切忌太追求細節，否則復制的數量多了會大大增加文件大小。通過這樣的處理，基本上主要元素都呈現了，而其字節數還比較優化，產品和任務以及LOGO總共才用4張圖片依然可以保證足夠的清晰度。完成后的效果見圖3所示。

聲音的優化

Flash廣告動畫中聲音可以為動畫帶來節奏感、韻律感。但我們知道聲音文件通常都比較大，因此為了不影響下載播放速度，Flash廣告動畫在使用聲音文件時最好挑選聲音類型、采樣頻率和聲音位數較為適中的聲音。

1.聲音的設置

一般情況下，將聲音設置成采樣頻率為“22KHz”，聲音位數為“16bit”，品質為“快速”等屬性即可[2]。為了讓聲音也能像動畫一樣邊下載邊播放，一般聲音選取的是流聲音。而對于流聲音而言，壓縮方式則一般最好選擇Flash能支持的MP3格式，因為在相同質量的情況下，MP3文件的體積要小得多。

2.對聲音進行剪輯

如果在具體使用時只用到了某個文件的某段范圍的音樂，盡管我們可以采用Flash進行剪輯，但這樣并不能減少Flash的文件量。因此，最好的做法是用聲音編輯軟件（Goldwave或Cooledit）將有用的范圍剪輯出來再導入到Flash中去，這樣既能得到想要的效果同時也減少了文件的大小。

文字的優化

如果廣告中有太多文字占用字節數又不能刪減，通常的做法是不要打散文字，而是在文件屬性面板中選擇文字類型為設備字體，這樣文字在Flash中將不通過計算節點信息的方式運行，而是調用終端設備的系統字體呈現，所以一般字體選擇默認電腦系統都有的黑體或者宋體就可以了。只是選擇設備字體將會犧牲平滑性和無法直接添加透明度動畫，這些動畫效果只能通過轉換為元件添加。

對于文字處理部分，不要直接從Photoshop里導出文字圖片再導入Flash，那樣會對文件大小產生很大的影響。廣告中出現最多的還是文字，所以文字必須要在Flash中繪制。很多業余設計者屈服于數千種可用字體的使用，從而使得他們的設計看起來像勒索字條。而且繪制文字時一定要限制字體和字體樣式的數量，盡量不要使用太多不同的字體，太多的字體會增加文件大小，如果要增加文字的多樣性，可以用不同的顏色和大小，還有字體的間距和傾斜，而且通過使用Flash中的濾鏡效果一樣可以繪制你想要的效果[3]。

Flash其他要素的優化

1.畫面的尺寸

Flash動畫文件的長寬尺寸越小越好，尺寸越小，文件就越小。為減小文件，可以考慮在Flash里將電影的尺寸設置小一些，然后導出SWF電影。接著將“菜單→文件→發布設置”中“HTML”選項卡里的電影尺寸設置大一些，這樣在網頁里就會呈現出尺寸較大的電影，而畫質絲毫無損，依然優美。

2.元件的使用

如果動畫中的元素有使用一次以上者，則應考慮將其轉換為元件。因為動畫文件只需儲存一次元件的圖形數據，重復使用元件并不會使文件明顯增大。通常，我們可以通過對元件進行色調、改變透明度等處理做成五彩繽紛的視覺效果。需要特別注意的是，不要在同一幀上放置過多的“影片剪輯”元件，否則會成倍增大文件的大小。

元件的類型也在一定程度上影響文件大小，圖形元件比影片剪輯元件在字節數方面要優化些。隨著版本的提高，設計中通常將元件設置成影片剪輯類型，以便設置濾鏡效果，但到最后定稿時最好要檢查一下，將沒有包含動畫和濾鏡效果的元件改成圖形元件。

3.動畫的影響

動畫的幀數也影響動畫的字節數，同一段動畫延長播放的時間字節數就會增加，所以有時可以通過縮短動畫時長來減少字節數。但很多時候動畫的時長不能減少，那我們理論上可以用程序控制元件內動畫播放的速度，讓改短后的時間軸延時播放。而且，關鍵幀越多動畫文件就會越大，因此，能用補間動畫來表示的盡量不要用關鍵幀動畫來實現。

動畫面積、位移幅度、形變幅度都會影響文件大小。這就要求我們平時在做動畫時形成良好的習慣，不做多余的動畫。例如，一段文字遮罩，盡量只在有效的遮罩范圍做被遮罩動畫，不要將遮罩層畫得過大，或遮罩外兩頭還有多余的動畫。運動到舞臺以外的動畫都應刪除，以免積少成多，造成影響。

4.預裝載與裝載的使用

為了不讓瀏覽者厭煩，使用預下載畫面是個很不錯的辦法，但是預下載頁面不要做得太復雜，不然很容易適得其反，較大的音效文件尤其需要預先下載。同時，最好將電影分成多個子電影，然后再通過主電影里的Load Movie、Unload Movie命令隨時調用、卸載子電影。

Flash動畫文件龐大還有其他一些原因，以上只是筆者這些年的一些實踐體會，如何更加有效地對廣告動畫瘦身減肥還需在以后的實踐中不斷探索改進。