Flex Spark Image Control with Skin to mask image with custom image mask file.

MaskedImage.as

/**
 * @authors Michael Ritchie
 * @twitter @thanksmister
 * @version Sept 11, 2012
 *
 * Use: 
 * <controls:MaskedImage source="assets/imageToMask.png" height="200" width="200" maskImage="assets/mask.png"/>
 * The mask image can be any shaped, just make it in Photoshop, but should be smaller than the image you wish to mask. 
 * Try just making a black mask shape and saving it out as .png file with alpha. 
 * */
package com.thanksmister.controls
{
	import mx.graphics.BitmapScaleMode;
	
	import spark.components.Image;
	
	public class MaskedImage extends Image
	{
        [Bindable]
        public var maskImage:String = "";
		
		public function MaskedImage()
		{
			super();
			
			// set our custom skin class
			setStyle("skinClass", MaskedImageSkin );
			
			// this center crops the image to the size of the component.
			scaleMode = BitmapScaleMode.ZOOM;
		}
	}
}

MaskedImageSkin.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("com.thanksmister.controls.MaskedImage")]</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
        import spark.core.MaskType;

		]]>
	</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>

	<!--- Primary image display skin part. -->
	<s:BitmapImage id="imageDisplay" smooth="true" left="0" top="0" right="0" bottom="0"
                    alpha="1" maskType="{MaskType.ALPHA}">
        <s:mask>
            <s:Group id="maskBitmapImage">
                <s:Image source="{hostComponent.maskImage}" cacheAsBitmap="true"/>
            </s:Group>
        </s:mask>

    </s:BitmapImage>

</s:Skin>