flex3可编程皮肤

最新推荐文章于 2025-10-24 14:55:12 发布

原创最新推荐文章于 2025-10-24 14:55:12 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

Adobe 专栏收录该内容

69 篇文章

订阅专栏

flex3可编程皮肤
效果图：

[img]http://dl.iteye.com/upload/attachment/556905/49816d0e-16a3-39c0-8ff4-fe17842894b4.png[/img]


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>

<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();    
         }    
      }    
}