The following example shows how you can round the corners on a Flex Image control by creating a rounded Sprite control using the drawRoundRect() method and setting the mask property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ --> <mx:Application name="Image_mask_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.events.ResizeEvent; private var roundedMask:Sprite; private function init():void { roundedMask = new Sprite(); canvas.rawChildren.addChild(roundedMask); } private function image_resize(evt:ResizeEvent):void { var w:Number = evt.currentTarget.width; var h:Number = evt.currentTarget.height; var cornerRadius:uint = 60; roundedMask.graphics.clear(); roundedMask.graphics.beginFill(0xFF0000); roundedMask.graphics.drawRoundRect(0, 0, w, h, cornerRadius, cornerRadius); roundedMask.graphics.endFill(); image.mask = roundedMask; } ]]> </mx:Script> <mx:Canvas id="canvas"> <mx:Image id="image" source="http://www.helpexamples.com/flash/images/image1.jpg" resize="image_resize(event);"> </mx:Image> </mx:Canvas> </mx:Application>
View source is enabled in the following example.
If you wanted to round specific corners on an Image control, see “Rounding individual corners of an Image control in Flex using a mask”.

{ 14 comments… read them below or add one }
really a good example
Can this portion of the tag be used to create a FLEX based lightbox similar to java lightboxes that I have seen?
private function image_resize(evt:ResizeEvent):void {
var w:Number = evt.currentTarget.width;
var h:Number = evt.currentTarget.height;
I have been trying to figure out how to create a FLEX lightbox slideshow that resizes to my images that the image appears over a modal style blur since I got FLEX a year ago and I have had little luck creating one.
Are there any similar examples currently on the site?
Did you manage to find a way of creating a Flex based lightbox? I need the lightbox functionality in one of my Flex application.
‘m just starting work on a Flex project which requires tons of design and color customizations – 20 minutes into it and I am already pulling my hair out. Here’s why.
The UI consists of two HBoxes on a Canvas. Each HBox should have a background image and rounded corners – should be easy as both properties can be set via the Flex Properties inspector, in fact I should be able to do it all in Design view.
I first tinkered with a solid background color. The first stumbling block was the fact that the cornerRadius property only renders if borderStyle is set to solid. Thanks Owen for the tip, this would have had me fallen at the first hurdle. I didn’t get the memo…
I then moved on to testing a PNG image as the background for the HBox. Adding this was easy – but the corners were no longer rounded.
The image now renders across the entire area of the HBox, including the rounded corners.
Can this be avoided? I am aware that I could probably script my way around this in AS (even though I am not quite sure how) but the point is that I shouldn’t have to. I’ve now spent the best part of 2 hours on something that should take 5 minutes… and I still haven’t got the look that I need. sorry about the rant but stuff like this really frustrates me.
This works great unless the image’s source is embeded. Any reason why this won’t work? Workarounds?
<mx:Image id="image" source="@Embed(source='/img/roundme.jpg')" resize="image_resize(event);"> </mx:Image>Chris,
This seems to work for me:
<mx:Image id="image" source="@Embed('assets/fl_appicon.jpg')" resize="image_resize(event);" />If yours isn’t working, I’d probably start by checking if that
resizeevent is ever dispatched. If not, perhaps try changing it to aninitializeorcreationCompleteevent handler and see if that does the trick.Peter
This example didn’t work quite right when using it with a maxWidth or maxHeight, so I refactored it and posted the source here.
Does anyone know how to round only the two corners on the right?
@guy,
Instead of using the
drawRoundRect()method, use thedrawRoundRectComplex()method which allows you to specify the radius of each corner separately:Peter
Thanks Peter, that worked great.
Sorry to nag but do you know maybe how I can also add a pixel border to the outcome? I managed that before rounding the corners with a box behind it but that won’t do the work now.
Thanks in advance,
Guy
@guy,
Not sure the best way to add strokes/borders to an irregularly shaped object, but you can just use a GlowFilter, as shown in the following example:
Peter
Thanks Peter, that did the job
How Would You get something like this to work on an Image,in The Array Collection,or The Repeater?
I tried,all types of different methods,and nothing seems to just work.
any advice would certainly be excellent.,
Please help me.
i want to erase the drawing after some drawing, drawing maybe line rectangle dot or anything.
Thnaks