You have two ways of creating animations in Flash. You can create them using the timeline, or you can create them using code. For code-based animations, I've always written about using variants of EnterFrame. One thing I've never talked about is using the tween class to create animations, and it's time to change that with this tutorial. This tutorial is also an updated version of the Flash 8 tutorial that TheCanadian wrote a few years ago.

To see an example of what you will create, click anywhere in the following movie. When you click, notice that the circle moves to the point of your click:

The actual movement of the circle, including the slight pull back, was created using just one line of code thanks to the Tween class found in AS3.

In this tutorial, I will explain how to use the Tween class to create an animation using code. Before diving into the code though, let's look at tweening using the timeline.

Tweening and the Timeline

When you create an animation on the timeline, you do several things. You set a keyframe to specify the starting point, and you have something to animate on your scene...such as a circle:

[ a starting keyframe with a target object that will be animated ]

After you specify the starting point of your animation, you need to specify your end point as well. For that, you can move several frames ahead, insert another keyframe to designate the end state, and modify your circle such as moving it to the right:

[ defining the end state of your animation ]

Right now, you have two keyframes - one at Frame 1 and another at Frame 20. If you happen to scrub your timeline playhead between those two frames, you will see nothing really happening. You certainly don't see an animation.

To create an animation, right click on the keyframe on Frame 1, and select Create Motion Tween. Once you have done that, scrub your playhead again. Notice what you see when you are in-between Frames 1 and 20:

[ create a tween to create an animation ]

This time, you actually see the intermediate frames generated between your starting and end frames located at Frames 1 and 20 respectively. Now you have an animation!

Why did I spend this time explaining something that you probably already knew? The reason is I want you to look at what you did in greater detail. To create a tween, you need a starting point and an end point. In our case, that was designated by the keyframes you placed on Frame 1 and Frame 20.

The part where you go from having two discrete changes to a smooth animation showing the transition between the changes is where tweening comes in. Tweening is short for in-betweening, and true to its name, it is where you generate the intermediary (in-between) frames that appear between your starting point and end point. In our case, those intermediary frames show the circle's progression from the left side at Frame 1 to the right side on Frame 20. All of those frames that make up the progression are taken care of automatically thanks to tweening.

Ok, now that you saw with "renewed enthusiasm" the parts that make up a motion tween when using the timeline, the rest of this tutorial where I try to map between what you see here and the code you'll see in the next section will make a lot more sense.

In the previous section, you got a quick overview of tweening by looking at how it is commonly used in Flash via the timeline. Let's now extend that by looking at how to tween using code.

Tweening with Code

First, create a new Flash application whose language is ActionScript 3.0:

[ create a new Flash AS 3.0 project ]

Once you have created your project, let's create your target object - the object that you want to animate. For the sake of simplicity, just draw a small circle, and convert this circle into a movie clip whose instance name is tweenMC:

[ create a new circle movie clip whose instance name is tweenMC ]

That is all of the design work you need to do. If you want, you can make your circle look nicer or give your background a different color like I did. These are just details not important to what this tutorial is about - which is tweening using code. Speaking of which...

Let's add some code! Right click on your (only) keyframe in your timeline and select Actions. The Actions window will appear. Inside this window, copy and paste the following code:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
var xMovement:Tween;
var yMovement:Tween;
function Start():void {
  stage.addEventListener(MouseEvent.CLICK, moveToClick);
}
function moveToClick(event:MouseEvent):void {
  xMovement = new Tween(tweenMC, "x", Back.easeIn, tweenMC.x, mouseX, 1, true);
  yMovement = new Tween(tweenMC, "y", Back.easeIn, tweenMC.y, mouseY, 1, true);
}
Start();

After you have copied and pasted the code, press Ctrl + Enter to run your application. If you click anywhere inside your application, you will see the circle bounce back briefly before barreling towards the point of your click just like the example you saw on the beginning of this tutorial.

Looking at the Code

Now that you have a working application that animates a circle using the Tween class, let's look at the code in greater detail starting with the less-important, but essential code that helps your animation to run:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
var xMovement:Tween;
var yMovement:Tween;
function Start():void {
  stage.addEventListener(MouseEvent.CLICK, moveToClick);
}
function moveToClick(event:MouseEvent):void {
  xMovement = new Tween(tweenMC, "x", Back.easeIn, tweenMC.x, mouseX, 1, true);
  yMovement = new Tween(tweenMC, "y", Back.easeIn, tweenMC.y, mouseY, 1, true);
}
Start();

First, the Start function is called. This function contains the line where I add an event listener that fires an event notification when the mouse is clicked:

function Start():void {
  stage.addEventListener(MouseEvent.CLICK, moveToClick);
}

When a mouse click is recognized, the moveToClick event handler is called. An event handler is basically a function that gets called when an event is fired. Our moveToClick function contains the code that sets up our animation, and let's look at them next.

---

The following code is what is directly responsible for code-based tweening. We'll look at them in more detail because they are more relevant to this tutorial than the earlier lines:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
var xMovement:Tween;
var yMovement:Tween;
function Start():void {
  stage.addEventListener(MouseEvent.CLICK, moveToClick);
}
function moveToClick(event:MouseEvent):void {
  xMovement = new Tween(tweenMC, "x", Back.easeIn, tweenMC.x, mouseX, 1, true);
  yMovement = new Tween(tweenMC, "y", Back.easeIn, tweenMC.y, mouseY, 1, true);
}
Start();

Let's start from the very top:

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

These three lines are import statements that tell the Flash compiler where to find references to the classes that you will be using. If you did not have these lines, then some of the following code, while valid to you, will be flagged as an error when you try to build.

---

Ok, you are almost done. The next section will cover the remaining (and very important!) lines of code. After that, you should be all set to creating animations using the Tween class.

In the previous section, you created the simple application that uses the Tween class to animate a circle. We were in the process of learning why the code works the way it does, so let's pick up where we left off and continue our coverage of the code.

---

var xMovement:Tween;
var yMovement:Tween;

In these two lines, I am declaring two variables called xMovement and yMovement who are both of type Tween. As you will see very soon, the Tween class plays a crucial role in creating the animation that you see when the circle follows the location of your mouse click.

---

function moveToClick(event:MouseEvent):void {
  xMovement = new Tween(tweenMC, "x", Back.easeIn, tweenMC.x, mouseX, 1, true);
  yMovement = new Tween(tweenMC, "y", Back.easeIn, tweenMC.y, mouseY, 1, true);
}

In this line, we initialize the xMovement variable you declared earlier and set it equal to a new Tween object whose constructor takes in a whopping seven arguments. Don't let the quantity of them scare you though. They actually map really well to what you already know when tweening using the timeline.

To help us out, let's look at the following diagram that labels some of the key points you interacted with or noticed when animating using the timeline:

The Tween class's constructor takes the following arguments:

1. Target Object
   The instance name of the movie clip that you are interested in animating.
2. Target Property
   The actual property of your target object that will be animated.
3. Easing Function
   The type of easing you want to employ while your animation is in progress.
4. Start Value
   What your target property's value will be at the starting point.
5. End Value
   What your target property's value will be at the end point.
6. Duration
   How long or how many frames your animation will run for.
7. Measure Duration in Seconds?
   Specify whether you want duration to be measured in terms of seconds or individual frames.

You can see all of the above in use in the initialization of our xMovement object:

xMovement = new Tween(tweenMC, "x", Back.easeIn, tweenMC.x, mouseX, 1, true);

The target object is tweenMC, the target property is x, the easing function is Back.easeIn, start value is tweenMC.x, end value is mouseX, duration is 1, and the duration is measured in seconds (true).

To look at this in a different way, you are animating your tweenMC movie clip's x property from its current x position to the x position of your mouse click. Your animation will end in 1 second, and there is a slight easing in effect where you lean back before getting to your final destination.

---

yMovement = new Tween(tweenMC, "y", Back.easeIn, tweenMC.y, mouseY, 1, true);

Our code for the yMovement is almost identical as our code for xMovement. The only major change is related to animating the y property instead of the x property that you saw earlier and altering our starting and ending values to take the y position of our movie clip and click location into account.

---

Easing Functions

One of the arguments you passed in to your Tween constructor is an easing function. The one that your code uses is Back.easeIn. I am not going to discuss easing in detail in this tutorial, but if you look in your fl.motion.easing package, you can see all of the various easing classes you can use: Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, and Sine.

Each of these easing classes provides you with three easing function that you can use, and they are easeIn, easeInOut, and easeOut. While these functions can be tweaked by passing in four more arguments, I'm sure you're probably tired of arguments by now! You can just do what I did and link an easing class with an easing function and ignore the arguments for now.

Examples of such links include Back.easeIn, Bounce.easeOut, Elastic.easeInOut, and thirty more such combinations.

---

Wrapping Up

All right! You are done with this tutorial. Hopefully this helped you get a better idea of how to use the Tween class to create animations using code. One of my goals with this tutorial is to show you the similarities that exist when creating an animation using code and the timeline.

You are not using any new concepts in either scenario. You are mapping what you already know about animations and using drag/drop gestures on the timeline and English-like words in code. The end result is something very similar!

To see how my example was created, feel free to download the final source from the following location:

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇