Mask image album

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”horizontal”
backgroundColor=”#FFFFFF”
paddingTop=”0″
paddingRight=”0″
paddingLeft=”0″
paddingBottom=”0″>

<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.controls.Image;
import mx.controls.listClasses.IListItemRenderer;

private function initMask():void
{
var bitmapData:BitmapData = new BitmapData(picture.width,picture.height);
bitmapData.floodFill(bitmapData.width/2,bitmapData.height/2,0xFF000000);
maskImage.source = new Bitmap(bitmapData);
}

private function getMaskImage(data:Object):Bitmap
{
var itemRenderer:IListItemRenderer = maskList.itemToItemRenderer(data);
var bitmap:Bitmap;
var bitmapData:BitmapData;

bitmapData = Bitmap(Image(itemRenderer).content).bitmapData.clone();

var pixel:uint = bitmapData.getPixel32(int(bitmapData.width/2),int(bitmapData.height/2));
// extract the alpha value from the given ARGB value.
var alpha:uint = pixel >> 24;

// if the center pixel is transparent, suppose the mask is a png
// image consist of a closed shape, this will fill the inner of
// the closed shape with the RGB color 0x000000 inorder to make
// the image area below the inner visible.
if(alpha == 0x00)
bitmapData.floodFill(bitmapData.width/2,bitmapData.height/2,0xFF000000);

bitmap = new Bitmap(bitmapData);
return bitmap;
}

private function startDragging():void
{
oldMouseX = maskImage.mouseX;
oldMouseY = maskImage.mouseY;
maskImage.addEventListener(Event.ENTER_FRAME,doDrag);
}

private function endDragging():void
{
maskImage.removeEventListener(Event.ENTER_FRAME,doDrag);
}

private var oldMouseX:Number = 0;
private var oldMouseY:Number = 0;

private function doDrag(event:Event):void
{
var offsetX:Number = maskImage.mouseX - oldMouseX;
var offsetY:Number = maskImage.mouseY - oldMouseY;
maskImage.x += offsetX;
maskImage.y += offsetY;
}
]]>
</mx:Script>

<mx:XML id=”masksDataSource”
source=”assets/masks.xml”/>

<mx:List id=”maskList”
dataProvider=”{masksDataSource.mask}”
height=”100%”>
<mx:itemRenderer>
<mx:Component>
<mx:Image
source=”{data.@path}”
height=”80″/>
</mx:Component>
</mx:itemRenderer>
</mx:List>

<mx:Canvas
width=”100%”
height=”100%”>
<mx:Image id=”picture”
source=”assets/IMG_0268.JPG” width=”80%” height=”80%” maintainAspectRatio=”false”
mask=”{maskImage}”
cacheAsBitmap=”true”
creationComplete=”initMask()”
/>

<mx:Image id=”maskImage”
source=”{getMaskImage(maskList.selectedItem)}”
cacheAsBitmap=”true”
buttonMode=”true”
mouseChildren=”false”
mouseDown=”startDragging();”
mouseUp=”endDragging();”/>
</mx:Canvas>
</mx:Application>

mask.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<masks>
<mask path=”assets/masks/mask1.png”/>
<mask path=”assets/masks/mask2.png”/>
<mask path=”assets/masks/mask3.png”/>
<mask path=”assets/masks/mask4.png”/>
<mask path=”assets/masks/mask5.png”/>
<mask path=”assets/masks/mask6.png”/>
<mask path=”assets/masks/mask7.png”/>
<mask path=”assets/masks/mask8.png”/>
<mask path=”assets/masks/mask9.png”/>
<mask path=”assets/masks/mask10.png”/>
<mask path=”assets/masks/mask11.png”/>
</masks>