Pink & Ain't

For the folks who aren’t Flash animators but would like to see a little bit of my process when animating, skip down and watch the movie that I link to below.  Starting at around 4 minutes in you can see an example of how I animate one of my characters in a simple motion.

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 driveUsersusernameLocal SettingsApplication DataAdobeFlash CS4languageConfigurationKeyboard Shortcuts

• Windows XP:

  boot driveDocuments and SettingsusernameLocal SettingsApplication DataAdobeFlash CS4languageConfigurationKeyboard 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.