Category Archives: 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!


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:

var maskee:DisplayObject;

// Call the enter_frame function for the first frame

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.
		// Cache as Bitmap must be turned on for both the mask and the maskee
		cacheAsBitmap = true;
		maskee.cacheAsBitmap = true;
		//trace("masking " +;
		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

Please Make Flash Rock

I’m looking forward to Flash CS5.  Let me rephrase that.  I’m hopeful for what CS5 could be.  On the other hand, that’s been true of every release of Flash since MX 2004.  They promise these great new features, but rarely do they address the real nagging problems.

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!

Turnaround and Software

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.

Slow Going

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.

Twitchy Animation

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):