Flex Spark Image Button component with rounded corners. Wraps the Image control and takes same source for image. .

ImageButton.as

/**
 * @authors Michael Ritchie, Ken Rogers 
 * @twitter @thanksmister, @pixels4nickles
 * @version Dec 9, 2011
 * */
package
{
	import flash.events.Event;
	
	import mx.events.FlexEvent;
	
	import spark.components.Button;
	import spark.primitives.BitmapImage;
	
	public class ImageButton extends Button
	{
		private static var IMAGE_BORDER:Number = 2;
		
		[Bindable]
		public var source:Object;
		
		[SkinPart(required="false")]
		public var imageDisplay:RoundedImage
		
		public function ImageButton()
		{
			super();
			
			// set our custom skin class
			setStyle("skinClass", ImageButtonSkin );
		}
		
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if(instance == imageDisplay) {
				imageDisplay.source = source;
				imageDisplay.addEventListener(FlexEvent.READY, imageDisplay_readyHandler);
			}
		}
		
		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);
			
			if(instance == imageDisplay) {
				imageDisplay.removeEventListener(FlexEvent.READY, imageDisplay_readyHandler);
				imageDisplay.source = null;
			}
		}
		
		override protected function commitProperties():void
		{
			super.commitProperties();
			
		}
		
		private function imageDisplay_readyHandler(event:Event):void
		{
			if(imageDisplay)// commit gets called once before create children so let's check for imageDisplay
			{
				if(width == 0 && height != 0)//did the user set the height but not the width on the tag?
				{
					if(height == imageDisplay.sourceHeight)// the height was set but it happens to be the same as the source
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight) + IMAGE_BORDER; 
					}
					else
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight) + IMAGE_BORDER; 
					}
				}
				else if(height == 0 && width != 0)//did the user set the width but not the height on the tag?
				{
					if(width == imageDisplay.sourceWidth)// the width was set but it happens to be the same as the source
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth) + IMAGE_BORDER; 
					}
					else
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth) + IMAGE_BORDER; 
					}
				}
				else if(height != imageDisplay.sourceHeight && width != imageDisplay.sourceWidth) // custom width and height
				{
					// do nothing
				}
			}
		}    
	}
}

ImageButtonSkin.mxml

<?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"
             alpha.disabled="0.5" xmlns:local="*">
	
	<fx:Metadata>[HostComponent("ImageButton")]</fx:Metadata>
     
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            import spark.components.Group;
 
            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();
            }  
            
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");
                
                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    fill.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }
          
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            private var cornerRadius:Number = 2;
                                 
        ]]>        
    </fx:Script>
        
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
	
	<local:RoundedImage id="imageDisplay" left="2" top="2" height="{this.height}" width="{this.width}" horizontalCenter="0" verticalCenter="0"/>

    <s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="2">
        <s:stroke>
			<s:SolidColorStroke weight="2" color="0x0055CC" color.over="0xFF0000" color.down="0xFF0000"/>
        </s:stroke>
    </s:Rect>
	
</s:SparkButtonSkin>

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" 
					   xmlns:local="*">
	

	<s:Group height="100" width="100%">
	    
		<local:ImageButton id="imageButton" source="image.png" height="100" cornerRadius="10" top="20" left="20"/>
		
		<local:RoundedImage source="image.png" height="100" cornerRadius="10" top="140" left="20" />
		
	</s:Group>
	
</s:WindowedApplication>

RoundedImage.as

/**
 * @authors Michael Ritchie, Ken Rogers 
 * @twitter @thanksmister, @pixels4nickles
 * @version Dec 9, 2011
 * */
package
{
	import mx.graphics.BitmapScaleMode;
	
	import spark.components.Image;
	
	public class RoundedImage extends Image
	{
		[Bindable]
		public var cornerRadius:Number = 10;
		
		public function RoundedImage()
		{
			super();
			
			// set our custom skin class
			setStyle("skinClass", RoundedImageSkin );
			
			// for AIR 3.1 use BitmapScaleMode.ZOOM
			scaleMode = BitmapScaleMode.STRETCH; 
		}

		override protected function commitProperties():void
		{
			if(imageDisplay)// commit gets called once before create children so let's check for imageDisplay
			{
				if(width == 0 && height != 0)//did the user set the height but not the width on the tag?
				{
					if(height == imageDisplay.sourceHeight)// the height was set but it happens to be the same as the source
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight); 
					}
					else
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight); 
					}
				}
				else if(height == 0 && width != 0)//did the user set the width but not the height on the tag?
				{
					if(width == imageDisplay.sourceWidth)// the width was set but it happens to be the same as the source
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth); 
					}
					else
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth); 
					}
				}
				else if(height != imageDisplay.sourceHeight && width != imageDisplay.sourceWidth)
				{
					// custom width and height
				}
			}
		}
	}
}

RoundedImage.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:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5" >
	
	<fx:Metadata>[HostComponent("RoundedImage")]</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			
		]]>
	</fx:Script>
    
    <s:states>
        <s:State name="uninitialized"/>
        <s:State name="loading"/>
        <s:State name="ready" />
        <s:State name="invalid" />
        <s:State name="disabled" />
    </s:states>
	
	<s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.cornerRadius}" alwaysCreateDisplayObject="true">
		<s:fill>
			<!-- @private -->
			<s:SolidColor id="bgFill"/>
		</s:fill>
	</s:Rect>
	
	<!--- Primary image display skin part. -->
	<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0" mask="{background.displayObject}" />
	
	<!--- Progress indicator skin part. -->
	<s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" />
	
	<!--- Icon that appears in place of the image when an invalid image is loaded. -->
	<s:BitmapImage id="brokenImageIcon" includeIn="invalid" source="@Embed(source='Assets.swf',symbol='__brokenImage')" verticalCenter="0" horizontalCenter="0" mask="{background.displayObject}"/>
    
</s:Skin>