ActionScript3:Animating an Object
|Flash10 (CS4), Flash11 (CS5) <|
|Table of contents|
Animating an Object using ActionScript 3
By the end of this exercise you should:
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
clickMe. 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
greenSquare, and referencing the
smallSquare you created to it. The next piece of code listens for a mouse click on the
clickMe button and calls a function called
moveSquare 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
greenSquare (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
.addEventListener 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
greenSquare is at a position less than 500 on the x axis, each time the frame is entered, the
greenSquare will advance its position by 5 px. When position 500 px is reached, the
ENTER_FRAME 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
clickMe 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
onloop 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:
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
buttonMode=true to the
greenSquare ensures a hand mouse pointer appears when you mouse over the square so the user knows something can happen when you click on it.