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.
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?
‘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