4 Replies Latest reply on Jun 15, 2010 5:14 AM by Francisc

    Masking Images

    Francisc Level 3

      Hello!

       

      I want to Mask in Image with another Image's surface or with a rounded corners rectangle.

       

      How is that done in Flex please?

        • 1. Re: Masking Images
          David_F57 Level 5

          hi,

           

          If you are using flex 4 its simple as, the following will round the corners of the image, you could use an image in the 'mask' rect and the alpha level of each pixel would define your masking affect. Just a note I cheated a bit here by making sure the outside group had the same aspect ratio as the image, normally you would bind the width and height values of the mask to match the aspect ratio of the image.

           

          <s:Group x="489" y="304" width="400" height="300">

          <s:Group left="1" top="1" right="1" bottom="1" id="ImgMask" >

          <s:Rect left="0" top="0" right="0" bottom="0" radiusX="20" radiusY="20">

          <s:fill>

          <s:SolidColor alpha="0"/>

          </s:fill>

          </s:Rect>

          </s:Group>

          <mx:Image left="1" top="0" right="0" bottom="0" mask="{ImgMask}" source="Koala.jpg"/>

          </s:Group>

           

           

          David.

          1 person found this helpful
          • 2. Re: Masking Images
            Francisc Level 3

            Sadly I will be using Flex 3 for this one.

            • 3. Re: Masking Images
              David_F57 Level 5

              hi,

               

              Why do you guys make my life so difficult, time to throw that retro flex version away already

               

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">

              <mx:Script>

              <![CDATA[

              import mx.events.FlexEvent;

               

              private var MyMask : Image = new Image();

               

              protected function application1_creationCompleteHandler(event:FlexEvent):void

              {

              MyMask = new Image();

              MyMask.graphics.lineStyle(1);

              MyMask.graphics.beginFill(0xFFFFFF);

              MyMask.graphics.drawRoundRect(0,0,hldr.width,hldr.height,20,20);

              MyMask.graphics.endFill();

              hldr.addChild(MyMask);

              hldr.mask=MyMask;

               

              }

               

              ]]>

              </mx:Script>

              <mx:Canvas id="hldr" width="400" height="300" verticalCenter="0" horizontalCenter="0">

              <mx:Image x="0" y="0" width="100%" height="100%" source="Koala.jpg"/>

              </mx:Canvas>

               

              </mx:Application>

              • 4. Re: Masking Images
                Francisc Level 3

                Haha, it's not intentional, I assure you.

                 

                Thanks a lot, David!