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:

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)

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.

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.

“Ease In and Out” is one of the earliest Flash commands I wrote, back when I was working on Foster’s Home for Imaginary Friends.  It’s a simple little script that automates one of the things I found myself doing the most: creating a motion tween, setting a keyframe in the middle, and making the first half ease in and the second half ease out.  It’s not much much, but if you do that kind of thing often it can be a chore to go through the steps over and over.

Ease In and out.mxp

Next we have “Ease in 100%” and “Ease out 100%”.  These ones do pretty much what they say: set the easing on a classic tween to be either +100% (out) or –100% (in).

Ease In 100%, ease out 100%.mxp

Finally, I created a command that will remove all easing from the selected frames.  This is very useful if you want to remove easing on many different motion tweens at once,  If you highlight the frames with the tweens on them but they don’t all have the exact same tween value, for some reason Flash won’t let you change any of them.  With this command, though, you can easily set everything back to zero – even if there’s currently no motion tween there!  (That is, it’ll set it so that when you do create a motion tween on that frame, its easing will be zero, rather than whatever it was set to in the past.)

Remove ease.mxp

All my Flash extensions are free for personal use but there’s a small fee for commercial use.  Basically, if you’re getting paid for your Flash work I ask that give a little something back.  Please contact me for pricing (don’t worry, it’s very reasonable).

I’ve made a little movie showing how to use these commands.  Please let me know if you have any questions

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.

What sync does is to make sure that all the animation along several motion tweens will stay consistent.  It’ll make sure the symbol that’s being animated remains the same symbol on subsequent keyframes and tweens.  For graphic symbols It’ll make sure the looping property remains consistent, so that there’s no pop when the symbol has animation inside it, or so that it remains on the same frame if looping is set to “single frame”.

Hopefully I’ve explained it sufficiently so you can see how that would be a useful thing.  When I worked on Foster’s we used it all the time to make sure, for instance, that facial animation was synced up to the timeline of the main body animation.  Lip-sync and blinks and so on were animated inside the head symbol, the head symbol was animated on the timeline of the character symbol, and at every frame of the head animation it needs to be displaying the corresponding internal frame.  If it ever got out of sync we would flip on the sync property temporarily.  That’s a key point: don’t ever leave sync enabled unless you have a very good reason.  You’ll only cause yourself heartache later if you do.

I have two JSFL commands I wrote for dealing with the sync problem.  The first is “Motion tween (no sync)”.  It’s a simple command that creates a classic motion tween without turning on sync.  For this one to be as useful as possible it needs to be assigned keyboard shortcut.  That way you can make a motion tween quickly without having to worry about sync.

The second command is “Turn off sync”.  If you have a frame where sync has been turned on previously, even if it no longer has a motion tween, you can turn it off with this command.  This is helpful because normally you can only turn off sync if the motion tween is active already.  But if the motion tween is active then the sync takes effect and you may get the sync problem again.  As long as the motion tween is turned off the sync won’t be a problem, so you won’t have an issue as long as you can turn off sync before re-engaging the motion tween.  I use this one all the time when dealing with animation that other people (who don’t understand sync) created.

You can download these commands as an Adobe Extension Manager package here: Motion tween sync tools.mxp

All my Flash extensions are free for personal use there’s a small fee for commercial use.  Basically, if you’re getting paid for your Flash work I ask that give a little something back.  Please contact me for pricing (don’t worry, it’s very reasonable).

Here’s a movie I made to show how to use the commands, as well as illustrating some of the intricacies of motion tween sync:

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.

The two methods both have their advantages.  Vector-based systems are especially effective when the art you’re working with has hard, crisp edges and is made predominantly of solid colors or smooth, even gradients.  It allows arbitrary transformations without any loss of quality, meaning you can scale, rotate, reflect and skew the art as much as you like and it’ll still have smooth, crisp edges and sharp corners.

In a raster system, since everything’s made up of dots of color, if you scale or rotate an image it’s likely to go down in quality.  When rotating or scaling, the program has to recalculate the values of the pixels, reducing their crispness.  A raster-based system is much better than a vector-based one, though, at representing naturalistic, "fuzzy" images like those a person would produce on paper with natural media like pencil or watercolor.

In practice, every serious 2D graphics program ends up being a hybrid of raster and vector.  Flash can use raster images and Photoshop can use vector shapes, but they do best with their native format.

Flash is designed particularly with animation in mind.  Since it’s vector-based you can move the art around the screen, rotating and scaling as you please without losing any quality.  When doing character animation an animator will take advantage of this fact by making a single drawing and breaking it up into pieces that will be animated separately.  For instance, in the clip I posted a few days ago of the little girl hefting the binoculars, the girl’s head, arms, hands, body, hair ribbon and binoculars are the main pieces in the scene and are each moved around separately.

It gets even more complicated than that, though, because you’ll probably notice that there’s also animation inside the face.  While I can move the head around as a unit, I can also animate stuff inside the head.  This means that I can animate facial expressions without having to worry about the positioning of the features while the head is moving. 

Animation that moves pieces of art around without changing their shape (apart from scale, rotation and skew) is called symbol animation.  It’s also possible to animate the art itself, which is more akin to old-school traditional animation.  You can draw a new shape on every frame, or make small modifications to existing shapes, effectively having new art for each frame.  This carries less of an efficiency benefit than symbol animation because the animator is responsible to creating the art on each frame, rather than just arranging it.  It also results in much larger files and therefore slower downloads over the network, so internet animation usually uses symbol animation.

As a result of the particular limitations of symbol animation, Flash cartoons tend to have a certain look to them.  An experienced Flash animator can instantly recognize that look, though if it’s done well then an untrained viewer probably won’t notice.  For Kung Fu Panda World (did I mention yet that I work for the company creating the new Kung Fu Panda virtual world?), when I first came on the project I don’t think my supervisors realized how good you could make Flash character animation look because they had seen so much stiff online animation that "looked like Flash."

That’s one of the phrases that Eric Pringle, the animation director for Foster’s Home for Imaginary Friends, used in training his animators.  He emphasized that it was important to keep things from looking like they were made in Flash.  As the old adage goes, it’s a poor craftsman who blames his tools.  One of the best tips he gave us was how to avoid our animation looking like Flash: don’t forget skew.  Too many Flash animators stick to scale and rotation in animating their symbols and never bother skewing.  Skew, though, can really add a lot when doing symbol animation, making it much easier to emulate the looseness of traditional animation.

I guess that’s what I’ve got for now.  Still have no idea what Flash is?  Unclear on some aspect of the process?  Let me know in the comments.

CS4 introduced quite a few bugs and annoyances, though the UI rewrite also fixed a bunch of issues that have bugged me ever since I started using Flash.  You should see the list of bugs and feature requests I’ve assembled.  I’ve submitted them all to Adobe’s bug report / feature request web form, but I have real doubts about how much they pay attention to that.

There was a feature that I used fairly often when I worked on Foster’s Home for Imaginary Friends that disappeared in version 8: copying vector art from Flash to Illustrator.  I have no idea why they would have taken that out, since it was so useful to us on Foster’s.  The most common thing we would use it for would be to take some art that we had in Flash, bring it into illustrator, and either create an art brush out of it or apply an art brush to it.  This would make things like animating a complex striped tiger tail as easy as animating a standard Flash line.  Translation: very easy.  It was even used once (before I came onto the show) to animate an entire character – a particularly gangly and clumsy one.

Here’s my dream, though: make it so I don’t even need Illustrator.  Add art brushes to Flash.  Wouldn’t that rock?  It would potentially create very high vertex counts but it would be amazing in terms of versatility.  And, having my foundation firmly in TV animation, what do I care about vertex counts?  As long as the renderer can handle it without crashing I’m good.

And while you’re at it, add trapezoidal transformation of symbols, smarter shape tweens, and any number of other things that Illustrator does so much better but belong in an animation program like Flash.  Make my wish come true, Adobe: make Flash rock for animators!

Lately I’ve been working on the turnaround for Sarah, the other main character in Don’t Fear the Sitter. Since I finished that one scene with Jenny I figured it would be a good idea to move on to the next character. I get more of a kick out of animating, but this is definitely a required step of the process. I figure it’s a good idea to spread out the production process so I’m not always working on the same sort of thing.

The way I’m creating this animation, as I’ve said before, is very similar to how we do it on Foster’s. I’m making a basic set of models that will be what I use for most of the animation. That’s what the turnaround is for — it’s the artwork that I’ll turn into the models in Flash.

Actually, I just recently saw a demonstration of this software called Toon Boom Solo. Oh. My. God. It rocks. But, of course, that’s based on what I saw in the demo, which was a presentation designed to make the program look good. But based on what I saw, it will do almost everything I’ve wanted in an animation program for years. Anyone who’s ever heard me rant about the state of 2D animation software can attest that it hasn’t been up to my standards, at least in a reachable price range. And even out of my price range it probably wasn’t — I just never got to try those programs out, so I couldn’t decide if they were up to snuff.

Anyway, as I said, Solo seems to have almost all the features I’ve been crying for all these years. It’s got two big counts against it, though: price and ease of use.

Price: $3000. Well, if it really works like I want it to, I’d be willing to pay that much…. Plus, I might be able to get an academic copy after all this film I’m working on is probably going to end up being my MFA thesis. That would knock the price down to about $500, I think.

User interface: The user interface looks like it’s really hard to learn. Anyone who’s ever heard me rant about user interfaces can attest that I have high standards, so it’s frustrating that this cool program should have a bad one. On the other hand, I also recognize that some of the most powerful software is only powerful once you learn to use it. Maya, anyone? EMACS? Vi?

All that said, I have no way of testing Solo to know if it’s really worth my time and money. Enter Cartoon Network. It seems that the higher-ups of the Foster’s team are considering switching to Toon Boom Harmony (the multi-user collaborative version of Solo) for the whole production cycle of the show. They’re probably going to do some tests to see if it lives up to everyone’s hopes and dreams, and then… who knows? We’ll see, I guess. Anyway, if my work switches to Toon Boom then I’ll probably end up getting a copy for myself at home. I just don’t know if I want to switch over DFtS. It would make a lot of things a lot easier, but at some point you just have to go ahead and make your film. There’s always doing to be something better on the horizon. I’m already in the process of going through one software/process change. Do I really want to change again? Yeah, probably not.

I’m really close to being done with my first scene for DFtS. I’ve been working on this one little scene for so long that it feels weird to be almost done. I keep scrubbing through the Flash file trying to find things that need to be finished/fixed but I’m finding fewer and fewer things each time.

Part of the point of doing this scene was just to test out the model I built for Jenny. I set it up in the way that I though would be the most useful but there are still occasional glitches. I’ve found a few things that are wrong — as small as a pivot point in the wrong place or as big as needing to make a bunch more drawings just to make one little thing work. I would explain in more detail what I’m talking about, but I think that would go a little beyond the scope of what I want to get into. Suffice it to say that I’m testing a lot of the preparatory work that I did and mostly it’s coming out all right.

Animating this model is definitely different than doing the ones at work. It’s pretty much a matter of character design. I designed my characters with traditional drawn animation in mind, and they work well for that. There’s an inherent quality to the method I’m currently using, though, that’s conducive to flat action. If you watch an episode of Foster’s you’ll notice that about 95% of the action is parallel to the camera plane — that is, right/left, up/down. It’s rare for a character to move toward or away from the camera. So the characters I designed for the traditional method feel a little constrained by the 2D world of Flash.

Maybe I should have redesigned my characters and storyboard to fit in with this new medium? Well… I didn’t wanna. That would have been soooo much work. So there’s some amount of pushing and pulling, then, to get my animation to match my original vision. It makes me start to wonder if this process is really going to save me time in the end. So far I’ve animated about ten seconds and I’ve been working on it for like five months. Now, admittedly I was working on it almost full time while I was still in school, and I’ve been kind of sporadic about working on it at all lately, but still.

But, really, life is a grand experiment. We’ll see how it goes.

I worked on some animation a bit last night. I’ve been having a hard time motivating myself to work on DFtS. I guess I’ve been pretty busy lately, but even when I have free time I seem to be more likely to watch a movie than work on animation.

Part of it is that this scene I’m working on seems to be going rather differently than the stuff I do on Foster’s Home for Imaginary Friends. I think the difference is that that show is storyboarded with the medium in mind. That is, they make it so that it will animate well in the 2D Flash world of Foster’s. I boarded my film assuming I would do it traditionally, though, so it has lots of non-orthogonal poses and movement. In fact, there are one or two scenes that I’m going to have to come pretty close to animating traditionally. There’s this one that’s a low-angle shot of some people running and sort of jumping over the camera and I don’t know any way I could do it with stock models. So that’ll be kind of fun to figure out.  (Go to the end of this post to see some pictures with moderate spoilage.)

I discovered something recently by watching this animation. Flash is really good at twitchy movements. You can kind of fake movements if they happen in few enough frames, and they still look really good. Watch that animation and you’ll see what I mean – all the characters move in a very twitch way, extremely pose-to-pose. Again, we run into the problem that I didn’t board DFtS specifically for Flash. My story has many places where slower movements are really the most appropriate. Now, since the scene I’m doing right now is one of those, and it involves a head turn (notoriously difficult in Flash), I’ve had to eschew tweens entirely, doing the whole thing on twos. If I try to do it on ones it’ll just take way too long to make it look smooth, and even then it’ll probably look muddy.

Interesting fact for the day: sometimes animation looks better on twos than it does on ones. Sometimes when I’ve animated something on ones I’ll go in and take out every other keyframe and it ends up looking a lot better. I figure it’s because the human brain can fill in the gaps on viewing better than the animator can on creation. Sometimes it’s better just to trust in Mother Nature and use our built-in tools to make something look good.

Here, look at what I’m talking about (Warning: spoilers! scroll down to see the pictures):