How to create a very simple space game in Flash

Admit it, you’ve played an online game while at work. And odds are very good it was written in Flash / ActionScript. We’re going to cook up a very simple Flash project that might serve as the start of a game. Keyword here is simple though. We’re not going to worry about anything except for a scrolling background and a space ship, with maybe a laser at the end. But it should be enough to get you started with some basics.

The Project
First step is to create an empty Flash ActionScript file. We’re going to go with ActionScript 3 with a stage size at the default 550x400px just to keep it easy.

The graphics
We’re going to need a couple of movie clips – a scrolling background and a space ship.

For the background, create a graphic symbol that’s 550x400px to match the size of the stage. You could make it taller if you want less repetition as it scrolls, but for now we’ll just stick with 550px.

This is what I cooked up. It’s just a really quick star background to match the space ship I’m going to do for my character.

Not my best work, but I was going for quick and easy. I called this symbol background.

Also need a movie clip, this time called background_mc. Could have done this with one symbol, but I wanted the repetition to be easier.

On to background_mc add a layer and drag one copy of background on to layer one and another copy on to layer 2 so that they’re on top of each other like below.

For each symbol, create a motion tween moving it down so that the bottom symbol moves to where its top edge on the last frame is where its bottom edge was in the first frame. The top symbol will move in the last frame to exactly where the first copy was in the first. The completed demo is attached if that doesn’t make sense.

Go ahead and head back to the stage and drag background_mc onto the stage. Ctrl-Enter to preview and you should have a continually repeating background.

The Ship
And we also need a movie clip for the ship. This is what mine looks like. Again, nothing impressive. But at least the fire is animated. I’m calling this symbol ship_mc.

Drag a copy of ship_mc on to your stage and scale it so that it looks right.

Instances
Here’s where it starts to get a bit codey.

We need to give our ship clip an instance name. We’ve named the clip ship_mc, but since it’s possible to have multiple copies of the same clip on the stage it’s also possible to name each specific copy. Each copy is an instance.

If you go to the properties panel for the ship movie clip you can name your instance. You want it named something that makes it easy to identify. It also needs to start with a letter and not contain spaces. I’m naming my instance theShip.

And time for some code
On the stage right click on frame 1 and select Actions. You can also press F9. This will bring up the ActionScript code editor.

Rather than breaking down the code first, I’ll just paste the entire set first. It’s not all that much code, but it may need a bit of explanation.

import flash.events.KeyboardEvent;

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

function keyDownHandler(event:KeyboardEvent):void {
     if (event.keyCode == Keyboard.LEFT) {
          theShip.x = theShip.x + 5;
     }
     else if (event.keyCode == Keyboard.RIGHT) {
          theShip.x = theShip.x + 5;
     }
}

Line 1 – Imports some stuff that Flash needs. Don’t worry about this line, just paste it in.

Line 3 – Tells Flash that it needs to listen to a specific event; in this case the KeyboardEvent KEY_DOWN which happens when a key is pressed. When that happens we’re telling Flash to call a function called keyDownHandler.

Line 5 – Starts function keyDownHandler. The event:KeyboardEvent inside the parenthesis is called a parameter and holds the keyboard event that was triggered. The :void tells Flash that this function will not return anything.

Line 6 – Checks if the key that’s down is the left arrow key. If it is then line 7 happens and theShip’s x position is increased by 5.

Line 9 – If it wasn’t the left arrow this line checks if it was the right arrow. If it was the right arrow then it goes to line 10 and decreases theShip’s x position by 5.

And that’s it
Hit Ctrl-Enter and you should see a scrolling background with a little animated ship. Pressing the left and right arrows should move your ship left and right.