Flash Animation using Actionscript3 – Spring and Ease

Posted on in Blog

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.

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);

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);

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.

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.

Up Next

Display advertising is one of the best ways to raise awareness of your brand, product or service. The Google display network includes digital tools that billions of people rely on every day, including Gmail and YouTube. Wondering what a mix of creative display ads can do for your next paid campaign? Let us walk you...

Read More