Have you ever fancied venting your frustration virtually on targets of your choice, building your own space-invaders game, or even becoming a member of the mob and shooting it out in downtown Chicago? Well, using this simple tutorial as a basis, anything is possible!
In this tutorial, we’re going to use Flash MX and ActionScript to build a customisable shoot-em-up (you can download the completed swf and fla files here). You will also need access to Photoshop or a similar paint package to create your graphics. You may already have something suitable, or decide to use something from the Web. If you do decide to use images other than your own, be sure to check the copyright.
A moderate amount of programming knowledge is helpful throughout this tutorial, but is not essential. All areas of ActionScript code are explained.
With that out of the way it’s time to get started. First things first: a pot of coffee! While this tutorial isn’t difficult, some of the concepts may take some time to fully understand if you’re a new programmer. You can, of course, just copy the code into Flash and change the relevant variables. But, if you’re going to personalise it in the future, why not take the time to understand it now?
How the Game Works
While this is far from an advanced tutorial in building a Flash game, there are a few elements that put it into the intermediate category.
The game has 3 targets. These targets are placed in an array, and are then selected at random. With only 3 targets, I can’t guarantee you’ll never play the same sequence more than once, but the random feature helps make it interesting. Each target has 2 other graphics associated with it. The first is an ‘Active Target’ graphic — a simple red border to indicate which target to aim at; the second is a black box to cover it, indicating it’s no longer in the game. Of course, using your own imagination, you can do a lot better than these quick ideas!
Graphics
As I’ve just mentioned, a lot of the graphical side of things is down to you. You can be as creative as you like — but, at the very least, you’re going to need the following:
- A target image
- A cross-hair to aim
- An active target image
- An image to indicate the target is destroyed
Your target can be any image you like — and, in its simplest form, a cross-hair is just a non-filled circle with vertical and a horizontal lines intersecting in its centre. This will give you an exact co-ordinate for your bullet. As for the last two graphics in the list, well — they can be just as simple.
I’ll assume you’re going to use the same image for each of the three targets we build. The active target image is a non-filled red square that can fit around the target; for the destroyed target image, you’ll just need a black square that will cover the image. In Flash, you can either create the square, then delete the centre fill, or simply create it with a transparent fill. But, as this tutorial isn’t about image creation, we shan’t dwell too much on the subject.
Let’s assume you’ve created and saved the images described above — now we can begin building our Flash movie.
Build the Flash Movie
Launch Flash MX and, if you’ve not already done so, open a new file. Click on Save, and name your Movie (you could be original and call it shootemup.fla).
Now, name your layer ‘Targets’, and in frame 1, import your target image to the stage.
File-import or (ctrl+R [pc])–[Browse for image]-Open
With your target on the main stage, make sure it is selected and make it into an individual movie clip (F8 [pc]). When the ‘Create Symbol’ dialog box appears, name the movie clip (MC) ‘target’, and make sure the ‘Movie Clip’ radio button is selected. In the ‘Property Inspector’, name the instance ‘target1’. While you’re at it, drag another two instances of the TargetMC onto the stage and give them instance names of ‘target2’ and ‘target3’ respectively. Click on frame 2 and press (F5) to copy the frame over. We’ll stick with three static targets for now – though, beyond this tutorial, how many targets you add and how they move is completely up to you.
Create another layer, name it ‘Text’, and in frame 1, use the text tool, setting the option to ‘Dynamic Text’, to create 2 boxes of about 30 characters in size along the top of the screen. Font size and colour are up to you. You may also want to spend some time sizing and aligning.
Select the ‘single line’ and ‘border around text’ options from the Property inspector. In the properties instance field, name these ‘hits’ and ‘info’ respectively. Move to frame2 on the timeline, and create a new keyframe (F6) Then, in an appropriate bit of white space on the stage, add some text along the lines of ‘GAME OVER’.
Create another layer and name it ‘Actions’. Open up the panel (Window Menu-Actions or (F9 [PC]) and copy the following code into frame 1:
(ActionScript (AS) for frame 1)
stop();
//Set global highScore variables
highScore = 0;
//Set the properties for the game elements
_root.lastFrame = false; //Stop bullets
//See AS for bullet MC for details
setProperty(_root.crosshair, _visible, true);
SetProperty(_root.bullet, _visible, false); //
//Individual destroyed target images hidden until needed
setProperty(_root.target1d, _visible, false);
setProperty(_root.target2d, _visible, false);
setProperty(_root.target3d, _visible, false);
//As above. Individual highlighted target images hidden until needed
setProperty(_root.target1Image, _visible, false);
setProperty(_root.target2Image, _visible, false);
setProperty(_root.target3Image, _visible, false);
mouse.hide(); //hide mouse to use cross-hairs
//select a target to shoot at random then add that target
//to the array of selected targets so that it isn't used
//again in this game.
//When the number of direct hits against the selected
//target has been reached. Find another random target.
//Check whether it exists in the array. If yes, select
//again. If no, make visible.
_root.targets = new Array(); //create array on the main
//timeline so that it is
//easily accessed by all MCs
_root.targets[0] = "target1";
_root.targets[1] = "target2";
_root.targets[2] = "target3"; //3 targets we are using in
//tutorial
n = _root.targets.length; //get length of array
ran = random(n); //get random number location to select from array
target = _root.targets[ran]; //show random array location
_root.activeTarget = target; //create target variable
setProperty("_root."+target+"Image", _visible, true); //show target
_root.targets.splice(ran, 1); //remove the random element
//from the array. splice
//the random number found and
//to the depth of one so only
//one element is removed.
//-------------------------------------------------------//
(AS for Actions frame 2)
Click on frame 2 in the Actions layer and create a blank keyframe (F7). Then, enter the following code into the actions panel:
stop();
_root.lastFrame = true; //Stop bullets
//See AS for bullet MC for details
mouse.show(); //reshow mouse
setProperty(_root.crosshair, _visible, false); //Hide cross hair
target1Hits = 0; //reset the hits for each target in case another
//game is played.
target2Hits = 0;
target3Hits = 0;
//-------------------------------------------------------//
Create the Cross-Hair
Create a new layer called ‘aim/fire’ above the ‘Targets’ layer. Create a new movie clip by pressing (Ctrl + F8) and name it ‘crosshair’. The symbol should have opened up for editing, so create an additional layer and name it ‘Actions’. In frame 1, add a stop action:
stop();
Name the original layer ‘Image’ and import your cross hair image into Frame 1, aligning it with the centre of the stage (represented by a cross). Now, copy this image over frames 2 and 3 by creating new key-frames (F6). On Frame 2, position the image a few pixels higher than the other two, as if to give the impression a bullet was fired. It is useful to note here that the cross hair would be much more realistic if you also imported a sound wave onto a new layer at frame 2. There are many sources for these on the Internet, but a good starting point would be www.flashkit.com.
Go back to the main timeline by clicking on the ‘Scene 1’ link underneath the timeline. Now, drag an instance of your crosshairMC from the library and position it off the left hand side of the stage. Select the MC and name it ‘crosshair’ in the instance field of the property inspector. Then, open the ‘Actions’ panel and enter the following:
(ActionScript (AS) for the cross-hair)
onClipEvent(enterFrame) { //When this frame(start)of the
//movie is entered place this
//MC wherever the mouse is.
this._x = _root._xmouse;
this._y = _root._ymouse;
}
//-------------------------------------------------------//
Creating the Bullets
This has to be the easiest part of the whole tutorial. Follow the steps for creating a new symbol as described above. Create a new symbol and name it ‘bullet’. Then, when you edit the MC, all you have to do is create a small black bullet hole image on frame 1, using the paintbrush. It doesn’t have to be very neat. Select this, make it into a movie clip (F8), and call it ‘bullet hole’. Click on frame 30 of the timeline, and press (F5) to fill in all the frames between. Then hit (F6) to make frame 30 a key-frame. With the image on the stage in frame 30 selected, go to the property inspector and change the color to ‘Alpha’ and ‘0%’.
Now, right-click in any frame between 1 and 30 on the timeline, and select ‘Create Motion Tween’. This will tween the frames so that when the movie clip plays to frame 30, the bullet will slowly disappear. If you don’t want this to happen, simply put the bullet image in frame 1, and leave it at that.
Now, create a new layer and name it ‘Actions’. Click on frame 30 in the timeline for this layer, and create a new blank key-frame (F7). Select the ‘actions’ panel and put in a stop action:
stop();
Go back to the main timeline by clicking on the ‘Scene 1’ link as before, then drag an instance of the bullet off the left hand side of the stage near the cross hair.
Select the bullet instance on the stage, name the instance ‘bullet’, then enter the following in the actions panel:
(ActionScript (AS) for the bullets)
onClipEvent(mouseDown) {
if(!_root.lastFrame) { //if not in the lastFrame
i++; //increase the number of i each time so that the
//duplicateMCs have a new depth to load to.
this.duplicateMovieClip(\\"bulletnew\\", i); //create new
//duplicate
//bulletMC
_root.crosshair.play(); //play the crosshair movie
}
}
onClipEvent(load) { //show bullets wherever mouse is as
//each new mc is loaded. Initial bullet
//as game loads won't show as it is
//hidden in the actions for the
//first frame.
if(!_root.lastFrame) {
this._x = _root._xmouse;
this._y = _root._ymouse;
}
}
//-------------------------------------------------------//
ActionScript for the Targets
Still with me? Your movie isn’t exactly going to inspire as it is now. What we need to do is to start adding some actions to the targets.
The ActionScript is pretty much the same for all targets, so you can simply cut and paste. Just be aware that, when using the code for ‘target2’ or ‘target3’, you will need to find and replace ‘target1’ with ‘target2’ or ‘target3’. This is all highlighted in the code to help you. You will also need to update the ‘activeTarget’ variable.
Select the ‘Target1’ instance of TargetMC on the main stage by left-clicking on it, and open up the actions panel (Window Menu-Actions or (F9 [pc]). Copy the following code into it.
(AS for individual targets)
onClipEvent(mouseDown) {
hitsNeeded = 5; //hits needed to destroy target - this
//can be any number you want
//CHANGE target1.hitTest, target1Hits and activeTarget to read target2 //or target3 for other targets and target1 to read 2 or 3 as in the //array we set up.
if(_root.target1.hitTest(_root._xmouse, _root._ymouse, true) && (_root.target1Hits<hitsNeeded) && (_root.activeTarget == \\"target1\\")) {
//OK From the top on this one:
//Using the AS hitTest() method
//If the specified MC is clicked on and
//if the hits needed on this MC have not
//reached the maximum and
//*if* it is the active target (activeTarget
//CHANGE target1Hits to read target2Hits or target3Hits for other //targets
_root.target1Hits++; //increase MC hits variable by 1
_root.directHits++; //increase direct hits variable
_root.hits.text = _root.directHits+\\" of \\"+hitsNeeded+\\" needed.\\"; //display current hits for target in a text
//field on the main stage
highScore = _root.highScore;
highScore = highScore + 10; //increase high score by //however many points you //want for a hit.
_root.info.text = highScore;
_root.highScore = highScore; //update the variable on
//the main stage
//CHANGE target1Hits to target2Hits or target3Hits for other //targets
if(_root.target1Hits == hitsNeeded) { //if hits needed total
//is reached
_root.directHits = 0; //reset direct hits counter for future
//targets
//CHANGE to target2Image or target3Image for other targets
setProperty(_root.target1Image, _visible, false);
//hide target
//CHANGE to target2d or target3d for other targets
setProperty(_root.target1d, _visible, true);
//Show the target destroyed image
//Check if array is now empty
//If so, endgame
n = _root.targets.length;
if(n == 0) {
_root.gotoAndPlay(2);
}
//If it wasn't empty...
//generate a random target
n = _root.targets.length //get the current array
//length
ran = random(n); //get random number location to
//select from array
target = _root.targets[ran]; //create target variable
_root.activeTarget = target; //set active target
setProperty(\\"_root.\\"+target+\\"Image\\", _visible, true);
//show target
_root.targets.splice(ran, 1); //remove the random
//element from array
//so that target cannot
//be picked again in
//this game
_root.hits.text = \\"target destroyed!\\"; //update the
//text field
}
}
}
//-------------------------------------------------------//
Only 2 more things to do before you’re ready to test the game and add your own elements! As I mentioned at the start of the tutorial, you’ll need 2 further images for each target, to show when each is active and when it is destroyed. For this tutorial, we’re just going to use simple boxes as previously described.
Creating the Active Target Images
This one’s nice and simple! Just create a new movie clip called ‘Active’, then create a red rectangle that’s big enough to cover the target with a transparent fill.
Create above the Target layer a new layer called ‘Active Targets’, and place three instances of this movie clip over the top of your targets in frame 1. In the property inspector, name the instances, ‘target1Image’, ‘target2Image’ and ‘target3Image’, respectively.
Creating the Target Destroyed Images
This is much the same as the above, really. Create a new movie clip called ‘Destroyed’, then create a new layer above the last one, called ‘Destroyed Targets’. Add 3 instances, called ‘target1d’, ‘target2d’ and ‘target3d’, respectively.
That’s it! Except…
If you’ve got this far through the tutorial, you should have all the elements in place to start playing your game. You may want to add one or two other elements, such as a “play again” button, which can be as simple as using a standard button from the common libraries bundled with Flash (Window-Common Libraries-Buttons). Put the button on frame 2, then select it and insert the following into the actions panel:
on (press) {
prevFrame();
}
Along the way, you’ve probably thought of things you can add to the game — what you’ve learnt here will only be the start. Happy gaming!
Frequently Asked Questions about Creating a Shoot ‘Em Up Game in Flash MX
What are the basic requirements for creating a Shoot ‘Em Up game in Flash MX?
To create a Shoot ‘Em Up game in Flash MX, you need to have a basic understanding of ActionScript, the programming language used in Flash. You also need to have Flash MX or a later version installed on your computer. Additionally, you should be familiar with the Flash interface and know how to create and manipulate graphics within the program.
How can I add sound effects to my game?
Adding sound effects to your game can enhance the gaming experience. In Flash MX, you can import sound files and then use ActionScript to play these sounds at appropriate times. For example, you might play a sound when a player fires a bullet or when an enemy is hit.
How can I create multiple levels in my game?
Creating multiple levels in your game can make it more challenging and interesting. In Flash MX, you can use different scenes to represent different levels. You can then use ActionScript to switch between these scenes based on certain conditions, such as when a player defeats all enemies in a level.
How can I add power-ups to my game?
Power-ups can make your game more fun and engaging. In Flash MX, you can create power-up items as movie clips and then use ActionScript to make these items appear at random locations and times. When a player’s character collides with a power-up item, you can use ActionScript to enhance the character’s abilities in some way.
How can I optimize my game for better performance?
Optimizing your game can make it run smoother and faster. In Flash MX, you can optimize your game by reducing the number of on-screen objects, using simpler graphics, and optimizing your ActionScript code. For example, you can use loops and arrays to manage multiple objects more efficiently.
How can I add a scoring system to my game?
A scoring system can make your game more competitive and rewarding. In Flash MX, you can use variables to keep track of the player’s score. You can then display this score on the screen using dynamic text fields.
How can I make my game more challenging?
Making your game more challenging can keep players engaged for longer. In Flash MX, you can make your game more challenging by increasing the speed and number of enemies, adding more complex level designs, and introducing tougher bosses.
How can I test and debug my game?
Testing and debugging your game is crucial to ensure that it works correctly. In Flash MX, you can use the Test Movie feature to test your game. You can also use the Output panel to display debug information, such as variable values and error messages.
How can I publish my game?
Once you’ve finished creating your game, you can publish it as a SWF file that can be played in any web browser that has the Flash Player plugin installed. In Flash MX, you can use the Publish Settings dialog box to specify the publish options for your game.
Can I sell my Flash MX game?
Yes, you can sell your Flash MX game. However, you need to ensure that you have the rights to all the content in your game, including graphics, sound effects, and music. You can sell your game on various online platforms, such as Flash game portals and app stores.
Marc brings almost 10 years' experience to his company, PlanetWired, which provides Web development and consulting for small businesses as well as those listed in the UK top 100.