Tutorial:Character Movement Through ActionScript (AS2)
From Anipedia
This tutorial will build off of some of the information found in these two tutorials.
In this tutorial, you will learn:
- How to make a character move in 4 directions according to the arrow keys.
- How to make your character face the direction they are walking, and initiate a walking animation.
This is an example of what the end result will look like: [1] The character was created by MishkaMash.
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, 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.
I would recommend changing the frames per second to at least 24, but no more than 48. To do this, double click on "12.0 fps" under the timeline to open the Document Properties window. Change the frame rate and click OK.
[edit] Step 2: Setting up the Timeline
Start by making sure you have at least two layers. Label one "ActionScript" and one "Objects".
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();"
[edit] Step 3: Creating Your Movie Clip Symbols
Create four different Movie Clips. Each movie clip should feature your character's walking animation in a different direction. The first frame of each movie clip should be able to double as the character standing still. The character should be nearly the same size for each of these symbols, so they'll match up to appear like the character is turning if one was swapped with another. Name each of these symbols something you will remember. It is good to follow a naming convention for all your symbols so you will know what they are at a glance.
For this example we will be naming them "character_left", "character_right", "character_up", and "character_down".
Now create one last symbol. I would recommend naming it "character". Place "character_down" in the blank keyframe on frame 1 of character. Click on "character_down", on the stage. Now click on the properties tab. In the instance name field, write an instance name. For this example, we'll write "inner" since it represents the movie clip inside of character.
Create three more keyframes in the character symbol, at frames 2, 3 and 4.
Move to frame 2. Right click on "character_down" and click on "Swap Symbol...". Choose "character_right" from the list and click OK.
Move to frame 3. Right click on "character_down" and click on "Swap Symbol...". Choose "character_left" from the list and click OK.
Move to frame 4. Right click on "character_down" and click on "Swap Symbol...". Choose "character_up" from the list and click OK.
Now we're all ready to start coding!
[edit] Step 4: Coding Your Character To Move According to Pressed Keys
Leave the "character" symbol to return to the main timeline by clicking on the Scene name under the timeline.
Unless you changed it, it will be called "Scene 1".
If "character" is not already on your main timeline in the Objects layer, move it there. Click on "character".
Notice that the "Actions - Frame" tab next to "Properties" changes to "Actions - Movie Clip". There are a few things that we only want to happen once, immediately after "character" loads. Click on "Actions - Movie Clip".
In the input box, type:
onClipEvent(load){
}
The things that happen between the { and } will only happen once, when the movie clip loads.
Inside of the braces in onClipEvent(load){ }, write:
this.stop(); this.inner.stop();
The term "this" refers to the currently selected object. "this.inner" refers to the object named inner inside of the currently selected object.
Let's set a speed for the character. Under what we have just written, but still within onClipEvent(load){ }, write:
this.speed = 15;
This line of code creates a variable inside of the currently selected object, that holds the integer 15. If you want a faster character, make the number bigger. If you want a slower character, make the number smaller.
Now we want to program the things that the character does every frame. Hit enter a couple of times after onClipEvent(load){ } for clarity, and write:
onClipEvent(enterFrame){
}
Now we are going to make an if statement. An if statement performs what is in the braces {} following it if the statement within the parenthesis () is true. Within the braces in onClipEvent(enterFrame){ }, type:
if(){
}
Now we are going to type the condition of the if statement in the (). Within the (), type:
Key.isDown(Key.DOWN)
This statement is equal to true when the DOWN key is down, and false when it is not.
Within the braces of the if statement, type:
this._y += this.speed; this.gotoAndStop(1); this.inner.play();
"this._y += this.speed" is short for "this._y = this._y + this.speed". Note that we are adding to this._y to make it move down. That is because the stage in Flash is in quadrant IV. "this.gotoAndStop(1);" makes the movie clip that is selected go to frame 1 and stop. Note that frame 1 is the frame where the character is pointed down.
"this.inner.play();" ensures that the movie clip on frame 1 of character is playing, so it will appear like he is walking.
On frame 2 of "character", the character is pointing to the right, so let's do the right key next. After the } that ends the if statement, write:
else if(Key.isDown(Key.RIGHT)){
}
That means that if the previous if statement was false, it will check the current one. Inside the braces, write:
this._x += this.speed; this.gotoAndStop(2); this.inner.play();
After the }, write:
else if(Key.isDown(Key.LEFT)){
}
Similar to before, write the following within the braces:
this._x -= this.speed; this.gotoAndStop(3); this.inner.play();
Now do the same ting as before, but for Key.UP:
else if(Key.isDown(Key.UP)){
this._y -= this.speed;
this.gotoAndStop(3);
this.inner.play();
}
Now after the }, type:
else {
}
This means that if all the previous if statements are false, the actions within the braces after else will be performed.
Within the braces, write:
this.inner.gotoAndStop(1);
Your character should now move properly according to the arrow keys.
Your code should look like this:
onClipEvent(load){
this.stop();
this.inner.stop();
this.speed = 15;
}
onClipEvent(enterFrame){
if(Key.isDown(Key.DOWN)){
this._y += this.speed;
this.gotoAndStop(1);
this.inner.play();
} else if(Key.isDown(Key.RIGHT)){
this._x += this.speed;
this.gotoAndStop(2);
this.inner.play();
} else if(Key.isDown(Key.LEFT)){
this._x -= this.speed;
this.gotoAndStop(3);
this.inner.play();
} else if(Key.isDown(Key.UP)){
this._y -= this.speed;
this.gotoAndStop(4);
this.inner.play();
} else {
this.inner.gotoAndStop(1);
}
}
