flex3可编程皮肤

flex3可编程皮肤
效果图：

package com
{
	import mx.skins.ProgrammaticSkin;

	public class MySkin extends ProgrammaticSkin
	{
		public function MySkin()
		{
			super();
		}
		override	protected function updateDisplayList(unscaledWidth:Number,
									     unscaledHeight:Number):void
	{
		var line:Number=4;
		var backgroundColoe:Number;
		switch(name)
		{
			case "upSkin":
				backgroundColoe=0xEA800C;
			break;
			case "overSkin":
				backgroundColoe=0xF8B872;
			break;
			case "downSkin":
				backgroundColoe=0xB06109;
			break;
			case "disabledSkin":
				backgroundColoe=0xB06109;
			break;
		}
		
		graphics.clear();
		graphics.beginFill(backgroundColoe);
		graphics.drawEllipse(0,0,unscaledWidth,unscaledHeight);
		graphics.endFill();
	}
	}
}

mxml使用
<mx:Style>
.mySkin
{
up-skin:ClassReference('com.MySkin');
over-skin:ClassReference('com.MySkin');
down-skin:ClassReference('com.MySkin');
disabled-skin:ClassReference('com.MySkin');
}
</mx:Style>
<!-- 其中'com.MySkin'为自定义皮肤的as类路径 -->
<mx:Button id="demo" label="demotext" styleName="mySkin">

</mx:Button>

flex-css渐变色
css-code
.myColor{
fill-alphas:0.33,0.67,0.75,0.65;
fill-colors:#000000,#006666,#00ff99,#cccc00;
}
mxml-code:
<mx:Panel width="446" height="226" headerColors="[0xEA800C,0xF8B872]">
borderSkin创建背景图片的应用（类似BackgroundImage）

package
{
	import flash.display.Bitmap;    
    import flash.display.BitmapData;    
    import mx.skins.RectangularBorder;   
  
      public class MetalBackground extends RectangularBorder    
      {    
         [Embed(source='file.png')]    
         private var backgroundImageClass:Class;    
         private var backgroundBitmapData:BitmapData;   
  
         public function MetalBackground()    
         {    
             super();    
             var backgroundImage:Bitmap = new backgroundImageClass();    
             backgroundBitmapData = new BitmapData(backgroundImage.width,backgroundImage.height);    
             backgroundBitmapData.draw(backgroundImage);    
         }    
  
         override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number ):void    
         {    
            super.updateDisplayList(unscaledWidth,unscaledHeight );    
            var cornerRadius:Number = getStyle("cornerRadius");    
            graphics.clear();    
            graphics.beginBitmapFill( backgroundBitmapData );    
            graphics.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,cornerRadius,cornerRadius,cornerRadius,cornerRadius );    
            graphics.endFill();    
         }    
      }    
}  

mxml应用
<mx:Canvas borderSkin="MetalBackground"  x="576" y="49" width="142" height="169">