Dynamic Mask Symbol

If you’ve done any significant amount of animation in Flash then you’ve probably run into this problem. You want to give a symbol partial alpha, but that ends up giving you a big mess where each individual sub-symbol is alpha’d down, rather than just the symbol you’re actually working with. Blech!

image

No Es Bueno

I ran into this problem once again yesterday while working on my demo reel and I decided I’d had enough.  I pulled out a trick I learned from Mike Bambino while I was working at Trilogy Studios.  It turns out that if you do it dynamically (using Actionscript) then you can make a mask that supports semi-transparency.  It lets you do awesome neato stuff like smooth gradient masks:

 

image

Awesome and Neato

What I wanted to do this time is to fade single characters in and out without affecting the other characters around them.  Normally I’d do something with solid overlays to give the impression of a clean dissolve, but it wasn’t working this time.  The characters were overlapping a bit, so the overlay would end up affecting both of them in an undesirable way.

To solve the problem I simply made a solid rectangular symbol with the relevant Actionscript in it.  At run-time it gloms itself onto whatever movie clip is directly below it on the display list and says “hey you!  I’m gonna be your mask now!”  Then I simply fade the mask symbol on the timeline however I please in order to fade its maskee in and out.

Easy, huh?

Here’s the source code in case you’d like to apply it to your own stuff.  Just put this on the first frame of your mask movie clip, then put the mask symbol directly above the thing you want to mask:


stop();
var maskee:DisplayObject;

// Call the enter_frame function for the first frame
enter_frame(null);

function enter_frame(evt:Event)
{
	//trace("enter frame");

	var my_index:int = parent.getChildIndex(this);
	
	// Find the symbols just below this one
	maskee = parent.getChildAt(my_index - 1);
	
	// If there's something there, mask it.
	if(maskee)
	{
		// Cache as Bitmap must be turned on for both the mask and the maskee
		cacheAsBitmap = true;
		maskee.cacheAsBitmap = true;
		//trace("masking " + maskee.name);
		maskee.mask = this;
	}
}

// Remove the reference to the mask if it gets removed from the stage
function removed_from_stage(evt:Event)
{
	maskee.mask = null;
	removeEventListener(Event.ENTER_FRAME, enter_frame)
	//trace("removed mask");
}

addEventListener(Event.REMOVED_FROM_STAGE, removed_from_stage);
addEventListener(Event.ENTER_FRAME, enter_frame)

And here’s a Flash file with it all set up and working, just to make it totally easy to see how it works:

Dynamic mask.fla (57KB)

3 thoughts on “Dynamic Mask Symbol

  1. edzis says:

    You could do it without any code – just set blendMode to “layer” to the left hand symbol. In Flash Pro this is under Properties > Display > Blending. But make sure to set that in all keyframes.

  2. David says:

    Thanks, that’s good to know! I don’t deal much with movie clips in my work so I’m not as experienced with this kind of stuff. That said, this method is still useful if you want to have a non-trivial mask, such as one with multiple shapes or alpha gradients. I really wish, though, that you could do all this stuff with graphic symbols. It’s annoying to have to work around the limitation like this when making static animations.

  3. Robert Moore says:

    Awesome and neato indeed!

Leave a Reply to edzis Cancel reply

Your email address will not be published.