Title: Masking
Author: AEvision
Difficulty: Beginner
Prerequisites: Motion Tween

In this toturial, you're going to learn how to apply Masking to a picture.

This can be very useful when trying to animate an interface, such as the flash interface of AEvision Designs.

   
 

1:

Select the first layer, right-click it and rename it to "Picture".

  • Select the first keyframe of the "picture" layer and go to File>Import and import the picture you desire to mask.

Tip: It is strongly recommended to use a .PNG image format instead of a .JPG for best results in flash.

 

 

 

 

 

 

 

 


2:

  • Click on the icon to add a new layer. Name the new layer "Mask".

This layer will hold the object that will be used to reveal the base picture.

  • Select the Oval Tool from the Toolbar and draw a circle while the first keyframe of the "Mask" Layer is selected.

 

 

 


3:

  • Apply Motion Tween to the circle and make it go accross the picture.

Make sure you extend the keyframes of the "Picture" to match the length of the "Mask" keyframes as shown in Fig 3.

 

Looking good :) the next step is the last one and your mask should be ready!

 

 

 

 

 

 

 

 


4:

  • Right-click on the "Mask" layer and select Mask from the drop-down menu.

The result should be similar to Fig 4. You'll notice the base picture can only be seen through the oval shape you drew.

  • Go to windows>test movie.

You're done!

Be creative:

  • Try to draw different shapes of masks and apply additional motion tween to it.
  • You can mask virtually anything, try masking Text.

Conclusion:

What we did:

  • We created 2 layers, the bottom one holds the stuff you want to be masked, and the top one is the object that is used to do the masking.
  • Applied motion tween to the Masking object.
  • Right-clicked on the masking layer and applied "Mask" to it.
  • Tested the movie.

 

Fig 1

 

Fig 2

 

 

Fig 3

 

 

Fig 4

 

Download *.FLA

Not clear enough? Check our forums. We will be glad to help you out.
   
Main | Tutorials | BestFlash | Goodies | Forums | Portfolio | Contact Us
   
 
AEvision Tutorials 2.1 - All rights reserved AEvision Designs 2002-2007
 
 
Icons provided by iconpacks.com