Pink and Ain't » JSFL http://blog.pinkandaint.com Animation, Flash, and other nerdy ramblings Mon, 28 Nov 2011 08:44:30 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Art Brushes Are Within My Grasp http://blog.pinkandaint.com/art-brushes-are-within-my-grasp/ http://blog.pinkandaint.com/art-brushes-are-within-my-grasp/#comments Mon, 29 Mar 2010 18:07:32 +0000 David http://blog.pinkandaint.com/?p=121 Oh my goodness, I’m so close. You don’t even understand. For the last week or so I’ve been using all the spare time I could find to work on a new Flash command. It’s so complex that the source file is now more than 1000 lines. To put this in perspective, I’ve never seen any jsfl command that comes even close to this length, apart from my own autotweener. To put this further in perspective, this tool will do something that Flash has never been able to do, and for which I and many of my Flash animator friends have been clamoring as long as any of us has been using Flash.

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.

]]> http://blog.pinkandaint.com/art-brushes-are-within-my-grasp/feed/ 1 Virtual animation disc http://blog.pinkandaint.com/virtual-animation-disc/ http://blog.pinkandaint.com/virtual-animation-disc/#comments Mon, 22 Mar 2010 22:23:08 +0000 David http://blog.pinkandaint.com/?p=119 I mentioned in my last post that I was working on a new Flash command that several people had requested, and that I’d like to have myself.  It feels good to be able to help people out with stuff like this, particularly when it also helps me :)   Anyway, I thought I’d talk about it a little.

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.

]]> http://blog.pinkandaint.com/virtual-animation-disc/feed/ 0 Flash JSFL Commands: The Autotweener http://blog.pinkandaint.com/flash-jsfl-commands-the-autotweener/ http://blog.pinkandaint.com/flash-jsfl-commands-the-autotweener/#comments Wed, 17 Mar 2010 06:40:59 +0000 David http://blog.pinkandaint.com/flash-jsfl-commands-the-autotweener/ 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 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.

]]> http://blog.pinkandaint.com/flash-jsfl-commands-the-autotweener/feed/ 3 My JSFL Commands http://blog.pinkandaint.com/my-jsfl-commands/ http://blog.pinkandaint.com/my-jsfl-commands/#comments Mon, 01 Mar 2010 04:22:08 +0000 David http://blog.pinkandaint.com/my-jsfl-commands/ So I’ve noticed a couple things.  First, most people who use Flash are either animators or programmers, but rarely both.  There are lots of animators who dabble in programming and lots of programmers who dabble in animation, but in my experience you’re likely to have much more passion about one than the other, leading to having much more skill and experience in that one as well.

The reason I mention this is that occasionally I think about how few people there are who produce decent JSFL commands.  I think it’s because the people who are really interested in Flash commands are the animators – particularly the professionals, who work in Flash every day.  It’s certainly true for me: I animate in Flash for 45 to 50 hours a week, and I frequently think of things that I wish Flash could do.  Earlier in my career, before I Knew the Way of the JSFL, I would just grumble to myself and go on working around that lack-of-feature or bug.  Unfortunately I think that’s what most Flash animators do, many of them not even being aware of the purpose of the Commands menu.

Eventually I discovered the Flash History Panel and that soon catapulted me into dissecting the scripts it could produce.  I used to be a software engineer, and I still enjoy programming sometimes in my free time, so I got pretty involved in this new pursuit.  At this point I’ve written more than 120 different Flash commands, making for a somewhat unwieldy Commands menu.  (If only Adobe would make subfolders work correctly in the commands menu!)

I’ve shared my Flash commands with my fellow animators at work and they really seem to appreciate them.  I really like it when I can share the things I make, particularly if others find them useful or valuable in some way.  Part of the reason I started this blog was to share my tools.  I’m still figuring out how exactly I’ll do that, though.  I’m debating trying to sell at least some of them, but I’m also tempted to give them away for the Betterment of Mankind.

Anyway, for now I’m going to put up a list of the commands in my commands folder.  I hope to get to most of them eventually, posting the command packaged in an installer and with a short video illustrating some ways to use it.

Note that some of the commands in the list below are ones that I downloaded from other web sites, written by someone else.  Some of them are ones that started like that but I’ve modified to one extent or another.  Most of them, though, I wrote myself from scratch.

anticipate 10%.jsfl
anticipate 20%.jsfl
anticipate 30%.jsfl
anticipate 40%.jsfl
anticipate 50%.jsfl
auto tween 10%.jsfl
auto tween 20%.jsfl
auto tween 30%.jsfl
auto tween 40%.jsfl
auto tween 50%.jsfl
auto tween 60%.jsfl
auto tween 70%.jsfl
auto tween 80%.jsfl
auto tween 90%.jsfl
auto tween match next frame.jsfl
auto tween one third.jsfl
auto tween two thirds.jsfl
auto tween.include
blink.jsfl
Change to Graphic Symbol.jsfl
COLOR – match Fill to Stroke.jsfl
COLOR – match Stroke to Fill.jsfl
Copy First Pivot Point.jsfl
Copy Font Name for ActionScript.jsfl
Copy Last Pivot Point.jsfl
Copy Motion as XML.jsfl
create symbol scale reference.jsfl
Delete all raw shapes.jsfl
distribute to frames.jsfl
duplicate and edit.jsfl
ease in 100%.jsfl
Ease in and out.jsfl
ease out 100%.jsfl
Export Motion XML.jsfl
Find And Replace.jsfl
FindAndReplace.xml
frameEdit.jsfl
Import Motion XML.jsfl
Instance Namer 2.0.jsfl
invert selection.jsfl
layer colors blue and red.jsfl
Layer Split Simple 2.0.jsfl
Library Items Renamer.jsfl
Library Items Renamer.xml
Merge Layers.jsfl
motion tween (no sync).jsfl
move and set keyframes but keep same selection.zip
move miniscule down.jsfl
move miniscule left.jsfl
move miniscule right.jsfl
move miniscule up.jsfl
Movie Clip Zapper.jsfl
Multi Swap.jsfl
Multiframe Distribute.jsfl
names.xml
overshoot 10%.jsfl
overshoot 20%.jsfl
overshoot 30%.jsfl
overshoot 40%.jsfl
overshoot 50%.jsfl
reflect local across x.jsfl
reflect local across y.jsfl
remove ease.jsfl
rename and edit.jsfl
Render directory to SWF.jsfl
Reset Pivot Point.jsfl
Reset rotation.jsfl
Reset scale.jsfl
Reset to reference symbol.jsfl
same object frame dec.jsfl
same object frame inc.jsfl
same object keyframe dec.jsfl
same object keyframe inc.jsfl
Select Symbol Instances.jsfl
set fr 0.jsfl
set fr 1.jsfl
set fr 2.jsfl
set fr 3.jsfl
set fr 4.jsfl
set fr 5.jsfl
set fr 6.jsfl
set fr 7.jsfl
set fr 8.jsfl
set fr 9.jsfl
set fr down.jsfl
set fr up.jsfl
set frame.include
Set Import Source.jsfl
Set Import Source.xml
Set Instance Names and make heads MovieClips.jsfl
set keyframe with same selection.jsfl
shape data test.jsfl
Shape Tween Finder.jsfl
Silhouette all.jsfl
smooth.jsfl
static set fr 0.jsfl
static set fr 1.jsfl
static set fr 2.jsfl
static set fr 3.jsfl
static set fr 4.jsfl
static set fr 5.jsfl
static set fr 6.jsfl
static set fr 7.jsfl
static set fr 8.jsfl
static set fr 9.jsfl
Sync Pivots Backwards.jsfl
Sync Pivots Forward.jsfl
sync symbols.jsfl
Toggle head graphic symbol.jsfl
toggle motion tween (no sync).jsfl
toggle shape tween.jsfl
toggleGuide.jsfl
transform each v1.1.zip
Transform Each.jsfl
Transform Each.xml
transform each.zip
turn off sync.jsfl
Tween on 2′s.jsfl
ungroup all.jsfl
Vertex Counter.jsfl
Zero Transform as is.jsfl
Zero Transform at scale.jsfl
Zero Transform at scale.xml
Zero Transform.include
zoom in.jsfl
zoom out.jsfl

]]> http://blog.pinkandaint.com/my-jsfl-commands/feed/ 5