Ghost cat 以皮肤为主体的ui框架（唐翎）

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 class test extends Sprite

{

public function test()

{

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

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

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

}

private function loadCompleteHandler(event:OperationEvent): void

{

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

addChild( new Panel ());// Panel

}

}

6. Panel.as

public class Panel extends GBuilderBase //

{

public var titleText:GText;

public var mc:GMovieClip;

public var tabBar:GButton;

public var upArrow:GButton;

public var downArrow:GButton;

public var nameText:GText;

public var numText:GText;

public function Panel()

{

super ( " asset.Panel " ); //

tabBar.data = "A" ;

nameText.text = "@name" ;

numText.text = "A" ;

mc.setLabel( null ,1); //

}

}

asset.Panel

7. Panel.as v2

public class Panel extends GBuilderBase

{



public var tabBar: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;


{

super ( asset.Panel );//


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

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

}

}

render Render.as (

8. Render.as

public class Render extends GBuilderBase

{



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

{

super (skin, replace);//

}

// data set

public override function set data(v:*) : void

{

super .data = v;

nameText.text = numText.text = v;

this .toolTip = " " + v;

TextFieldUtil.autoFontSize(numText.textField); //

}

// selected

public override function set selected(v:Boolean) : void

{

super .selected = v;

this .transform.colorTransform = v ? new ColorTransform(1,1,1,1,50,50,50) : new ColorTransform();

}

}

9. GBuildBase?

public class Render extends GButton

{




{

super (skin, replace);

UIBuilder.buildAll( this );

}

public override function destory(): void

{

UIBuilder.destory( this );

super .destory();

}

}

public class Render extends GButton

{




{

super (skin, replace);

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

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

}

public override function destory(): void

{

nameText.destory();

numText.destory();

super .destory();

}

}

12.

private var temp:Array;

public function setData(v:Array): void

{

temp = v;

tabBar.mouseEnabled = tabBar.mouseChildren = false ;

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

}

private function tween1CompleteHandler(): 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 function tween2CompleteHandler(): void

{

tabBar.mouseEnabled = tabBar.mouseChildren = true ;

}

13.

public function setData( v :Array): void

{

var list:Array = [

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

//

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

//

new SetPropertyOper( this .render,{data: v }),

//

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

//

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

//

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

//

];

new Queue(list).execute(); //

}

14. Oper

Oper execute

Oper Queue Oper execute

15. Queue

Oper Oper

new Queue(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 class ClickOper extends Oper

{

public var target:Sprite;

public function ClickOper(target:Sprite)

{

this .target = target;

super ();

}

public override function execute(): void

{

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

this .target.filters = [ new GlowFilter(0xFFFFFF,1,16,16)]

super .execute();

}

public override function result(event:*= null ): void

{

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

this .target.filters = [];

super .result(event);

}

}

21. GListBase

22. tabBar Gbutton GListBase


{



//public var tabBar:GButton;

public var tabBar: GListBase ;

public var scrollBar:GHScrollBar;

public var render: GListBase ;

public function Panel3()

{

super ( "asset.Panel" );


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 function tabChangeHandler(event:Event): void

{

setData(getData(tabBar.selectedIndex))

}

private function getData(type:int):Array

{

var i:int;

var list: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.



{

super ( " asset.Panel " ); //

tabBar.data = "A" ;

nameText.text = "@name" ;

numText.text = "A" ;


}

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

var source:Array = BitmapSeparateUtil.separateBitmapData( new stand().bitmapData,56,91).concat(BitmapSeparateUtil.separateBitmapData( new walk().bitmapData,67,91));

// PNG

var labels: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 = new GBitmapMovieClip(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 var tab1:ZoomButton;



public var tabBar:GBase;

public var render1:Panel;

public var render2:Panel2;


public var viewStack:GViewState;

public var selectGroup:SelectGroup;


{

super ( "asset.SelectGroup" );

//

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

selectGroup.addEventListener(Event.CHANGE, changeHandler );

selectGroup.selectedIndex = 0;

//

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

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

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

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

}

private function changeHandler (event:Event): void

{

viewStack.selectedIndex = selectGroup.selectedIndex;

}

}

ZoomButton

38. ZoomButton.as

public class ZoomButton extends GButton

{

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

{

super (skin, replace, separateTextField, textPadding);

this .delayCall = false ; //

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

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

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

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

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

}

}

GButton

39. SelectGroup

//

selectGroup = new SelectGroup([ 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 function layoutChildren(x:Number, y:Number, w:Number, h:Number) {

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

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

var sx:Number = x + paddingLeft + rx;

var sy:Number = y + paddingTop + ry;

var len:int = target.numChildren;

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

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

var obj:DisplayObject = target.getChildAt(i);

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

var p:Point = new Point(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 var tabBar:GHBox;// tabBar GHBox

public var render1:Panel;



public var viewStack:GViewState;

public var selectGroup:SelectGroup;

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

{

super ( "asset.SelectGroup" );

tabBar.linearLayout.delayCall = false ; //

tabBar.linearLayout.horizontalGap = 5; //

Ghost cat 以皮肤为主体的ui框架（唐翎）

Technology

Transcript of Ghost cat 以皮肤为主体的ui框架（唐翎）