Flash Script – Dynamic Masking in Flash MX


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 book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.