[ AS3] 簡單講客製 Event

很多人從 AS2 轉 AS3 後，還是習慣照用 MovieClip(root) 之類的寫法，但其實 AS3 的 Event 機制提供了一個良好的環境讓你脫離兒子物件直接控制老爸物件 (如同 MovieClip 中寫 _root.去做啥())。這就是工程師最愛講的：loose coupling (鬆耦)

在 AS3 中，所有的 DisplayObject 都繼承自 EventDispatcher，所以它們可以收聽跟發送 Event。

以下是一個簡單的範例講解客製 AS3 Event 應用...

情況解說：主stage a.swf 載入 b.swf ，當點選 b.swf 內的按鈕須要通知 a.swf gotoAndPlay("labelA")。如果你沿用 AS2 寫作邏輯，你一定會在 b.swf 內的按鈕寫上：

btn.addEventListener( MouseEvent.CLICK , onClick );
function onClick(e:Event):void{
    // 不管怎樣就是只能控制 [MainTimeline] 去 gotoAndStop("labelA")
    MovieClip( parent.root ).gotoAndStop("labelA");
}

又或者將控制動作寫在 a.swf 內:

var ldr:Loader = new Loader;
ldr.contentLoaderInfo.addEventListener( Event.COMPLETE , onLoaded );
ldr.load( new URLRequest ( "b.swf" ) );

function onLoaded(e:Event):void{
 var mc:MovieClip =  ldr.content as MovieClip;
       addChild(mc);
       //喔喔將 b.swf 的 btn 一併綁進來了喔！所以按鈕絕對不能亂改名喔，也不能改階層
 mc.btn.addEventListener( Event.CLICK , onClick);
}

function onClick(e:Event):void{
   gotoAndStop("labelA");
}

當 a and b 互相交錯的細節越多，它的編寫彈性就變小，當 bug 一發生，你就需要釐清楚交錯的部分，然後除蟲就跟老太婆的裹腳布一樣又臭又長。專案很小、趕工的時候當然什麼都無所謂，但是等你需要跟別人一同作一個案子的時候，你就會知道其他人會有多恨你...(笑)

如果將它改成：
b.swf

btn.addEventListener( MouseEvent.CLICK , onClick );
function onClick(e:Event):void{
 //送 otherSWFPress 客製 Event 出去，bubbles = true 讓所有的老爸物件都可以收到(如果有被監聽的話)
        //TIP. 當然寫客製 Event class 外加常數管理會更乾淨，這邊先省下來
 dispatchEvent(new Event("otherSWFPress" , true ));
}

a.swf

var ldr:Loader = new Loader;
ldr.contentLoaderInfo.addEventListener( Event.COMPLETE , onLoaded );

ldr.load( new URLRequest ( "b.swf") );

function onLoaded(e:Event):void{
 var ds:DisplayObject = addChild( ldr.content );
 ds.addEventListener( "otherSWFPress" , onOtherSWFClick);
}

function onOtherSWFClick(e:Event):void{
   gotoAndStop("labelA");
   //按了外部 swf 要做的事情 
}

看得出兩種的差別嗎？後者的寫法就算你亂改 b.swf 但是只要遵循需要做動作的時候發出 otherSWFPress Event，然後 a.swf 也不需要綁住 b.swf 它甚至不需要知道 b.swf 是什麼種類的 DisplayObject，這樣兩邊修改的彈性就很大，因為它們根本不需要認識對方，你也不需要考慮誰是 root...誰要做什麼...其實客製 Event 的應用在 Flex 專案中也會大量被使用到的喔！