Using ActionScript
ActionScripting motion with Flash is more efficient than the timeline and offers more opportunities in regards to motion. Before discussing different methods of motion, we first have to look at where to put our ActionScript code.
Organizing Code in Flash
One of the difficulties for me as an aspiring Flash designer was where to put the code. Flash offers a number of different places to put ActionScript—on the _root’s frames, within a MovieClip's timeline, or on the MovieClip or Button itself (onClipEvent, onRelease, etc.). With the introduction of ActionScript 2.0 (AS2.0), ActionScript can now be placed in separate .as class files that are compiled when the swf is published. For an example of AS2.0 code, see Wave Pattern.
Ultimately, ActionScript 2.0 is the most efficient method of organizing code as it effectively creates an encapsulated “black box” of the code, however, it can be overkill for smaller projects. For those smaller projects, it’s best to centralize the code by placing it all in one spot within Flash (generally frame 1 of the _root) or by including a separate ActionScript file. This prevents other developers from having to search through the FLA to find the code (if you do have to search through the FLA, you can use the Movie Explorer window or the ActionScript editor window).
Creating _global references and references to the _root are discouraged, as this makes code less portable. Imagine if your Flash movie had a ton of _root references, only to break when another developer attempted to loadMovie your swf. If you must use _root, you should create a variable reference to it; this way, the code can easily be changed.
Easing Equation
If you began to sprint and then stopped 50 yards later, you wouldn't immediately hit 5 mph and then stop at 0. No, instead you would work your way up to 5 mph gradually, and then slow down incrementally. It's this type of natural-looking motion that easing creates, and the use of it in Flash makes animations more visually pleasant.
Basically, if we have a MovieClip at position x (_x) and we know we want it to go to another position (targetX), we subrtract the current position from the target to get the distance between the two points (distanceX). The trick to creating motion is to then take that distance and divide it by a certain amount (velocity) consistently to create the appearance of motion.
///////////////////////////////////////////
//DECLARE VARIABLES AT TOP FOR CODE LEGIBILITY
///////////////////////////////////////////
var targetX:Number = 410;
var velocity:Number = 7;
var distanceX:Number;
var movementX:Number;
///////////////////////////////////////////
//IF USER MOUSES DOWN
///////////////////////////////////////////
this.onMouseDown = function():Void {
//reset mc's position back to starting point
mc._x = 50;
// Assign action to perform on every frame of MovieClip
mc.onEnterFrame = function():Void {
// distance to target is the target's X minus the MovieClip's current X position
distanceX = targetX-this._x;
movementX = distanceX/velocity;
this._x += movementX;
// if mc has reached destination, remove action
if (Math.abs(this._x - targetX) < 1) {
delete this.onEnterFrame;
}
};
};
Note that we are constantly checking to see if the _x minus the targetX is less than 1. If it is, we delete the action to save processing power.
Elastic Equation
This form of motion is more complex than a simple ease effect and would be nearly impossible to accomplish with the timeline. Once again, we're determining the distance between _x and targetX, but instead of dividing, we're accelerating the speed of the object by continually adding to it (springy). The acceleration is then multiplied by a value that will gradually decrease it (friction). The result is an object that bounces around like a rubber band in its attempt to make it to the target (targetX).
///////////////////////////////////////////
//DECLARE VARIABLES AT TOP FOR CODE LEGIBILITY
///////////////////////////////////////////
var springy:Number = 0.2;
var friction:Number = 0.9;
var targetX:Number = 410;
var velocityX:Number = 0;
var accelerationX:Number = 0;
///////////////////////////////////////////
//IF USER MOUSES DOWN
///////////////////////////////////////////
this.onMouseDown = function():Void {
// Assign action to perform on every frame of MovieClip
mc.onEnterFrame = function():Void {
accelerationX = (targetX-this._x)*springy;
velocityX += accelerationX;
velocityX *= friction;
this._x += velocityX;
};
};
Robert Penner's Easing Functions
Robert Penner is a Flash developer who gained notoriety for introducing a library of ActionScript that deals primarily with motion. For this example, I will present only one of Penner's functions: sinusoidal easing.
Covering all of Penner’s functions is outside of the scope of this presentation. For more on Penner, visit the Code Libraries section of this site or RobertPenner.com.
///////////////////////////////////////////
//DECLARE VARIABLES AT TOP FOR CODE LEGIBILITY
///////////////////////////////////////////
//starting x position of the MovieClip
var begin:Number = 20;
//desired x position to finish at
var finish:Number = 410;
//the distance between start and finish
var changeAmt:Number = finish-begin;
//number of seconds for the animation
var duration:Number = 15;
//keeps track of time
var time:Number = 0;
///////////////////////////////////////////
//IF USER MOUSES DOWN
///////////////////////////////////////////
this.onMouseDown = function():Void {
//reset time, mc.onEnterFrame, and mc location
time = 0;
delete mc.onEnterFrame;
mc._x = begin;
//determine mc's position using Penner's easing function
mc.onEnterFrame = function():Void {
this._x = easeInSine(time++, begin, changeAmt, duration);
//if time has elapsed, remove the action
if (time>duration) {
delete mc.onEnterFrame;
}
};
};
///////////////////////////////////////////
//Robert Penner's easing sine function (robertpenner.com)
///////////////////////////////////////////
easeInSine = function (t:Number, b:Number, c:Number, d:Number):Number {
return c*Math.sin(t/d*(Math.PI/2))+b;
};
Animating Flash 8 Filters
Filters are available in AS1.0 but are only viewable in Flash Player 8. Coding Filters is relatively easy to do.
To create and use a filter:
- the filter Class must be imported
- An instance of the filter must be created
- The filter must be associated to a MovieClip or Button. This is done by adding the filter name to a filters array property of the target symbol. If the properties of the filter change, then the filter must be associated afterwards to see the change take affect.
Marks that relate directly to filters are highlighted in bold.
//First, we need to import the BlurFilter Class in order to apply a blur
import flash.filters.BlurFilter;
///////////////////////////////////////////
//DECLARE VARIABLES AT TOP FOR CODE LEGIBILITY
///////////////////////////////////////////
var targetX:Number = 410;
var velocity:Number = 7;
var distanceX:Number;
var movementX:Number;
var blurAmount:Number = 0;
//create an instance of the blur filter. The arguments are (blurX, blurY, quality)
var blur = new BlurFilter(blurAmount, blurAmount, 3);
///////////////////////////////////////////
//IF USER MOUSES DOWN
///////////////////////////////////////////
this.onMouseDown = function():Void {
blurAmount = 0;
//reset mc's position back to starting point
mc._x = 50;
//remove blur filter
mc.filters = [];
// Assign action to perform on every frame of MovieClip
mc.onEnterFrame = function():Void {
blurAmount+=3;
/*
here we set the blurX and blurY properties of the
blur filter to increment on enterframe
*/
blur.blurX = blur.blurY=blurAmount;
/*
apply filter to the MovieClip. The filters property is an array,
so multiple filters can be applied. In order to see the effect animate,
this array must be set on every frame
*/
mc.filters = [blur];
// distance to target is the target's X minus the MovieClip's current X position
distanceX = targetX-this._x;
movementX = distanceX/velocity;
this._x += movementX;
// if mc has reached destination, remove action
if (Math.abs(this._x-targetX)<1) {
delete this.onEnterFrame;
}
};
};
Using ActionScript to animate leads to faster development as we only need to change numbers to change the animation. This is a lot of code to manage, though, and what if we want additional types of animation? Fortunately, many Flash developers have already created a number of ActionScript tween libraries. I list a few of these in the next section, Flash code libraries.