Comments on: Rounding the corners of an Image control in Flex using a mask http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ Just a bunch of Adobe Flex Examples Sun, 12 Feb 2012 19:26:49 +0000 hourly 1 By: Eugen http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-10277 Eugen Tue, 27 Dec 2011 20:41:34 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-10277 hi Peter, it's possible use this example on dynamical created images? For example: <code> <!-- http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ --> </code> hi Peter,

it’s possible use this example on dynamical created images?

For example:

]]> By: jonnie http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-10078 jonnie Fri, 21 Oct 2011 16:40:50 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-10078 while testing i came up with this. if the image has a width and a height set it will not work, but if no width or height are defined than it works!! i would like to round the corners with an image with width and height fixed while testing i came up with this.
if the image has a width and a height set it will not work, but if no width or height are defined than it works!!
i would like to round the corners with an image with width and height fixed

]]> By: jonnie http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-10077 jonnie Fri, 21 Oct 2011 15:21:42 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-10077 great example. but i'm having some dificulty when i'm rounding the corners of some images, for instance if i have an image with 1024x768, it works like a charm, but if there's an image with 1024x1280 it will only round two corners and on the other two it will not work, it draws a straight line. any ideas on how can i solve this? great example.
but i’m having some dificulty when i’m rounding the corners of some images, for instance if i have an image with 1024×768, it works like a charm, but if there’s an image with 1024×1280 it will only round two corners and on the other two it will not work, it draws a straight line.
any ideas on how can i solve this?

]]> By: risdiyanto http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-9306 risdiyanto Thu, 16 Jun 2011 08:44:02 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-9306 is it support with old browser n css2? is it support with old browser n css2?

]]> By: Flex man http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-9180 Flex man Sat, 30 Apr 2011 22:42:21 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-9180 Hi Is there a way to do this as a preloader, masking an image? Hi

Is there a way to do this as a preloader, masking an image?

]]> By: Tahir Alvi http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6481 Tahir Alvi Fri, 27 Nov 2009 10:43:18 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6481 Please help me. i want to erase the drawing after some drawing, drawing maybe line rectangle dot or anything. Thnaks Please help me.

i want to erase the drawing after some drawing, drawing maybe line rectangle dot or anything.

Thnaks

]]> By: Brandon B http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6288 Brandon B Sat, 07 Nov 2009 10:15:13 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6288 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., 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.,

]]> By: Usman Ajmal http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6135 Usman Ajmal Tue, 27 Oct 2009 06:59:51 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6135 <blockquote>Can this portion of the tag be used to create a FLEX based lightbox similar to java lightboxes that I have seen?</blockquote> Did you manage to find a way of creating a Flex based lightbox? I need the lightbox functionality in one of my Flex application.

Can this portion of the tag be used to create a FLEX based lightbox similar to java lightboxes that I have seen?

Did you manage to find a way of creating a Flex based lightbox? I need the lightbox functionality in one of my Flex application.

]]> By: guy http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6077 guy Wed, 21 Oct 2009 07:07:06 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6077 Thanks Peter, that did the job Thanks Peter, that did the job

]]> By: Peter deHaan http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6075 Peter deHaan Tue, 20 Oct 2009 23:20:51 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6075 @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: <pre lang="mxml"> <?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.drawRoundRectComplex(0, 0, w, h, 0, cornerRadius, 0, cornerRadius); roundedMask.graphics.endFill(); image.mask = roundedMask; } ]]> </mx:Script> <mx:Canvas id="canvas"> <mx:filters> <mx:GlowFilter blurX="5" blurY="5" strength="6" color="#FF0000" inner="false" /> </mx:filters> <mx:Image id="image" source="http://www.helpexamples.com/flash/images/image1.jpg" resize="image_resize(event);" /> </mx:Canvas> </mx:Application> </pre> Peter @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:

<?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.drawRoundRectComplex(0, 0,
                    w, h,
                    0, cornerRadius,
                    0, cornerRadius);
                roundedMask.graphics.endFill();
                image.mask = roundedMask;
            }
        ]]>
    </mx:Script>
 
    <mx:Canvas id="canvas">
        <mx:filters>
            <mx:GlowFilter blurX="5" blurY="5" strength="6" color="#FF0000" inner="false" />
        </mx:filters>
        <mx:Image id="image"
                  source="http://www.helpexamples.com/flash/images/image1.jpg"
                  resize="image_resize(event);" />
    </mx:Canvas>
 
</mx:Application>

Peter

]]>