The Tank: Part 1: Basic Movement and Artillery
In this Flash tutorial, you will learn how to move a tank using the arrow keys and shoot using either the spacebar or a mouse click. The topics covered in this tutorial include: using the onEnterFrame, onMouseDown, and onKeyDown events, proper actionscripting technique and basic animation techniques. This is the first in a series of Flash tutorials involving the movement of a tank. Enjoy!
This tutorial will be presented in a step-by-step format.Click here to preview the finished project. The completed source file is here
1. Download the source file move_tank.fla, extract and open the fla file. In this file you will find all the creative assets involved in this project. However there will be no actionscript in the file. This is what we will be creating in this tutorial.
2. Okay so now you have the opened file ready to go. Take a look around at what is contained in the flash document. On the stage there are two movieclips, the tank which is named ?tank_mc? and the bullet which is named ?bullet_mc?.
If you double click on the tank you will see its contents. There is the tank graphic and the two tank track movieclips.
Go back to the main timeline. The last element we will look at is the bullet movieclip which is aptly named ?bullet_mc?. Double click on it and have a look at its contents. Its simply a motion tween of a bullet going forward and then disappearing at the end. The disappearing tween is done with the alpha property of the bullet movieclip.
Now that you are familiar with all the graphical parts of our project. We can move on.
3. Go back to the main timeline and take a look at the layer named ?Actions?. This is where all your actions for the entire project will be located.
**Having all the actions in one convenient place is the industry standard and if you don?t normally do this then you probably should start. The reason for this is that it makes it much easier to go back and edit your project.
Click on the first frame of the actions tabs and open the actionscript window (Shortcut key: F9).
i. We’ll start with the inital conditions. Initially we want the bullet on the stage but we don?t want to see it. So we put the bullet_mc at frame 10 where it’s invisible.
// initial conditions
bullet_mc.gotoAndStop(10);
ii. Okay now for the fun stuff. The following is how you will control your tank with the arrow keys. We start by creating an event, namely the ?enterFrame? event. This means that the commands within this statement will be active as soon as this movie loads up and will continue to me active unless we delete the movieclip. First, we will have to define some initial conditions pertaining to the speed of the movement of the tank.
tank_mc.onEnterFrame = function() {
// forward and backward motion speed of the tank
tankSpeed = 5
// side to side movement of the tank
sideSpeed = 2
}
Now for the key press movement. We will start with the right arrow key which will control forward movement.
tank_mc.onEnterFrame = function() {
// forward and backward motion speed of the tank
tankSpeed = 5
// side to side movement of the tank
sideSpeed = 2// if key is down and key = right arrow (Key.RIGHT)
// then increase the tanks x position
// by 5 (tankSpeed).
if (Key.isDown(Key.RIGHT)) {this._x+= tankSpeed;
}
}
tank_mc.onEnterFrame = function() {
// forward and backward motion speed of the tank
tankSpeed = 5
// side to side movement of the tank
sideSpeed = 2
// if key is down and key = right arrow (Key.RIGHT)
// then increasethe tanks x position
// by 5 (tankSpeed).
if (Key.isDown(Key.RIGHT)) {this._x+= tankSpeed;
}
// if key is down and key = left arrow (Key.LEFT)
// then increase the tanks x position
// by 5 (tankSpeed).
if (Key.isDown(Key.LEFT)) {this._x -= tankSpeed;
}
// if up arrow is pressed then move tank
// up 2 px (sideSpeed)
if (Key.isDown(Key.UP)) {this._y -= sideSpeed;
}
// if down arrow is pressed then move tank
// down 2 px
if (Key.isDown(Key.DOWN)) {this._y += sideSpeed;
}
}
Okay now press ?ctrl + enter? to run your movie. Notice that you can press more than one arrow at a time and it responds. This is because we used a separate if statement for each arrow key. Had we nested them all in one ?if…else if? statement we would not have this functionality.
iii. Finally, its time to make our tank fire some artillery. There are two different ways we will make this happen. One is with the ?spacebar? and the other is with a left-mouse click. We?ll start with the ?spacebar? shooting mechanism. Its basically the same as the arrow key presses.
** This goes in the tank_mc.onEnterFrame with the key presses.
// if spacebar (Key.SPACE) is pressed then
// play bullet animation.
if (Key.isDown(Key.SPACE)) {// This code puts the bullet_mc at the end of the
// cannon barrel.
bullet_mc._x = tank_mc._x + 22;
bullet_mc._y = tank_mc._y;// this plays the bullet animation. I start at frame 3
// because then I get the bullet in motion instead
// of it starting stationary.
bullet_mc.gotoAndPlay(3);}
Now for the mouse click artillery. The following code uses an event called onMouseDown. OnMouseDown executes whenever the mouse is clicked.
// while left mouse butting is pressed…
onMouseDown = function() {// establish bullet position
bullet_mc._x = tank_mc._x + 22;
bullet_mc._y = tank_mc._y;// play the bullet animation. The reason I start at
// frame 2 here is because this action is slightly less
// responsive than the key press function.
bullet_mc.gotoAndPlay(2);}
Alright thats it! Press ctrl+enter to run your movie and see how it all turned out. Stay tuned for the next tank movement tutorial which will be all about rotating the canon and shooting in different directions. The artillery is greatly improved upon in Part 2.
If you enjoyed this tutorial then continue on to The Tank: Part 2: Rotating and Shooting the Cannon”
