Filed under Foster’s Home for Imaginary Friends

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)

Hooray for Re-Use!

I just burned through about five character-seconds of animation in about five days.  That feels really good.  It’s significantly faster than my general rate that I’ve been keeping up ever since I resumed keeping track in April.  When I finish a scene I get to mark it off in the spreadsheet I created for the task, which always feels great.  It’s all set up with color-changing fields that give me pleasant feedback when I finish a scene.  They say, “Hey David, you’re doing a great job!  Look how much you’ve done in the last five days!”

Part of what let me get through these two scenes so quickly was that I was able to re-use some stuff.  For the first scene the framing was very similar to an earlier one, so setup was fast (pretty much just copy the previous scene’s file and the new scene is set up).  For the second it was even better.  I was able to use a side-view walk cycle that I created a long time ago for another scene, with only slight modifications.

One of the great advantages of Flash animation is the ability to adapt old animation for new scenes.  That’s a major reason why it’s a good medium for television animation.  When I worked on Foster’s we tried our hardest to find reuse for as many scenes as we could.  We had libraries of walk cycles, character poses, hands, arms, legs, and endless gobs of uncategorized old scenes that the animation director was able to help us find if we needed them.  The thing that’s great about it is that it’s not carved in stone.  It’s pretty easy to make little tweaks to old animation in Flash.  Need that old walk cycle but with the head looking to the side?  No problem.  Different lip sync?  Easy.

Unfortunately reuse hasn’t been as helpful on Don’t Fear the Sitter, since it’s just this one episode.  If I could stretch it out into a series that would be great, since I wouldn’t have to build the character models again, and I would have a bunch of reusable animation from the first one.  I may some day try and figure out a way to adapt it into a series, particularly if the short ends up doing well on the festival circuit.  If it comes to that, I’ll definitely be glad I made this thing in Flash.

Flash JSFL Commands: Classic Motion Tween Easing

I’d like to talk about the way I use tweens in Flash.  For one reason or another, I never use new-style motion tweens and I rarely use the easing editor.  I’ve found that the easing editor is rarely worth the trouble, and new motion tweens never end up working like I want them to and they frequently crash the program.  I’ll occasionally use the easing editor if I want a really strong ease in or out, or if there’s a very particular motion I want, but for the most part I stick with classic tweens and good old –100 to +100 easing.

Actually, though, I use very few motion tweens at all ever since I created my autotweener (which will be the subject of a later post).  Fully automated tweens like those produced by motion tweens rarely produce the results I need for good animation.  They usually look too linear and mechanical or they don’t work well when multiple pieces are involved.

That said, motion tweens do come in handy sometimes, and I almost always apply easing to them – usually either +100 (out) or –100 (in).  I’ve written several commands to help with setting and removing eases.  I’m going to show you some of them today.

Continue reading

Flash JSFL Command: Motion Tweens and Sync

Anyone who’s worked with what are now called Classic Tweens will have run into the Sync Problem.  Not everyone will realize what was causing the problem, though.  It’s due to a feature that can actually be useful if you know how and when to use it.

For every motion tween there’s property called “sync”.  It’s a checkbox in the properties panel that you’ll see if you select a frame that has a motion tween applied to it.  Its function is a little arcane, and I’ve run into many Flash animators who have no idea of its existence, let alone its purpose. The gotcha is that it’s enabled by default with most methods of creating a motion tween, and it can cause unexpected and annoying behavior.

Continue reading

What is Flash?

Someone asked me recently if I could describe what exactly Flash animation is, so I thought I’d take the opportunity to do that here.

Flash is a program used mostly for creating interactive web sites and animation on the internet.  It’s different from most other graphics programs in that it’s based on vectors, not pixels.  What that means is that when the graphics data is stored in memory or on disk, it’s saved as a description of lines, curves, and boundaries of filled areas.  In most programs (such as, for instance, Photoshop and Windows Paint) graphics information is stored as an array of dots called a raster.

Continue reading