<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Rounding individual corners of an Image control in Flex using a mask</title>
	<atom:link href="http://blog.flexexamples.com/2009/10/20/rounding-individual-corners-of-an-image-control-in-flex-using-a-mask/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com/2009/10/20/rounding-individual-corners-of-an-image-control-in-flex-using-a-mask/</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Sun, 12 Feb 2012 19:26:49 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: guy</title>
		<link>http://blog.flexexamples.com/2009/10/20/rounding-individual-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6078</link>
		<dc:creator>guy</dc:creator>
		<pubDate>Wed, 21 Oct 2009 07:07:36 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/?p=2044#comment-6078</guid>
		<description>Thanks Peter, that did the job</description>
		<content:encoded><![CDATA[<p>Thanks Peter, that did the job</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Peter deHaan</title>
		<link>http://blog.flexexamples.com/2009/10/20/rounding-individual-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6076</link>
		<dc:creator>Peter deHaan</dc:creator>
		<pubDate>Tue, 20 Oct 2009 23:22:40 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/?p=2044#comment-6076</guid>
		<description>@guy,

I replied to the other thread also, but I&#039;ll post the short version here as well. You can add a GlowFilter to the Canvas and it should do what you&#039;re looking for (but you may need to adjust the settings to make it look right for your app):
&lt;pre lang=&quot;mxml&quot;&gt;
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!-- http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ --&gt;
&lt;mx:Application name=&quot;Image_mask_test&quot;
        xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
        layout=&quot;vertical&quot;
        verticalAlign=&quot;middle&quot;
        backgroundColor=&quot;white&quot;
        initialize=&quot;init();&quot;&gt;

    &lt;mx:Script&gt;
        &lt;![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;
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:Canvas id=&quot;canvas&quot;&gt;
        &lt;mx:filters&gt;
            &lt;mx:GlowFilter blurX=&quot;5&quot; blurY=&quot;5&quot; strength=&quot;6&quot; color=&quot;#FF0000&quot; inner=&quot;false&quot; /&gt;
        &lt;/mx:filters&gt;
        &lt;mx:Image id=&quot;image&quot;
                  source=&quot;http://www.helpexamples.com/flash/images/image1.jpg&quot;
                  resize=&quot;image_resize(event);&quot; /&gt;
    &lt;/mx:Canvas&gt;

&lt;/mx:Application&gt;
&lt;/pre&gt;

Peter</description>
		<content:encoded><![CDATA[<p>@guy,</p>
<p>I replied to the other thread also, but I&#8217;ll post the short version here as well. You can add a GlowFilter to the Canvas and it should do what you&#8217;re looking for (but you may need to adjust the settings to make it look right for your app):</p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Application</span> name=<span style="color: #ff0000;">&quot;Image_mask_test&quot;</span></span>
<span style="color: #000000;">        xmlns:mx=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span></span>
<span style="color: #000000;">        layout=<span style="color: #ff0000;">&quot;vertical&quot;</span></span>
<span style="color: #000000;">        verticalAlign=<span style="color: #ff0000;">&quot;middle&quot;</span></span>
<span style="color: #000000;">        backgroundColor=<span style="color: #ff0000;">&quot;white&quot;</span></span>
<span style="color: #000000;">        initialize=<span style="color: #ff0000;">&quot;init();&quot;</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #339933;">&lt;mx:Script&gt;</span>
<span style="color: #339933;">        &lt;![CDATA[</span>
<span style="color: #339933;">            import mx.events.ResizeEvent;</span>
&nbsp;
<span style="color: #339933;">            private var roundedMask:Sprite;</span>
&nbsp;
<span style="color: #339933;">            private function init():void {</span>
<span style="color: #339933;">                roundedMask = new Sprite();</span>
<span style="color: #339933;">                canvas.rawChildren.addChild(roundedMask);</span>
<span style="color: #339933;">            }</span>
&nbsp;
<span style="color: #339933;">            private function image_resize(evt:ResizeEvent):void {</span>
<span style="color: #339933;">                var w:Number = evt.currentTarget.width;</span>
<span style="color: #339933;">                var h:Number = evt.currentTarget.height;</span>
<span style="color: #339933;">                var cornerRadius:uint = 60;</span>
&nbsp;
<span style="color: #339933;">                roundedMask.graphics.clear();</span>
<span style="color: #339933;">                roundedMask.graphics.beginFill(0xFF0000);</span>
<span style="color: #339933;">                roundedMask.graphics.drawRoundRectComplex(0, 0,</span>
<span style="color: #339933;">                    w, h,</span>
<span style="color: #339933;">                    0, cornerRadius,</span>
<span style="color: #339933;">                    0, cornerRadius);</span>
<span style="color: #339933;">                roundedMask.graphics.endFill();</span>
<span style="color: #339933;">                image.mask = roundedMask;</span>
<span style="color: #339933;">            }</span>
<span style="color: #339933;">        ]]&gt;</span>
<span style="color: #339933;">    &lt;/mx:Script&gt;</span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Canvas</span> id=<span style="color: #ff0000;">&quot;canvas&quot;</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:filters</span><span style="color: #7400FF;">&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:GlowFilter</span> blurX=<span style="color: #ff0000;">&quot;5&quot;</span> blurY=<span style="color: #ff0000;">&quot;5&quot;</span> strength=<span style="color: #ff0000;">&quot;6&quot;</span> color=<span style="color: #ff0000;">&quot;#FF0000&quot;</span> inner=<span style="color: #ff0000;">&quot;false&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:filters</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Image</span> id=<span style="color: #ff0000;">&quot;image&quot;</span></span>
<span style="color: #000000;">                  source=<span style="color: #ff0000;">&quot;http://www.helpexamples.com/flash/images/image1.jpg&quot;</span></span>
<span style="color: #000000;">                  resize=<span style="color: #ff0000;">&quot;image_resize(event);&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Canvas</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p>Peter</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: guy</title>
		<link>http://blog.flexexamples.com/2009/10/20/rounding-individual-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6074</link>
		<dc:creator>guy</dc:creator>
		<pubDate>Tue, 20 Oct 2009 22:32:48 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/?p=2044#comment-6074</guid>
		<description>I see you moved this post here, so I&#039;ll join with my question...

Thanks Peter, that worked great.

Sorry to nag but do you know maybe how I can also add a pixel border to the outcome rounded image? I managed that before rounding the corners with a box behind it but that won’t do the work now.

Thanks in advance,
Guy</description>
		<content:encoded><![CDATA[<p>I see you moved this post here, so I&#8217;ll join with my question&#8230;</p>
<p>Thanks Peter, that worked great.</p>
<p>Sorry to nag but do you know maybe how I can also add a pixel border to the outcome rounded image? I managed that before rounding the corners with a box behind it but that won’t do the work now.</p>
<p>Thanks in advance,<br />
Guy</p>
]]></content:encoded>
	</item>
</channel>
</rss>

