Tutorial:ActionScript Movement (AS2)
From Anipedia
- How to set up your Flash project to be ready for ActionScript movement
- How to create Movie Clip symbols
- How to make a symbol move across the screen using ActionScript
- How to make a symbol move using the arrow keys
Contents |
[edit] Step 1: Setting up the Flash file
If you are using Adobe Flash CS3, you must make sure you are using ActionScript 2.0 rather than ActionScript 3.0.
If you are creating a new project, click on "Flash File (ActionScript 2.0)" under "Create New" on the Startup Menu, or click on "File" > "New...", Selecting "Flash File (ActionScript 2.0)" and clicking OK.
If you have already started a project and you want to add ActionScript movement to it, make sure everything is deselected and click on "Settings..." next to "Publish:" in the Properties window. Click on the Flash tab and make sure "ActionScript 2.0" is selected next to "ActionScript version:". Click OK.
If you are using a version of Flash older than CS3, it will only include ActionScript 2.0, so there is nothing to change.
[edit] Step 2: Setting up the Timeline
Start by making sure you have at least two layers. Label one "ActionScript" and one "Objects". Good organization is important for a good ActionScript project.
If there is no keyframe in the ActionScript layer on frame one, make one. Click on it.
Now go to the "Actions" window. It should now be titled "Actions - Frame".
In the input field, type "stop();" This will cause the timeline to stay on this frame. For the purpose of this demonstration, we do not want the timeline moving.
[edit] Step 3: Creating a Movie Clip symbol
Movie clip symbols are very useful, because they an be easily manipulated through ActionScript.
There are two ways to create a movie clip symbol:
-Click "Insert" > "New Symbol" and the "Movie Clip" radio button. Name your symbol whatever you would like and click OK. Next draw what you want the symbol to look like. Return to the timeline and drag your symbol from the Library to the workspace in the "Objects" layer. OR -Draw something in the workspace in the "Objects" layer, select it, right click on it, click on "Convert to Symbol..." and select the "Movie clip" radio button. Name your symbol whatever you would like and click OK.
[edit] Step 4: Making your symbol move using ActionScript
Click on your symbol, which should be in the "Objects" layer of your timeline. Now go to the Actions window, which should now be titled "Actions - Movie Clip".
In the input field, type the following:
onClipEvent(enterFrame) {
this._x += 5;
}
What this code means is that every time the movie clip is in the frame, its x value will increase by 5. In other words, the object will move to the right.
"this._x += 5;" is a shortened way of saying "this._x = this._x + 5;". Both will work.
If you wish for the Symbol to move faster, change the 5 to a bigger number, or raise the frames per second of the Flash.
If you wish to make your Symbol move to the left instead, change "this._x += 5;" to "this._x -= 5;"
If you wish to make your Symbol move down, change "this._x += 5;" to "this._y += 5;"
If you wish to make your Symbol move up, change "this._x += 5;" to "this._y -= 5;"
[edit] Step 5: Making your symbol move with the arrow keys
Remove the code "this._x += 5;".
In its place, write:
if(Key.isDown(Key.RIGHT)){
this._x += 5;
}
"if()" will execute the code below it (between the braces {}) if what is within the () is true. When the RIGHT key is down, the if statement is true, and your symbol will move to the right.
Test your project.
Now add the following code under the code we have just written:
if(Key.isDown(Key.LEFT)){
this._x -= 5;
}
if(Key.isDown(Key.DOWN)){
this._y += 5;
}
if(Key.isDown(Key.UP)){
this._y -= 5;
}
The code in the input field should read:
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._x += 5;
}
if (Key.isDown(Key.LEFT)) {
this._x -= 5;
}
if (Key.isDown(Key.DOWN)) {
this._y += 5;
}
if (Key.isDown(Key.UP)) {
this._y -= 5;
}
}
Test your project again, the symbol should move according to the arrow keys that are held down.
Here is an FLA that can be used as an example of what this should all look like: ActionScript_Movement_Example.fla
