Free - Dynamic Animation with Fuse Kit

At some point, most Flash developers get a project where you have to do motion animation in code instead of tweens in the timeline.  Video games, simulations or custom UI components are obvious places where code based animation may become necessary.  But animating with code can require a lot of lines of code.

The Tween class

When Macromedia made the v2 UI Components in Flash MX 2004, they included a class used in the component infrastructure called "Tween".  The Tween class allows you to change a property (such as _x, _y, _rotation, _alpha, etc.) of a MovieClip over time, with various built in easing effects.

There are a few problems with using the Tween class.  The first is that a single instance of a Tween class can only animate one property of a MovieClip.  So, if you want to adjust _x, _y, _rotation and _alpha, you need four Tween instances (one for each property).  The second draw back of Tween, is that there are a large number of parameters needed to create an instance, so it's a long line of code.  This compounds the first problem of needing to create multiple Tween instances, but making each instance a painfully long line of code.

The last major drawback with Tween is that if you don't manage it well and clear out completed or unnecessary Tweens, you can end up in a situation where Tweens just keep on animating uncontrollably, similar to having a setInterval call run off on you when you don't clear the interval religiously.

Fuse Kit

An open-source alternative to the Tween class called Fuse Kit, written by Moses Gunesch, combines a number of previous people's work into a single and very powerful ActionScript Animation kit.  It's a kit because you can choose which assets you want to use and only those assets will be compiled into the SWF.  So if you are only going to use limited assets in the Fuse Kit, you can choose to create very light SWFs.  But if you are going to use some of the higher-end features, you'll end up with a larger SWF file, but you'll have some great code based animations.

We'll take a look at each of the classes that make up Fuse Kit and how you can use them to create some very robust code driven animation.

ZigoEngine

The ZigoEngine goes far back before Fuse Kit.  Fuse Kit is actually new next version of the ZigoEngine.  Prior to Fuse Kit, you could use the ZigoEngine to alter the pototype of MovieClips to include some additional methods specific to animation (slideTo, alphaTo, etc.).

I'm not going to get too into the prototype methods, but because Fuse Kit builds off of the ZigoEngine, it is still an option to create animations using these prototype methods alone.  For example, my source code package, Example01.fla contains a single MovieClip called Ball and the following ActionScript code on the root timeline.

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup(Shortcuts);
ball.slideTo(Stage.width/2, Stage.height/2, 1);

<embed example01.swf>

These few lines of code imports the entire fuse package (including the ZigoEngine).  It sets up the ZigoEngine to extend the MovieClip prototype to include the hold animation shortcuts.  We can then use the new slideTo method of the ball MovieClip to slide it to the center of the stage from it's current position in one second.

The ZigoEngine shortcuts are well documented in the Fuse Kit documentation, but since we don't really use these when using the rest of Fuse Kit, I'm going to leave that for your discovery and get into examples that show why Fuse Kit is a huge advance over the older ZigoEngine shortcuts.

Fuse

The ZigoEngine prototype shortcuts are kind of the old school ways of using the ZigoEngine.  The new school and amazingly powerful way is with Fuse.  They describe Fuse as a sequencer.  Like an audio sequencer that plays one sound loop, then when that sound is over, it plays the next one in order, kind of like an array of sound loops.  Well, Fuse does the same thing with animations.  You set up an animation object (which is just a normal Object litteral that we use all the time in Flash) to describe a particular animation, and then you add it onto the Fuse stack, which is just like pushing an object into an Array.

Our second example (Example02.fla) shows how to do the same thing we did in the previous example, but with a Fuse instead of the ZigoEngine shortcuts.  Same structure in the FLA, but this time around, our code looks like this:

import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse);
var f:Fuse = new Fuse();
f.push({target:ball, x:Stage.width/2, y:Stage.height/2, seconds:1});
f.start();

<embed Example02.swf>

You may be saying, "but this does the same thing and it's almost twice the lines of code!"  And, you'd be correct.  But this is just the beginning.  We're going to walk with Fuse before we run.  Let's take a look at the code we have now and see what it does.

The first line imports the fuse classes, just like before.

The second line initializes the ZigoEngine a little differently before.  Rather than simpleSetup, we just want to register the Fuse class with the Zigo engine.  This tells the ZigoEngine that we're going to be using a Fuse and it also uses the Fuse class so Flash will compile the Fuse class into our swf.

The third line creates an instance of a Fuse.

Now that we have a Fuse called "f", it works a lot like an Array.  It has a push method where we can push an animation object onto the fuse stack.  The animation object is just a set of name value pairs that describe a particular animation.  In this case, our object declares that the target of the animation is our ball.  It should move it's _x attribute to the middle of the stage, as is the case with the _y.  And it should do the animation over a period of one second.

Finally, we have to call the start method of the Fuse instance.  I forget to do this all the time.  I forgot to do this when writing the code above.  So, if you ever configure your Fuse and nothing happens, the first thing to check is that you remembered to call the start method to light the fuse and get the animation started.