Flash AS3 Tween Events

In this tutorial, we'll take a look at how to work with events related to the Flash AS3 Tween class. We'll first take a look at the AS3 tween event known as MOTION_FINISH. This event allows us to write some code that will respond when the tween animation is finished. Let's say you wanted a song to play, or an image to load when the tween finishes, then you can use this event to make that happen.

Step 1

Use the oval tool to draw a circle, and convert it into a movie clip symbol. Then place two instances of this symbol on the stage. Name them circle1_mc and circle2_mc.

Step 2

Create a new layer for the ActionScript. Select the first frame of this layer, and then open up the Actions panel.

Step 3

Add the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

The first 2 lines import the necessary classes that will make our tween work.

The 2 lines after that will position the circles so that circle1_mc is above circle2_mc.

The last 2 lines create the tween objects that will animate each circle. The first one is named c1TweenX and animates circle1_mc, the second one is named c2TweenX and animates circle2_mc. They both create a similar animation, but circle1_mc has a duration of 3 seconds, while circle2_mc has a duration of 6 seconds.

Test the movie to preview the animation. You should see both circles move from the left to the right.

Step 4

In this next step, we'll import the TweenEvent class so that we can create TweenEvent handlers. Add the line in bold found below:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

Step 5

Now that we've imported the TweenEvent class, let's create an event listener function that will get called every time one of our tweens finishes. Let's name this function onMotionFinish. When this function gets called, let's tell Flash to trace the phrase "motion is finished".

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace("motion is finished");
}

Step 6

Next, we need to register the event listener function to the tween objects so that the function will get called when a tween finishes. The event we want to specify is TweenEvent.MOTION_FINISH. This event gets announced whenever a tween finishes. When creating TweenEvent handlers, the event listener functions are added to the tween objects. So lets use the addEventListener() method to register the onMotionFinish event listener function to both of our tween objects (c1TweenX and c2TweenX).

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace("motion is finished");
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

Step 7

Next, let's modify the trace statement in the event listener function so that it will also indicate which movie clip has just finished tweening. In the trace statement, add e.target.obj.name

e.target refers to the tween object (either c1TweenX or c2TweenX). Adding obj.name identifies the name of the object being tweened (either circle1_mc or circle2_mc).

Look at the code below to see the updated trace statement:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace(e.target.obj.name + " " + "motion is finished");
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

Step 8

Now, let's test the movie. Pay attention to the moving circles and the output window. You'll see the message in our trace statement come out every time one of the tweens finishes. Since c1TweenX has a shorter duration, you'll see the message "circle1_mc motion is finished" come out first, followed by "circle2_mc motion is finished".

Step 9

In this next step, we'll make the tweens start again each time it finishes.

In the event listener function, add e.target.start(); right after the trace statement.

The start() method of the Tween class will make the tween start from the beginning again. So since we are putting the call to the start() method inside the MOTION_FINISH event listener function, our tweens will start again each time they finish.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace(e.target.obj.name + " " + "motion is finished");
     e.target.start();
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

So now, our tweens will just keep repeating.

Step 10

In this next step, let's change the start() method to the yoyo() method. The yoyo() method of the Tween class creates a looping effect as well. The difference is that it will alternately play the animation in reverse, just like how a yoyo toy goes down then up then down then up, and so on... So in the case of our animation, you'll see the circles yoyo back and forth from left to right and right to left.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

circle1_mc.y = 100;
circle2_mc.y = 250;

var c1TweenX:Tween = new Tween(circle1_mc, "x", Bounce.easeOut, 100, 400, 3, true); 
var c2TweenX:Tween = new Tween(circle2_mc, "x", Bounce.easeOut, 100, 400, 6, true);

function onMotionFinish(e:TweenEvent):void
{
     trace(e.target.obj.name + " " + "motion is finished");
     e.target.yoyo();
}

c1TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
c2TweenX.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);

So here, you've seen a demonstration of how a MOTION_FINISH event handler for Tween objects work. You can use it to tell Flash to do something whenever a tween object finishes an animation.

There are a few more events in the TweenEvent class. I've listed them below with short descriptions included.

List of events in the TweenEvent Class

MOTION_CHANGE
As the tween animates, this event will constantly get dispatched. It gets triggered each time the position, size, rotation, or alpha level of the object being tweened changes.

MOTION_FINISH
Dispatched when a tween finishes.

MOTION_LOOP
Dispatched when the tween starts playing again when in looping mode. The loop property of the Tween object must be set to true in order for this event to get dispatched.

MOTION_RESUME
Dispatched when a call to the resume() method of the Tween class has been made.

MOTION_START
Dispatched when a call to the start() method of the Tween class has been made.

MOTION_STOP
Dispatched when a call to the stop() method of the Tween class has been made.

And that concludes this tutorial on Flash AS3 Tween events.