Rounded Image

Usage:

<RoundedImage source="someImage.jpg" width="250" height="250" cornerRadius="15"/>

Source:

package com.brian
{
import mx.controls.Image;
import mx.core.UIComponent;

/**
 * Rounded Image
 * 
 * Extended Image component to allow rounded corners by using a mask
 * 
 * @author Brian Raymes
 */
public class RoundedImage extends Image
{
protected var roundedMask:UIComponent;
protected var cornerRad:int;

public function RoundedImage()
{
super();
}

public function get cornerRadius():int
{
return cornerRad;
}

public function set cornerRadius(radius:int):void
{
cornerRad = radius;
}

override protected function createChildren():void
{
super.createChildren();

this.roundedMask = new UIComponent();
this.addChild(roundedMask);
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

roundedMask.graphics.clear();
roundedMask.graphics.beginFill(0x000000);
roundedMask.graphics.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, cornerRad, cornerRad, cornerRad, cornerRad);
roundedMask.graphics.endFill();

this.mask = roundedMask;
}
}
}