学习自定义组件---ConstomButton

效果只是让Button动了下，
上传了flash源文件
package cn.ishion.component
{
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	import mx.controls.Button;

	public class ConstomButton extends Button
	{
		
		private var isdown:Boolean;
		
		private var isup:Boolean;
		
		private var oldPoint:Point;
		private var newPoint:Point;
		public function ConstomButton()
		{
			super();
			
		}
		override protected function commitProperties():void{
			super.commitProperties();
			if(this.isdown&&!this.isup){
				this.oldPoint=new Point(this.x,this.y);
				this.newPoint=new Point(this.x+3,this.y+3);
			}else if(this.isup&&!this.isdown){
				this.newPoint=oldPoint;
			}
			this.invalidateDisplayList();
		}
		
		override protected function mouseDownHandler(event:MouseEvent):void{
			super.mouseDownHandler(event);
			this.isdown=true;
			this.isup=false;
			this.invalidateProperties();
		
			trace("down")
		}
		
		override protected function clickHandler(event:MouseEvent):void{
			super.clickHandler(event);
		}
		override protected function mouseUpHandler(event:MouseEvent):void{
			super.mouseUpHandler(event);	
			this.isdown=false;
			this.isup=true;
			this.invalidateProperties();
			
		}
		
		override  protected function updateDisplayList(w:Number, h:Number):void{
			super.updateDisplayList(w,h);
			if(this.newPoint){
				this.move(this.newPoint.x,this.newPoint.y);
			}
			
		}
		
		
	}
}

 

测试程序，用flash做的皮肤，flash里边可以动，flex就不能动了，所以用flex写了ConstomButton.和
flash一样的效果
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:component="cn.ishion.component.*">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
		]]>
	</mx:Script>
	
	
	
	<mx:Style>
		.register{
			
			upSkin: Embed(source="logreg.swf", symbol="Register_up");
			overSkin: Embed(source="logreg.swf", symbol="Register_over");
			downSkin: Embed(source="logreg.swf", symbol="Register_down");
			disabledSkin: Embed(source="logreg.swf", symbol="Register_click");
	
			selectedUpSkin: Embed(source='logreg.swf', symbol='Register_up');
			selectedOverSkin: Embed(source='logreg.swf', symbol='Register_over');
			selectedDownSkin: Embed(source='logreg.swf', symbol='Register_down');
			selectedDisabledSkin: Embed(source='logreg.swf', symbol='Register_click');
		
		}
		.login{
			
	
			upSkin: Embed(source="/logreg.swf", symbol="Loginn_up");
			overSkin: Embed(source="logreg.swf", symbol="Login_over");
			downSkin: Embed(source="logreg.swf", symbol="Login_down");
			disabledSkin: Embed(source="logreg.swf", symbol="Login_click");
	
			selectedUpSkin: Embed(source='logreg.swf', symbol='Loginn_up');
			selectedOverSkin: Embed(source='logreg.swf', symbol='Login_over');
			selectedDownSkin: Embed(source='logreg.swf', symbol='Login_down');
			selectedDisabledSkin: Embed(source='logreg.swf', symbol='Login_click');
			
		
		}
		.hello{
			
		}
		
	</mx:Style>
	
	<component:ConstomButton styleName="login" click="mx.controls.Alert.show('commit')">
		
	</component:ConstomButton>
	<component:ConstomButton styleName="register">
		
	</component:ConstomButton>
</mx:Application>