ActionScript3:Animating an Object

Introduction
Animating an Object using ActionScript 3

Setting the Stage
Open a new ActionScript 3 movie. On the first layer, create a rectangle to use as a button. With the rectangle selected, convert to a button symbol. Double Click, add a new layer and add the text Click Me. Return to the stage. Give your new button a unique name, in this exercise its called. Place on the stage at an appropriate position.

With the shape tool, create on the stage a new shape - any will do. Convert this shape to a movieClip with an appropriate name. Now, delete the shape you have just created from the stage, don't worry it is still available in the library.

Open the library panel, select the shape you have just created, right click, select properties. Tick the boxes under linkages - Export for ActionScript and Export in frame 1. Give it a class name (we will need this to call later), in this example it is called.



Just click Ok if you get a message about the class definition not being found.

On your stage now, there will just be a button with a label saying click me. Now we add the ActionScript.

Adding the ActionScript
Create a new layer, and call it actions. Open the actions panel on frame one of the actions layer. Insert the following ActionScript:

This code deals with declaring a variable, and referencing the   you created to it. The next piece of code listens for a mouse click on the  button and calls a function called   which will be created next.

Add the following Actionscript below that which you have just completed:

This code adds the object stored in the variable  (the smallSquare) at the x and y coordinates of the stage, dynamically adding the object at runtime instead of having it set up on the stage initially. Also added is an  that looks for each time the frame is entered as the movie runs and causes the next piece of ActionScript to be executed:

This function states that while the  is at a position less than 500 on the x axis, each time the frame is entered, the   will advance its position by 5 px. When position 500 px is reached, the  event is removed and no further action takes place.

The Completed Code
The completed code is shown here - note the nested functions in this case:

Each time you click the  button, the code will execute and move the green square left to right across the stage. This code could be modified to be used in any number of ways. Instead of animated an object across the stage you could set its static position and use the  function to change its alpha value giving fade in or fade out effects, increase the size of an object or even add rotation for example. The animation at its resting point shown here:



Extensions
The following code modifies the above slightly, and introduces an alpha increase to a static square. Adding an eventListener and associated function to the square itself, you can now click on it and it will remove itself from the stage. Adding  to the   ensures a hand mouse pointer appears when you mouse over the square so the user knows something can happen when you click on it.