使用actionscript binding function

今天有同事問到如何使用純as動態綁定函數於是順便研究一下相關作法.
以下範例主要是透過BindingUtils.bindProperty並傳入自己創建的Chain object來完成動態綁定函數及額外的參數更新.

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import flash.utils.getTimer; import flash.utils.setInterval; import mx.binding.utils.BindingUtils; import mx.events.FlexEvent; protected function init():void { initBinding(lbl2, "this is lbl2"); setInterval(function():void { dispatchEvent(new Event("sayHello")); }, 1000) } protected function initBinding(obj:Object, value:String):void { var chain:Object = { name: "sayHello", value: value }; chain.getter = function(host:Object):String { return host.sayHello(chain.value); } BindingUtils.bindProperty(obj, "text", this, chain); } [Bindable(event = "sayHello")] public function sayHello(value:String):String { return "sayHello:" + value + ", time:" + getTimer(); } ]]> </fx:Script> <s:VGroup paddingTop="5" paddingLeft="5"> <s:Label id="lbl" text="{sayHello('this is lbl')}"/> <s:Label id="lbl2" text=""/> </s:VGroup> </s:Application>

(Read more...)

從MX Datagrd 升級至 Spark Datagrid 的簡易筆記心得

從MX Datagrd 升級至 Spark Datagrid 的簡易筆記心得

最近因為Flex 4.5版relase了spark版本的datagrid, 剛好手頭上案子正在進行改版的動作,於是趁這次機會順便升級成spark datagrid, 因為flex4引入了skin的機制, 在UI切換的使用上更潮靈活.不過畢竟兩種組件設計架構的差異性很大, 在升級中時常會遇到一些轉換上的問題.
以下為遇到與之前mx datagird不同行為的簡單筆記與解法 :




1 . 沒有ListEvent.ITEM_CLICK事件
解法 : 可以監聽datagrid.grid.addEventListener(GridEvent.GRID_CLICK, gridClickHandler);

2. 沒有ListEvent.ITEM_DOUBLE_CLICK事件
解法 : 可以實作itemrenderer並在itemrenderer dispatch doublie click event.

3. 沒有DataGridEvent.HEADER_RELEASE事件
解法 : 可以監聽datagrid.columnHeaderGroup.addEventListener(GridEvent.GRID_CLICK, headerReleaseHandler);


*4. 重新設定新的datagrid column IList collection時, 這在mx datagrid會保持原本的selectedItem/selectedIndex,
但spark datafrid會在下一個影格將selectedItem/selectedIndex重新設為null.
解法 :
- 不要重新設定新的colleciton, 保持一份collcetion以removeall/addItem function來做更新.
- 如果還是要設定新的collection,可以使用UIComponent.callLater重新更新datagrid selectedIndex迴避這個問題
ex :
var tIndex:uint = datagrid.selectedIndex; this.callLater(function():void { datagrid.selectedIndex = tIndex; }); 5. 沒有useRollOver="false" style可以設定.
解法 :
如果不要rollover效果可以新建一個spark.skins.spark.DataGridSkin把裡面的hoverIndicator移除掉.

先筆記到這裡, 有時間在更新其他升級相關遇到的問題...
以上這些解法也許有更好的解決方法, 也歡迎大家留言告知, 大感謝!
(Read more...)

Molehill 2D繪圖測試

Molehill 2D貼圖旋轉測試 ( 需安裝 Flash Player Incubator )

Molehill API  是支援GPU加速的低階3D API，目前公開的資料還不多，AGAL又是組合語言相當苦手( ;; ´ Д ` )人( ´ Д ` ;; )，只好吃苦當吃補。


以下連結是這幾天研究Molehill幫助很大的文章 :

組合語言 wiki

Flash molehill 簡單例子

AGAL心得筆記

My Name is AGAL, and I Come from Adobe – Part1

agalminiassembler-primer

Molehill-roundup



(Read more...)

利用include as的方式新增/覆寫類別函數

 

利用include as的方式新增/覆寫函數, 可以使多種類別include需要的as而做群集性新增/覆寫函數.

 

- AddMethods.as

override public function sayHello():void { trace("Hello!"); } public function sayHello2():void { trace(this, " : Hello!"); }

- A.as

package { public class A extends SuperA { include "include/AddMethods.as"; } }

- B.as

package { public class B extends SuperB { include "include/AddMethods.as"; } }

- Main.as

package { import flash.display.Sprite; public class Main extends Sprite { public function Main() { var a:A = new A; a.sayHello2(); var b:B = new B; b.sayHello2(); } } }

 

範例檔案下載

(Read more...)

Flex Menu客製化上下捲動子選單

這是實作Flex Menu加入客製化的上下捲動子選單, 在rollover up and down時捲動子選單.
以下為效果展示Demo:

(Read more...)

用XML當做Dictionary的key值取出為undfined?

昨天在做Dictionary測試時本來用xml當做key mapping, 結果卻發現用迴圈將xml內資料重新取出return的值卻是undefined.

目前還在找原因為何:S

以下為示範code:

package { import flash.display.Sprite; import flash.utils.Dictionary; public class DictionaryKeyTest extends Sprite { public var data:XML = <root> <node label="node1" /> <node label="node2" /> <node label="node3" /> </root> public var nodes:Array = []; public var dict:Dictionary = new Dictionary(); public function DictionaryKeyTest() { //測試目的:用XML當做Dictionart key重新取出的值為undefined var key:*; for (var i:int = 0; i < data.*.length(); i++) { key = data.*[i]; nodes.push(key); dict[key] = "nodedata" + i; } for (i = 0; i < data.*.length(); i++) { key = data.*[i]; trace("isEqual:", key === nodes[i]); // return true trace(dict[key]); //return undefined trace(dict[nodes[i]]); //return value } } } } (Read more...)

撲克牌牌型排列組合

最近迷上了一款iphone game : sword & poker, 這款遊戲是運用撲克牌牌型做組合給予敵人傷害的回合制rpg, 相當的耐玩.

因此這幾天花了點時間找資料研究關於撲克牌牌型的演算法, 以下為成果:

希望有機會也能來嘗試作作這類型的遊戲. :D

(Read more...)

QuickBox2D

QuickBox2D

QuickBox2D is a mini-library I created to work with Box2DFlashAS3. The main purpose of this library is to significantly simplify instantiation of rigid bodies and provide a simple way to skin rigid bodies with custom graphics.

可以讓你更為直覺快速建構Box2DFlashAS3物理碰撞環境.
讚! :D

(Read more...)

ListBase設定CSS後ComboxBox下拉選單字體顏色設定失效問題

在flex開發的專案中有用到css設定顏色的功能, 最近遇到ComboBox設定color下拉選單卻無法起作用的問題.後來發現如果在List組件 or ListBase 設CSS color, 會造成ComboBox設定CSS color失效, 造成的原因可能是ComboBox所顯示的下拉選單是ListBase Class的緣故.

我想這應該算是CSS繼承邏輯上的認知問題, 應該不算是什麼bug吧 :p
在這邊特此記錄一下以免又遇到相同狀況.
以下為示範的code :



<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style> ListBase { color: #ff0000; } /* List { color: #0fffff; } //*/ ComboBox { /*設定失效*/ color: #0000ff; } </mx:Style> <mx:List width="200" height="200"> <mx:dataProvider> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> </mx:Array> </mx:dataProvider> </mx:List> <mx:ComboBox x="220"> <mx:dataProvider> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> </mx:Array> </mx:dataProvider> </mx:ComboBox> </mx:Application>
(Read more...)

AS3 Data Structures For Game Developers (AS3DS)

AS3 Data Structures
AS3 Data Structures (code.google.com)

'AS3 Data Structures For Game Developers' is a package containing common data structures useful for flash game programming and application development. The project was started because I wanted a unified library which I could reuse in my games.

裡面定義許多可以運用的資料結構類別, 對開發遊戲相當地實用. 如果有機會能夠開發遊戲一定要好好研究一下:D

教學範例參考:

the graph class
the tree class
the queue class
the linked lists class 
more on linked list

(Read more...)

PushButton Engine + Box2DFlashAS3 小作品

上週末survey了幾個flash遊戲引擎, 後來挑了 PushButton Engine 研究.


The PushButton Engine is an Open Source, Flash game engine and framework that's designed for a new generation of games. PushButton Engine makes it easy to bring together great existing libraries and components for building Flash games. Spend less time on code, more time on building fun games.


PBE有加入Box2DFlashAS3的物理引擎支援,趁這週末花些時間研究一下如何應用
雖然實作上有遇到不少問題(我是挑svn latest版本研究, 跟r470版本差異部分蠻多的), 不過還是兜出了一個小作品"Avoid Ball":D
感覺PBE如果摸熟對遊戲開發上是個不錯的選擇.

- Avoid Ball:用左右鍵控制避免被球砸到（加上Box2DFlashAS3物理引擎)

- 2010/01/12 新增一個射擊遊戲範例:上下左右方向鍵控制 + 空白鍵射擊

(Read more...)

Flex4 速記

把一些常用的觀念先記下來, 日後有需要的再補上。

- Layout與組件脫離降低耦合度, 能更加靈活運用Layout.
Differences between Flex 3 and Flex 4 beta

- Group / Scroller
Introduction to viewports and scrolling in Flex 4 beta

- State狀態屬性切換更為直覺並增加易讀性
Differences between Flex 3 and Flex 4 beta

- effects : Animate/Transitions
 Effects in Adobe Flex 4 beta

- CSS
    *宣告namespace
    *多樣式設置
    *針對id設置
    *針對狀態樣式設置
How to use the new CSS syntax in Flex 4

- 雙向資料繫結 two-way data binding
How to use two-way data binding in Flex 4


(Read more...)

Mate flex framework

Mate is a tag-based, event-driven Flex framework.

雖然說關注這個framework有一陣子了卻一直沒有機會能用到，目前已經使用過Cairngorm,PureMVC. 希望日後有機會可在實際專案開發上使用。 :D


(Read more...)

FleVI - Flex2 visual Interface

FleVI

專為flex2 SDK設計的可視化介面，還在beta階段，要加入他們的 Google Group 才能下載。


(Read more...)

actionscript2 樹狀選單實作 (2)

treedemo2範例檔案下載 這是 actionscript2 樹狀選單實作 的延伸版本。著重於RollOver展開/RollOut收合的時間差效果。

這個範例會運用到flash8 的隱含函數setTimeout/clearTimeout，如果要讓使用該函數的類別通過編譯，您必須在Flash 8\en\First Run\Classes裡的 TopLevel.as多增加兩行:

intrinsic function clearTimeout(id:Number):Void;
intrinsic function setTimeout():Number;

接下來請看asdemo.ui.tree.DemoTree2類別幾個重點部分。

在addNode與addTree函數中，我們必須讓每一個被建立的節點利用while掃出每個上層的父節點，並註冊子節點所發生的RollOver/RollOut事件。才能使得每個父節點清楚跟蹤滑鼠在子節點上的動作。 注意mouseIsOver/mouseIsOut這兩個函數，當他們被呼叫是先改變isMouseOut的Boolean值，接著在利用setTimeout呼叫checkTreeIsOpen/checkTreeIsClose函數來確認isMouseOut的狀態決定打開或關閉。 ps. 這個版本可能有bug，如果有抓到bug希望可以留言告訴我修正，謝謝。:D
(Read more...)

actionscript2 樹狀選單實作

treedemo範例檔案下載 首先先了解一下asdemo.events這個package裡面的as。 - IEventDispatcher.as 所有附有事件廣播機制的類別都必須實作這個介面。 - EventSource.as 實作了IEventDispatcher介面的類別。 asdemo.ui.DispatcherMC繼承了MovieClip並實作IEventDispatcher類別，讓所有繼承該類別都附有事件廣播機制功能。

接下來進行到重點階段，我們先了解asdemo.ui.tree package內兩個介面的繼承關係。一個為INode，一個為ITree。ITree繼承了INode。這代表Itree也含有節點的特性。 - asdemo.ui.tree.INode import asdemo.events.IEventDispatcher; interface asdemo.ui.tree.INode extends IEventDispatcher { public function show():Void; public function hide():Void; public function setText(str:String):Void; } - asdemo.ui.tree.ITree import asdemo.ui.tree.INode; interface asdemo.ui.tree.ITree extends INode { public function addNode():INode; public function addTree():ITree; public function open():Void; public function close():Void; public function isOpened():Boolean; public function getNodeAt(i:Number):INode; public function removeNode(n:INode):Void; } - INode的繼承關係 TextNode實作了Inode介面，並且會在onRelease發出ButtonEvent.RELEASE事件。 - ITree的繼承關係 首先AbstractTree實作了ITree介面，大部分基本方法已經在這個類別完成。 -setNodePosition方法:在節點被加入時要調整節點位置，當節點被刪除時要重新調整所有節點的位置。 -adjustPosition方法:在節點被刪除時呼叫重新調整所有節點的位置。 -childTreeCloseHandler方法:在同一節點被click時呼叫將其他節點樹關閉。 DemoTree繼承了AbstractTree，並實現兩各尚未實作的抽象方法addNode與addTree。每個被加入的節點會被加入陣列裡，而在addNode裡父節點對子節點註冊ButtonEvent.RELEASE事件，addTree方法裡父節點對子節點樹註冊TreeEvent.TREE_OPEN事件。目的在於當某個節點被click後，通知父節點樹必須將其他同一階層的節點樹關閉。 - asdemo.ui.tree.AbstractTree import asdemo.ui.tree.ITree; import asdemo.ui.tree.INode; import asdemo.events.Event; import asdemo.utils.Delegate; import asdemo.ui.DispatcherMC; import asdemo.events.TreeEvent; class asdemo.ui.tree.AbstractTree extends DispatcherMC implements ITree { private var intervalX:Number=60; private var intervalY:Number=20; private var IS_OPEN:Boolean=false; private var list:Array; public function AbstractTree() { list=new Array(); _visible=false; } public function open() : Void { if(!isOpened()) { IS_OPEN=true; var num:Number=list.length; for(var i:Number=0;i<num;i++) { var n:INode=INode(list[i]); n.show(); } } dispatchEvent(new TreeEvent(TreeEvent.TREE_OPEN,this)); } public function close() : Void { if(isOpened()) { IS_OPEN=false; var num:Number=list.length; for(var i:Number=0;i<num;i++) { var n:INode=INode(list[i]); n.hide(); } } } public function isOpened() : Boolean { return IS_OPEN; } public function addNode() : INode { throw new Error(":::Abstract Method:::"); return null; } public function addTree() : ITree { throw new Error(":::Abstract Method:::"); return null; } public function getNodeAt(i:Number):INode { return INode(list[i]); } public function show() : Void { _visible=true; } public function hide() : Void { close(); _visible=false; } public function setText(str : String) : Void { } public function removeNode(n : INode) : Void { var num:Number=list.length; for(var i:Number=0;i<num;i++) { if(n==list[i]) { list.splice(i,1); MovieClip(n).removeMovieClip(); adjustPosition(i); return; } } } private function adjustPosition(index:Number):Void { var num:Number=list.length; for(var i:Number=index;i<num;i++) { var n:MovieClip=MovieClip(list[i]); n._y=i*intervalY; } } private function setNodePosition(mc : MovieClip) : Void { var tx:Number=0; var ty:Number=0; mc._x=intervalX; mc._y=(list.length-1)*intervalY; } private function childTreeCloseHandler(e:Event) : Void { var num:Number=list.length; for(var i:Number=0;i<num;i++) { if(list[i] instanceof ITree) { if(list[i]!=e.target)ITree(list[i]).close(); } } } } - asdemo.ui.tree.DemoTree import asdemo.ui.tree.TextNode; import asdemo.ui.tree.ITree; import asdemo.ui.tree.AbstractTree; import asdemo.events.ButtonEvent; import asdemo.utils.Delegate; import asdemo.ui.tree.INode; import asdemo.events.TreeEvent; class asdemo.ui.tree.DemoTree extends AbstractTree { private var node:TextNode; public function DemoTree() { super(); node=TextNode(attachMovie("node","mainnode",getNextHighestDepth())); node.show(); node.setText("---"); node.addEventListener(ButtonEvent.RELEASE,Delegate.create(this,nodeClick)); } //@override public function addNode():INode { var d:Number=getNextHighestDepth(); var n:TextNode=TextNode(attachMovie("node","node"+d,d)); n.addEventListener(ButtonEvent.RELEASE,Delegate.create(this,childTreeCloseHandler)); list.push(n); setNodePosition(MovieClip(n)); return n; } //@override public function addTree():ITree { var d:Number=getNextHighestDepth(); var t:ITree=ITree(attachMovie("tree","tree"+d,d)); list.push(t); t.addEventListener(TreeEvent.TREE_OPEN,Delegate.create(this,childTreeCloseHandler)); setNodePosition(MovieClip(t)); return t; } //@override public function setText(str:String):Void { node.setText(str); } // private function nodeClick(e:ButtonEvent) : Void { if(isOpened()) { close(); }else { open(); } } } 想實作關於類似樹狀選單可以研究 composite pattern模式。 (Read more...)

Alcon

Alcon

這是我搭配 MTASC 開發經常使用的Debug工具，輕巧好用。
(Read more...)

ASIoC

ASIoC

有學習過 Spring 應該對IoC的概念不陌生，這是個實作Ioc的as2 Framework。有興趣的可以參考看看。
(Read more...)

actionscript2 scrollbar 實作分享

scrollbar source下載 首先您要先了解 事件廣播機制 以及 mx.utils.Delegate class委派類的應用 。

- asdemo.ui.Bar /** * @author humanhighway * @version tutorial * @http://shewasdead.blogspot.com/ */ import mx.events.EventDispatcher; import asdemo.events.BarEvent; class asdemo.ui.Bar extends MovieClip { public var totalLength:Number=0; /*read-only*/ public var percent:Number=0; /*read-only*/ private var range:Number=100; /*default*/ private var node:MovieClip; private var eventObj:Object; function Bar() { super(); init(); } // private function init():Void { eventObj = new Object(); EventDispatcher.initialize(eventObj); onPress=nodePress; onRelease=onReleaseOutside=nodeRelease; } // public function getNode():MovieClip { return node; } // public function setRange(r:Number):Void { range=r; updateTotalLength(); } // public function reset():Void { node._y=0; } // public function updateTotalLength() : Void { totalLength=range-node._height; } // private function nodePress():Void { updateTotalLength(); node.startDrag(false,0,0,0,totalLength); onEnterFrame=barMoving; } // private function nodeRelease():Void { node.stopDrag(); delete onEnterFrame; } // private function barMoving():Void { var p:Number=(node._y)/(totalLength); p=Math.round(p*100)/100; dispatchEvent(new BarEvent(BarEvent.BAR_MOVING,this,p)); } // public function addEventListener (type : String, target : Object) : Void { eventObj.addEventListener(type,target); } // public function removeEventListener (type : String, target : Object) : Void { eventObj.removeEventListener(type,target); } // public function dispatchEvent (e:Object):Void { eventObj.dispatchEvent(e); } } - bar.fla bar.addEventListener ( BarEvent.BAR_MOVING, Delegate.create( this, barScroll) ); function barScroll(e:BarEvent):Void { tf.scroll=(tf.maxscroll)*e.percent; } 重點在於當bar node被按下時，會不斷的廣播BarEvent.BAR_MOVING事件，並送出node座標與range相減的差值百分比。 所以只要註冊了BAR_MOVING事件，接著再用收到的比率值來控管你所要移動的物件範圍就可以了。 同樣的原理也可以做出水平的bar拖曳，甚至是as3版本。 另外如果您跟我一樣是 MTASC 的愛好者，mx.utils.Delegate class沒有辦法通過MTASC編譯。所以請記得改用 其他版本 。 MTASC範例在asdemo.examples.BarExample (Read more...)

Hello Fucking World

class Application { public static function main(container:MovieClip):Void { trace('HELLO FUCKING WORLD'); } } (Read more...)