::: Hello Fucking World :::: 2007

2007年2月14日星期三

FleVI - Flex2 visual Interface

FleVI

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

(Read more...)

2007年1月29日星期一

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 - asdemo.ui.tree.ITree - 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...)

2007年1月25日星期四

Alcon

Alcon

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

2007年1月22日星期一

ASIoC

ASIoC

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

2007年1月20日星期六

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 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

訂閱：文章 (Atom)