Flash Script – Dynamic Masking in Flash MX

Tweet


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.

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.

No Reader comments