Jun 22, 2009

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

May 18, 2009

[543] 最近的 Erin 在做什麼?


最近 Erin 噗浪玩很大,都忘了要寫 blog...
自從四月初開始認真當 SOHO 後,每天都過著"醉生夢死"的生活...??

目前的行程:

五六月 - 滿檔中...
七月( 每週一三晚間 ) - 授課 飛肯 ActionScript 3.0 & XML 資料庫整合應用班 (會準備什麼隱藏課程?你來了就知道...XD )
七八九月 - 短期約聘面談中
十月 - 等你聯絡囉~~^^

近期如果你有"不急的" Flex / AIR / Flash / Flash lite 相關的案子需要外發都可以直接與我聯絡!也接受短期約聘喔!

1 ) 如何聯絡 Erin?
寄 e-mail 是最快的喔!不然可以透過 blog 上的 Plugoo 視窗與我聯絡,再來就是噗浪...XD
E-mail: erinylin [at] gmail [dot] com
Plurk: http://www.plurk.com/erinlin

2 ) 為什麼不公開留 MSN...??
嗯...因為 Erin 記憶不好,外加 MSN 一堆幾百年沒有聯絡的朋友名單...所以還是先透過 e-mail 聯絡一下再加入比較記得...

3 ) Erin 到底會什麼?
啊...這個問題就有點難回答了,Erin 古早以前是個美術設計師,也當過電腦兼職講師,後來轉職當互動工程師,現在主要是做 AS1/AS2/AS3 "都可以"的前端互動開發(程式為主)。凡舉 Flex / AIR / Flash / Flash lite 相關的案子都做過,整合過很多專案,動畫也製作過(人物設定+動畫製作),在手機產業界接觸了 UI 設計與 UE 研究,最近經手的案子有國外活動網站(AS3+pv3D)中文化,公司進銷存系統網路化(Flex)...所以 Erin 到底能做什麼?嗯...就等你來研究囉~~

4 ) 為什麼沒有作品集可以看?
這個就要問問為什麼一堆公司都要你簽 NDA (保密協定) ,搞的 Erin 也懶得公開經手過的作品,所以想要看到 Erin 做過什麼,就請記得找 Erin 面談時要註明『請帶電腦』這四個字 =)

裏 1 ) 目前 Erin 缺什麼?
嗯...缺男人(咦?這才是這篇的重點嗎?)

Mar 27, 2009

[Flex] Button enabled=false 自動灰階



嗯...這只是一個懶人小技巧,為了就是省下作 Button enaqbled=false 時的灰階 Icon 圖...( 這個作法是將 disable 狀態直接都變成灰階的...所以設 disable 文字顏色也沒用喔...XD )
原理蠻簡單的就是 override 掉 updateDisplayList 這個 function ( override enabled setter 也可行)

/*
LazyButton
Copyright (c) 2009 Erin Lin ( Yu-Shan Lin)
Your reuse is governed by the Creative Commons Attribution 3.0 License
最近大家都很愛寫CC license 所以我也來寫一下...XD
enabled = false; 變灰階
*/
package
{
import mx.controls.Button;
import flash.filters.ColorMatrixFilter;

public class LazyButton extends Button
{
public function LazyButton()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(!enabled){
filters = [new ColorMatrixFilter(
[0.3086,0.6094,0.0820,0,0,
0.3086,0.6094,0.0820,0,0,
0.3086,0.6094,0.0820,0,0,
0,0,0,1,0])];
}else{
filters = [];
}
}
}
}

Feb 27, 2009

[Flex] pureMVC MultiCore with Modules



跟 pureMVC MultiCore & Modules 相處幾天後發現了一個簡易串接流程能互相接聽與發送訊息(其實還有更爛的方法...XD 只是為了能自動化改用這個...)。不能說下面分享的是很好的解法,只能說它應該是個蠻容易理解外加還沒發現有啥嚴重 bug 的方法...

做法其實很簡單,就是 System facade 在 load Module 時,建立一個 Module 專用的 Mediator 並且將 Module 指定給它為其 viewComponent,就可以透過這個 Mediator 串接起來,這樣不管有多少個 Modules 都可以對應一個 ModuleMediator 來處理。這個串接的 Mediator 特別的地方就是它做了雙向註冊,如同轉接國際電話的接線生,因為跟兩邊都有關係,所以可以接聽跟發送兩邊的 Notifications。

請看 Live Demo(Demo 頁點選滑鼠右鍵可以看 source code )

  1. ModuleManager 是寫在 Main.mxml 內而不是跟著 ModuleCommand 一起,原因是在 Flex 3.2 SDK 之後版本為了解掉更嚴重的 Module load & unload memory leak bug.. IModuleInfo 是區域變數的話,就容易被 GC 掉...這不是個 bug 喔!(Adobe 講的...也不知道是真的假的...沒特別研究...)
  2. Module 沒有真正 unload 掉,反正它會反覆載入,就不真的移除了...所以請自助...
  3. System facade 只用 ModuleCommand and ModuleMediator 處理所有的外部 Modules,所以重點都在這兩個 class 內...XD
  4. 為了輸出專案時不會將 Module 一併打包和要統一命名 Module's facade,所以外部的 Module 都需要 implements IModuleComponent interface。
  5. (Edit: 3/4/2009) 由於 System facade 掌握著 Module facade 的名字,如果 System message 需要傳到特定的 Module 也可以很簡單的實現...=P

Feb 13, 2009

[Flex] Custom TweenEffect with Pixel Bender Filter


續前篇。
如果每一次 apply pixel bender 到轉場 effect 都要寫一長串的話實在有點堅強過頭... 要符合懶人精神將常用的 pixel bender filter 效果實作成 TweenEffect 才是明智的選擇。參考了 Flex help 與其他 TweenEffects,以下是簡單客製 TweenEffect 並加上 pixel bender filter 的作法:

每一組 TweenEffect 都由兩個 class 組成: TweenEffectInstance 與 TweenEffect ; 各自有幾個重點 functuon 需要被 override。別忘了先將上篇提到的 CrystallizeShader.as 放到 effects/ 下。

1. 製作 effects/CrystalEffectInstance.as:( 顧名思義就是被作用的實體 )
package effects
{
import flash.display.Shader;
import flash.filters.ShaderFilter;
import mx.effects.Tween;
import mx.effects.effectClasses.TweenEffectInstance;

public class CrystalEffectInstance extends TweenEffectInstance
{
public var sizeTo:Number;
public var sizeFrom:Number;

private var shader:CrystallizeShader = CrystallizeShader.getInstance();

public function CrystalEffectInstance(target:Object)
{
super(target);
}
// Override play() method class.
override public function play():void {
// 一定要有 super.play().
super.play();
sizeFrom = isNaN(sizeFrom) ? 50 : sizeFrom;
sizeTo = isNaN(sizeTo) ? 0 : sizeTo;
var tween:Tween = createTween(this, sizeFrom, sizeTo, duration);
}

// Override onTweenUpdate() method.
override public function onTweenUpdate(val:Object):void {
shader.size = Number(val);
applyFilter();
}
// Override onTweenEnd() method.
override public function onTweenEnd(val:Object):void
{
applyFilter();
super.onTweenEnd(val);
}

private function applyFilter():void{
var filters:Array = target.filters;
for (var i:int = filters.length; i-->0;)
{
if (filters[i] is ShaderFilter)
filters.splice(i, 1);
}
if(shader.size)
filters.push( new ShaderFilter( shader ) );

target.filters = filters;
}
}
}

主要 override play(), onTweenEnd(), onTweenUpdate(),並加上一個 applyFilter 保障其他附加在實體上的 filters 不會被刪掉...=P

2. effects/CrystalEffect.as

package effects
{
import mx.effects.TweenEffect;
import mx.effects.IEffectInstance;

public class CrystalEffect extends TweenEffect
{
public var sizeTo:Number;
public var sizeFrom:Number;

public function CrystalEffect(targetObj:* = null) {
super(targetObj);
instanceClass= CrystalEffectInstance;
}
//override getAffectedProperties()
override public function getAffectedProperties():Array
{
return [ "filters" ];
}
// Override initInstance() method.
override protected function initInstance(inst:IEffectInstance):void {
super.initInstance(inst);
CrystalEffectInstance(inst).sizeFrom = sizeFrom;
CrystalEffectInstance(inst).sizeTo = sizeTo;
}

}
}

繼承 TweenEffect 的寫法有點固定,改寫 initInstance() and getAffectedProperties()

測試:main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:effect = "effects.*"
layout="horizontal" >
<effect:CrystalEffect sizeFrom="200" duration="500" id="crystal" />
<effect:CrystalEffect sizeFrom="500" sizeTo="10" duration="800" id="crystal1" />
<mx:Panel width="250" height="200" title="Pixel Bender Test"
backgroundColor="#F8F8F8" creationCompleteEffect="crystal" />
<mx:Panel width="250" height="200" title="Pixel Bender Test"
backgroundColor="#F8F8F8" creationCompleteEffect="crystal1" />
</mx:Application>

Feb 10, 2009

[Flex] Pixel Bender Filter 動畫應用



雖然 Pixel Bender 已經出現了好一段時間,但是一直都沒很認真的看過,周遭朋友也鮮少討論它...直到最近工作需求才有開始使用。以下是集合各家長處能簡單應用 Pixel Bender Filters 到 AS3 的作法。

  1. 先到 Adobe Pixel Bender Exchange 挑選想要的特效 (這邊是選擇 Crystallize ) ,下載後解壓出 Crystallize.pbj
  2. 曾經從 CJ Cat 那邊聽到 pbj 可以整個轉換到 AS 內,經過 google 大神指點,找到了一個超級無敵好用的 PBJ to AS converter... 感謝作者 Marek Burn 的好心分享!!!! 利用 converter 轉換 pbj to AS, 存成 CrystallizeShader.as 放到工作目錄內。Pbj 內可設定參數可以參考轉出來的 as 檔內說明。
  3. 編寫 mxml: 使用 mx 包內建的 Tween

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()"
layout="horizontal" >
<mx:Script>
<![CDATA[
import mx.effects.Tween;

private var shader:CrystallizeShader;

private function init():void{
var initNum:Number = 50;
shader = CrystallizeShader.getInstance();
shader.size = initNum;
var tween:Tween = new Tween(this, initNum, 1, 6000, -1, onUpdate, onEnd );
w1.filters = [ new ShaderFilter(shader)];
}
private function onUpdate(num:Number):void{
shader.size = num;
w1.filters = [ new ShaderFilter(shader)];
}
private function onEnd(num:Number):void{
w1.filters = [];
}
]]>
</mx:Script>
<mx:Panel width="250" height="200" layout="absolute" title="Pixel Bender Test"
backgroundColor="#F8F8F8" id="w1" />
</mx:Application>



完工!!
Ps. Pixel Bender 需要 Flash Player10 喔! Flash 寫法大同小異,請自行轉換...=P

References :
Pixel Bender Exchange
goAndLearn(): Animating Pixel Bender Filters
Marek Burn's PBJ to AS converter
Edit 04/21/2009 : Marek Burn's blog 連結已經失效...我手上也沒有檔案,很抱歉~~