flex4 skin image

flex4 skin 使用外部圖片，當需要自定義一個組件時，需要用到一些外部圖片，對於一些flex3的遺留思想，

希望通過css來控制，

upSkin="{null}"

overSkin="mx.skins.halo.ButtonSkin"

downSkin="mx.skins.halo.ButtonSkin"

disabledSkin="mx.skins.halo.ButtonSkin"

 

 在flex4中，對於 spark 組件就不行了

flex4 創建css 就不多介紹了

現以button引入外部image (常用*.png,*.swf中圖片)爲例：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			   minWidth="21" minHeight="21" 
			   alpha.disabled="0.5">

<fx:Metadata>
	<![CDATA[ 
	/** 
	* @copy spark.skins.spark.ApplicationSkin#hostComponent
	*/
	[HostComponent("spark.components.Button")]
	]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
	<![CDATA[         
		import spark.components.Group;
		/* Define the skin elements that should not be colorized. 
		For button, the graphics are colorized but the label is not. */
		static private const exclusions:Array = ["labelDisplay"];
		
		/** 
		 * @private
		 */     
		override public function get colorizeExclusions():Array {return exclusions;}
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}  
		
	]]>        
</fx:Script>
<s:states>  
<s:State name="up"/>  
<s:State name="over"/>  
<s:State name="down"/>  
<s:State name="disabled"/>  
</s:states>  
<s:BitmapImage smooth="true" 
source="@Embed('button-up.png')" 
source.up="@Embed('button-up.png')" 
source.down="@Embed('button-down.png')" 
source.disabled="@Embed('button-disabled.png')" 
/>  
<s:Image smooth="true" source="@Embed(source='MyButton.swf',symbol='pBtnUp')" />
<s:Label id="labelDisplay" />
</s:SparkButtonSkin>