Skip to main content

[ 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 專案中也會大量被使用到的喔!

Comments

  1. 如夢初醒啊! 感謝Erin姐...

    祝早日找到好男人 XDDD

    ReplyDelete
  2. 也祝Erin姐姐早日找到好男人

    ReplyDelete
  3. 太棒了~沒想到可以這麼用~
    ^___^謝謝~~

    ReplyDelete
  4. 自訂 Event果然是個好用的東西
    祝早日甩掉壞男人

    ReplyDelete
  5. 我缺個好女人...

    ReplyDelete

Post a Comment

Popular posts from this blog

[Flex] PureMVC standard with Spring extensions

由於上次稍微玩了一下 Robotlegs 依賴注入(DI) 主導的 MVC 框架,而著名也使用依賴注入的 Java / Java EE 的 Spring framework 出了 for ActionScript 的版本,剛好在最近 Spring ActionScript 1.0 正式 release 了(想了解 Spring 是啥咪東東的話請自行找 google 大神),這個版本除了基本框架外,也包含了 Cairngorm 與 PureMVC 的外掛...想當然耳,就拿來測試一下用在 PureMVC 內的感覺囉!! 參考了 官方範例 中 PureMVC 唯二的範例原始檔,以下使用的是「設定檔依賴注入 facade 透過 addConfigSource() 的方式來 init 」:(其實除了 embed 外,都是外部載入) Online Demo with source code 工作環境:FlashBuilder, Flex SDK4 請下載 PureMVC Standard 版本 再下載 Spring ActionScript 最新版本後,除了 spring-actionscript-cairngorm 不需要外,都放到 /src 下(記得只需要 org 開始...),也別忘了lib 內的 swc 檔 copy 到 /libs 下 Spring 的 injection 並不像 Robotlegs 直接來個 [Inject] metadata 的自動化那樣方便,但是其冷血度(檔案的鬆偶程度)更勝後者!如果你要使用設定檔(applicationContext.xml) 來做注入的話,準備工作就挺多的...XD 依照 applicationContext.xml 內設定的方式分別寫入 constructor 或者是 setter 依賴注入(本範例統一使用 setter injection) 為了跟大家都沒關係所以都使用 interface 來處理,所以你會在範例中發現大家都有介面...(並沒有真的研究過 Spring,也許還有其他作法) 準備 compiler 時候要用的 classe。由於在 setter, getter 的寫法上都使用 interface,所以真正用到的 class 需要預先在輸出階段就打包到程式內。 基本上 PureMVC 類 class...

[AIR] JoSi FXGtoLayout

JoSi FXGtoLayout v0.3.0, Adobe AIR 3 runtime 這個又是一個 "就是" 系列懶人小工具,主要是針對 Adobe fxg 格式做分析轉成 Mobile 開發用的視圖程式碼,加速畫面配置使用。 為什麼會製作這個工具,原因主要是本人在使用的 Corona SDK 與 Titanium SDK 都沒有好用的視覺化編輯工具。一般設計師產出 layout 檔會使用 PhotoShop 來製作,在不多花錢的原則下,畫面對齊的基準就是其輸出的 fxg 資料做對應,如果要一筆一筆將資料鍵入,做久也是會膩的,所以花了點時間將這個工具做出來...