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.

Installing Fuse Kit

To start with, you'll need to download the latest version of Fuse Kit (currently version 2.0 as of this writing) at http://www.mosessupposes.com/Fuse/. 

If you unzip the Fuse Kit source package, you'll find a folder called something similar to fuse1.1z3.  Inside that folder, you'll find the code of the Fuse Kit.  Inside this folder, you should see three more folders, "com", "examples" and "fuse2.0docs" and an MXP file called Fuse2.0.mxp.  If you double click to execute the MXP file, Macromedia's Extension Manager should open up and install the Zigo prototypes that Fuse Kit uses.

Next, we need to copy the com folder (which contains the ActionScript 2.0 classes that make up Fuse Kit) to a folder where we can make them available to Flash.  If you already have a folder set up where you keep class libraies and have a classpath set up, copy this com folder to that location and skip past the next section.  If you haven't set up a common library folder, we're going to do that now.

Common Library Folder and Classpath

It's good to have a place where you can save ActionScript class files in a single place and use them in all of your projects as needed without having to copy the whole class structure into the working folder of any particular project.  You can make this folder anywhere you like (your Desktop, right in the root of your C drive, etc.).  I keep mine in a subfolder of My Documents.  My ActionScript 2.0 classes are kept in MyDocuments\Flash 8\ActionScript.  Of you want to create a similar file structure, copy the com folder and all of its contents to this location.

Now, we need to set this location as a classpath in Flash.  Adding a class path just tells the Flash compiler to look in this location for imported classes when compiling any SWF.  This way you can import Fuse Kit classes at will with FLAs located anywhere on your computer.

To set the classpath, open Flash.  Now, go to Edit > Preferences... > ActionScript from the drop down menu.  Then click on the button that says ActionScript 2.0 Settings.... In the window that will open up, you can click on the plus (+) button to add a new classpath, you can then click on the button that looks like a gun site with cross hairs to browse to the folder you created.  You'll want to add the folder that contains the com foler. Be sure the class path does not actually include the com folder itself, but rather the folder containing the com folder.

First Look at Fuse Kit

Let's get started with a quick example of how easy animating with Fuse Kit is.

As I mentioned early, Fuse Kit is made up of a number of different classes with specific uses.  The three main ones we're going to look at are the ZigoEngine, Fuse and FuseFMP.