Welcome To VertexTemplates.com Flash MX 2004 Tutorials Area - Keyboard Controlled Movement (Part 1)

Introduction
This tutorial will introduce the basics of using the keyboard to control a character / shape in your game.

Introducing Clip Events
The introduction of Clip Events in Flash 5 has made the whole process of moving items around the screen very simple.
We will be using two types of clip event.
onClipEvent (load) - this allows us to set up any variables we will be using. This instruction is only used the once - when the movie clip is loaded.
onClipEvent (enterFrame) - this instruction continually recycles itself on every frame. If you have set a frame rate of 12fps this code will be used 12 times every second.
In fact the only hard thing about clip events is adding them in the actions panel. They can only be entered in the action panel if you have the movie clip selected. Do not try and enter them on the timeline as it won't work.
Further to this you will not find a onClipEvent instruction in the actions panel. Just enter the second line of the code and Flash will add the rest for you. All you have to do then is change the part in brackets to enterFrame or load.
What I would recommend doing is using the action panel in Expert Mode and copy and pasting the code below. Then if you wish change back to Normal Mode and see how they were constructed.

The tutorial
Create a simple shape (a circle or a square). Select the shape and convert to symbol (found under the insert menu or simply press f8).
Name the symbol and select movie clip as behavior.
Select your movie clip and bring up the actions panel and enter (or copy and paste) the following code:

onClipEvent (load) {
movement = 5;
}
onClipEvent (enterFrame) {
if (Key.isDown( 37 )) {
this._x = this._x - movement;
}
}

Test your movie.
When you click on your movie and use the left arrow key your object will move across the screen.

So how does it work?

onClipEvent (load) {
movement = 5;
}

As described above this sets our variables - in this case movement.

onClipEvent (enterFrame) {
if (Key.isDown( 37 )) {
this._x = this._x - movement;
}
}

This is a loop that checks every frame if a certain key has been pressed (we have given the key code for the left arrow key). If it has it addresses the movie clip and adds our variable movement to its x coordinate.
Now we have got the basics complete the code:

onClipEvent (load) {
movement = 5;
}
onClipEvent (enterFrame) {
if (Key.isDown( 37 )) {
this._x = this._x - movement;
}
if (Key.isDown( 39 )) {
this._x = this._x + movement;
}
if (Key.isDown( 38 )) {
this._y = this._y - movement;
}
if (Key.isDown( 40 )) {
this._y = this._y + movement;
}
}

Now test your movie. You will find your movie clip moves in the same direction as the arrow key you press.
In essence the code is continually searching for what to do next and responding, by moving the movie clip across the x and y axis, to your key presses by way of their individual key codes.

The Key Codes
Although a full list of all the key codes is available in the Actionscript Reference Help Files for the sake of easy reference I will list the commonly used keys and their codes
Left Arrow 37
Up Arrow 38
Right Arrow 39
Down Arrow 40
Space Bar 32

What Next
Play about with the movement variable and the frame rate of your movie to see how these two parameters can effect your movies.
Learn how to keep your movie clip on the screen in keyboard controlled movement (part 2).

Click here to Go on to the next Part of Keyboard Controlled Movement>

Download Flash File