Note: If you are brand new to Flash, it's best not to get ahead of yourself. Go check out the Flash Basics tutorial first. We will also be covering some basic programming terms like variables, functions and if statements. If you're not familiar with how those work, check out the Basic ActionScript Terms & Best Practices wiki.

Please note that this tutorial teaches techniques using the somewhat outdated language ActionScript 2.0. If you'd rather learn ActionScript 3.0, you should check out the Key Mapping and Movement with AS3 tutorial instead.

Click in the box below to see what you'll have by the end of the tutorial. Move using the arrow keys.

SET UP | First off we need to get Flash ready.

Step 1: Open flash and create a new Flash File (ActionScript 2.0).
Step 2: Change the FPS to 30.

Optional Step: It's always a good idea to have a folder for each project. If you haven't made a folder for this tutorial yet, go do that now.

Step 3: Go to File > Save and save the .fla.

GRAPHICS | You can download our pre-made graphic or create your own in flash.

If you downloaded our tank graphic, tank.png:
A. Save tank.png in the same directory as your .fla.
B. Go to File > Import > Import to Stage, and choose tank.png.

Now that we have an image on the stage, we need to convert it to a symbol.
Step 4: Highlight the graphic, then go to Modify > Convert to Symbol, or just hit F8.
Step 5: Type "Tank" in the Name, Identifier & Class boxes.
Step 6: Check Export for ActionScript and Export in Frame 1, as seen below.

You should now notice a blue box surrounding the image and a white circle in the middle. This indicates that the image is now a movie clip symbol!

ACTIONSCRIPT | Now lets create an ActionScript file (.as) with code to control the tank.

Step 7: Go to File > New then choose ActionScript File.

A new tab should appear to let us add code to our new ActionScript file.

Step 8: First, go to File > Save and save our new document in the same directory as our .fla. with the name Tank.as. Both the name and location of the file is extremely important!

Now we need to declare our Tank class.
Step 9: Type the following code in our new ActionScript tab:

class Tank extends MovieClip
{

}

Since our tank image is a movie clip, we told it that it would have added functionality by typing extends MovieClip. All variables, functions, etc will go within the Tank class.

Next we will be adding the guts of the tank code, it's variables and functions.

Note: If you're not familiar with terms like variables, functions or if statements, you should check out the Basic ActionScript Terms & Best Practices wiki which explains these terms and more in depth.

Lets declare a variable to hold information about the tank's rate of movement.
Step 10: Type var speed;.

Step 11: Now add the onLoad() function within our Tank class and set our rate of movement (speed) to 15:

function onLoad()
{
speed = 15;
}


The onLoad() function loads once when our tank is added to the stage. It well set our speed to 15 once the movie has loaded.

Step 12: Add the onEnterFrame() function inside of our tank class.

function onEnterFrame()
{

}

In ActionScript 2.0, the onEnterFrame() function is extremely important. It executes every time the frame or object is loaded. Since this code is within a symbol on the stage and our FPS is set to 30, any code we put in onEnterFrame() will be executed 30 times a second. This is extremely helpful for hit detection or for our current objective - detecting when keys are pressed.

MOVEMENT | Finally, lets make the tank move.

Optional Step:
Want to see the tank move? It's not mapped to any keys yet, but we can still test it out to make sure we're on track.

A. Set our tank's x position to x + speed.

function onEnterFrame()
{
_x = _x + speed;
}


What will happen if we try to run our program? Every movie clip's location is stored as a grid with the variables _x and _y. In the code you just entered, you told the tank to increase it's x position by our speed variable (15) every time it enters the frame (30 times a second).

B. Save the document, then test the program by going to Control > Test Movie.

Next we'll add an if statement so that our code can tell if we're pressing an arrow key. And if we are, move the tank in the appropriate direction.

Step 13: Delete your onEnterFrame() function and replace it with the code below.

function onEnterFrame()
{
if( Key.isDown(Key.RIGHT) )
{
_x = _x + speed;
}
}


Each key on the keyboard has a keycode to tell which one it is. By default, flash can detect if a key is pressed down - Key.isDown(keycode).

Keycodes are easy! For the arrow keys, the keycodes are Key.RIGHT, Key.LEFT, Key.UP & Key.DOWN.

So the code we entered should wait until the right arrow key is pressed, then move the tank to the right. Lets test that out.

Step 14: Save the document, then test the program by going to Control > Test Movie.

The tank should now respond to your right arrow key and move around. Lets map the rest of the arrow keys!

Step 15: Add if statements for the rest of the arrow keys.

if( Key.isDown(Key.LEFT) )
{
_x = _x - speed;
}
if( Key.isDown(Key.UP) )
{
_y = _y - speed;
}
if( Key.isDown(Key.DOWN) )
{
_y = _y + speed;
}


The x-axis controls the tank's position horizontally. When we moved to the right, we added our speed variable to the tank's x-position (_x = _x + speed;) When we move to the left, we want to subtract speed from the tank's x-position, moving it the opposite direction on the x-axis.

The y-axis controls the tank's position vertically, so to move up and down we must add and subtract our speed variable from the tank's y-position.

Test your program one last time, and if it works - move on to the final step.

Step 16: Once we're finished, save the documents and go to File > Publish to publish our .swf!

If you go to the directory where you saved your .fla and .as files, there should now be a .swf and .html file. Double click the .html file and your new game should open in your web browser. Congratulations!

Download the source files for this tutorial below.

Think you know your stuff? Learn how to make a tutorial.