Classes
Introduction to ActionScript Animation
Timeline animations are the traditional way of creating motion in Flash, but the limitations in working with the timeline become clear when looking for more complex motion or when attempting to manage large Flash projects.
Programmer Robert Penner recognized a need for easily animating MovieClips with code and proceeded to convert motion formulas used in the Java programming language into Actionscript. He offered the formulas for free on his site, and documented how they worked in his book, Robert Penner’s Programming Macromedia Flash MX (2002).
Since then, several Flash developers have released their own code libraries based on Penner’s work. For a list I've compiled check out my ActionScript Tween Library List.
Fuse Kit + ZigoEngine
This tutorial focuses on Fuse Kit, an Actionscript-based animation library that has emerged as the industry standard and is used by many of the top interactive agencies. Fuse Kit several parts, but the two most used that we will focus on are:
ZigoEngine – a motion engine that handles the code-based animating
Fuse - an event sequencer that extends array. Basically, Fuse allows you to tell your Flash movie to perform several animations in a particular order step-by-step.
Fuse Kit was written and is currently maintained by Moses Gunesch, and is available for free under an MIT license on his site, http://www.mosessupposes.com
Here's the complete docs on Fuse Kit.
Getting Started with ZigoEngine
You can set up ZigoEngine in two different ways: shortcuts or advanced. With shortcuts, you would call ZigoEngine similar to calling a method of the MovieClip—by typing my_mc.gotoAndPlay() or my_mc.stop(), etc. Using ZigoEngine, a typical call would look like my_mc.tween();
For this exercise, we will be skipping the shortcuts and using the syntax of more advanced coders, which means we’ll call a method of ZigoEngine and pass the MovieClip we want to animate in as an argument. If you would prefer to use shortcuts, consult the help files.
First, download the kit and install the MXP. Once you have done this,
- Create a new Flash file.
- Create an actions layer, and in it type:
import com.mosesSupposes.fuse.*;
ZigoEngine.register(PennerEasing);
So what’s this do? Line 1 tells your Flash movie to import the Actionscript files needed to perform the animating (these Actionscript files were installed in what’s called a package, or particular folder structure, and placed in your Flash application folder).
Line 2 basically starts up the ZigoEngine and tells it that you intend to use Robert Penner’s easing equations (we’ll explore this in more depth shortly).
Creating a ZigoEngine Tween
Now you’re ready to animate! Create a square on the Stage and name it square1_mc in the instance properties panel. Now that your MovieClip has a name, we have a way to reference it in our Actionscript code. Add this on line 3 of your actions layer:
ZigoEngine.doTween(square1_mc, "_x", 300, 1, "easeOutSine");
Test your movie. You should see your square move to the left. Let’s look at what’s going on here.
By calling doTween, we’re telling ZigoEngine to perform a tween, or animation. Within the parentheses we’re telling ZigoEngine the details of our animation: which MovieClip or Object we want to animate, which property(s) of the target we want to animate, how long the animation should occur, how we want it to animate (or which Penner equation to use), optionally saying how long of a delay before calling the tween, and what function we want to call once the animation has completed.
If you're curious about all of the different ease types available, here's a list of FuseKit PennerEasing types.
Animating Two Properties at Once
Say you wanted to move the square’s x-position to 300 as it’s fading out. You could do:
ZigoEngine.doTween(square1_mc, "_x", 300, 0.5, "easeOutSine");
ZigoEngine.doTween(square1_mc, "_alpha", 0, 1, "easeOutSine");
While the above code works, here’s a shorter way:
ZigoEngine.doTween(square1_mc, "_alpha, _x", [0, 300], 1, "easeOutSine");
You can create a comma delimited list of properties and place their corresponding values into a comma-delimited list [ ].
Delaying an Animation
Along with animating, you can also create delays in your animations. Say you wanted to delay the animation so that your square moved to the left and then faded out. You simply add another value after ease type:
ZigoEngine.doTween(square1_mc, "_x", 300, 0.5, "easeOutSine");
ZigoEngine.doTween(square1_mc, "_alpha", 0, 1, "easeOutSine", 2.5);
In this case, both tweens start at the same time, however, the second tween changing the _alpha property is told to wait 2.5 seconds before activating.
Using a CallBack
You’ll notice that the doTween() method also has an argument named callback. A callback is a function we want to perform once the tweening has completed. In this example, I’ve set the delay to 0 and told the doTween() method that I want the function sayHello() to be called when tweening completes:
ZigoEngine.doTween(square1_mc, "_x", 300, 0.5, "easeOutSine", 0, sayHello);
function sayHello():Void{
my_txt.text = "callback has been activated";
}
Animating with a Bitmap Filter with ZigoEngine
In addition to the standard properties of MovieClips, you can use ZigoEngine to animate with the Bitmap Filters introduced in Flash 8. Here’s some sample code to create a blur:
FuseFMP.writeFilter(square1_mc, "Blur", { blur:0 });
ZigoEngine.doTween(square1_mc, "Blur_blurX, Blur_blurY", [32, 32], 4, "easeOutExpo");
FuseFMP is a tool built into the Fuse Kit. The call ZigoEngine.register() starts up FuseFMP, so we don’t need to do anything else to install it.
We start off by creating a filter using FuseFMP.writeFilter(). We then tell it:
the target : square1_mc
the filter we wish to use: “Blur”
and finally, the amount of blur to start with, which in this case is 0.
When we call the tween, we’re actually setting two properties to 32—the Blur_blurX and the Blur_blurY
Further Resources
This exercise only covers the tip of the iceberg; for more resources, check out the official Fuse Kit site.