hasEventListener()與willTrigger()區別

承上一篇介紹Event事件流的基本概念
AS3的事件傳遞機制(Event、dispatchEvent及addEventListener)
再來介紹相關的檢查函數。

hasEventListener()方法:
檢查 EventDispatcher 對象是否為有註冊這個事件的監聽器。
willTrigger()方法:
檢查是否用此 EventDispatcher 對象或其父容器是否有註冊這個事件的監聽器

hasEventListener() 與 willTrigger()的區別是:hasEventListener() 只檢查它所屬的對象
而 willTrigger() 檢查對象以及對象的父容器是否有註冊這個事件(不管capture的值)。

假如像下面這樣的物件階層來說

efAzj

今天我們對stage註冊事件

則檢查box的willTrigger及hasEventListener

的結果為
true
false

而若我們對box註冊事件

則檢查box的willTrigger及hasEventListener

的結果為
true
true

而若我們對box註冊事件

則檢查stage的willTrigger及hasEventListener

的結果為
false
false
代表box不在stage完整可能有的事件流的動線裡。

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

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

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

提升效能

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

    如果仍要與其他的元件做互動則使用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或直接移除都可節省效能。

AS3的事件傳遞機制(Event、dispatchEvent及addEventListener)

當事件被發送出來之後。Event一般來説都會有一個Flow。 Flow分三個部分:

  1. Capture(捕獲階段)
  2. Targeting(目標階段)
  3. Bubbling(冒泡階段)

其關係圖如下:(來源為http://www.adobe.com/devnet/actionscript/articles/event_handling_as3.html)

efAzj

值得一提的是,在FLASH裡,只有和UI相關的物件,會有上圖所示的目標及補獲階段的事件流

一般像是Timer、Loader事件,是直接進入目標階段,並不會有上圖所示的事件流的流程。
在宣告Event時,也可以先指定事件是否要完整的跑完全部的流程。

宣告事件的語法及及參數意義如下:

參數說明(官方文件)

  1. type:String是要發送的事件的識別名稱EX:Event.COMPLETE
  2. bubbles:Boolean預設值是false,這個值是用來設定是否要有冒泡階段,如果傳false,代表他不會跑完全部的流程,只會從Capture到target階段就停止
  3. cancelable:Boolean預設值是false,這個值是用來設定是否這個事件可以被event.preventDefault();取消,如果設定為true的話,代表此事件是可以被取消的(稍候在dispatchEvent會更詳述這部份)。
    常用的可以取消的事件有(cancelable為true):   FocusEvent.MOUSE_FOCUS_CHANGEFocusEvent.KEY_FOCUS_CHANGETextEvent.TEXT_INPUT

而發送事件則是用這一段程式碼:

在發送事件時,要注意,假使今天我們是在STAGE裡面有一個box物件,那當我們用box.dispatchEvent(event);
即使事件是用box發送的,事件還是會從stage > root > box這樣跑。(請見上圖)
假如在建立Event時,bubbles設為true,那在上圖跑的流程為stage > root > box > root > stage
而若bubbles設為false,跑的流程則是stage > root > box

當我們用root.dispatchEvent(event);
bubbles設為true,上圖跑的流程為stage > root > stage
bubbles設為false,流程為stage > root

由此可知,事件流只會到目標(Target),就會停止往下傳
假如今天box裡面有一個物件button,若是用box.dispatchEvent(event)
button物件是不會接到事件流的。(因為到目標階段便會開始bubbles或停止)
並且假如今天root裡同時有box和box2兩個物件,
假使我們用box.dispatchEvent(event),則box2也不會接到事件。

至於第三個在建立Event的參數cancelable,不論值是true或false,都不會影響事件流的流程。
那他的作用是做什麼的呢?

我們可以發現,dispatchEvent有回傳一個布林值,cancelable就是在影響這個布林值的傳回參數。
今天我們假如要創建一個物件,但是要讓使用者有權力去阻止這個事件發生後的後續發展時,可以這樣寫

假使使用者在監聽的途中呼叫 event.preventDefault();,並且EVENT的cancelable為true時,dispatchEvent回傳的值就會是false,便不會執行trace("success!");那塊區塊。但假使EVENT的cancelable為false時,不論你在事件執行中有沒有呼叫event.preventDefault(),dispatchEvent回傳的值就會是true

一般我們會在傳遞事件的途中,去將事件攔截下來。增加監聽事件的程式碼如下

官網關於addEventListener的說明如下

addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

傳入的參數意義如下:

  1. type(String):事件名稱
  2. listener(Function):要執行的Function
  3. useCapture(Boolean):這個和本篇要說的事件流有關,當今天傳入的值為true,則只能在補獲階段去抓取事件,在冒泡階段是聽不到的。如果將 useCapture 設置為 true,則偵聽器只在捕獲階段處理事件,而不在目標或冒泡階段處理事件。
    如果 useCapture 為 false,則偵聽器只在目標冒泡階段處理事件
    要在所有三個階段都偵聽事件,需註冊 addEventListener 兩次:一次將 useCapture 設置為 true,一次將 useCapture 設置為 false。當今天若useCapture為true時,並不會聽到target階段時的事件但若為false時,也可以聽到target階段時的事件

    假使今天我們用box.dispatchEvent(event);來發送事件,
    然後box的監聽事件的useCapture設為true。ex : box.addEventListener(MouseEvent.CLICK, rootClick, true);
    這樣rootClick事件並不會被呼叫到。

    若box的監聽事件的useCapture設為false 。ex : box.addEventListener(MouseEvent.CLICK, rootClick, false);
    這樣rootClick事件便被呼叫到。

  4. priority(int):若今天同時有很多個監聽器同時監聽同一事件,可用這個值來設定那一個監聽器應該被優先執行。數字愈高代表會愈快執行該事件偵聽程式。
  5. useWeakReference(Boolean):是否使用弱關連。若是用弱關連,當被監聽的物件所指到的變數被指向記憶體的其他地方,這個關係也會一併被取消(物件會被GC回收)。但如果傳進的值是false,當今天被監聽的物件的其他關連被指向別處時,該物件不會被GC回收,需要手動removeEventListener時,該物件才會被GC回收。

除了上述的幾個參數外,還有幾個函數可以中斷事件流的流程。
那就是stopPropagation()stopImmediatePropagation()

那這兩個函數有什麼差別呢?

下圖可以很清楚的解釋差異:
stopPropagation():會把同一階層的其他事件跑完才停止。
5MYe3

stopImmediatePropagation():立刻停止之後所有的事件流。
jleAX

假如今天box同時有兩個監聽函數如下

則由於priority值的關係,eventMouseDownHandler2會先被執行,eventMouseDownHandler1在之後才被呼叫
那若是在eventMouseDownHandler2裡面呼叫event.stopPropagation(),eventMouseDownHandler1還是會被執行,才將事件流中斷。
但是若在eventMouseDownHandler2裡面呼叫event.stopImmediatePropagation(),則eventMouseDownHandler1就不會被呼叫到

相關資源

  1. AS3.0的事件機制(詳細)
  2. AS3筆記-事件流(event flow)
  3. Event propagation
  4. Introduction to event handling in ActionScript 3.0