5 Replies Latest reply on Jun 5, 2012 12:29 PM by Ned Murphy

    Animate mask

    grimkarklud Level 1

      I got two pictures, the one on top is in color, the other is in black/white.


      I got a symbol that I want to use as a mask. When this symbol moves over the picture, I want it to show the picture underneath it.


      I need my symbol to be attached to the mouse, so the mouse will reveal the underlying picture (this is going to be a banner.)


      I couldn't find any guides for this, as I am not sure what to search on (I could only find guides for "normal" mask animation, and not anything on how to "burn a hole" in a picture).


      Thanks in advance.


      Edit: Another question: How do I tell flash, so load a random image, but in pairs of two? (on their own layer, as I still want the mask effect) Since I got pictures of 5 different places, one in black/white and one in color  of each place (10 pictures in total), but I want them to appear as a pair (to get this "burn through layer effect"), but random, if you know what I mean?

        • 1. Re: Animate mask
          Ned Murphy Adobe Community Professional & MVP

          Can you be a little more specific regarding what you need to do?  The title of your posting is "Animate mask", but very little is explained as far as how you want it animated.  In what way does the mouse reveal the underlying image, and when you say "underlying", what is it underlying?


          As far as your added question goes, you are better off starting a new posting for any new topic/question.  To load pairs of things you need to have some relationship established so that the code know what to load (naming of objects, storage methods, etc). If you want to dynamically load things into specific layers of a timeline, then you need to have containers manually built into the layers so that you have a home in the timeline for whatever you load.  Otherwise, anytthing you load dynamically has no home in a timeline.

          • 2. Re: Animate mask
            grimkarklud Level 1

            I know the title is confusing. When I started the post I wanted to do both a 10 second animation, and create an interactive banner. But I figured out the first thing on my own. I'll wait with my added question then


            Ok, I'll try to be more specific. I got this symbol (this is what I want as my mask - and this is what I want to replace my mouse).




            This is the picture shown in my banner. When I mouseover (with my giant "enter symbol") I want it to reveal the black/white photo you see beneath. So I figured I needed to create some kind of shape mask (because when I make a symbol out of my enter arrow, the mask will only become a square).


            Image visible:



            Image shown when mouseover:


            • 3. Re: Animate mask
              Ned Murphy Adobe Community Professional & MVP

              I am still not clear on what you are trying to do with the arrow.  If you are simply making the entire back and white image appear with the mouseover, then just have it as a movieclip and control its visible property.


              If you mean that you want only what is under the arrow to be displayed (and that the arrow is an image), then use the Flash drawing tools to draw the arrow shape.  That way it will stay as an arrow when you use it as a mask.

              • 4. Re: Animate mask
                grimkarklud Level 1

                I want only what is under the arrow to be displayed. I have suceeded in this in my animation. But how do I make this as an interactive mouseover?


                Can I attach a shaped mask to my mouse to reveal the other picture when mouseover?



                • 5. Re: Animate mask
                  Ned Murphy Adobe Community Professional & MVP

                  Just have the b&w image as one movieclip, and have the arrow as another movieclip.  Set the mask property of the image mc to be the arrow mc.


                  Then have a MOUSE_MOVE event listener assigned to the stage that triggers an event handler that tells the arrow_mc.x and arrow_mc.y properties to be equal to the mouseX and mouseY properties...


                     img_mc.mask = arrow_mc;



                     stage.addEventListener(MouseEvent.MOUSE_MOVE, followMouse);


                     function followMouse(evt:MouseEvent):void {

                          arrow_mc.x = mouseX;

                          arrow_mc.y = mouseY;



                  The names I used are for example only.  YOu can name the movieclips as you like.