Now that you’re familiar with ZigoEngine, let’s take a look at how Fuse expands upon this. Fuse is really a sequencer that goes through an array (or list) and performs timed method calls or events. When used in conjunction with ZigoEngine, it can create sequential animations.
For the purposes of this exercise, we will focus primarily on how Fuse can be used for animation.
Keep in mind that part of using this kit is to know when to use what; Fuse shouldn’t be used for simple or short animations when ZigoEngine will suffice. That being said, let’s get started.
With square1_mc on the Stage, add this code to your actions layer:
import com.mosesSupposes.fuse.*;
ZigoEngine.register(PennerEasing);
var myFuse:Fuse = new Fuse();
myFuse.push({target:square1_mc, _x:300, ease:"easeOutElastic"});
myFuse.push({target:square1_mc, _xscale:200, delay:0.5, ease:"easeInQuad"});
myFuse.push({target:square1_mc, _y:120, ease:"easeOutCubic"});
myFuse.start();
When you publish your movie, you should see your square1_mc perform 3 animations one-at-a-time. Let’s analyze the code here:
import com.mosesSupposes.fuse.*;
ZigoEngine.register(PennerEasing);
This imports the code needed for Fuse and ZigoEngine. The second line tells ZigoEngine that we will be using Penner’s easing equations (which you downloaded as part of the Fuse Kit).
var myFuse:Fuse = new Fuse();
Here, we’re creating a new Fuse instance; this should look similar to how you create a variable in AS2.0 and AS3.0.
myFuse.push({target:square1_mc, _x:300, ease:"easeOutElastic"});
myFuse.push({target:square1_mc, _xscale:200, delay:0.5, ease:"easeInQuad"});
myFuse.push({target:square1_mc, _y:120, ease:"easeOutCubic"});
Here’s the heart of the code. Since Fuse technically extends off of Flash’s built-in Array object, push() does the same thing—it adds to the Array. In Fuse’s case, we’re pushing Objects into the list. We define objects by placing them into { }. We’re setting the target, or object we want to tween, as square1_mc in each case. Following that, we set new target properties by using a syntax of:
Property : value
So long as the properties are comma delimited within the { }, it doesn’t really matter what order they are in. For readability’s sake, though, I recommend using an order.
Fuse then takes all of these push commands and adds them to the list in-order. The last thing we need to do is to tell the Fuse to start:
myFuse.start();
Once the fuse starts, every object in the list is called in order, and nothing starts until the last object has completed.
Sometimes, you need to call a function in the order instead of just an animation. To do that, first we’ll add a function in the code. In your actionscript layer, add:
function sayHello(str:String):Void{
my_txt.text = str;
}
On the Stage, add a dynamic text field with the instance name of my_txt. Lastly, we’ll add something to the Fuse list to tell it to call sayHello(). On the line before calling myFuse.start(), add:
myFuse.push({scope:this, func:"sayHello", args:"Hello!"});
Now, when you test your Flash movie, the square1_mc should perform 3 animations, and then display “Hello” within the text field. In this particular Fuse object, we are setting three properties:
scope: this tells Fuse who’s method it’s calling. Since it’s technically the _root since the method is on the _root timeline, we’re setting it to this.
func: this is the name of the function we’re calling.
args: this is an item or an array of items (multiple arguments can be held in [ ] ) that we pass into the function.
Animating Bitmap Filters with Fuse is similar to animating with other MovieClip properties, except that the filter needs to be initiated itself. In this example, we're calling the DropShadow filter:
FuseFMP.writeFilter(square1_mc, "DropShadow", { blurX:0, blurY:0 });
Here's what the Fuse calls look like:
var myFuse:Fuse = new Fuse();
myFuse.push({target:square1_mc, DropShadow_distance:10, ease:"easeOutBounce"});
myFuse.push({target:square1_mc, DropShadow_blurX:30, DropShadow_blurY:30, ease:"easeOutBounce"});
myFuse.start();
Instead of the usual MovieClip properties, here we're tweening the properties of the DropShadow filter.
This exercise only covers the tip of the iceberg; for more resources, check out the official Fuse Kit site.