I. Basic Technique
You may remember the concept of a masking layer, which allows a closed shape to act as a filter for one or more layers attached below it. In pre-MX versions of Flash this technique led to considerable frustration, because although it was possible to animate a masking Symbol in the timeline, as soon as we tried making the object responsive to ActionScript, it ceased acting as a mask.
There was a solution for this problem, but it was enormously complicated both in code and timeline architecture. Fortunately the nice folks at Macromedia re-engineered masking layers so that they are now much easier to deal with.
The example above uses a Movie Clip containing a simple circle shape, acting as a draggable or dynamic mask. Mouse over the Poser guy to see the effect.
Here's all the code that's needed to accomplish the trick, written in this case entirely on the masking Movie Clip itself:
onClipEvent(load){
this.startDrag(true);
}
You also need to make a few arrangements in the timeline, exactly as you would if you were creating a static or timeline-animated mask. In the Properties for the layer that contains the masking Movie Clip, set the layer property to Mask; then either drag the masked layer under the previous layer or if it's already in that position, set its property to Masked. Place the content you want to be revealed in the masked layer, then create a third layer whose property is set to Normal and position it below the masked layer in the timeline stack. Put your unmasked content (what's visible by default) in this layer.
Voila, a portable X-ray unit.
II. Refinements
Here are some improvements on the basic technique. This time the circle must be "dragged" (in computer interface terms) by holding the mouse button down. Since the masking circle can now rest while the cursor is in motion (assuming the button is not pressed), I added a second Movie Clip named outerCircle to indicate the position of the mask so the user can pick it up for further dragging.
I've also added a simple alpha dissolve in-and-out using an enterFrame handler--an unnecessary but visually appealing effect.
The timeline architecture for this version is identical to the first example, with the addition of a layer to hold the outerCircle clip. This is a separate, non-masking layer because my masking object is not visible when it isn't being dragged.
Here are the scripts, all installed on the masking Movie Clip. I use a variable called buttonDown to establish whether the mouse button has been pressed, and if so if it has been released yet--i.e., whether the object is being dragged.
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse, _root._ymouse)) startDrag(this, true);
buttonDown = true;
}
onClipEvent(mouseUp){
stopDrag();
buttonDown = false;
}
onClipEvent(enterFrame){
//make the "outer circle" clip move with the masking clip
_root.outerCircle._x = this._x;
_root.outerCircle._y = this._y;
//fade the skeleton image in or out,
//depending on whether the button is down
if(buttonDown == true){
if(_root.skeleton._alpha < 100) _root.skeleton._alpha +=4;
}
else{
if(_root.skeleton._alpha > 0) _root.skeleton._alpha -=4;
}
}
III. Source Files
You may download the source files for these two demonstrations from MMShare/dynamicMasks03 on Crow.
