genericbutton.mxml

flex 实现的一个showcase 喜欢flex的朋友可以

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	
	width="90"
	height="31"
	
	backgroundAlpha="0"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	resize="this.handleResize(event)"
	creationComplete="this.handleCreationComplete(event)">
	
	
	<mx:Script>
		<![CDATA[
			//////////////////////////////////////////////////
			//import
			
			import mx.effects.AnimateProperty;
			import mx.effects.Tween;
			import mx.effects.Fade;
			
			////////////////////////////////////////////////////////////////////////////////////
			//private variables
			
			private var minimumWidth:uint=90;
			private var _enabled:Boolean;
			
			////////////////////////////////////////////////////////////////////////////////////
			//getter/setter variables
			
			
			private var _buttonIcon:String;
			private var _labelXpos:Number=15;
			
			////////////////////////////////////////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var buttonLabel:String="Test"
			
			////////////////////////////////////////////////////////////////////////////////////////
			//getter/setter functions
			public function get buttonIcon():String {
				return this._buttonIcon;
			}
			
			[Bindable]
			public function set buttonIcon(val:String):void {
				this._buttonIcon = val;
			}
			
			private function handleButtonIcon():void{
				if(this.buttonIcon!=null&&this.buttonIcon!=""){
					if(this.buttonIcon=="comments"){
						this.icon_mc.source=this.commentsIcon
					}else if(this.buttonIcon=="email"){
						this.icon_mc.source=this.emailIcon
					}else if(this.buttonIcon=="like"){
						this.icon_mc.source=this.likeIcon
					}else if(this.buttonIcon=="link"){
						this.icon_mc.source=this.linkIcon
					}else if(this.buttonIcon=="tag"){
						this.icon_mc.source=this.tagIcon
					}else if(this.buttonIcon=="views"){
						this.icon_mc.source=this.viewsIcon
					}else if(this.buttonIcon=="profile"){
						this.icon_mc.source=this.profileIcon
					}else if(this.buttonIcon=="plus"){
						this.icon_mc.source=this.plusIcon
					}else if(this.buttonIcon=="minus"){
						this.icon_mc.source=this.minusIcon
					}
					
					this.icon_mc.visible=true
				
					this.labelUp_mc.x=this.icon_mc.x+this.icon_mc.width+17
					this.labelUp_mc.width=this.width-(this.icon_mc.x+this.icon_mc.width)-10
					
					this.labelOver_mc.x=this.icon_mc.x+this.icon_mc.width+17
					this.labelOver_mc.width=this.width-(this.icon_mc.x+this.icon_mc.width)-10
				}
			}
			
			//---------------------------------------------------------------------
			
			public function get labelXpos():Number {
				return this._labelXpos;
			}
			
			[Bindable]
			public function set labelXpos(val:Number):void {
				this._labelXpos = val;
			}
			
			private function handleLabelXpos():void{
				this.labelUp_mc.x=this.labelXpos
				this.labelOver_mc.x=this.labelXpos
			}
			
			
			//////////////////////////////////////////////////////////////////////////////////////
			
			[Embed(source="/assets/images/icons/commentsIcon.png")]
			private var commentsIcon:Class;
			
			[Embed(source="/assets/images/icons/emailIcon.png")]
			private var emailIcon:Class;
			
			[Embed(source="/assets/images/icons/likeIcon.png")]
			private var likeIcon:Class;
			
			[Embed(source="/assets/images/icons/linkIcon.png")]
			private var linkIcon:Class;
			
			[Embed(source="/assets/images/icons/tagIcon.png")]
			private var tagIcon:Class;
			
			[Embed(source="/assets/images/icons/viewsIcon.png")]
			private var viewsIcon:Class;
			
			[Embed(source="/assets/images/icons/profileIcon.png")]
			private var profileIcon:Class;
			
			[Embed(source="/assets/images/icons/plusIcon.png")]
			private var plusIcon:Class;
			
			[Embed(source="/assets/images/icons/minusIcon.png")]
			private var minusIcon:Class;
			
			
			////////////////////////////////////////////////////////////////////////////////////
			//initializaion
			private function handleCreationComplete(event:Event):void {
				this.handleLabelXpos()
				this.handleButtonIcon()
			}
			
			//general-------------------------------------------------------------
			private function handleResize(event:Event):void{
				this.labelUp_mc.width=this.width-21
				this.labelOver_mc.width=this.width-21
				this.up_mc.width=this.width
				this.over_mc.width=this.width
				this.disabled_mc.width=this.width
			}
			
			private function handleLabelChange(event:Event):void{
				//
			}
			
			//button states--------------------------------------------------------------------
			private function handleRollOver(event:MouseEvent):void{
				this.disabled_mc.alpha=0
				
				var fadeOver:Fade=new Fade(this.over_mc)
				fadeOver.alphaTo=1
				fadeOver.duration=200
				fadeOver.play()
				
				var labelOver:Fade=new Fade(this.labelOver_mc)
				labelOver.alphaTo=1
				labelOver.duration=200
				labelOver.play()
				
			}
			
			private function handleRollOut(event:MouseEvent):void{
				this.disabled_mc.alpha=0
				
				var fade:Fade=new Fade(this.over_mc)
				fade.alphaTo=0
				fade.duration=200
				fade.play()
				
				var labelOver:Fade=new Fade(this.labelOver_mc)
				labelOver.alphaTo=0
				labelOver.duration=200
				labelOver.play()
				
			}
			
		]]>
	</mx:Script>
	
	
	
	<mx:Image id="up_mc" source="@Embed('/assets/images/genericbutton/genericButton_bg_up.png', scaleGridTop='15', scaleGridBottom='16', scaleGridLeft='15', scaleGridRight='75')" maintainAspectRatio="false" />
	<mx:Image id="disabled_mc" source="@Embed('/assets/images/genericbutton/genericButton_bg_disabled.png', scaleGridTop='15', scaleGridBottom='16', scaleGridLeft='15', scaleGridRight='75')" maintainAspectRatio="false" 
		alpha="0"/>
	<mx:Image id="over_mc" source="@Embed('/assets/images/genericbutton/genericButton_bg_over.png', scaleGridTop='15', scaleGridBottom='16', scaleGridLeft='15', scaleGridRight='75')" maintainAspectRatio="false" 
		alpha="0"/>
		
	<mx:Label id="labelUp_mc" text="{this.buttonLabel}" color="0xffffff" styleName="myriadRegular" 
		x="15" y="6" textAlign="left" truncateToFit="false" mouseEnabled="false"/>
	<mx:Label id="labelOver_mc" text="{this.buttonLabel}" color="0x000000" styleName="myriadRegular" 
		x="15" y="6" textAlign="left" truncateToFit="false" mouseEnabled="false" alpha="0"/>
	<mx:Image 
		id="icon_mc"
		x="15"
		verticalCenter="-1"/>
	<mx:Canvas id="hit_mc" x="8" y="5" backgroundAlpha="0" backgroundColor="0x009900" width="{this.width-16}" height="{this.height-10}"
		 mouseOver="this.handleRollOver(event)" mouseOut="this.handleRollOut(event)" buttonMode="true"/>
</mx:Canvas>