申小春

摘要：Flash憑借其操作簡(jiǎn)便、功能強(qiáng)大的特點(diǎn)，成為了網(wǎng)絡(luò)廣告動(dòng)畫的寵兒。但面對(duì)日益擁擠的網(wǎng)絡(luò)資源和帶寬的限制，要減少網(wǎng)絡(luò)廣告動(dòng)畫的下載和回放時(shí)間，制作出高品質(zhì)的Flash動(dòng)畫就必須對(duì)廣告作品進(jìn)行優(yōu)化處理。筆者在文中主要討論了通過(guò)對(duì)圖片、圖形、聲音、文字以及Flash中其他要素進(jìn)行優(yōu)化等方法來(lái)達(dá)到對(duì)Flash作品瘦身的目的。

關(guān)鍵詞：Flash；網(wǎng)絡(luò)廣告；動(dòng)畫；優(yōu)化

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

圖片的優(yōu)化

圖片因?yàn)榘纳瘦^多導(dǎo)入到Flash后按大小不同占用相應(yīng)的字節(jié)數(shù)，所以很多Flash設(shè)計(jì)師常常會(huì)通過(guò)壓縮圖片質(zhì)量的方法使SWF文件變小。其實(shí)這是個(gè)無(wú)奈之舉，因?yàn)閳D片的壓縮所節(jié)省的字節(jié)數(shù)往往是以犧牲圖片的質(zhì)量作為代價(jià)的。同樣是圖片，不同的文件格式其大小亦不同，多數(shù)人會(huì)使用JPG格式的圖片或PNG格式的圖片做廣告，JPG格式的還好，如果在一個(gè)限定20KB的廣告中用了PNG格式的圖片，這個(gè)廣告就不好做了，因?yàn)闆](méi)法控制其大小。

通常的做法是用BMP格式的圖片代替JPG和PNG格式的圖片，當(dāng)需要用透明底時(shí)，在Flash中將圖片打散，然后通過(guò)摳圖將透明底部分去掉即可。但需注意的是：在導(dǎo)入位圖前需要對(duì)圖片的背景做特殊的填色處理，一來(lái)將不需要的畫面填充單色，這樣可使導(dǎo)入的圖片文件小一些；二來(lái)?yè)高叺奈粓D在動(dòng)畫輸出時(shí)往往由于矢量邊緣計(jì)算到像素單位顯示，使得位圖的邊緣漏出背景的雜色，所以將背景色盡量填充成與圖片邊緣相近的顏色，或者與Flash背景相似的顏色。這樣摳出來(lái)的圖片就能得到更清晰的邊緣，因?yàn)榇藭r(shí)圖片的壓縮是不會(huì)影響被矢量摳邊的邊緣的，從而能以更小的字節(jié)數(shù)得到更清晰的視覺(jué)感受。

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

圖形的優(yōu)化

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

同樣，我們?cè)诰唧w使用矢量圖形時(shí)也要注意以下幾個(gè)方面：①盡量使用簡(jiǎn)單的矢量圖形。矢量圖形越復(fù)雜，CPU運(yùn)算起來(lái)就越費(fèi)力，也會(huì)占用很多的空間。因此，可以使用菜單命令“修改→形狀→優(yōu)化”，將矢量圖形中不必要的線條刪除，從而減小文件。②AI矢量圖形應(yīng)整理后再使用。從Illustrator導(dǎo)入進(jìn)來(lái)的AI矢量圖形，有些結(jié)構(gòu)太復(fù)雜，同樣會(huì)增加文件大小，適當(dāng)打散處理，刪除不需要的部分，或者選擇輸出位圖再導(dǎo)入。③多用實(shí)線，少用虛線。限制特殊線條類型如短劃線、虛線、波浪線等的數(shù)量。由于實(shí)線的線條構(gòu)圖最簡(jiǎn)單，因此使用實(shí)線將使文件更小。④對(duì)矢量圖形的填充盡量少使用過(guò)渡色，因?yàn)槭褂眠^(guò)渡色填充一個(gè)區(qū)域比使用純色填充區(qū)域要多占50字節(jié)左右。⑤矢量背景的處理技巧也是影響文件大小的關(guān)鍵性因素之一。我們經(jīng)常因遇到廣告中無(wú)法使用大的圖片背景而困擾，因?yàn)閺?qiáng)行使用后得進(jìn)行壓縮，而過(guò)度壓縮效果會(huì)變得很差。對(duì)于廣告背景我們往往采取矢量繪制的辦法，這是一個(gè)相當(dāng)有難度的技術(shù)，我們可以將其分為兩種情況，沒(méi)有循環(huán)規(guī)律的背景圖片和有一定循環(huán)規(guī)律的背景圖片。對(duì)于能找到循環(huán)規(guī)律的用復(fù)制元件的方法排列或?qū)ΨQ出所需背景，通過(guò)對(duì)各個(gè)元件的相關(guān)屬性參數(shù)調(diào)節(jié)實(shí)現(xiàn)需要的變化效果。

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

聲音的優(yōu)化

Flash廣告動(dòng)畫中聲音可以為動(dòng)畫帶來(lái)節(jié)奏感、韻律感。但我們知道聲音文件通常都比較大，因此為了不影響下載播放速度，F(xiàn)lash廣告動(dòng)畫在使用聲音文件時(shí)最好挑選聲音類型、采樣頻率和聲音位數(shù)較為適中的聲音。

1.聲音的設(shè)置

一般情況下，將聲音設(shè)置成采樣頻率為“22KHz”，聲音位數(shù)為“16bit”，品質(zhì)為“快速”等屬性即可[2]。為了讓聲音也能像動(dòng)畫一樣邊下載邊播放，一般聲音選取的是流聲音。而對(duì)于流聲音而言，壓縮方式則一般最好選擇Flash能支持的MP3格式，因?yàn)樵谙嗤|(zhì)量的情況下，MP3文件的體積要小得多。

2.對(duì)聲音進(jìn)行剪輯

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

文字的優(yōu)化

如果廣告中有太多文字占用字節(jié)數(shù)又不能刪減，通常的做法是不要打散文字，而是在文件屬性面板中選擇文字類型為設(shè)備字體，這樣文字在Flash中將不通過(guò)計(jì)算節(jié)點(diǎn)信息的方式運(yùn)行，而是調(diào)用終端設(shè)備的系統(tǒng)字體呈現(xiàn)，所以一般字體選擇默認(rèn)電腦系統(tǒng)都有的黑體或者宋體就可以了。只是選擇設(shè)備字體將會(huì)犧牲平滑性和無(wú)法直接添加透明度動(dòng)畫，這些動(dòng)畫效果只能通過(guò)轉(zhuǎn)換為元件添加。

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

Flash其他要素的優(yōu)化

1.畫面的尺寸

Flash動(dòng)畫文件的長(zhǎng)寬尺寸越小越好，尺寸越小，文件就越小。為減小文件，可以考慮在Flash里將電影的尺寸設(shè)置小一些，然后導(dǎo)出SWF電影。接著將“菜單→文件→發(fā)布設(shè)置”中“HTML”選項(xiàng)卡里的電影尺寸設(shè)置大一些，這樣在網(wǎng)頁(yè)里就會(huì)呈現(xiàn)出尺寸較大的電影，而畫質(zhì)絲毫無(wú)損，依然優(yōu)美。

2.元件的使用

如果動(dòng)畫中的元素有使用一次以上者，則應(yīng)考慮將其轉(zhuǎn)換為元件。因?yàn)閯?dòng)畫文件只需儲(chǔ)存一次元件的圖形數(shù)據(jù)，重復(fù)使用元件并不會(huì)使文件明顯增大。通常，我們可以通過(guò)對(duì)元件進(jìn)行色調(diào)、改變透明度等處理做成五彩繽紛的視覺(jué)效果。需要特別注意的是，不要在同一幀上放置過(guò)多的“影片剪輯”元件，否則會(huì)成倍增大文件的大小。

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

3.動(dòng)畫的影響

動(dòng)畫的幀數(shù)也影響動(dòng)畫的字節(jié)數(shù)，同一段動(dòng)畫延長(zhǎng)播放的時(shí)間字節(jié)數(shù)就會(huì)增加，所以有時(shí)可以通過(guò)縮短動(dòng)畫時(shí)長(zhǎng)來(lái)減少字節(jié)數(shù)。但很多時(shí)候動(dòng)畫的時(shí)長(zhǎng)不能減少，那我們理論上可以用程序控制元件內(nèi)動(dòng)畫播放的速度，讓改短后的時(shí)間軸延時(shí)播放。而且，關(guān)鍵幀越多動(dòng)畫文件就會(huì)越大，因此，能用補(bǔ)間動(dòng)畫來(lái)表示的盡量不要用關(guān)鍵幀動(dòng)畫來(lái)實(shí)現(xiàn)。

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

4.預(yù)裝載與裝載的使用

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

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