FlasherDotOrg: AS3 Tutorials Part I (Programmatic Animation)

Programmatic Animation

Return to the Tutorials page

Goal: Animate two objects on the stage using ActionScript 3.0.

Imported classes: flash.display.Sprite, flash.events.Event and the custom class: BumbleBee;

Methods: drawCircle(), beginFill(), endFill(), addChild() and addEventListener.

Flash version: Flash 9 Professional

Download final version

The ActionScript 3.0 Foundation Elements can be found in the Members' Section.

In this tutorial we will create a shape object and also place a library Sprite on the stage. Using Event Listeners each object will "listen" for the Enter Frame event. Once the movie enters a new frame, an action is triggered. That action is animated motion!

Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it ProgrammaticAnimation and save it inside the FlasherAS3_PartI folder. In the Document Class box of the Properties panel, type Animation and then save the changes.

Open a new ActionScript file, name it Animation and then save it inside the Code folder.

You now have twenty-four separate files on your computer:

In the FlasherAS3_PartI folder -
LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla, CircleEllipse.fla, Sprites.fla, MovieClips.fla, Filters.fla, InheritingClasses.fla, FormattedText.fla, LoadExternalText.fla, HTMLText_Hyperlinks.fla and ProgrammaticAnimation.fla.

In the Code subfolder -
LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as, Sprites.as, MovieClips.as, Filters.as, InheritingClasses.as, FormattedText.as, LoadExternalText.as, HTMLText.as and Animation.as.

Keep both ProgrammaticAnimation.fla and Animation.as open as we will be working with both of them simultaneously.

Return to ProgrammaticAnimation.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save your changes.

Return to Animation.as and type in the following code:

Line 01: package
Line 02: {
Line 03: public class Animation extends Sprite
Line 04: {
Line 05: public function Animation()
Line 06: {
Line 07: }
Line 08: }
Line 09: }

screenshot 1

Save the changes.

This tutorial will require the Sprite and Event classes so let's import them now.

Place your cursor at the end of line 2 and press Return/Enter.

On line 3 type: import flash.display.Sprite;

Press Return/Enter.

On line 4 type: import flash.events.Event;

Press Return/Enter to add a blank line on line 5.

Place your cursor at the end of line 9 and press Return/Enter.
A majority of our animation code will be placed between the constructor function's opening & closing curly braces.

screenshot 2

Save the changes. The set up is done; let's create some objects to animate!

The first object will be a circle Sprite. Beginning on line 10 type the code

Declare a variable (circle), set the data type (Sprite) and instantiate a new Sprite. (Line 10)
Use the beginFill() method to set the fill color to blue (#0099CC). (Line 11)
Use the drawCircle() method to draw a circle. The x location of the center of the circle is 260, the y location is 35 and the radius is 25. (Line 12)
Use the endFill() method to close the fill. (Line 13)
Add the circle to the stage by utilizing the addChild() method. (Line 14)

Your code should look like this: [ view code ]

Save the changes and test the movie. There is our blue circle!

screenshot 4

Our second object will be a Sprite that contains the image below. Right-click over the bee image and save it inside the Images folder.

Bee image

Return to ProgrammaticAnimation.fla and insert the bee image into the movie's library by selecting File > Import > Import to library.

screenshot 5

Browse for bee.jpg and press the Open button.

screenshot 6

Open the library (Command/Ctrl + L) to view the imported bee bitmap.

screenshot 7

Now to create the container it will be placed in. Drag the bee bitmap onto the stage. While it is selected on the stage, press F8 on your keyboard to create a new symbol. Set the name to bee_mc and select the Movie clip type. Press the Advanced button to view all the options.

screenshot 8

Under Linkage, select the Export for ActionScript option. This will automatically select the Export in first frame option as well.

screenshot 9

Set the Class to BumbleBee and set the base class to flash.display.Sprite.

screenshot 10

Click the OK button. A warning message pops up that informs us the new class we've created, BumbleBee, will automatically be generated in the SWF from this point forward. Press the OK button.

screenshot 11

On the stage, delete the Sprite instance. (The original remains in the library).

Save the changes and return to Animation.as. Place your cursor at the end of line 14 and press Return/Enter twice. Beginning on line 16, place the bumble bee Sprite on the stage by following these steps:

Declare a variable (_bee), set the data type (BumbleBee) and instantiate a new instance of the BumbleBee class. (Line 16)
Using the addChild() method, set _bee on the stage. (Line 17)
Set the x coordinate of _bee to 180. (Line 18)
Set the y coordinate of _bee to 100. (Line 19)

A quick note about the BumbleBee class. When we created bee_mc, which is located in the movie's library, we named the class BumbleBee in the Linkage section. This is how Flash identifies bee_mc in the library. The class is the name that the object goes by.

When a class is referenced, it is imported at the beginning of our script so that Flash movie can utilize it.

Place your cursor at the end of line 4 and press Return/Enter.

On line 5 type: import BumbleBee;

Your code should look like this: [ view code ]

Save the changes and test the movie to see the bee on the stage, just below the ball.

screenshot 12

Note: When bee_mc was first created, a warning message popped up to inform us the new class BumbleBee would automatically be generated in the SWF. This is the equivalent of the code on line 5. We could have left the code on line 5 out of the AS file and the result on the stage would have been the same.
So why put it in? To reinforce in your mind what is happening behind the scenes. The BumbleBee class is automatically included because we pressed the OK button when the warning came up. But if you are new to ActionScript 3.0, you may not automatically remember that that message equates to the code on line 5.

Now that we have two objects to animate, let's decide how to make that happen. In previous tutorials, we utilized the addEventListener() method from the Stage class. It "listens" for an event that happens on the stage. Once that event has happened, an action is triggered through a function.

Let's create an event listener for the circle object first. Place your cursor at the end of line 20 and press Return/Enter twice.

On line 22 type: circle.addEventListener(Event.ENTER_FRAME, moveRight);

This line of code adds an event listener to the circle object. When the movie enters a new frame, an action is triggered. That action is outlined in the function moveRight which we will create next.

Place your cursor at the end of line 23 and press Return/Enter twice.

Beginning on line 25, type the following:

Line 25: internal function moveRight(event:Event):void
Line 26: {
Line 27: event.target.x += 5;
Line 28: }

At the end of line 28, press Return/Enter to make line 29 a blank line. (This keeps the code tidy and easy to read.)

Your code should look like this: [ view code ]

Save the changes and test the movie. The circle moves across the stage to the right...

Try the example: [ Sample Movie ]

Let's take a closer look at our new custom function. First, let's review why the function is located in the class but not inside the constructor function. The AS file constains the main class named Animation (lines 7 - 30). Inside this main class is the constructor function, which is also named Animation (lines 9 - 23). As soon as the movie plays, the constructor function runs. This automatically executes all the code listed between lines 9 through 23.

In this example that automatically creates the circle and _bee objects and the circle's event listener begins to "listen" for the entering of a new frame. Now if the movie has not entered a new frame, say a stop was in place, then the moveRight function would not be called into action. We want the moveRight function to execute only if the criteria (movie entering a new frame) is true. We want to be able to control when the action takes place.
(This will be elaborated on in the next tutorial.)

Okay, that's established where the function goes and why. Now let's break down how it was created.

internal function moveRight(event:Event):void
{
event.target.x += 5;
}

The internal keyword establishes the scope. Any AS file within this package now has the option to use this function in its code without having to re-type it (inheritance). We may use it later, we may not. But the internal keyword gives us the option to use it package-wide. It's alwyas nice to have options!

The keyword function declares that a function is being defined (created).

This is a custom function we are creating from scratch so we get to name it! The name of the function is moveRight because it describes what the action will be.

Inside the brackets is where the criteria is placed.
What is it that the function needs to know before it can play?
In this case, it needs to know that an event has occurred. The keyword event refers to the event listener declared on line 22.

The parameter needs a data type.

What type of event is it?
It is an Event data type.
Functions have the capability to return a value. In this series of tutorials, all functions will return nothing which is represented by void.

The function's curly braces open and close the function (lines 26 & 28) and the action statement is defined inside them.
- The action is: event.target.x += 5;
- The keyword event refers to the event listener (line 22), the target is the display object (circle on line 22).
- In English, this line reads:
  Add 5 pixels to the horizontal location (x) of the circle object (target) when the movie enters a new frame (event).
- Why not simply type: circle.x += 5; instead? The logic is the same...
  Because, as it is written now, the moveRight function can be applied to any object that calls it.

Let's move the bee across the stage to the right. The first step is to add an event listener. Place your cursor at the end of line 22 and press Return/Enter.

On line 23 type: _bee.addEventListener(Event.ENTER_FRAME, moveRight);

Your code should look like this: [ view code ]

An event listener has been added to the bee image (_bee). The event listener is "listening" for an event (Event). The event type is ENTER_FRAME which means that every time the movie enters a new frame the event listener will trigger an action. The action is defined inside a custom function named moveRight.

Save the changes and test the movie.

Try the example: [ Sample Movie ]

What do you know? Both the circle and the bee animate across the stage to the right! If we used a particular object name instead of event.target then the action would only work for that particular object. By using event.target, any object that has an event listener which triggers the moveRight function will automatically animate to the right. Imagine the possibilities...

Moving both objects to the right is fun but it would be more interesting to see the circle move to the right while the bee moves to the left, simultaneously. How can we accomplish this? By creating a new function named moveLeft!

Place your cursor at the end of line 30 and press Return/Enter. Beginning on line 31 type the following:

Line 31: internal function moveLeft(event:Event):void
Line 32: {
Line 33: event.target.x -= 5;
Line 34: }

Your code should look like this: [ view code ]

This custom function is virtually identical to the previous function.

The two differences are:

The function name is moveLeft.
The action is to move the object horizontally to the left.

Now let's apply this function to _bee's event listener. Return to line 23 and change the function name to moveLeft.

Line 23 should now look like this: _bee.addEventListener(Event.ENTER_FRAME, moveLeft);

Your code should look like this: [ view code ]

Save the changes and test the movie.

Try the example: [ Sample Movie ]

How cool! The bee moves left and the circle moves right.

So if we wanted the circle to move left and the bee to move right, what would need to happen? The circle event listener would reference the moveLeft function and the _bee event listener would reference the moveRight function. Swap the function names around on lines 22 and 23.

The code should now look like this:

Line 22: circle.addEventListener(Event.ENTER_FRAME, moveLeft);

Line 23: _bee.addEventListener(Event.ENTER_FRAME, moveRight);

Your code should look like this: [ view code ]

Save the changes and test the movie. There it is; the circle moves left and the bee moves right!

Try the example: [ Sample Movie ]

How about animating both objects to the left? Easy! Set the function name in both Event Listeners to moveLeft.

Line 22: circle.addEventListener(Event.ENTER_FRAME, moveLeft);

Line 23: _bee.addEventListener(Event.ENTER_FRAME, moveLeft);

Your code should look like this: [ view code ]

Save the changes and test the movie. This time both object animate to the left...

Try the example: [ Sample Movie ]

All the skills you have acquired over the last twelve tutorials are starting to pay dividends! This is the key to initiating animation and interaction using ActionScript 3.0. Master these concepts and you are well on your to becomming an ActionScript programmer...

We're on a roll so let's keep going! Next up, creating interactive buttons...
[ Interactive Buttons tutorial ]