Flex Spark Image component with skin to make rounded corners and border.

ImageButtonSkin.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("spark.components.Image")]</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.ResizeEvent;
			
			private var cornerRadius:Number = 10;
	
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
			{
				var cr:Number = getStyle("cornerRadius");
			
				if (cornerRadius != cr)
				{
					cornerRadius = cr;
					background.radiusX = cornerRadius;
					bmpMask.setStyle("cornerRadius", cornerRadius);
				}
	
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
		]]>
	</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>
	
	<!--- This mask doesn't seem to be working on the image -->
	<s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="10">
		<s:fill>
			<s:SolidColor id="bgFill" alpha="1" color="0xFF0000"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="0xFF0000" weight="4"/>
		</s:stroke>
	</s:Rect>
	
	<!--- Primary image display skin part. -->
	<s:BitmapImage id="imageDisplay" left="2" top="2" right="2" bottom="2">
		<s:mask>
			<s:BorderContainer id="bmpMask" cornerRadius="10"
					width="{imageDisplay.width}" height="{imageDisplay.height}" />
		</s:mask>
	</s:BitmapImage>
    
</s:Skin>

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
Michael Ritchie
[email protected]
Copyright 2011 ThanksMister LLC
Dec 10, 2011
-->
<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" 
					   creationComplete="windowedapplication1_creationCompleteHandler(event)">
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		s|Image {
			cornerRadius:10;
		}
		
	</fx:Style>
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
			{
				loadFile();
			}
			
			protected function loadFile():void
			{
				var loader:Loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onFileLoaded);
				
				var urlRequest:URLRequest = new URLRequest("image.png");
				loader.load(urlRequest);
			}
			
			protected function onFileLoaded(e:Event):void
			{
				var bmp:Bitmap = e.target.content as Bitmap;
				var bitmapData:BitmapData = scaleImage(bmp.bitmapData, 100, 100);
				var scaledBitmap:Bitmap = new Bitmap(bitmapData);
				
				roundedImage.source = scaledBitmap;
			}
			
			protected function scaleImage(bitmapData:BitmapData, width:Number, height:Number):BitmapData 
			{
				// Calculate the scaled size.
				var scale:Number;
				var scaledWidth:Number;
				var scaledHeight:Number;
				
				scale = Math.min(width/(bitmapData.width as Number), height/(bitmapData.height as Number))
				
				scaledHeight = Math.round(bitmapData.height * scale);
				scaledWidth = Math.round(bitmapData.width * scale);
				
				var scalingMatrix:Matrix = new Matrix();
				scalingMatrix.scale(scale, scale);
				
				// Scale the image.
				var scaledImage:BitmapData = new BitmapData(scaledWidth, scaledHeight, true, 0x00000000);
				scaledImage.draw(bitmapData, scalingMatrix, null, null, null, true);
				
				bitmapData.dispose();
				
				return scaledImage;
			}
		]]>
	</fx:Script>
	
	<s:Group height="100" width="100%">
	    
		<s:Image id="roundedImage" skinClass="ImageButtonSkin" horizontalCenter="0" verticalCenter="0"/>
		
	</s:Group>
	
</s:WindowedApplication>