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, @pixels4nickels
 * @version Dec 9, 2011
 * */
package
{
	import flash.events.Event;
	
	import mx.events.FlexEvent;
	import mx.graphics.BitmapScaleMode;
	
	import spark.components.Button;
	import spark.primitives.BitmapImage;
	
	public class ImageButton extends Button
	{
		[Bindable]
		public var cornerRadius:Number = 00;
		
		[Bindable]
		public var source:Object;
		
		[SkinPart(required="false")]
		public var imageDisplay:BitmapImage;
		
		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.addEventListener(Event.COMPLETE, handleImageLoaded);
				imageDisplay.scaleMode = BitmapScaleMode.STRETCH; 
				imageDisplay.source = source;
			}
		}
		
		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);
			
			if(instance == imageDisplay) {
				imageDisplay.source = null;
			}
		}
		
		protected function handleImageLoaded(e: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); 
					}
					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
				}
			}
		}
 
	}
}

ImageButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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>
        <![CDATA[         
                                 
        ]]>        
    </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="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>
	
	<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0" mask="{background.displayObject}" />

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

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:layout>
		<s:VerticalLayout/>
	</s:layout>

	<local:ImageButton id="imageButton" 
					   source="ohno.jpg" 
					   height="80" 
		
					   cornerRadius="10" 			   
					   />
	
	<local:RoundedImage id="roundedImage" 
						source="ohno.jpg" 
						height="80" 
						cornerRadius="10" 
						/>	
</s:WindowedApplication>

RoundedImage.as

/**
 * @authors Michael Ritchie, Ken Rogers 
 * @twitter @thanksmister, @pixels4nickels
 * @version Dec 9, 2011
 * */
package
{
	import flash.events.Event;
	
	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 );
		}
		
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if(instance == imageDisplay) {
				imageDisplay.addEventListener(Event.COMPLETE, handleImageLoaded);
				imageDisplay.scaleMode = BitmapScaleMode.STRETCH; 
				imageDisplay.source = source;
			}
		}
		
		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);
			
			if(instance == imageDisplay) {
				imageDisplay.removeEventListener(Event.COMPLETE, handleImageLoaded);
				imageDisplay.source = null;
			}
		}

		protected function handleImageLoaded(e: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); 
					}
					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:SparkSkin 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:SparkSkin>