Article

Home » Design and Layout » Flash Tutorials » Build a Shoot-em-up Game in Flash MX

About the Author

Marc Hampson

author_marchampson 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.

View all articles by Marc Hampson...

Build a Shoot-em-up Game in Flash MX

By Marc Hampson

January 14th, 2004

Reader Rating: 7.5

Page: 1 2 3 4 Next

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.

If you liked this article, share the love:
Print-Friendly Version Suggest an Article

Sponsored Links