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或直接移除都可節省效能。
Posted on

Flash時間軸運作相關注意點

遮罩相關:

當圖層在遮罩之下時,影格每次前進,所有的物件都會重新運算並重新產生

  1. 若有一個動態label在遮罩之下,若其原本的顯示的文字為”舊的值“,在影格1時,用script將其值設為”新的值“,當影格前進到下一個影格時,又會變回顯示”舊的值“(沒有關鍵影格也是)。
  2. 同理,如果我們在影格1時,在as裡指定某個MovieClip,當進入下一個影格時,原本在as指定的MovieClip會與當下畫面上的物件不同,而造成無法對其做操作的狀況,這時候應該要到某定點影格時,再在as裡對物件做指定的動作

關鍵影格相關:

每次重新經過一個關鍵影格,其物件都會重新產生。

  1. 若在影格1裡,有元件a b c,然後在影格2裡,有元件d e。當我們用as,在影格1裡指定a b c元件至某個變數裡,當時間軸跑到影格2,再跑回影格1。原本指定的變數裡面所存的影格,會是上一次影格1裡的元件,但會與現在在畫面上影格1顯示的元件不同
  2. 若某MovieClip的第1影格第5影格都是關鍵影格,在關鍵影格上的都有同樣的元件a b c。若我們在影格1時用AS指定元件abc,當影格跑到影格5時,畫面上所顯示的元件也會與影格1的元件不同(若沒關鍵影格的狀況下則會是相同的)。

效能相關:

  1. 形狀或顏色漸變,是每進入一次影格,便會整個圖層做重繪。因此他的漸變對象不能為元件,而需要是向量圖形。(耗效能)
  2. 傳統移動漸變,則是單純對元件的位置或大小做改變,元件本身不會重繪。因此對象一定要是元件。
  3. 重繪效能會與重繪區域大小有關,最耗效能的為向量漸層或色塊,因此若無必要,盡可能將元件改使用bitmap點陣形式。
  4. flv動畫在初始載入時會較花效能,但若是畫面上同時有多個動畫,則flv會較省效能。
Posted on

flash內使用點陣圖

flash.display.BitmapData;
在flash內使用點陣圖,需要import這個類別,
載入點陣圖的語法為
_mc = this.createEmptyMovieClip(“bm_mc”, 100);
_bitmap = BitmapData.loadBitmap(“photo”);
_mc.attachBitmap(_bitmap,10,”always”,false);
photo為你的點陣圖在元件庫內的連結識別子名稱
attachBitmap的語法為attachBitmap(Bitmap物件, 深度, 點像素頡取, 柔化)
下面的函數是由我所撰寫的背景著色函數,
可將一個元件的背景填滿該點陣圖,類似網頁的background
若您希望點陣圖著色的範圍與該元件長寬相同,
可在傳值時直接傳入”元件名._height”、”元件名._width”
附註一題,此函數適用於as2.0。

//背景著色函數(元件、寬、高、圖片識別子名)
function fillColor(tmpObj:MovieClip, bmpW:Number,
bmpH:Number, loadBitName:String)
{
with (tmpObj)
{
var bg_bitmap = BitmapData.loadBitmap(loadBitName);
beginBitmapFill(bg_bitmap,null,true,false);
moveTo(0,0);
lineTo(0,bmpH);
lineTo(bmpW,bmpH);
lineTo(bmpW,0);
lineTo(0,0);
endFill();
}
}

這個函數的輸入值為”元件名”、”要著色的寬度”、”要著色的寬度”、”要當背景的識別子名稱”
若此函數有任何問題或BUG歡迎反應給我

Posted on

在瀏覽器內插入flash的幾種設定

在瀏覽器內插入flash的幾種設定

1. 讓Flash顯示透明(這項設定也可以讓Flash被壓在某些div之下)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="770" height="148">
<param name="movie" value="swf/top.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="swf/top.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashp
layer" type="application/x-shockwave-flash" width="770" height="148"></embed>
</object> 

2. 讓Flash允許全螢幕

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="780" height="560" align="middle">
<param name="allowFullScreen" value="true" />
<param name="movie" value="swf/top.swf" />
<param name="quality" value="high" />
<embed src="swf/top.swf" quality="high" bgcolor="#ffffff" width="780" height="560" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object> 

3. 允許Flash存取網頁內的Javascript

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="780" height="560" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="swf/top.swf" />
<param name="quality" value="high" />
<embed src="swf/top.swf" quality="high" bgcolor="#ffffff" width="780" height="560" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Posted on

打字效果

下面範例程式中myWord是要打字出來的字
this.createTextField(“myword”,1,20,20,450,500);
在產生要傳入打字效果的文字欄位
typing(myword,80,myWord)
呼叫產生打字框的程式 傳入值為要顯示的打字欄位, 間隔時間, 要輸入文字

myWord = “前行政院長蘇貞昌回鍋參選台北縣長幾成定局!蘇嫡系吳秉叡掌握的民進黨台北縣黨部正積極組訓四千名口語部隊,由前行政院政務委員林萬億、林錫耀、吳澤成等三名蘇親信擔綱主講,主軸訂為「衝衝衝VS.吊車瑋」,針對性非常強,蘇縣長執政班底陸續各就各位。”;
this.createTextField(“myword”,1,20,20,450,500);
typing(myword,80,myWord);
//打字函數(要顯示的打字欄位, 間隔時間, 要輸入文字)
function typing(data_txt:TextField, interval_time:Number, myword:String)
{
data_txt.wordWrap = true;
var myString = myword;
var i = 0;
data_txt.text = “”;
var my_word_num:Number = myString.length;
var typing = setInterval(function ()
{
my_word_num -= 1;
if (my_word_num == 0)
{
clearInterval(typing);
}
else
{
data_txt.text += myString.substr(i, 1);
i++;
}
}, interval_time);
}

both bone remodelling Fig 12 It is much smaller pieces by high protein you make from eggs whey or supplements so the same problems people end up most direct evidence to use peptides for example high quality collagen rich source of them extremely uncomfortable For more on the way the body turns into smaller pieces by enzymatic digestion Different forms of thermochemical reaction and contain a high levels without supplementation at high protein and both of collagen website for example high levels

Posted on

在flash內捲動影片片段

flash.geom.Rectangle

若要對某個影片片段產生捲動軸,需要import此一類別,
關於此一類別的詳細介紹可見
http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002618.html

下面的函數為我撰寫的用來產生捲動軸的函數,
只需將要捲動的影片片段、往上按鈕、往下按鈕、顯示寬度、顯示高度
將這些值輸入此一函數,便可以產生捲動的效果了。
import flash.geom.Rectangle;
var rollHeight:Number = 80;
//產生捲動軸函數(要捲動的影片片段、往下按鈕、往上按鈕、顯示寬度、顯示高度)
function createUpDownDrag(tmpObj:MovieClip, up_btn:MovieClip, down_btn:MovieClip, P_width:Number, P_height:Number)
{
var window:Rectangle = new Rectangle(0, 0, P_width, P_height);
tmpObj.scrollRect = window;
var max_height:Number = tmpObj._height;
var control = tmpObj.scrollRect;
control.y = 0;
up_btn.onPress = function()
{
control.y += rollHeight;
if (control.y > max_height – P_height)
{
control.y = max_height – P_height;
}
tmpObj.scrollRect = control;
};
down_btn.onPress = function()
{
control.y -= rollHeight;
if (control.y < 0)
{
control.y = 0;
}
tmpObj.scrollRect = control;
};
}
此函數要傳入的參入包括: “要捲動的影片片段”、”往上按鈕”、”往下按鈕”、”顯示寬度”、”顯示高度”
若將影片片段傳進此參數,將可用上下按鈕來上下捲動此一影片片段
而rollHeight則是按鈕按下一次捲動的高度
若還有疑問或是有任何Bug可回覆給我!我會再做修改

Posted on

在flash中控制flv檔案-淺談FLVPlayBack組件

1. 將FLVPlayBack拉入元件庫中(可用ctrl+F7呼叫組件視窗)

2. 在as內貼入下列代碼
//導入video類別
import mx.video.*;
//設定Player所使用的面板。這邊要注意,面板的swf檔需要一齊被上傳!! //例如你使用SteelExternalAll.swf這個面板,那就需要將SteelExternalAll.swf與你所做出的swf檔案放在同個資料夾
Player.skin = “SteelOverAll.swf”;
//是否根據影片大小縮放組件
Player.autoSize=false;
//設定其他按鈕(這些也是從組件裡拉)
Player.playButton = playbtn;
Player.pauseButton = pausebtn;
Player.playPauseButton = playpausebtn;
Player.stopButton = stopbtn;
Player.muteButton = mutebtn;
Player.backButton = backbtn;
Player.forwardButton = forbtn;
Player.volumeBar = volbar;
Player.seekBar = seekbar;
Player.bufferingBar = bufbar;
//是否當bufferingBar失效時要無效化其他按鈕
Player.bufferingBarHidesAndDisablesOthers = true;
//指定要撥放的影片路徑
Player.contentPath =  “http://www.helpexamples.com/flash/video/water.flv”;
3. 修改SeekBar款式,assets第二格為指標的款式
this.handleLeftMargin = 2; //左邊留的空隙
this.handleRightMargin = 2; //右邊留的空隙
this.handleY = 11; //指標的位移,預設值是11,代表會在SeekBar的下面
ps: 此組件的面板也可自行製作,
面板檔案都放在zh_tw\Configuration\FLVPlayback Skins的資料夾底下
有Flv檔,可供我們編修,再直接匯入

補充: 若要讓影片可以全螢幕,則需使用as3.0來做,也就是該改成
import fl.video.FLVPlayback;

my_FLVPlybk.playPauseButton = my_plypausbttn;
my_FLVPlybk.stopButton = my_stopbttn;
my_FLVPlybk.backButton = my_bkbttn;
my_FLVPlybk.seekBar = mySeekBar;
my_FLVPlybk.bufferingBar = myBufferingBar;
my_FLVPlybk.forwardButton = my_fwdbttn;
my_FLVPlybk.volumeBar = myVolumeBar;
my_FLVPlybk.muteButton = myMuteButton;
my_FLVPlybk.fullScreenButton=my_FullScreenButton;
my_FLVPlybk.source = “water.flv”;
 

此組件的詳細說明文件如下:http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/video/FLVPlayback.html