Posted on 2 Comments

提升Flash效能的幾個注意事項

本文為看這篇文章之後的重點整理: http://www.adobe.com/devnet/flash/articles/efficiency-tips.html

這篇文章同時會對Flash開發程式師、動畫及美術有幫助。

提升效能

  1. 關掉沒有用到的物件的互動功能:
    減少畫面中active的物件能有效的增加效能,下面這段CODE可以關閉掉MovieClip和其他物件的所有互動關係。

    mouseEnabled = false;
    mouseChildren = false;

    如果仍要與其他的元件做互動則使用mouseChildren = false;就好。
    fig01

  2. 判斷何時該用點陣圖(Bitmap)何時該用形狀(Shape):
    使用Bitmap:當今天圖片有許多漸層、複雜圖案、顏色很多時,用Bitmap較好。
    使用Shape:當今天的圖片是大塊色塊組成,感覺不利於縮放、但卻不需要縮放時,則使用Shape。(點陣圖按CTRL+B)fig02
  3. 將線段轉成色塊:線段所需要耗用的效能較多,因此可將不必要的線段轉換為填色。(在修改>形狀>將線段轉換成填色)
    fig03
  4. 避免使用虛線或點線,因為此種線段很耗費效能。
  5. 避免使用圓角,圓角比起直角的處理上耗效能。
  6. 避免圖像的坐標坐落位置帶有小數點,因為小數點的運算比起整數會耗費更多效能。

向量圖形最佳化

  1. 減少圖形中的節點(按修改>圖像>最佳化),或使用平滑工具來減少節點。
    fig06
  2. 避免使用漸層:漸層是非常耗效能的,若是必需要使用漸層,可在完成後,將其轉為Bitmap格式,或者以純色去取代。
  3. 不要使用不必要大小的bitmap圖片,或多餘的aplha值=0的透明色塊。因為這樣會增加所耗費的效能。
    fig08
  4. 避免使用遮罩:使用遮罩時,每次進入下一個影格都會重新繪製並產生裡面的元件,因此會耗費大量的效能。所以我們要盡量避免使用遮罩功能,若真的有需要,可以改用程式裡的scrollRect功能來取代遮罩,這樣在實務上會省下許多的資源,缺點是只能做方形遮罩。
    fig09
  5. 靜態物件避免使用濾鏡特效:因為濾鏡特效是每次重繪時都要重新計算一次特效顯示的值,若是今天是靜態物件要做濾鏡效果,可先在PHOTOSHOP內做好,便可節省濾鏡特效的運算時間。
    fig10
  6. 將陰影效果的品質調低
    fig12
  7. 假如圖片要resize,不要直接在flash裡改變圖片大小,而應該在外部先做好resize再loading進來。可以使用mipmapping 來計算圖片的最佳大小。
  8. 降低影格速度
    fig13
  9. 避免MovieClip呈現槽狀結構
    fig14
  10. 動畫目標物件可設置快取為點陣圖以節省效能,但此時要注意不要對該元件設置任何濾鏡,不然他每一個影格都會重新快取一次目標物件,這會耗費非常高的效能。
    2013-08-23_165042
    fig15
  11. 濾鏡特效的設定值設為2的指數(ex: 2 4 8 16….)
    fig16
  12. 如果只是非常簡單的動畫(如單純的位移事件),可以用程式碼去替代(如TweenLite),會更高彈性且節省效能。
    fig18
  13. 2.5D的CPU圖像模式的運算會很耗效能,此時可以用”快取為點陣圖”來製作2.5D的圖像。
  14. 觀察重繪區塊,去知道是那邊耗費較多的效能。(在FLASH DEBUG按右鍵=>顯示重繪區域),盡量讓重繪的區塊降到最低。
  15. 假如要設一個元件為不可視,記得停掉該元件,避免他在背後繼續執行(下stop)。
    fig22
  16. 避免元件出現在可視範圍外,若是需要將元件移除或移入視線,可以使用addChild()及removeChild()
  17. 除非有需要做特殊的文字效果,否則不要使用TLF text Field。

最佳化檔案素材大小

  1. 選擇適當的圖像壓縮比、非必要時,避免勾選”平滑化”的選項。
    2013-08-23_180249
  2. 考慮使用一整張的圖片或是用BITMAP填色:因為若顯示的區塊很小,但我們用一張超大張的圖片來做填色,這一大塊的圖片都會被包在SWF裡,因此若遇到這個狀況,可以用CTRL+B將點陣圖打散成形狀,將其縮小後,再將其轉回點陣圖,直接使用該圖片做為底色。
    但假如現況是某一張小圖片,會重複的出現在眾多區塊做為底色,那這時後就推薦用以BITMAP來填滿區塊的方式。
  3. 盡量避免在畫面中RESIZE圖片的大小
    fig27
  4. 假使是很單純、色塊及線條極少的狀況,可以將點陣圖轉為向量圖,這樣可以縮小SWF的體積。(修改>點陣圖>轉換為向量圖)
    2013-08-23_190251
  5. 一格格的動畫改為移動漸變動畫(這樣是省空間,但會耗效能,所以要取決於現在你是需要效能或者空間,去決定該用那種作法)。
    fig29
  6. 當個向量圖會在很多地方重覆出現時,將其轉換為SYMBOLS(圖像),這樣會可以在很多地方共用一個資源。
  7. 要嵌入字型時,只嵌入自己所需要的字碼範圍
    fig30
  8. 可在發佈設定的地方建立專案的描述檔去觀察所有元件的大小(右顛齒輪可新增描述檔)
    2013-08-23_190943
  9. 在發佈設定=>SWF=>進階的地方,把”包含XMP中繼資料”選項取消,可以減少一些檔案大小。
    2013-08-23_191205

優雅的開發FLASH(重點整理)

  1. 避免元件的所在位置帶有小數點
    fig32
  2. 考慮現在該用BITMAP或是SHAPE
  3. 文字字型選擇”消除鋸齒增加易讀性”
  4. 除非必要,不要讓文字變成可選擇的
    fig35
  5. 沒有需要移動漸變的影格不要設為移動漸變,可按右鍵的”移除補間動畫”來移除。
    fig36
    2013-08-23_191910
  6. 將元件的APLHA設為0時,他依然會接受滑鼠事件,會耗費處理滑鼠事件的效能。將元件的VISIBLE設為FALSE,元件仍然在畫面上。最好的方式是將其整個圖像完全刪除。
  7. 不要把元件壓在另一個元件之下,因為他還是會耗廢效能,把他的visible設為false或直接移除都可節省效能。

2 thoughts on “提升Flash效能的幾個注意事項

  1. […] 仔細(Details) Scout可以提供詳細、階層性的資訊,讓開發者一目了然自己的程式的GPU資訊及記憶體使用狀況。 除了Profile的記憶體監控功能外,Scout還可以提供GPU運算的相關數字及報表。 在上面所列的其他三項工具,只有Hi-ReS-Stats有顯示FPS,可以讓開發者了解FPS速度是否正常,可觀察何時影格速度會變慢,並檢查是否有什麼動畫讓畫面停住了。其餘的都只能單純的監控程式使用的記憶體狀況,而無法了解到動畫處理的記憶體使用狀況。 在flash裡,動畫的運算、圖形處理等,在很多時候其實是造成畫面Lag的主要元兇,因此,或許很多時後我們會發現動畫不知為何播放速度變慢了,但是觀察Profile,記憶體的使用狀況卻很正常,這時很可能便是GPU Memory不足。 有關要如何做才能提高動畫的效能,相關議題可以參考下面這篇文章: http://claire-chang.com/1063-提升Flash效能的幾個注意事項 […]

  2. […] 有關要如何做才能提高動畫的效能,相關議題可以參考下面這篇文章: http://claire-chang.com/1063-提升Flash效能的幾個注意事項 […]

Comments are closed.