return to moviemice.com
www.sufferincats.com
                                       
 

HOW TO MAKE LAYER MASKS WITH MACROMEDIA FLASH

     
 

Masking in Flash is used to provide transparency (alpha).

 

In the example on the left, a mask layer was used to make the layer above the BG appear to be seen as if it were actually behind the BG.

 
 
   

A mask always reveals the area that it covers. So instead of cutting a hole in one element to reveal another behind it, you cut out the part that fits into the hole and place it on top.

 
   
     

To see how masks work, here is an example of two overlapping shadows. When they cross, the shadows add together. We need to use the shadow of the prop footstool to make a mask. This will hold back the shadow of the animated cat.

                               

Copy the shadow symbol in place into a new layer. Before going further, give the symbol copy a unique name.

                           
 
           
 

Since this has to be a negative mask, Albert Pardo's great tip for cutting out shapes will come in handy here. Open the symbol. Select and group the shadow.

     
             
   
 
   

Then on the same layer, make a big shape. This shape should cover the path of animation that the mask will reveal.

 
 
 

The shape remains separate from the grouped object (the shadow) until you UNGROUP it. Then as soon as you deselect the shapes they merge into one.

You can now select out the original shape of the shadow and delete it, leaving a hole in the mask.

     
   
         
                 
     

Returning to the root timeline, see how the mask is used to hold back the animated cat shadow. The mask that was made from the footstool shadow is actually used over the shadow of the cat. The hole in the mask prevents the cat shadow from showing.

   
                               
           

   
     

To see the mask working on the stage, both the mask and masked layers must be locked and the eyes turned on. Set color to none. If the masked layer still doesn't initialize, unmask and mask it again. A number of layers can be held to one mask. The easiest way to initialize them all is to move these layers between the current mask and masked layer which automatically links them all to the same mask.

   
           
Download the sample .fla for this tutorial (152kb, Flash 7)
   
   
 
 

TV shows made with Flash like "Kappa Mikey" include artwork from Maya and Photoshop. Masking is very useful to provide transparency for jpegs and other elements that don't have an alpha channel. The Flash movie above shows how an opaque element can be used as an overlay by using a mask.

 
   
return to the top
   
           
 

Masks are essential when your animation has to go both in front and behind a prop. Using Albert's very useful method again we can instantly match a perfect edge.

   
   
   

The edge of the chair is selected and pasted in place into a new layer. (If the chair were inside a symbol, this would be copied and renamed as in the shadow example above).

   

Select and GROUP this shape. Then make a big colorful shape where the animation will show through. The two shapes remain separate as long as one is contained as a group.

 

When this shape is UNGROUPED it will become part of the green rectangle.

                   
     
       
   

The parts can be seleted and deleted, until all that is left is the area touching the chair.

       

Turn the green shape into a mask.

And make the arm a masked layer.

         
 

The masking is visible only when these layers are locked. By using part of the prop to cut out the mask, it has a perfect fit and takes only a short time to set up.

     
 
return to the top
     
         
 
copyright © 2008 by John Conning,
     
    1735.