1. GHOST CAT

2.

Ghost Cat SWC

FLA asset.fla

ui.lang

3. asset.fla

upArrow,downArrow scrollBar nameText,numText render asset.Panel tabBar render asset.TabBar,asset.Render 4. UI.lang

name=

title=

@name @title

5.

public classtestextendsSprite

{

public functiontest()

{

LanguageManager.instance.load( " ui.lang " ); //

AssetManager.instance.loadResource( " asset.swf " ); //

Queue.defaultQueue.addEventListener(OperationEvent.OPERATION_COMPLETE,loadCompleteHandler);//

}

private functionloadCompleteHandler(event:OperationEvent): void

{

stage.addChild(new ToolTipSprite());//

addChild( new Panel ());// Panel

}

}

6. Panel.as

public classPanelextends GBuilderBase//

{

public vartitleText:GText;

public varmc:GMovieClip;

public vartabBar:GButton;

public varupArrow:GButton;

public vardownArrow:GButton;

public varnameText:GText;

public varnumText:GText;

public functionPanel()

{

super ( " asset.Panel " ); //

tabBar.data ="A" ;

nameText.text ="@name" ;

numText.text ="A" ;

mc.setLabel( null ,1); //

}

}

asset.Panel 7. Panel.as v2

public classPanelextendsGBuilderBase

{

public vartitleText:GText;

public varmc:GMovieClip;

public vartabBar:GButton;

//public var upArrow:GButton;

//public var downArrow:GButton;

public var scrollBar :GHScrollBar;

//public var nameText:GText;

//public var numText:GText;

public var render :GListBase;

public functionPanel()

{

super ( asset.Panel );//

mc.setLabel( null ,1); //

tabBar.data ="GhostCat" ;

render.type = UIConst.HORIZONTAL; // List

render.itemRender =Render ; // Render

render.data = [ "G" , "H" , "O" , "S" , "T" , " " , "C" , "A" , "T" ];

scrollBar.setTarget(render,render.columnWidth * 2); //

scrollBar.detra = render.columnWidth; //

newZoomEffect( this , null ,0.1,1000,{ease:Elastic.easeIn}, true ).execute();//

}

}

render Render.as ( 8. Render.as

public classRenderextendsGBuilderBase

{

public varnameText:GText;

public varnumText:GText;

public functionRender(skin:*= null , replace:Boolean= true )

{

• super (skin, replace);//

}

// data set

public override function setdata(v:*) :void

{

• super .data = v;

• nameText.text = numText.text = v;

• this .toolTip =" "+ v;

• TextFieldUtil.autoFontSize(numText.textField); //

}

// selected

public override function setselected(v:Boolean) :void

{

• super .selected = v;

• this .transform.colorTransform = v ?newColorTransform(1,1,1,1,50,50,50) :newColorTransform();

}

}

9. GBuildBase?

public classRenderextendsGButton

{

public varnameText:GText;

public varnumText:GText;

public functionRender(skin:*= null ,replace:Boolean= true )

{

super (skin, replace);

UIBuilder.buildAll( this );

}

public override functiondestory(): void

{

UIBuilder.destory( this );

super .destory();

}

}

public classRenderextendsGButton

{

public varnameText:GText;

public varnumText:GText;

public functionRender(skin:*= null ,replace:Boolean= true )

{

super (skin, replace);

nameText =new GText( this .content[ "nameText" ]);

numText =new GText( this .content[ "numText" ]);

}

public override functiondestory(): void

{

nameText.destory();

numText.destory();

super .destory();

}

}

10. 11.

12.

private vartemp:Array;

public functionsetData(v:Array): void

{

• temp = v;

• tabBar.mouseEnabled = tabBar.mouseChildren =false ;

• TweenUtil.to( this .render,500,{y:300,ease:Circ.easeIn,onComplete:tween1CompleteHandler});

}

private functiontween1CompleteHandler(): void

{

• this .render.data = temp;

• temp =null ;

• this .scrollBar.resetContent( true , false );//

• TweenUtil.to( this .render,500,{y:0,ease:Circ.easeOut,onComplete:tween2CompleteHandler});

}

private functiontween2CompleteHandler(): void

{

• tabBar.mouseEnabled = tabBar.mouseChildren =true ;

}

13.

public functionsetData( v :Array): void

{

varlist:Array = [

newSetPropertyOper( this .tabBar,{mouseEnabled: false ,mouseChildren: false }),

//

newTweenOper( this .render,500,{y:300,ease:Circ.easeIn}),

//

newSetPropertyOper( this .render,{data: v }),

//

newFunctionOper( this .scrollBar.resetContent,[true,false]),

//

newTweenOper( this .render,500,{y:0,ease:Circ.easeOut}),

//

newSetPropertyOper( this .tabBar,{mouseEnabled: true ,mouseChildren: true })

//

];

newQueue(list).execute(); //

}

14. Oper

Oper execute

Oper Queue Oper execute

15. Queue

Oper Oper

newQueue(list).execute();

16. SetPropertyOper

SetPropertyOper( this .tabBar,{mouseEnabled: false ,mouseChildren: false }),

JSON mouseEnabled,mouseChildren false

17. TweenOper

TweenOper( this .render,500,{y:300,ease:Circ.easeIn})

Tween Tween execute

18. FunctionOper

FunctionOper( this .scrollBar.resetContent,[true,false])

execute

new Queue([new LoadOper(a.txt),new FunctionOper(rHandler)]).execute();

a.txt rHandler

19.

Oper

20.

public classClickOperextendsOper

{

• public vartarget:Sprite;

• public functionClickOper(target:Sprite)

• {

• • this .target = target;

• • super ();

• }

• public override functionexecute(): void

• {

• • this .target.addEventListener(MouseEvent.CLICK,result);

• • this .target.filters = [ newGlowFilter(0xFFFFFF,1,16,16)]

• • super .execute();

• }

• public override functionresult(event:*= null ): void

• {

• • this .target.removeEventListener(MouseEvent.CLICK,result);

• • this .target.filters = [];

• • super .result(event);

• }

}

21. GListBase 22. tabBar Gbutton GListBase

public classPanelextendsGBuilderBase

{

public vartitleText:GText;

public varmc:GMovieClip;

//public var tabBar:GButton;

public vartabBar: GListBase ;

public varscrollBar:GHScrollBar;

public varrender: GListBase ;

public functionPanel3()

{

super ( "asset.Panel" );

mc.setLabel( null ,1); //

render.type = UIConst.HORIZONTAL;

render.itemRender = Render;

scrollBar.setTarget(render,render.columnWidth * 2);

scrollBar.detra = render.columnWidth;

tabBar.type = UIConst.HORIZONTAL;

tabBar.itemRender = GButton;

tabBar.data = [ "A-Z" , "0-10000" ];

tabBar.addEventListener(Event.CHANGE,tabChangeHandler);

tabBar.selectedIndex = 0;

}

private functiontabChangeHandler(event:Event): void

{

setData(getData(tabBar.selectedIndex))

}

private functiongetData(type:int):Array

{

vari:int;

varlist:Array = [];

if(type == 0)

{

for(i = 0;i < 26;i++)

{

list[i] = String.fromCharCode(( "A" ).charCodeAt(0) + i);

}

}

else

{

for(i = 0;i < 100000;i++)

{

list[i] = i.toString();

}

23.

GListBase

TabBar

3

MC

24. 1W

GListBase 1W 2

2 Tab 1W

25. GMovieClip 26.

public var mc:GMovieClip;

public functionPanel()

{

super ( " asset.Panel " ); //

tabBar.data ="A" ;

nameText.text ="@name" ;

numText.text ="A" ;

mc.setLabel( null ,1); //

}

mc null 1 mc.setLoop(1) 1 2 2

27. GMovieClip /

frameRate

frameRate CPU

ENTER_FRAME getTimer Timer

28. GMovieClip /

setLabel( )

FLASH -1

queueLabel( )

setLabel

clearQueue()

29.

: start loop end start loop end

setLabel(start,1);

queueLabel(loop,3);

queueLabel(end,1);

MovieEvent MOVIE_EMPTY

30.

queueDestory()

MOVIE_EMPTY

clearQueue

31.

GBitmapMovieClip

MovieClip BitmapData FrameLabel

32.

queueLabel currentFrame

FrameLabel MovieClip currentLabels

33. GBitmapMovieClip

BitmapSeparateUtil FrameLabelUtil

varsource:Array = BitmapSeparateUtil.separateBitmapData( newstand().bitmapData,56,91).concat(BitmapSeparateUtil.separateBitmapData( newwalk().bitmapData,67,91));

// PNG

varlabels:Array = FrameLabelUtil.createFromObject({

"down" :1, "left" :9, "right" :17, "up" :25,

"leftdown" :33, "rightdown" :41, "leftup" :49, "rightup" :57,

"walkdown" :65, "walkleft" :73, "walkright" :81, "walkup" :89,

"walkleftdown" :97, "walkrightdown" :105, "walkleftup" :113, "walkrightup" :121

});

// FrameLabel

man =newGBitmapMovieClip(source,labels);//

man.frameRate = 10;

34.

GBitmapMovieClip bmc mc MovieClip addChild

1

bmc = new GBitmapMovieClip();

bmc.createFromMovieClip(mc);

2

bmc = new GMovieClip(mc).toGBitmapMovieClip();

35. SelectGroup& ViewStack 36. asset.fla

tabBar viewStack tab1,tab2,tab3 render1,render2,render3

asset.SelectGroup

37. Panel.as v4

public classPanelextendsGBuilderBase

{

public vartab1:ZoomButton;

public vartab2:ZoomButton;

public vartab3:ZoomButton;

public vartabBar:GBase;

public varrender1:Panel;

public varrender2:Panel2;

public varrender3:Panel3;

public varviewStack:GViewState;

public varselectGroup:SelectGroup;

public functionPanel()

{

super ( "asset.SelectGroup" );

//

selectGroup =newSelectGroup([ tab1,tab2,tab3 ], true );

selectGroup.addEventListener(Event.CHANGE,changeHandler );

selectGroup.selectedIndex = 0;

//

viewStack.showFromRight =newTweenOper( null , 500, { x: -760, startAt:{x:0}, ease:Circ.easeInOut},true ,1);

viewStack.showFromLeft =newTweenOper( null , 500, { x:760, startAt:{x:0}, ease:Circ.easeInOut},true ,1);

viewStack.hideToRight =newTweenOper( null , 500, { x: -760 , ease:Circ.easeInOut},false ,1);

viewStack.hideToLeft =newTweenOper( null , 500, { x:760 , ease:Circ.easeInOut},false ,1);

}

private function changeHandler (event:Event): void

{

viewStack.selectedIndex = selectGroup.selectedIndex;

}

}

ZoomButton

38. ZoomButton.as

public classZoomButtonextendsGButton

{

public functionZoomButton(skin:*=null , replace:Boolean =true ,separateTextField:Boolean =false , textPadding:Padding =null )

{

• super (skin, replace, separateTextField, textPadding);

• this .delayCall =false ; //

• this .upState.oper =newTweenOper( this ,100,{scaleX:1.0,scaleY:1.0},false , 1);

• this .overState.oper =newTweenOper( this ,100,{scaleX:1.4,scaleY:1.4},false , 1);

• this .downState.oper =newTweenOper( this ,100,{scaleX:1.0,scaleY:1.0},false , 1);

• this .selectedUpState.oper =this .selectedOverState.oper =this .selectedDownState.oper =newTweenOper( this ,100,{scaleX:1.4,scaleY:1.4},false , 1);

• this .disabledState.oper =this .selectedDisabledState.oper =newTweenOper( this ,100,{scaleX:1.0,scaleY:1.0},false , 1);

}

}

GButton

39. SelectGroup

//

selectGroup =newSelectGroup([ tab1,tab2,tab3 ], true );

selectGroup.addEventListener(Event.CHANGE,changeHandler );

selectGroup.selectedIndex = 0;

selectedIndex,selectedChild Change ToggleButtonBar

visible

40. GViewState

Children State

ViewState showFromRight,showFromLeft,hideToRight,hideToLeft 4 Effect

41. Layout 42.

UI LayoutUtil

LayoutUtil.silder

LayoutUtil.center

LayoutUtil.metrics

LayoutUtil.percent

LayoutUtil.horizontal

LayoutUtil.vertical

43.

Layout GBase

AbsoluteLayout left,top,right,bottom

LinearLayout HORIZONTAL, VERTICAL, TILE

44. Layout

Layout.as layoutChildren

protected override functionlayoutChildren(x:Number, y:Number, w:Number, h:Number) {

varrx:Number = (w - paddingLeft - paddingRight) / 2;

varry:Number = (h - paddingTop - paddingBottom) / 2;

varsx:Number = x + paddingLeft + rx;

varsy:Number = y + paddingTop + ry;

varlen:int = target.numChildren;

varbr:Number =this .rotation / 180 * Math.PI;

for( vari:int = 0;i < len;i++){

varobj:DisplayObject = target.getChildAt(i);

varr:Number = i / len * Math.PI * 2 + br;

varp:Point =newPoint(sx + rx * Math.cos(r),sy + ry * Math.sin(r));

obj.x = p.x;

obj.y = p.y;

}

}

45.

Layout measureChildren super .measureChildren(width,height)

LinearLayout measureChildren enabledMeasureChildren=false

46. GView

GBox,GHBox,GVBox LinearLayout addChild

setLayout

47. ( )

public vartab1:ZoomButton;

public vartab2:ZoomButton;

public vartab3:ZoomButton;

public vartabBar:GHBox;// tabBar GHBox

public varrender1:Panel;

public varrender2:Panel2;

public varrender3:Panel3;

public varviewStack:GViewState;

public varselectGroup:SelectGroup;

public functionPanel(skin:*= null , replace:Boolean= true )

{

super ( "asset.SelectGroup" );

tabBar.linearLayout.delayCall =false ; //

tabBar.linearLayout.horizontalGap = 5; //