1. Code
  2. Games

Build a Simple Flash Frisbee Game With AS3


In this tutorial, we'll build a really simple "keepy-uppy" game. Click the frisbee to send it skyward, then spin it with your mouse to stop it falling to the ground! Collect power-ups to change the size of the disc.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Brief Overview

Using pre-made graphic elements we'll create good looking interface that will be powered by several ActionScript 3 classes.

The user will be able to move a character across the stage, collect upgrade items and beat gravity, you can modify the values in the class to customize the game.

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

A colorful nice looking interface will be displayed, this involves multiple shapes, buttons and more.
Most of the graphics we used have been created in previous tutorials so it won't be necessary to include their creation.

Step 4: Instance Names

keepy uppy frisbee Flash game

The image above shows the Instance Names used in the MovieClips. The ones that start with a Capital Letter are Library Class Names and should not be on stage, there are also two clouds clips above this graphics, they are called clouds and clouds2.

Step 5: Tween Nano

We'll use a different tween engine from the default included in flash, this will increase performace as well as it is easier to use.

You can download TweenNano from its official website. Learn how to add it to your project here.

Step 6: Create a new ActionScript Class

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

Step 7: Class Structure

Create your basic class structure to begin writing your code.

Step 8: 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 9: Variables

These are the variables we'll use, read the comments in the code to know more about them, some of their names are self explaining so there will be no comment there.

Step 10: Constructor

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 11: Add Listeners

In this function we add the initial game listeners required to start the game. We also set the buttonMode property of the Frisbee to true (this will show the hand cursor when mouse over) and hide the position indicator.

Step 12: Launch Frisbee

The first move of the frisbee will activate the timers that are in charge of the upgrades and call the update function which is the principal function of the game.

Step 13: Throw Frisbee

This function resets the variables used to make the frisbee move and fall; it runs every time the frisbee is clicked.

Step 14: Display Upgrade Bubbles

A timed function will handle the upgrade bubbles. The timer was set in the variables declaration to have an interval of 10 seconds. The first thing to do is check for a previous bubble in screen and remove it if there is one.

Step 15: Double Points Upgrade

The upgrades are bubbles that appear on screen that will give the player special abilities or enhancements.

The following code calculates a random number (it can be 0 or 1) and instantiates the double points upgrade if the number is 0.

Step 16: Big Frisbee Upgrade

If the calculated number is 1, the big frisbee upgrade is added to the stage. A name is given to the upgrades to determine is value when hit.

Step 17: Cancel Upgrades

Another timed function.

This will be called when the player grabs the upgrade bubble, counting 3 seconds to end the upgrade effect.

Step 18: Update Function

The principal function of the game, it will handle collisions with the walls, upgrades and the frisbee movement every frame. Being such an important and extensive function, we'll take a look at it in the next part of this game tutorial.

Step 19: Document Class

keepy uppy frisbee Flash game

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.

Step 20: Update Function

The principal function of the game, it will handle collisions with the walls, upgrades and the frisbee movement every frame, learn how it works in the next steps.

Step 21: Move Frisbee

The frisbee will be moved using the throwSpeed value. This value will change later in the code to make the frisbee go up, when this variable is 0, gravity will move downwards the frisbee.

Step 22: Gravity

The following code checks if the frisbee has reached the highest point allowed, if not, the throwSpeed variable increases to make it go up. At the same time gravity is applied to the variable causing it to eventually lose its positive value and making the frisbee fall.

Step 23: Click Position

The x movement of the frisbee is calculated depending on the area the player clicks.

Step 24: Reduce xSpeed

xSpeed is the value that makes the frisbee move left or right.

This code slows this movement by subtracting its value until the maximum height is reached.

Let's stop here to make a quick test and make sure that our code is working:

Step 25: Rotation

To simulate the frisbee movement we rotate the a letter inside it. (This is a movie clip inside the Frisbee movie clip, which has an instance name of aLetter.)

Step 26: Score

The score increases when the frisbee leaves the stage and by the time that it's invisible to the player. If you click it closer to the top the score gained will be higher.

Step 27: Position Indicator

This indicator follows the x position of the frisbee while it isn't in stage.

Step 28: Move Background

The next code moves the initial background (if it hasn't been deleted) and the clouds that will be reused in the game.

Step 29: Delete Initial Background

The first background will appear only at the start of the game, so it will be deleted when the player can no longer see it.

Step 30: Loop Clouds

The clouds backgrounds will appear all the time during the game duration. When a background in no longer visible, its position is reset.

Let's stop once again to make a quick test and make sure that we have score, indicator, rotation, looping clouds and upgrades (though they do nothing yet...) :


Step 31: Double Points

Double points are added to the score when the 2x upgrade is active, we also change the score textfield color to make the change more visible.

Step 32: Big Frisbee

When the player grabs the big bubble, the frisbee scale increases by 1, making it easier to click.

Step 33: Cancel Upgrades

The current upgrade will only be active for 3 seconds, when that time passes, its powers are cancelled.

Step 34: Difficulty

The game difficulty is the gravity, this code changes the gravity based on the score. When the score reaches 100 the gravity increases by 0.5.

Step 35: Screen Borders

Invisible walls are used on the sides to prevent the frisbee from going offstage.

Step 36: Game Over

If the frisbee falls all the way to the bottom, the game is over.

Step 37: Remove Listeners

The next code disables all mouse events and stops the timer, this will stop the game from performing unwanted activity.

Step 38: Alert

This function will stop the game and reveal the final score, it also adds a mouse listener to reset the game when clicked.

Step 39:Restart

The next function will reload the swf, restarting any variable, method and returning to the first screen.

We're done! Try it out:


You've created a very entertaining game, try to add your own features and graphics.

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.