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

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

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)

For convenience, here’s the download link again:

Art Brush installer

This tool is a JSFL command that will take the currently selected symbol from your document’s library and map it onto the currently selected path on the stage.  This means you can now create complex designs and apply them as brush strokes in your Flash files.  There are a few considerations, though, when using this too.  If you aren’t  very keen on reading, skip ahead to the video, where I cover most of these things in glorious color:

• The symbol you use as a brush must contain only raw shape data.  Anything other than raw shapes, or anything at all that appears in a frame other than the first one on the top layer, will be ignored when applying the brush stroke.
• At the moment there’s no way to control the direction in which the brush is applied.  Flash is weird about how it orders its edges, so you may end up having to have two brushes for each type of stroke you want – one in one direction and a second in the other.  This is pretty easy to do by just duplicating a symbol and rotating its contents 180 degrees.  Just make sure when you do that that you deselect the symbol’s contents when you’re done.  Another of Flash’s idiosyncrasies is that it doesn’t really finalize the new position of a shape after a rotation until you deselect it.  So if you forget to deselect it the art brush tool won’t even realize that the rotation took place.
• In your brush symbol you can use any colors, transparencies, stroke styles, etc, but beware of using bitmap and gradient fills.  The fill’s transform will be reset when applied as an art brush, so it may not end up looking like you had intended.
• When creating a new symbol to use as an art brush, remember that the brush will be applied as if the stroke is horizontal through the middle.
• The art brush command doesn’t create any new vertices.  This means that some symbols with few vertices won’t work well when applied to complex paths.  The easy fix for this is to use my other new tool, Add Vertices, to increase the vertex count in your brush symbol.  This will make it follow the path more faithfully.
• If your brush symbol has a large height (that is, the width of the brush stroke) and you apply it to a tight curve, there’s a good chance that it’ll overlap itself, causing some negative space.  There isn’t really anything I can reasonably do about it programmatically, so you’ll just have to be careful in how you apply your wide brushes.
• The art that’s applied when you run the Art Brush tool is created inside a group, making it easy to select with a single click, delete, move, etc.  The path that you applied it to still exists, ungrouped, but the tool cranks its alpha down to zero, effectively making it invisible.
• Due to how the way Flash allows creation of shapes through Javascript I had to make all empty, enclosed spaces in the brush strokes be created as filled and transparent.
• Unfortunately the Art Brush tool only works in Flash CS4 or later.

And here’s a video explaining the tool and giving a few pointers on using it:

As a final bonus, I’m also releasing a tool that I made on the way to creating the art brush tool.  It takes the currently selected symbol and places it periodically along the selected path.  Something like this:

Without further ado, below are the tools for your downloading pleasure.  If you download the Art Brush tool I’d strongly suggest you also get the Add Vertices tool to help whip uncooperative brush symbols into shape:

Art Brush installer

Add Vertices installer

Distribute Symbol Along Path installer

If you have any questions or comments I would love to hear them.  If you have any trouble with the tools I would like to hear about that too.  There may still be bugs remaining and I want to squash them as soon as I can.

Update April 7th 2010

I’ve modified the Art Brush tool so that you no longer need to worry about whether there are enough vertices in the brush symbol.  Add Vertices is now no longer necessary (though I’m leaving it up, since people may find another use for it still).

Update October 2nd 2010

I’ve released yet another version of the art brush, New and Improved™.  Check out my new post for more info on what’s changed:

New and Improved Art Brush – Now With Backward Compatibility™

That’s a big reason why I started creating Flash extensions — to fill in the gaps that the Flash development teem is either unaware of or is unwilling to address.  Well, a short time ago I realized that I could probably create a tool to perform one of my all-time wished-for features: art brushes.  Illustrator’s had them for a long time.  They’re very useful in there, and they would be similarly useful in Flash.

After about a week and a half of work, I’ve attained success!  My art brush experiment has blossomed into an actual usable tool!  It turned out significantly better than I had hoped, with fairly quick runtime (even before I’ve done any optimization) and very good visual results.  It’s not quite ready to post for the general public but I’m interested in getting people to test it a bit and give me feedback — Tell me what new features it needs and let me know if you run into any bugs.  If you’re interested, please let me know either in the comments or via email.

To give you a tantalizing taste of the possibilities, here are some actual examples of what my new Flash art brush tool can do:

Curious yet?  The tool that I’m working on will map arbitrary art onto an arbitrary path.  That means you can create “art brush” symbols and then apply them to any path and have the brush bend itself to follow the path.  For instance, if you’re animating a tiger with a wagging tail, you’d just animate a line, then apply your tiger tail art to your lines.  Boom, you’ve got a wagging, serpentine tiger tail.

I haven’t got the tool finished yet but I thought I’d put up an image to illustrate what I’m talking about.  The image below is from the Art Inspires blog (see the original post here).  It’s a screen capture from Adobe Illustrator, which has had this feature for a long time.  I’m kind of skeptical that I can make my art brushes look as good as Illustrator’s, and it will certainly be slower (since it’s written in Javascript), but either way it’s going to be awesome.  Seriously, this is sharks with frickin’ lasers territory.

Several graphics programs, particularly ones that deal with animation, have a feature where you can rotate the canvas to an arbitrary angle, in the same manner as an animation disc.  It’s very useful when you can’t get quite the right curve to a line unless your drawing is positioned at a good angle.  Unfortunately, Flash won’t do that.

So, I thought, could I do it manually?  The answer I came up with was: sort of.  Basically, I figured out a way to fake it.  It’s not perfect, though.

I implemented the functionality as a tool (accessed through the tools palette).  You use it similarly to the hand tool — click and drag to rotate all the elements on the main timeline (including any symbol you’re editing-in-place).

It works pretty well so far but the problem is that repeated rotation introduces more and more error in the transform matrix for each symbol, particularly the position.  It’s not a lot but it’s easily enough to be annoying if you’re doing precision positioning.

The other problem is that each time you use the tool it adds a bunch of entries to the history panel, meaning that to undo it you have to hit ctrl-Z like 20 or 30 times.  Not only that but any raw shapes you’re working on don’t correctly undo — they completely disappear when you undo back to before you used the rotation tool!  It’s clearly a bug with Flash’s undo system.  What I really wish, though, is that I could just tell Flash to treat each use of the tool as a single undo level — that’s how it treats commands in the Commands menu.  Does anyone know if there’s a way to do that?

What do you think?  Is this tool worth the negatives?  I think I can come up with a fix for the loss of precision but the undo thing is a big pain.

1. Kung Fu Panda World went live.  I’ve been working on this virtual world since January of Last year and it’s very satisfying to see it “ship”.  This is also the first game I’ve shipped as an animator.  Long ago I was a software engineer and I shipped one game while I worked at Treyarch Studios.  Maybe you haven’t heard of it?
2. I got a number of positive responses regarding the autotweener, including several people who seemed to be suggesting that I could make money with that kind of thing.  Hmmm, it’s an interesting thought.
3. I and two other animators, in the course of a few days, were thinking about the same “if only Flash had this feature” idea.  The two other people brought it up with me and it got me thinking: why couldn’t I program something that does that?  So I’m doing it.  Coming soon to a blog near you: an animation-disc-esque rotatable stage in Flash.  Well, sort of.  It’ll be a bit of a workaround but it should work very similarly to the rotatable canvasses in Toon Boom Studio and TV Paint.  Under normal usage you’ll probably have to remember to run a “reset” command at the end to make sure everything goes back to normal, unless you’re using a virtual camera, in which case you won’t even have to do that.  Speaking of which: Coming soon to a blog near you: my personal take on the virtual camera, which will flawlessly save your movie (including actionscript) as a PNG sequence that you can use in any video editing program.
4. Since we “finished” KFPW my workload has been much lighter and deadlines much looser.  When I told my animation director that I could make a tool that would rotate the stage he gave me the go-ahead to do it.  Making tools for Flash is really fun for me, so it made me happy to be able to do a little programming for a change.
5. Tomorrow’s payday (cha-ching).
6. I’m seriously considering getting a smartphone.  I bristle at the thought of having to pay $30 per month for data but I think maybe the idea is starting to win me over.  That, or buy an unlocked phone (Nexus One!) and don’t have any data plan at all.  I’m with AT&T, and it seems that even when the phone is unsubsidized I have no choice but to get the $30 data plan if I want any mobile internet at all

Finally, I just want to comment on something that struck me as I did some animation on Don’t Fear the Sitter tonight.  Keyframes are hard.  Breakdowns are easier.  Tweens are easy.  These may seem obvious, but it really amazes me sometimes how I can spend a long time doing key poses for a character and then the rest of it just zips by.  In no time I go from just-a-suggestion-of-motion to damn-that-character’s-a-movin’.

I love it.

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.