Filed under Flash

Flash Extensions: Frame Navigation

It can be frustrating moving around in Flash.  Whenever you move to a new keyframe you almost always lose the selection you had previously.  I’ve made some commands to help avoid this problem.

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

Flash Panel Extension: Autosaver

Every time a new version of Flash is released I get excited and hopeful. On each new version, though, the excitement and hope is less and less. Adobe just never seems to address areas that I think need addressing.  Sometimes they even make things worse, such as in the transition from CS4 to CS5. CS5 and CS5.5 have this problem with a delay in updating the stage after executing a JSFL command.  It makes several of my commands much less useful, and I wasn’t ever able to figure out a workaround.  It impacts my workflow so much that I still don’t use Flash CS5 if I don’t have to.

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:

image

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

Flash JSFL Commands: Fun with Transforms

Usually, the tools that Flash provides natively are sufficient for dealing with transforms (the details of a symbol’s position, rotation, skew, and scale).  Sometimes, though, you need a little more.  I’m going to introduce two tools today that provide more flexibility in resetting symbols back to their default transform.

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.

download_iconReset 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.

download_iconZero Transform installer

Dynamic Mask Symbol

If you’ve done any significant amount of animation in Flash then you’ve probably run into this problem. You want to give a symbol partial alpha, but that ends up giving you a big mess where each individual sub-symbol is alpha’d down, rather than just the symbol you’re actually working with. Blech!

image

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:

 

image

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)

New and Improved Art Brush – Now With Backward Compatibility™

I’ve been meaning to do this for a long time.  I finally got around to finishing off some changes to the art brush tool and now I’m ready to put them up.

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.

image

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)