Flash Animation using Actionscript3 – Spring and Ease
To fully understand this tutorial, you’ll want to have an advance understanding of both Flash CS3 and Actionscript3. However, the script supplied may be used by anyone.
What you’ll get…
In Flash CS3, some animations (particularly “dynamic” animations) just aren’t possible with your basic timeline motion tweening. Here are some quick functions that can be used to either “spring” or “ease” your Sprites to their target location.
EASE
function easeTo(event:Event):void
{
var t:Object = event.target;
t.x += (goalXease-t.x)*ease;
t.y += (goalYease-t.y)*ease;
var dist:Number = Math.sqrt((goalXease-t.x)*(goalXease-t.x)+(goalYease-t.y)*(goalYease-t.y));
if(dist <= 1){
t.x = goalXease;
t.y = goalYease;
t.removeEventListener(Event.ENTER_FRAME, easeTo);
}
}
SPRING
function springTo(event:Event):void
{
var t:Object = event.target;
speedX += (goalXspring-t.x)*spring;
speedY += (goalYspring-t.y)*spring;
t.x += (speedX *= resistance);
t.y += (speedY *= resistance);
var spdX_amt:Number = Math.sqrt(speedX*speedX);
var spdY_amt:Number = Math.sqrt(speedY*speedY);
var dist:Number = Math.sqrt((goalXspring-t.x)*(goalXspring-t.x)+(goalYspring-t.y)*(goalYspring-t.y));
if(spdX_amt <= 1 && spdY_amt <= 1 && dist <= 1){
speedX = 0;
speedY = 0;
t.x = goalXspring;
t.y = goalYspring;
t.removeEventListener(Event.ENTER_FRAME, springTo);
}
}
HOW TO USE THEM
First, you’ll need to add a few variables to your movie:
var speedX:Number = 0;
var speedY:Number = 0;
var goalXease:Number = 200;
var goalYease:Number = 100;
var goalXspring:Number = 100;
var goalYspring:Number = 100;
var resistance:Number = 0.85;
var spring:Number = 0.1;
var ease:Number = 0.2;
Speed (for lack of a better term) is the rate of movement at which the spring animation is traveling at any given time. Because we are moving along the X and Y axis, we need to have a separate speed for each.
Goal is the location where you want the object to land. Again, we need both an X and Y goal.
Resistance is the force applied against the spring which causes it to slow down to a stop. Without it, the object would never stop moving.
Spring is the rate at which the spring animation increases speed while traveling towards the goal, and the rate at which it slows down after passing the goal.
Ease is the rate at which the ease animation slows down. The higher the number, the quicker it will reach its goal.
GET THINGS MOVING
Put a couple of Sprites or MovieClips on the stage and add these event listeners.
mySprite1.addEventListener(Event.ENTER_FRAME, easeTo);
mySprite2.addEventListener(Event.ENTER_FRAME, springTo);
Be sure to replace “mySprite1” and “mySprite2” with the names of your corresponding MovieClips, then publish the movie! You’ll see that immediately upon opening the movie, your objects will animate towards their goal positions. This kind of animation can be useful for creating interactive menus, games, or just for fun effects.
That’s all for now, but you can download the source files below.
Download the Basic Source Files – The above code in action.
Download the Advanced Source Files – Includes the functionality of the above movie (i.e. drag and drop). Take note, the spring and ease functions have been modified for demonstration purposes.
