Erin's Blog

嗯...這只是一個懶人小技巧，為了就是省下作 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 = []; } } } }

跟 pureMVC MultiCore & Modules 相處幾天後發現了一個簡易串接流程能互相接聽與發送訊息（其實還有更爛的方法...XD 只是為了能自動化改用這個...）。不能說下面分享的是很好的解法，只能說它應該是個蠻容易理解外加還沒發現有啥嚴重 bug 的方法... 做法其實很簡單，就是 System facade 在 load Module 時，建立一個 Module 專用的 Mediator 並且將 Module 指定給它為其 viewComponent，就可以透過這個 Mediator 串接起來，這樣不管有多少個 Modules 都可以對應一個 ModuleMediator 來處理。這個串接的 Mediator 特別的地方就是它做了雙向註冊，如同轉接國際電話的接線生，因為跟兩邊都有關係，所以可以接聽跟發送兩邊的 Notifications。 請看 Live Demo （Demo 頁點選滑鼠右鍵可以看 source code ） ModuleManager 是寫在 Main.mxml 內而不是跟著 ModuleCommand 一起，原因是在 Flex 3.2 SDK 之後版本為了解掉更嚴重的 Module load & unload memory leak bug.. IModuleInfo 是區域變數的話，就容易被 GC 掉...這不是個 bug 喔！（Adobe 講的...也不知道是真的假的...沒特別研究...） Module 沒有真正 unload 掉，反正它會反覆載入，就不真的移除了...所以請自助... System facade 只用 ModuleCommand and ModuleMediator 處理所有的外部 Modules，所以重點都在這兩個 class 內...XD 為了輸出專案時不會將 Module 一併打包和要統一命名 Module's facade，所以外部的 Module 都需要 implements IModuleComponent interface。 (Edit: 3/4/2009) 由於 System facade 掌握著 Module facade 的名字，如果 System message 需要傳到特定的 Module 也可以很簡單的實現...=P

續前篇。 如果每一次 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(); size...

雖然 Pixel Bender 已經出現了好一段時間，但是一直都沒很認真的看過，周遭朋友也鮮少討論它...直到最近工作需求才有開始使用。以下是集合各家長處能簡單應用 Pixel Bender Filters 到 AS3 的作法。 先到 Adobe Pixel Bender Exchange 挑選想要的特效 （這邊是選擇 Crystallize ) ，下載後解壓出 Crystallize.pbj 曾經從 CJ Cat 那邊聽到 pbj 可以整個轉換到 AS 內，經過 google 大神指點，找到了一個超級無敵好用的 PBJ to AS converter... 感謝作者 Marek Burn 的好心分享!!!! 利用 converter 轉換 pbj to AS, 存成 CrystallizeShader.as 放到工作目錄內。Pbj 內可設定參數可以參考轉出來的 as 檔內說明。 編寫 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)...

跟 Cairngorm and pureMVC 相處過一陣子之後，在這邊與大家分享一下使用它們在 Flex 中的開發經驗（也許有錯誤的理解，請多指正囉！） Cairngorm : 喜歡的部份： 架在 Flex framework 上使用中央 Event (CairngormEventDispatcher )機制，UI 開發簡單 (因為容易理解...) ModelLocator 採用 Flex 綁定機制，UI 顯示資料無煩惱 由於上面兩項，所以使用 Module 開發專案不會很痛苦 討厭的部份： 主要的東西都是 Singleton design pattern, 如果專案很大的話，又統一在一起開發，那個 ModelLocator 到後來應該會很奇怪... 綁太多細節在 UI component 內，如 UI component 一定要認識 ModelLocator 還可以直接操作或修改它...＠＠ Event 跟 Command 比多的...重點跟 pureMVC 的 command 比起來它的亂多了... 專案越大越亂... pureMVC : 喜歡的部份： 大家的職責切分的很乾淨...棒 （這個只能意會不能言傳啊...XD 快去研究它吧!） 寫在 UI (MXML)內的程式開發起來比使用 Cairngorm 的乾淨好幾倍（因為邏輯層被切分到 Mediator 了） Notification & Command 果然是好物...雖然一開始感覺很囉唆，但是跟它熟了之後發現真是好用... Proxy 比 ModelLocator 更加好用...因為不需要的 Proxy 要清掉也很容易...所以在資料的增減上，pureMVC 架構彈性比較高 簡而言之就是乾淨乾淨乾淨~~~ 討厭的部份： 它的架構比較像仙人一樣超脫於 Flex framework 之上，所以想要整合 Flex 的優點要花點腦袋想（結果這個也是優點...@@) 很多語法都是要繼承並 override 寫起來不夠爽...快，這點 Cairngorm 大量的使用 interface 就棒多了。 由於 Facade 的存在如果要使用 Module 與 MultiCore 版本來開發的話，還需要撰寫連接的元素，或者直接參考 pureMVC網站上的 Utility - AS3 / Pipes 來應用......

這篇是答應某人要公開分享的教學...這兩天終於湊出時間來寫... Erin 分享的原則通常都秉持著 "給你魚吃，到不如教你釣魚" 的想法在寫，所以如果沒有附上原始檔也請不用詢問了呦...意思就是我已經提供很多可以讓你"開始學"釣魚的概念囉！ 這是去年三月在台北舉辦的 Flex&AIR AUG 網聚上使用的 lotto-bot 中的取得唯一亂數號碼 myBlock，可以用在樂透遊戲或者是亂數只給出現一次的程式應用。它的邏輯很簡單，只是要改成 NXT-G 的 myBlock 花了些時間連連看...XD 開始製作之前請先注意看看你的 NXT-G 有沒有安裝過 Dynamic Block Update ，安裝完成後可以在下拉式功能表中找到 "Block Import and Export Wizard"。接下來請下載及 import Simple Array Block ，在下載的時候請記得點一下畫面中的google AD 感謝 Simple Array 的作者 Steve Hassenplug 提供了很多很棒的NXT-G Blocks 給大家使用。 由於 NXT-G 的變數是全域變數，所以在組合 myBlock 要小心變數命名，取得唯一亂數號碼需要兩個 myBlock ，一個負責初始化相關參數，一個負責輸出唯一號碼： initUniqueRandom myBlock: var uniq_total:Number = total; Simple Array Block : clear Add a value(e.g. 100) to index 0 in Simple Array Block, coz we don't use index 0. If you need it to count from 0, just ignore this step. 如圖： 接下來就麻煩了...很長一串... getUniqueRandom myBlock: 這段要用程式表示囉...不然寫的好累...冏... var Logic 1 : Logic = false; //Logic Switch if(uniq_total == uniq_legth){ //Logic Switch Conditions :...

由於 pureMVC Standard and MultiCore 兩個版本寫法幾乎沒啥差別，開發的專案都統一使用彈性比較大的 MultiCore 版本來實作。跟 pureMVC 相處了一陣子後，漸漸地對它也沒有什麼特別的不爽...快，所以 Cairngorm and pureMVC 的選擇，也就由 pureMVC 勝出了（當然是有惡勢力的...冏）。 以下的範例還是使用 pureMVC Standard 來實作喔！這個範例應該能更容易理解 Mediator, Command and Proxy 合作的模式。 1. 由 DataProxy 開始寫 這次的 DataProxy 負責的是將 input textfield 中的文字儲存起來也提供清除的方法。 DataProxy 並不認識任何 Mediator。 package com.mvc.model { import mx.collections.ArrayCollection; import org.puremvc.as3.patterns.proxy.Proxy; public class DataProxy extends Proxy { public static const NAME:String = 'dataProxy'; public static const DATA_UPDATED:String ="data_updated"; public static const SAVE_DATA:String = 'save_data'; public static const CLEAR_DATA:String = 'clear_data'; public function DataProxy() { super(NAME, new ArrayCollection); } public function save(obj:Object):void{ list.addItem(list.length+" : "+obj); sendNotification( DATA_UPDATED, data ); } public function clear():...