Dynamic masking using the drawing API - Page 2

You can put this script on a frame and test the movie to see the effect. It's very simple really. The createEmptyMovieClip call creates a new movie clip on stage with the specified instance name and level. The with action is a shortcut that selects a certain movie clip and assumes that subsequent actions are applied to it. This allows us to have cleaner code than with the conventional alternative:

this.createEmptyMovieClip('square',0);
_root.square.moveTo(0,0);
_root.square.beginFill(0x000088)
_root.square.lineTo(100,0);
_root.square.lineTo(100,100);
_root.square.lineTo(0,100);
_root.square.endFill();

Although this script is functionally equivalent to the first one you can easily see that the with action makes everything tidier and simpler.

Now for the meat of the drawing API. Basically you first move a "pointer" to a certain point in the target movie clip. Then you start drawing by calling beginFill. Next, you move the pointer across the stage using lineTo, following the outline of the shape you want to draw. Finally, you end the routine with a call to endFill, which effectively draws the shape that you have outlined. Although we have not used it in this example, calling _root.square.clear() will clear the square that we have drawn. Those of you who were in the Quebec education system in the late 80s may have flashbacks of LOGO and the infamous LC and BC (if you have no idea what I'm speaking of please ignore the preceding).

Using this movie clip as a mask is just a matter of adding a single line of code. Start out by drawing a small shape in the top left corner of the stage. Convert to a movie clip using F8. Assign it the instance name "maskee". Then at the end of the script we've created you will add:

_root.maskee.setMask (_root.square) 

This assigns the square movie clip as the mask of maskee. As you see Macromedia has created a marvelously simple API that is plenty powerful. Let's see a few examples in action.