自定义皮肤示例

MyButtonSkin3.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
	
	<!-- dropshadow for the down state only 按下后可有阴影-->
	<s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0" 
			left="0" includeIn="down">
		<s:fill>
			<s:SolidColor color="0"/>
		</s:fill>
		<s:filters>
			<s:DropShadowFilter knockout="true" blurX="5" blurY="5" 
								alpha="0.32" distance="2" />   
		</s:filters>
	</s:Rect>
	
	<!-- border and fill 边框和填充色-->
	<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" 
			bottom="0" left="0">
		<!-- 填充色color:默认填充色，color.over:over填充色，color.down:按下填充色 -->
		<s:fill>
			<s:SolidColor color="0x77CC22" color.over="0x92D64E" 
						  color.down="0xFFFFFF"/>
		</s:fill>
		<!-- 边框 -->
		<s:stroke>
			<s:SolidColorStroke color="0x131313" weight="2"/>
		</s:stroke>
	</s:Rect>
	
	<!-- highlight on top 上方高亮显示，将长方形分成两部分，上部分透明度0.5至0.1 值越小，透明度越低-->
	<s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" 
			height="50%">
		<s:fill>
			<s:LinearGradient rotation="90"><!-- 线性渐变填充 -->
				<s:GradientEntry color="0xFFFFFF" alpha="0.5"/><!-- 渐变至白色，从透明度0.5变至0.1 -->
				<s:GradientEntry color="0xFFFFFF" alpha="0.1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- text -->
	<s:Label text="Button!" color="0x131313" 
			 textAlign="center"
			 verticalAlign="middle"
			 horizontalCenter="0" verticalCenter="1"
			 left="12" right="12" top="6" bottom="6" 
			 />
</s:Skin>

 给button使用皮肤

<s:Button skinClass="com.skin.MyButtonSkin3" click="test()"></s:Button>