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.

Anyone who’s followed my blog so far and read the entries on Flash commands (not sure if there’s anyone like that yet – I have an admittedly small audience) will have seen me mention the Autotweener.  Well, today’s the day – I’m going to tell you all about it and post it for download.

The autotweener is a tool that does many of the same things as Flash’s built-in motion and shape tween functions, but it works in a fundamentally different way.  It’s incredibly useful, simplifying tasks that used to be difficult or impossible.  For my own animation process it was revolutionary – it totally changed how I do things.  I now rarely use motion tweens and even more rarely shape tweens – the autotweener has taken over almost all the tasks I used to use those for.

A Little History

When I worked at Supernews we did the animation for the show in a very particular way.  We would typically have the head on one layer and all the other body parts for the character on another layer.  As such it was impossible to use motion tweens, at least on the body layer.  So all our in-betweens had to be done manually, eyeballing all the positioning and rotation (we didn’t often use skews).  It would take three or four minutes to do that for each movement.

Of course, there are advantages to doing things that way.  With such close attention by the animator the motion can be customized to look just right, with nice arcs and all that nice stuff.  It’s slow, though (as I said, it took several minutes to do what was largely a mechanical process) and frankly it was a pain in the butt.  Over and over, moving body parts to the exact in-between point – definitely aggravating.

In some of my free time I started to toy with an idea I had had for a while: automating that in-betweening process.  At first I thought about trying to do it with the help of Flash’s built-in tweens but that didn’t really work out in practice.  Finally, I gave in and decided to do it the hard way, calculating out all the matrix math and all that stuff.  After a few weeks of tinkering with it in my free time I rolled out version 1.0.

The autotweener was a hit in the Supernews office.  It made this repetitive, tedious task much faster and almost completely automated.  Now we just had to run the autotweener, adjust a few joints so they connected properly, and it was done.  Super easy.

I soon realized I could make the autotweener more versatile by setting up different keyboard shortcuts for different percentage moves.  I set up 10%-90% on the ctrl-shift-number keys as well as 1/3rd and 2/3rds on alt-shift-1 and 2.  Then I realized I could go a step even further, setting up shortcuts for anticipation (-50% through –10%) and overshoot (110% through 150%).

Finally, after happily using the autotweener for about two years I figured out how, in a limited way, I could extend it to work on raw shapes as well.  After getting that feature to work I was finally able, for the most part, to leave behind Flash’s unreliable shape tweens.

What Makes It Special

There are several things that make the autotweener better than Flash’s built-in tweens:

• It can operate on more than one item on the same layer
• It creates smooth transitions even if you’ve moved the pivot point of your symbol instance from one frame to the next
• It can automate anticipation and overshooting
• It gives you frame-by-frame control of easing
• It can give you unambiguous, foolproof shape tweens with easing, overshooting and anticipating (as long as you obey some basic rules)
• It can tween two of the same symbol on the same layer, as long as one of them is reflected and the other is not

What it can’t do

While it has a lot to be said for it, there are some things it’s not good at or just it can’t do:

• Tween more than one symbol on the same layer when those symbols have the same reflection
• Use motion paths
• Tween between raw shapes with a different number of vertices
• Tween more than one raw shape on a single layer
• Do long, smooth tweens (this is technically possible, but Flash’s built-in motion tweens are much better at it).

How To Use It

There are some guidelines I have to tell you about before you can use the autotweener.  It’s a wonderful tool but it has some unavoidable idiosyncrasies.  The best way to illustrate how to use it and what it’s good at is with this video:

Keyboard Shortcuts

The autotweener works best if you set up keyboard shortcuts for using it.  At my old job at Supernews some of the animators only cared about the 50% autotween, since that’s mostly what we used there.  That way they only needed one keyboard shortcut.  For my animation process, though, I like having shortcuts for all the percentages from 10% to 90%, as well as overshooting and anticipating.

I have all the basic tween percentages bound to ctrl-shift-number.  It’s easy to remember, for instance, that ctrl-shift-3 is 30%.  For overshooting 110% to 150% I use ctrl-alt-shift 1 through 5.  For anticipation –50% through –10% I use ctrl-alt-shift 6 through 0.

I created a few other autotween commands: “Auto tween one third”, which I bound to alt-shift-1, and “auto tween two thirds” which is bound to alt-shift-2.  Finally, I created one called “Auto tween match next keyframe”, which I bound to ctrl-shift-0 (that is, tween 100%).  That one just makes the selected items match their corresponding items in the next keyframe.

If you try to set up the same key combinations as mine you might wonder how I set up those “one third” and “two thirds” shortcuts, since Flash claims to not allow number shortcuts without the ctrl modifier.  Well, it turns out you can make non-ctrl shortcuts if you directly edit the file where the shortcuts are stored.  I’ll talk further about how to do that in a subsequent post.  In the mean time if you want to quickly set up shortcuts for these you can simply add the following lines to your shortcuts file:

  <shortcut name="anticipate 10%" flags="29" scope="1" key="48" />
  <shortcut name="anticipate 20%" flags="29" scope="1" key="57" />
  <shortcut name="anticipate 30%" flags="29" scope="1" key="56" />
  <shortcut name="anticipate 40%" flags="29" scope="1" key="55" />
  <shortcut name="anticipate 50%" flags="29" scope="1" key="54" />
  <shortcut name="overshoot 10%" flags="29" scope="1" key="49" />
  <shortcut name="overshoot 20%" flags="29" scope="1" key="50" />
  <shortcut name="overshoot 30%" flags="29" scope="1" key="51" />
  <shortcut name="overshoot 40%" flags="29" scope="1" key="52" />
  <shortcut name="overshoot 50%" flags="29" scope="1" key="53" />
  <shortcut name="auto tween 10%" flags="13" scope="1" key="49" />
  <shortcut name="auto tween 20%" flags="13" scope="1" key="50" />
  <shortcut name="auto tween 30%" flags="13" scope="1" key="51" />
  <shortcut name="auto tween 40%" flags="13" scope="1" key="52" />
  <shortcut name="auto tween 50%" flags="13" scope="1" key="53" />
  <shortcut name="auto tween 60%" flags="13" scope="1" key="54" />
  <shortcut name="auto tween 70%" flags="13" scope="1" key="55" />
  <shortcut name="auto tween 80%" flags="13" scope="1" key="56" />
  <shortcut name="auto tween 90%" flags="13" scope="1" key="57" />
  <shortcut name="auto tween one third" flags="21" scope="1" key="49" />
  <shortcut name="auto tween two thirds" flags="21" scope="1" key="50" />
  <shortcut name="auto tween match next frame" flags="13" scope="1" key="48" />

The directory where your keyboard shortcuts file is located depends on your operating system:

• Windows Vista & Windows 7:

  boot drive\Users\username\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Keyboard Shortcuts\

• Windows XP:

  boot drive\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Keyboard Shortcuts\

• Mac OS X:

  Macintosh HD/Users/username/Library/Application Support/Adobe/Flash CS4/language/Configuration/Keyboard Shortcuts\

Download It

You can get the full set of autotween commands by downloading and opening the file below.  It should open automatically in the Adobe Extension Manager.

autotween.mxp

In Closing

I hope the autotweener is as interesting to you as it is to me.  It revolutionized how I animate in Flash and I’d like others to have the opportunity to use it.  I hope the length of this blog post isn’t too intimidating to potential users.

If you have any questions please don’t hesitate to ask, either in the comments or via email.

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:

Customize the keyboard shortcuts.

I bring this up because when I was starting out I was hesitant to customize the keyboard shortcuts to my liking.  My theory was that someone made them the way they were for a reason, and I shouldn’t go messing with them before I even learn how to use them.  The theory doesn’t really end up panning out, though.

There are a couple things about keyboard shortcuts:

1. They’re massively useful and they’ll make you faster at whatever it is you do.
2. They’re useless if you don’t use them.

The first, I think, is obvious to anyone who’s ever memorized a keyboard shortcut in a program they use a lot.  It’s just faster to hit two or three keys on the keyboard than it is to find the thing you want to do in the menu system.  When you have the shortcut memorized and you consistently use it there comes a point when you don’t even have to think about it.  It’s like muscle memory – your fingers will do it automatically.

The second point is perhaps also self-evident.  If you don’t learn the keyboard shortcuts and/or you stubbornly refuse to use them, you’ll never build up that proficient speed that a pro needs when plying their trade.

There’s actually a third thing as well, which is that people are stubborn.  Sometimes it’s hard to motivate yourself to learn existing shortcuts.  I’ve met many people who, when I show them a different, more efficient way of doing a thing (such as using a keyboard shortcut), will shrug and say “eh, I like doing it my way.”  And that’s fine, but you just have to understand the consequences of that decision.

The solution?  As I said at the beginning, customize your keyboard shortcuts.  If you find yourself doing something often, assign a shortcut to it.  Choose something that’s logical to you.  Is that key combo already taken by some other function?  As long as it isn’t one you already use, who cares?  Steal it away.  Use it toward your own nefarious ends.  As I mentioned before, a shortcut is no good to you if you don’t use it.

The only downside to this strategy is that it can kind of mess up your environment for anyone who’s used to the default settings.  If you’re working on your own computer, though, it isn’t really a problem because other people will rarely (if ever) use your computer. Even if they do, it’s probably possible (as it is in Flash) to set up multiple sets of shortcuts so you can temporarily switch back to the defaults.

I originally made this film for UCLA’s Falling Lizard animation party in 2007.  Falling Lizard is a weekend-long event where everyone makes a complete animation based on a common theme.  It’s a fun, intense weekend of socializing and creating with very little sleep.

I went into Falling Lizard that year thinking: “I’m gonna make a film that can go in Spike and Mike’s Sick and Twisted Festival of Animation.”  I was also thinking of perhaps doing something based on a rhyme or song from my childhood.  I was basically coming up with some parameters to help guide my thoughts down a productive path.  It totally worked.

The theme that year was “The Thing in the Back of the Fridge” and I called on a memory of a playground rhyme I used to do with a friend:

Fried ham, fried ham, cheese and baloney

After the macaroni we’ll have some pickles and onions

And then we’ll have some more fried ham, fried ham, fried ham.

We would recite it once in a normal voice and then say “second verse, same as the first, Swedish style” or whatever we style we could think of.  I think over the course of about three recesses we got up to around 120 different styles.

Anyway, for Falling Lizard I took that rhyme, set a tempo, measured out how long each verse was, and started animating.  I came up with a few styles beyond the plain first one, culminating in a masterful and gross final act.  I animated the whole thing in pencil, inked with a brush pen, scanned it into a computer, vectorized and colored it in Toon Boom Studio, and finally put it all together in Flash.  I wrote music for in four parts for recorder – starting with tenor and adding in alto, soprano and sopranino on subsequent verses.  I used Weird Metronome to produce a simple drumbeat for it.

The film I produced that weekend was a less thoroughly animated version than the one you see here.  This is the one that I fleshed out and made more complete to use as my official UCLA computer film.  I had planed on doing Don’t Fear the Sitter as my computer film but it had become clear that I wouldn’t be able to finish it by the end of the school year.

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!

I discovered recently that the fine folks at Macromedia introduced a rather annoying bug into Flash 8. When copying from Flash 8 to (apparently) any other vector-based drawing program some or all of the control points are lost. The practical upshot is that copying from Flash into Illustrator is impossible. This is a major problem, since one of the tricks I use when animating in Flash is to copy an object into Illustrator and then apply an art brush to give it a nice variable-thickness line. If you watch Foster’s Home for Imaginary Friends closely you’ll see that we do that all the time. Virtually all the lines on the characters were done with art brushes. We also do it a little more overtly sometimes, even using a charater’s whole boy as a brush so we can really control them. You can see an example of this on the episode “Frankie My Dear,” which has a whole sequence where a tall pillar-like character is wobbling all over the place.

So what am I to do? I was kicking myself for having made the move to Flash 8 without fully testing my process in the new software. Then, on a whim, I looked at the “save as” dialog box. Oh! It turns out I can save my Flash 8 files back to Flash MX 2004 (the previous version) as long as I didn’t use any of the new features (which I didn’t on my turnarounds, the most important files when it comes to creating new scenes). So I’ve officially downgraded back to Flash MX 2004. That’s what we use at work anyway, so maybe this’ll provide more of a consistent experience for me.