Skinning of mxml button with png graphics

/**
*Main.mxml
*/
 
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|Button {
			skinClass: ClassReference("skins.ImageButtonSkin");
		}
 
	</fx:Style>
 
	<s:Button id="diamondBtn" horizontalCenter="0" verticalCenter="0"/>
 
</s:WindowedApplication>
 
 
/**
* ImageButton.as
*/
 
package components  
{  
	import spark.components.Button;  
 
	[Style(name="imageSkin",type="*")]  
	[Style(name="imageSkinDisabled",type="*")]  
	[Style(name="imageSkinDown",type="*")]  
	[Style(name="imageSkinOver",type="*")]  
 
	public class ImageButton extends Button  
	{  
		public function ImageButton()  
		{  
			super();  
		}  
	}  
}
 
 
/**
*ImageButtonSkin.mxml
*/
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
<s:SparkSkin name="ImageButtonSkin"
			 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">
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
 
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>
 
	<fx:Script fb:purpose="styling">
		<![CDATA[
			/* 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"];
 
			override public function get colorizeExclusions():Array {
				return exclusions;
			}
 
			override protected function initializationComplete():void {
				useChromeColor = true;
				super.initializationComplete();
			}
		]]>
	</fx:Script>
 
	<s:BitmapImage source="@Embed('assets/images/blackDiamonds.png')"
				   source.over="@Embed('assets/images/blueDiamonds.png')"
				   source.down="@Embed('assets/images/purpleDiamonds.png')"
				   left="0" right="0" top="0" bottom="0" />
 
	<!-- layer 8: text -->
	<s:Label id="labelDisplay"
			 textAlign="center"
			 verticalAlign="middle"
			 maxDisplayedLines="1"
			 horizontalCenter="0" verticalCenter="1"
			 left="10" right="10" top="2" bottom="2" />
 
</s:SparkSkin>