I come to it now knowing what I really want to do, though, and what I think I’ll enjoy and be kinda good at.  I’m a character animator.  What I want to do is animate characters – not model them, not rig them, not paint them.  Let the other people do those things – people who enjoy and are good at them.

Brief Aside

When I was working on Don’t Fear the Sitter I dreaded doing the backgrounds.  A lot of animators I know looked forward to that part, since it was so much less work for them.  And while, yes, overall the BGs took less time for me than the animation did, and I don’t think I did a bad job on them, they were a real chore.

End of Aside

So I downloaded the student version of Maya.  (The people at Autodesk totally have the right idea in making it free for students and the unemployed – training up their future customers.) I bought a Maya book.  I downloaded a character rig (thank god there are people out there who make these things and release them for free).  I dove in.

I figured the most basic thing to try out at first would be a good old walk cycle.  I tried to put in some Richard Williams style flourish, breaking elbows and escaping from that two-dimensional plane in which the traditional side-view walk cycle resides.  Here are the results:

These are designed to be drop-in replacements for the built-in Flash operations normally bound to the “>” and “<” keys.  In normal operation, those keys move the current frame marker forward or backward one frame.  They’re useful when you want to slowly go through your animation, or when you don’t want to have to go to the mouse to move to the next or previous frame.

The difference with my versions, though, is that now your selection will remain selected in the new frame.  That is, whatever symbols you had selected in the previous frame will also be selected in the new frame.  It’s fantastic for when you want to go through an animation one frame at a time and adjust the same element(s) on each frame.

There are six commands in this package:

1. Same object frame dec and Same object frame inc
   These commands move back or forward one frame, keeping the same selection.  If you had a symbol selected in the old frame and it exists in the new one, it’ll be selected there too. I have these bound to the hotkeys mentioned above – “<” and “>” respectively.
2. Same object keyframe dec and Same object keyframe inc
   These operate exactly the same way, except that they move to the next keyframe on the currently active layer. This is great for moving between keyframes without having to laboriously traverse the intervening non-key frames. I have these bound to the same keys as above, but while holding down
3. Same object go to first frame and Same object go to last frame
   These commands will move the current frame to be either at the beginning or the end of the timeline.

A couple notes about these tools:

1. They work best in Flash CS4 or earlier.  In CS5 Adobe changed something about how Flash updates the display after running a JSFL command. Now you can’t see what the screen looks like as-you-go – you have to stop and wait for it to update.  This means you can’t, for instance, just hold down the “>” key and see the animation go by slowly.  The reduced functionality of these tools is actually one of the main reasons I haven’t upgraded to CS5.
2. If a symbol doesn’t exist on the frame you move to, obviously it can’t be selected.
3. If you have more than one instance of the same symbol on the same layer then the tool can only track one of them.  There are some details behind this that I don’t really have the energy to go into here, but on the new frame probably only one of your two symbol instances will be selected.  For this reason I often end up duplicating symbols so that I can have more than one of them on the same layer and still have the frame navigation tools work properly (as well as autotween, which runs into a similar problem).

Here’s a video demonstrating my navigation tools:

And here’s a download link for the installation file:

Frame Navigation Commands

One thing that they did do right, though, was adding auto-save to Flash CS5.5.  It boggled my mind why it was missing for so many years, particularly in a program that crashes as much as Flash does. Who can say what lurks in the minds of the Flash architects?  At least it arrived eventually and people can finally be secure that they aren’t going to lose their work if Flash crashes.

What, then, about the rest of us who haven’t upgraded?  Several years ago, long before CS5.5 existed, I got frustrated with the lack of autosave so I went out looking for a plugin that would do the job for me.  I found this auto-save WindowSWF panel, one that was a little too basic for me.  It had several fundamental problems that made it, in the end, not quite good enough. First, its layout is poor, making it take a lot of screen real-estate.  Second, it’s disabled by default, and it doesn’t remember its previous setting when Flash is started (meaning you have to remember to set it going every time you start Flash).  Third, it saves over the current file and you can’t roll back to a previous version unless you were careful to save off iterations manually.

So I had finally had enough and I sat down to write a better one.  I ended up making one that works through the same basic system – a WindowSWF panel – but much more thought-out and featureful. Here’s what mine looks like:

There are three controls here.

• Minutes between saves: controls how often the autosaver will save your file
• Keep how many old copies: you can have it keep up to nine old versions of your file.  All the old files are stored in a subfolder of the folder your FLA is in, so your main directory doesn’t get cluttered with autosave files.
• Enable: disables the autosaver if it’s unchecked.
• Additionally, there’s a readout of how long it’ll be until the next auto-save, based on how long it’s been since the file was first modified.

One key thing to note is that this autosaver remembers its state, so it’ll come up exactly how you left it when you last had it open.  That means that it just works and you don’t have to think about it most of the time – a vital feature of a safety backup tool like this.

Since it’s a WindowSWF, though, you have to keep it open all the time.  If you collapse or dismiss the window it will stop running.  Unfortunately that just seems to be the way these things work, so it’s not totally foolproof.

David’s Autosaver installer

Reset Transform (improved)

When you hit ctrl-shift-Z in Flash it’ll reset the transform of all the selected symbols back to their default state.  That means 100% scale, with no rotation or skew.  But what if you want the default scale/rotation/skew to be something different?  Wouldn’t it be nice if you could define an arbitrary transform that you wanted ctrl-shift-Z to reset a symbol back to?

As you may have guessed, I’ve created just such a thing. It includes two Flash commands.

1. The first creates a reference symbol that has your definitions of your symbols’ default state.  All you have to do is put all your symbols on the stage in the position you’d like them to be in by default and call Commands->Create symbol scale reference. That creates a symbol in your library called _symbol_scale_reference in which all your symbols you had selected now reside, defining their default transform.
2. The is the command that does the resetting.  It simply takes the selected symbols and changes their transforms to match whatever is in _symbol_scale_reference.  If the reference symbol doesn’t exist then the command’s operation is identical to the standard Reset Transform command. I recommend switching your ctrl-shift-Z keyboard shortcut over to this command, since it’s functionally the same as the original Reset Transform but with the added functionality if you want it.

Reset transform (improved) installer

Zero Transform

But that’s not all!  I have another even cooler extension for you today!

One of the functions that I sorely missed for years in Flash was Zero Transform.  That’s a function that takes the current state of a symbol instance and makes it the zero point in the transform.  That is, after zeroing a transform, your selected symbol won’t have changed in appearance but its transform will now be 100% scale with 0 rotation and skew. Any 3d animation program worth its salt has this functionality, so why doesn’t Flash?

It took some doing, but I managed to write a Zero Transform command for Flash.  I use it all the time, and I think you may find it useful too.

Included are two commands: Zero transform as is and Zero transform at scale. The first is exactly as I described above, and the one I find most useful.  The second does something very similar, except that instead of resetting the transform so that it ends up at 100% scale, it does it so that it ends up an arbitrary X and Y scales that you specify.

I use Zero transform as is enough that I have it bound to an easy-to-remember keyboard shortcut: ctrl-alt-Z. I think of it as a more authoritative version of ctrl-shift-Z.

Zero Transform installer

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)

In the main tool things are mostly the same.  I fixed compatibility with CS5, so now die-hard Art Brush users can upgrade, and die-hard CS5 users can finally use the tool.  I also improved rendering of corners.  Seriously, it does corners way better now.  It might still need a little improvement, but at this point changes would be a judgement call of whether they’re better or now.  Basically, now what the tool does with corners is to try and make the diagonal of the corner be the same width as the brush would be at that point anyway.

Another thing I’ve changed is that it’s now responsive to the thickness of the pencil path that it’s following.  For instance, if the line has a thickness of 2 then the resultant brush stroke will be twice as thick as in the brush symbol.  This is particularly useful with the other new thing I’m introducing…

… a version that recolors the brush stroke!  Now all the shapes in the brush symbol will be drawn out using the current fill color.  This makes it possible to use the art brush tool as a more generic paintbrush, where the brush symbol only defines the shape of the resulting stroke.  I use it a lot for creating linework on characters.  Below is an example of the output.

One of the advantages of the new “recoloring” art brush is that it’s more backward compatible.  In fact, it may be compatible as far back as Flash MX 2004!  I can’t say for sure, since I don’t have a copy of that program.  I would definitely be interested to hear results from anyone who tries it on a version of Flash prior to CS4.  Leave comments here or email me.

As a reminder, these tools are free for non-commercial use but there’s a small fee if you’d like to use them in a commercial setting.  Contact me for more information.

Art Brush installer (45kb download)

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.

“V-Cam” stands for “virtual camera.”  It’s a tool that lets you define the viewport of your Flash movie with a rectangular “viewfinder”, rather than just with the location of your subject on the stage.  This means that you can leave your drawing in one location on the stage, then animate the V-Cam all over the place, including rotation, skewing, etc, and that view will be the one you see in the final product.  It’s a very useful tool, making framing much more intuitive.

Initially, the problem with the V-Cam that was available online was that it was written only for Actionscript 2.  So I updated it to work with Actionscript 3, since everything I was working on was in the newer version of the language.  I believe someone else has done the same and already released the result online, and many people use it and love it.  I’ve never tried that other one, since I already had my own.

But there’s a problem with using the V-Cam.  Flash is bad at rendering out movies that use Actionscript.  Early on, Flash couldn’t do it at all, and one had to resort to less-than-perfect third-party programs to do the job.  They weren’t so good because they didn’t generally support transparency and the decent ones cost a bunch of money.

Luckily, Adobe caught on and added a feature to Flash that allowed rendering straight to quicktime from Flash, including all Actionscripted dynamic content.  Flash people the world over rejoiced, right up until they actually tried the new feature.  Well, it turned out that it couldn’t be relied upon.  It would drop frames without any notification, so you ended up with a movie that was a different length than the one you started with.  That might be okay for people simply trying to make a quick-and-dirty static version of their Flash movie, but it super-sucked for anyone with tight, frame-accurate editing (such as what you might do if you were animating in Flash and assembling your final product in Premiere or Final Cut, or if you were dealing with lipsync).

So what was I to do?  I didn’t think I could do anything at first, but then I stumbled across a solution.  What if I could make the Flash movie render itself out to disk?  Actionscript has lots of built-in functions, including, it turns out, a PNG encoder.  Combine that with AIR’s ability to write files to the hard drive and suddenly it started to look like I could really do this thing.

So here’s what I came up with: a V-Cam that will not only operate like you would expect a V-Cam to, but it will also save a PNG sequence of itself to disk.  We’re talking full transparency, frame-by-frame precision, no dropped frames or frames missing at the beginning or end, and full support of all filters and color transform information (tint, alpha, etc).  It just does it.

Unfortunately there are a few caveats.

1. You have to compile your SWF as an AIR application.  It won’t work with the regular Flash player.  This is because the regular Flash player doesn’t allow any significant writing to the local hard disk.  It means that you’ll pretty much have to run your movie with the “Test Movie” command from Flash – double-clicking on an AIR SWF doesn’t execute any actionscript.  There actually is a way do run the SWF directly, though, and I’d be happy to help anyone out who wants to do this.
2. I don’t do much interactive stuff.  Most of what I use the V-Cam for is non-dynamic animation (perhaps with the occasional actionscript-powered effects).  I’m not sure if this thing’ll work at all with interactive movies.  Again, if enough people ask for it I may do something about that.  That said, it should work with any actionscript that doesn’t require mouse-based interaction.
3. It will render out at whatever size the SWF window is currently.  The easiest way to control that is to set the document size.  This means it’s easy to develop your animation at, for instance, 640×360 (16×9 aspect ratio), then later render at 720×480 or 1920×1080 or whatever you like – just set the document size to your desired resolution.  I just want to warn you that if you’re dealing with standard-def video you’ll be doing yourself a big favor if you learn all you can about screen aspect ratios, pixel aspect ratios, resolutions, and all that good stuff.
4. It won’t properly take account of pixel aspect ratio in your output PNG files.  They are likely to look stretched if you’re targeting a screen with non-square pixels (such as standard-def video).  You just have to make sure that the program in which you’re using the PNG sequence knows that it should interpret those files as if they have non-square pixels.  For instance, in Adobe Premiere, right-click on the image sequence in the library and select “interpret footage…” and set the correct pixel aspect ratio.  If you’re targeting a computer display or HD video you don’t need to worry about any of this.

Here’s how to set up your Flash file to use this new V-Cam:

1. In your Flash document’s publish settings, in the Flash tab, under “Player” choose “Adobe AIR” (if there’s more than one version  choose the highest one unless you have a good reason to choose a lower one).
2. It’s best to keep your file to a single scene.  I haven’t worked out a way to make it work correctly between multiple scenes.  Perhaps in the next version?
3. Make sure your V-Cam exists on the first frame of the animation, and contiguously everywhere you want to use it for rendering to PNG sequence.  If the V-Cam is removed from the stage and brought back it won’t resume saving the sequence (this is why it won’t currently work between scenes).
4. Make sure you’re you’re using the correct version of the V-Cam for your project.  It should have an unmodified aspect ratio equal to the aspect ratio of your target screen – usually either 4:3 or 16:9 if you’re targeting video. While any version of the V-Cam will work in any file, it’ll probably be less of a headache if you can ctrl-shift-Z it back to the same aspect ratio as your stage.
5. Set your document to have the same aspect ratio as the V-Cam.  It’s not necessary to have exactly the same resolution as the active area of the vV-Cam – just resize it to whatever size you want to use.
6. If you want to target standard-def video, use the 4:3 V-Cam and give your document a resolution of 720×480.   This will result in non-square pixels when you squish it into a 4×3 screen aspect ratio.
7. While the movie is running:
   1. Hit shift-insert to save a PNG sequence.  The animation will start saving itself  in a subdirectory of the one that your FLA is in, called swf_render/<fla_name>.
   2. Hit PgUp to see the timeline nav bar
   3. Hit <space> to pause or resume playback
   4. Stretch the playback window to change its size.  In its default mode the movie will stretch to fit the window.
   5. Hit PgDn to switch to the mode where aspect ratio is preserved.  In this mode you can resize the playback window and the movie will expand uniformly to touch the edge of the window, filling any extra space with black.
   6. While rendering, hit <esc> to stop.
8. The rendering will finish when the movie reaches its last frame

Here’s a video explaining how to use the tool, mostly repeating what I’ve explained above.  I recommend watching it in high-def for best results:

Finally, the download:

Self-rendering virtual camera for Flash (73 KB)

This tool is released under the Creative Commons Attribution-Noncommercial-Sharealike 3.0 license.

For convenience, here’s the download link again:

Art Brush installer