type = 'application/x-shockwave-flash'
data = 'http://sitepointstatic.com/flash/mask.swf'
width = '400'
height = '400'
bgcolor = 'black'
>

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.

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.


No Reader comments

Related books & courses
Available now on SitePoint Premium

Preview for $1