1. Game Development
  2. Game Design

Create a Space Shooter Game in Flash Using AS3

Read Time:11 minsLanguages:

Follow the straight-forward steps of this Premium Tutorial to create an entertaining shoot-'em-up with Flash and AS3.

Step 1: Brief Overview

Using pre-made sprites and the Flash Tools, we'll create a good looking graphic interface that will be powered by several ActionScript 3 classes.

The user will be able to control a spaceship and shoot multiple enemies while traveling in space.

Step 2: Flash Document Settings

Open Flash and create a 320 pixels wide, 480 pixels tall document. Set the Frame rate to 24fps.

Step 3: Interface

Our interface will be composed of several sprites, text fields and movie clips.

Continue on to the next steps and we'll look at how to create it.

Step 4: Background

The background will be very simple, as the stars are generated using ActionScript.

Create a 320x480 px rectangle and fill it with black. You could add a slight radial gradient.

Use the Align Panel (Cmd + K) to center it in the stage.

Step 5: Sprites

I've used a great sprite library in the demo of this tutorial, these are part of the SpriteLib by Flying Yogi.

Step 6: Sprite MovieClips

Import the sprites to the stage (Cmd+ R), convert them to MovieClips, and adjust the frames to display a nice animation.

Step 7: Score TextField

A Dynamic TextField will be needed to display the game score. Use the Text Tool (T) to create one; name it scoreTF and place it in the bottom-left corner of the stage.

Step 8: Embed Font

In order to use a custom font in a dynamic textfield, you must embed it in your application. Select the textfield and use the Properties panel's Embed... button to add the necessary characters.

Step 9: Alert View

The Alert View will be shown when the user reaches a game state, (win, lose). Use your desired font to create a simple screen with two dynamic textfields; name them titleTF and msgTF, convert the box to a MovieClip and set its class name to AlertView.

Step 10: Sounds

We'll use Sound Effects to enhance the feeling of the game, you can find the sounds used in this example in using the keywords space, explosion and laser.

Step 11: Tween Nano

We'll use a different tween engine from the default included in Flash, this will increase performace and be easier to use.

You can download Tween Nano from its official website.

Step 12: New ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as in your class folder.

Step 13: Class Structure

Create your basic class structure to begin writing your code.

Step 14: Required Classes

These are the classes we'll need to import for our class to work; the import directive makes externally defined classes and packages available to your code.

Step 15: Variables

These are the variables we'll use, read the comments in the code to know more about them.

Step 16: Constructor Code

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.

It calls the necessary functions to start the game. Check those functions in the next steps.

Step 17: Build Stars

The buildStars() method uses the Star MC in the library to create a background with randomly placed stars. Two sprites are created in order to tween both of them and simulate movement, using the same trick as in this parallax scrolling tutorial.

Step 18: Add Ship

This function creates an instance of the Ship MC in the library and places it on the stage with a neat animation.

Step 19: Add Lives

Reusing the Ship MC, three ship sprites are added to the stage as a lives indicator. The ships are added to a Vector to check for game over later in the game.

Step 20: Add Listeners

These lines will add the necessary listeners to the stage and timer; this includes Mouse events, Timer events and and EnterFrame events that will update the game every frame.

Step 21: Move Ship

The player's ship will be mouse controlled, the next function handles that:

Step 22: Shoot

Our ship will be able to shoot bullets to destroy and protect itself from enemies. This function will run every time the user clicks the stage and will place a bullet in front of the ship that will be later moved by the update() function. It also plays a shooting sound.

Step 23: Add Enemy

It wouldn't be a shooter without something to shoot. The enemies are created by the next function, a Timer is used to create an enemy every 500 milliseconds (you can change that value in the variables step) which is later moved by the update() function.

Step 24: Alert View

The Alert View shows the player information about the status of the game, it is shown when a game event is reached.

Two parameters are used in this function:

  • t: The alert title
  • m: A short message

Step 25: Update

The update() function is executed every frame, it handles all the game movement and collisions. It is the game loop function for this game. Take a look at the next steps to see its behavior.

Step 26: Move Background

The background is moved every frame to simulate space travel; when the bottom stars sprite reaches the stage limit it is moved back to the top, creating a loop.

Step 27: Move Bullets

The next lines of code check if there are bullets in stage; if true, the bullets are moved upwards; when a bullet is no longer visible, it's destroyed.

Step 28: Boss

We'll add a big and bad boss to the game. When the user reaches certain score, the boss will appear:

Step 29: Move Enemies

The enemies are also moved every frame. This code finds all the enemies in the stage using the array and moves them 5px downwards.

Step 30: Enemy-Ship Collision

Here we check whether an enemy collides with the player's ship; if it does, a series of actions are performed starting with the explosion sound:

Step 31: Destroy Enemy

After playing the sound, the enemy is removed from the stage and the array, and is set to null in order to (eventually) clear it from memory.

Step 32: Remove Live

One of the lives counter's icons will also be removed in the same way as the enemy.

Step 33: Test for Game Over

Then we check the lives number, if the player is out of lives we use the alert method to display an alert indicating game over, if there are still lives available the ship is animated into the stage.

Step 34: Hit Boss

The following code handles the boss collisions, it uses the same method used in the enemy-ship collision. Here we use the bossHealth variable to determine when the boss is defeated.

Step 35: Bullet-Enemy Collision

Another collision detection code. The bullets in the array are tested for collision with the enemies; when this happens, both are removed from the stage and their arrays.

Step 36: Restart Function

The restart function() is called by the alert() function, it handles the necessary operations to reset the game and restart it.

Step 37: Remove Sprites

The first part of the restart() function handles the sprites, the next lines of code remove all the images from the stage.

Step 38: Remove Alert

The next part of restart() removes the Alert View from the stage:

Step 39: Reset Score/Boss Health

In the next part of restart(), the score and boss health variables are reset:

Step 40: Call Restart Method

Finally, at the end of restart(), we call the method that starts everything:

Step 41: Document Class

Add the class name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.


You've learned how to create a Space Shooter game with all its basic features, try to expand it using what you already know!

I hope you liked this tutorial, thank you for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.