ghost cat 以皮肤为主体的ui框架(唐翎)
DESCRIPTION
TRANSCRIPT
- 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); //
- }
- }
- 7. Panel.as v2
- 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 scrollBar :GHScrollBar;
- //public var nameText:GText;
- //public var numText:GText;
- public var render :GListBase;
- public function Panel()
- {
- 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; //
- new ZoomEffect( this , null ,0.1,1000,{ease:Elastic.easeIn}, true ).execute();//
- }
- }
- 8. Render.as
- public class Render extends GBuilderBase
- {
- public var nameText:GText;
- public var numText:GText;
- 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
- {
- public var nameText:GText;
- public var numText:GText;
- public function Render(skin:*= null , replace:Boolean= true )
- {
- super (skin, replace);
- UIBuilder.buildAll( this );
- }
- public override function destory(): void
- {
- UIBuilder.destory( this );
- super .destory();
- }
- }
- public class Render extends GButton
- {
- public var nameText:GText;
- public var numText:GText;
- public function Render(skin:*= null , replace:Boolean= true )
- {
- 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();
- }
- }
- 10.
- 11.
- 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 class Panel extends GBuilderBase
- {
- public var titleText:GText;
- public var mc:GMovieClip;
- //public var tabBar:GButton;
- public var tabBar: GListBase ;
- public var scrollBar:GHScrollBar;
- public var render: GListBase ;
- public function Panel3()
- {
- 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 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.
- public var mc:GMovieClip;
- public function Panel()
- {
- 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
- 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 class Panel extends GBuilderBase
- {
- public var tab1:ZoomButton;
- public var tab2:ZoomButton;
- public var tab3:ZoomButton;
- public var tabBar:GBase;
- public var render1:Panel;
- public var render2:Panel2;
- public var render3:Panel3;
- public var viewStack:GViewState;
- public var selectGroup:SelectGroup;
- public function Panel()
- {
- 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 tab1:ZoomButton;
- public var tab2:ZoomButton;
- public var tab3:ZoomButton;
- public var tabBar:GHBox;// tabBar GHBox
- public var render1:Panel;
- public var render2:Panel2;
- public var render3:Panel3;
- 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; //