With Flash Mx comes dynamic masking capability! Now you can mask objects using action script. In this small tutorial I’ll show you how to use the setMask method to mask an object.

Download the sample files here.

Directions

1. Create a new movie.

2. Import two images into Flash. I have used images of a rooster and a tiger.

3. Convert the images to movieclips.

4. Give both the movieclips instance names.

5. Now, create the masking object — in this case, I’ve used a small circular object.

6. Convert the circular object into a movie clip, and give it an instance name of "circle".

7. Create three buttons: one to mask the tiger image, another to mask the rooster image, and the third to remove masking.

8. Give the buttons instance names. Before I insert actionscript for the buttons, give them instance names: I gave mine the names of "left","right" and "remove".

9. Enter the following code. Select the first frame of the current layer, press f9 to open the actions window, and enter the following actions:

left.onPress = function() 
{
 rooster.setMask(null);
 tiger.setMask(circle);
}

right.onPress = function()
{
 tiger.setMask(null);
 rooster.setMask(circle);
}

remove.onPress = function()
{
 rooster.setMask(null);
 tiger.setMask(null);
}

10. That’s it! Test the movie.

Georgina has more than fifteen years' experience writing and editing for web, print and voice. With a background in marketing and a passion for words, the time Georgina spent with companies like Sausage Software and sitepoint.com cemented her lasting interest in the media, persuasion, and communications culture.

No Reader comments

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.