If you can't read please download the document
Ghost cat 以皮肤为主体的ui框架(唐翎)
Upload
flash
View
3.236
Download
6
Embed Size (px)
344 x 292
429 x 357
514 x 422
599 x 487
DESCRIPTION
Citation preview
1. GHOST CAT
2.
3. asset.fla upArrow,downArrow scrollBar nameText,numText
render asset.Panel tabBar render asset.TabBar,asset.Render
4. UI.lang
5.
public class test extends Sprite
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;
super ( " asset.Panel " ); //
nameText.text = "@name" ;
mc.setLabel( null ,1); //
asset.Panel
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;
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();//
render Render.as (
8. Render.as
public class Render extends GBuilderBase
public var nameText:GText;
public var numText:GText;
public function Render(skin:*= null , replace:Boolean= true
)
public override function set data(v:*) : void
nameText.text = numText.text = v;
TextFieldUtil.autoFontSize(numText.textField); //
public override function set selected(v:Boolean) : void
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
)
UIBuilder.buildAll( this );
public override function destory(): void
UIBuilder.destory( this );
public class Render extends GButton
public var nameText:GText;
public var numText:GText;
public function Render(skin:*= null , replace:Boolean= true
)
nameText = new GText( this .content[ "nameText" ]);
numText = new GText( this .content[ "numText" ]);
public override function destory(): void
10.
11.
12.
public function setData(v:Array): void
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;
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
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
15. Queue
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})
18. FunctionOper
FunctionOper( this .scrollBar.resetContent,[true,false])
new Queue([new LoadOper(a.txt),new
FunctionOper(rHandler)]).execute();
19.
20.
public class ClickOper extends Oper
public var target:Sprite;
public function ClickOper(target:Sprite)
public override function execute(): void
this .target.addEventListener(MouseEvent.CLICK,result);
this .target.filters = [ new GlowFilter(0xFFFFFF,1,16,16)]
public override function result(event:*= null ): void
this .target.removeEventListener(MouseEvent.CLICK,result);
this .target.filters = [];
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 ;
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
list[i] = String.fromCharCode(( "A" ).charCodeAt(0) + i);
for (i = 0;i < 100000;i++)
23.
24. 1W
25. GMovieClip
26.
public var mc:GMovieClip;
super ( " asset.Panel " ); //
nameText.text = "@name" ;
mc.setLabel( null ,1); //
mc null 1 mc.setLoop(1) 1 2 2
27. GMovieClip /
ENTER_FRAME getTimer Timer
28. GMovieClip /
29.
: start loop end start loop end
30.
31.
MovieClip BitmapData FrameLabel
32.
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));
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
man = new GBitmapMovieClip(source,labels); //
34.
GBitmapMovieClip bmc mc MovieClip addChild
bmc = new GBitmapMovieClip();
bmc.createFromMovieClip(mc);
bmc = new GMovieClip(mc).toGBitmapMovieClip();
35. SelectGroup& ViewStack
36. asset.fla
tabBar viewStack tab1,tab2,tab3 render1,render2,render3
37. Panel.as v4
public class Panel extends GBuilderBase
public var tab1:ZoomButton;
public var tab2:ZoomButton;
public var tab3:ZoomButton;
public var render1:Panel;
public var render2:Panel2;
public var render3:Panel3;
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;
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);
39. SelectGroup
selectGroup = new SelectGroup([ tab1,tab2,tab3 ], true );
selectGroup.addEventListener(Event.CHANGE, changeHandler
);
selectGroup.selectedIndex = 0;
selectedIndex,selectedChild Change ToggleButtonBar
40. GViewState
ViewState showFromRight,showFromLeft,hideToRight,hideToLeft 4
Effect
41. Layout
42.
43.
AbsoluteLayout left,top,right,bottom
LinearLayout HORIZONTAL, VERTICAL, TILE
44. Layout
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));
45.
Layout measureChildren super
.measureChildren(width,height)
LinearLayout measureChildren enabledMeasureChildren=false
46. GView
GBox,GHBox,GVBox LinearLayout addChild
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; //
LOAD MORE