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.

Complex Fuse Animation

The reason for using Fuse instead of the ZigoEngine shortcuts is that you can stack animations into a fuse to create really complex sequences of animations.  By pushing multiple animation objects into a fuse before starting it, you can set up huge animation sequences will occur in order based on the order you push them into the Fuse.

For example, let's take the exact same code, but add a few extra animation objects onto the fuse to make the ball walk around the stage (Example03.fla):

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

<embed Example03.swf>

FuseFMP

FuseFMP is Fuse Filter Management Prototype.  It allows you to very easily set and animate Flash 8 filters just as you would animate other properties of a MovieClip.  You wouldn't use these all the time, because Flash MovieClip filters can be very resource intensive, but when you need to animate filters in a very simple way in code, FuseFMP is definitely the way to go.

FuseFMP is both a nice way of writing Flash 8 filters and a great way of animating them.  Let's start with a simple example of how to set up FuseFMP and using FuseFMP to create a static filter on our ball.  Example04.fla has the following code:

import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse, FuseFMP);
FuseFMP.writeFilter(ball, "Blur", {blurX:20, blurY:20, quality:3});
var f:Fuse = new Fuse();
f.push({target:ball, x:Stage.width/2, y:Stage.height/2, seconds:1});
f.start();

<embed Example04.swf>

The code in Example04 is almost identical to Example02 except for lines 2 and 3.

In line 2, we register FuseFMP as well as Fuse with the ZigoEngine.  This declares that we're going to use FuseFMP and will cause the FuseFMP resources to be included in our swf.

Line 3 is where we create a BlurFilter.  This is just like creating a BlurFilter in Flash, but we can create it and apply it in just one line of code with FuseFMP, which makes it a good choice even if we didn't intend to animate the filter.

Complex Animated FuseFMP

We're going to wrap up by animating a filter and building off of Example03.  We want our BlurFilter to blur in the upper left and bottom right parts of the animation, but we want the ball to be in full focus in the top right and bottom left of the stage.  We're going to add a simple Blur_blurX and Blur_blurY property to our sequence of animation objects and FuseFMP will handle the rest for us.

In Example05.fla, you'll find the following code:

import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse, FuseFMP);
FuseFMP.writeFilter(ball, "Blur", {blurX:20, blurY:20, quality:3});
var f:Fuse = new Fuse();
f.push({target:ball, x:ball._width/2, y:ball._height/2, seconds:1});
f.push({target:ball, Blur_blurX:0, Blur_blurY:0, x:Stage.width - (ball._width/2), y:ball._height/2, seconds:1});
f.push({target:ball, Blur_blurX:20, Blur_blurY:20,  x:Stage.width - (ball._width/2), y:Stage.height - (ball._height/2), seconds:1});
f.push({target:ball, Blur_blurX:0, Blur_blurY:0,  x:ball._width/2, y:Stage.height - (ball._height/2), seconds:1});
f.push({target:ball, Blur_blurX:20, Blur_blurY:20,  x:ball._width/2, y:ball._height/2, seconds:1});
f.start();

<embed Example05.swf>

You'll see in the animation objects, we've added Blur_blurX and Blur_blurY properties.  FuseFMP handles the tweens for the filter animation based on these values.  It automatically calculates the in between blur values and updates the MovieClip filter appropriately.