Building a Game: Programming in Flash for Teachers

Lesson Plans

Download a zip file with the student instructions to upload to your school's LMS and to edit.

Organisation: These lessons are linked, and each has a 'mini-assignment' that represents student completion of the concept focus. Each builds on the previous lesson/assignment and should therefore be completed sequentially.

ActionScript 3.0 – Object state and behaviour

ActionScript 3.0 is an object oriented programming language. It is used to program Flash animations, applications and games.

As with all object oriented programming languages, ActionScript 3.0 uses objects that interact with each other to design the program or application.

An object has both a state (attributes and data) and behaviour (code). Typically, objects correspond with real-world constructs, and in the case of ActionScript 3.0, the objects are mostly symbols that appear on the Flash stage.

Therefore, to learn to program a game in Flash, we need to start by creating a symbol.

ACTIVITY 1.1 - Create an Object

Watch the video Welcome to ActionScript 3.0 (episode 1) and then complete the activities listed below.

  1. Create a New Flash File ActionScript 3.0 and save it with a meaningful name
  2. Draw a shape on the Flash stage
  3. Convert the shape to a symbol (type = Movie Clip) and give it a meaningful name
  4. Apply ‘Export for ActionScript’ to the symbol
  5. Assign an Instance Name to the symbol (use camelCase; do not use numbers or punctuation)

Your program now has an object. The state of your object includes its colour, shape, position, and size, all of which are expressed in the instance variables.

To assign behaviour for this object, you will need to implement a method. In Flash, we can add methods to the Actions layer of your stage.

ACTIVITY 1.2 - Assign Behaviour to an Object

It is quite common for games to contain characters that the user can interact with, or control. Therefore, we are going to create a behaviour for the object that will allow a user to move it using the keyboard arrows. 

Adobe has already written the code for this action, and we are able to access it through Code Snippets.

Complete the activities:

  1. Open the .fla file you created in ACTIVITY 1.1
  2. Select the object that appears on the stage
  3. Go to Window > Code Snippets
  4. Navigate to the Animation Folder
  5. Double click on the Move with Keyboard Arrows option
  6. Read through the code that appears in the Actions window: how much of it do you understand?
  7. Hold down Ctrl and press Enter to view your movie – use the arrow keys to move the shape around the stage
  8. If you would like to start understanding more about how the code works, this video reviews making a symbol and then looks at a number of options when using code snippets Flash Code Snippets | Stop writing code!
 
Mini Assignment A – A moveable object

Create an object which can be moved using keyboard controls.

Hand in a copy of your working file and a copy of your movie file. You will be assessed on the following criteria:

LO1 Both files are in an appropriate format
Both files have appropriate names
The layers and symbol have appropriate names
The instance name is in camelCase and meets programming naming standards
LO3 The game works as expected (a shape can be moved using the arrow keys)


Action Script 3.0 – Collisions and automating movement

Now you know how to create and use Code Snippets to control an object with the keyboard, we are going to move on to creating your own code to automate the movement of an object.

ACTIVTY 2.1 - Automate object movement

Create an object whose movement is controlled by code

  1. Create and save a new ActionScript 3.0 document in Flash
  2. Draw a small circle, convert to symbol and assign the instance name colourBall (use the colour of the ball instead of ‘colour’ eg, if the circle is green, assign the instance name ‘greenBall’)
  3. Unselect the object and open the ActionScript panel (Windows > Actions)
  4. Initialise the program by adding the code:
  5. init(); //this calls the function
    function init():void  //this defines the ‘init’ function {
    stage.addEventListener(Event.ENTER_FRAME, loop);  /*this runs the ‘loop’ function whenever the game enters a new frame (how frequently will depend on the frame rate*/
    }
    function loop(e:Event):void  //this defines the ‘loop’ function, outlining what to do when a new frame is entered {
    }

    You can cut and paste this code – the comments should stay as comments when in the Actions panel

  1. Add code to move the ball:
    1. Start by defining two variables – the speed of the ball from left to right, and the speed of the ball from top to bottom.
      Variables are usually added at the top of the code eg. above init();

      var ballSpeedX:int = -3; //this sets the speed of the ball from left to right
      var ballSpeedY:int = -2; //this sets the speed of the ball moving up and down

    2. Add code to the loop function so that the ball moves (Your code will already have the loop function, so the two lines of code which add speed to the ball are the only ones you need to add - make sure you add them in the right place - between the two curly brackets of the loop function):

      function loop(e:Event):void  {
      greenBall.x += ballSpeedX; //this adds the speed of the ball to its x axis on each frame
      greenBall.y += ballSpeedY; // this adds the speed of the ball to its y axis on each frame

  1. Run the game to test that the ball moves (it should move towards the top left corner of the stage)
  2. Add code to keep the ball inside the game stage:
  3. //check to see if a side of the ball is hitting the outside of the stage, and then redirect it
     if (greenBall.x <= greenBall.width/2) {
      greenBall.x = greenBall.width/2; //resets x to inside the stage
    ballSpeedX *= -1; //sends the ball right, instead of left
      }
      else if (greenBall.x >= stage.stageWidth-greenBall.width/2) {
                    greenBall.x = stage.stageWidth-greenBall.width/2;
                    ballSpeedX *= -1; //send the ball left, instead of right
      }
    //check to see if the top or bottom of the ball is hitting the outside of the stage, and then redirect it
          if(greenBall.y <= greenBall.height/2) {
                      greenBall.y = greenBall.height/2;
                      ballSpeedY *= -1;
          }
         else if (greenBall.y >= stage.stageHeight-greenBall.height/2) {
                      greenBall.y = stage.stageHeight-greenBall.height/2;
                     ballSpeedY *= -1;
          }

  1. Run the game to test that the ball stays inside the game stage, and bounces around the walls

ACTIVTY 2.2 - Add a user-controlled object that can interact with the automated object

Combine a user-controlled object with an automated object

  1. Using the completed file from Activity 2.1, add a new object to the stage by drawing a rectangle, converting it to a symbol and assigning it the instance name playerOne
  2. Place the playerOne ‘paddle’ towards the bottom of the stage
  3. Apply the Move with Keyboard Arrows code snippet to playerOne
  4. Add more code to this to stop the playerOne ‘paddle’ from moving outside of the left and right sides of the game stage (note, the red text indicates the code that is already in your Actions panel – it is from the code snippet):
  5. if (leftPressed) {
       playerOne.x -= 5;
       if(playerOne.x - playerOne.width/2 < 0) {    //these two lines stop the playerOne paddle from leaving the screen
              playerOne.x = playerOne.width/2;
              }
     }        
     if (rightPressed) {
        playerOne.x += 5;
        if(playerOne.x + playerOne.width/2 > stage.stageWidth){    //these two lines stop the playerOne paddle from leaving the screen
            playerOne.x = stage.stageWidth - playerOne.width/2;
            }
     }


  1. Now, let’s get interactive – we need to add some code to get the ball to bounce off the paddle when it hits it. There is a built-in method in Flash called ‘hitTestObject’ which will ‘test’ to see if two objects are touching each other. We will use this method at the top of the loop function:
  2. //check and react to the ball hitting the playerOne paddle
          if (playerOne.hitTestObject(greenBall) == true){
                                  ballSpeedY *= -1; //sends ball in opposite direction
                      }

  1. Run the game to test that the ball bounces off the bat.

 

ACTIVTY 2.3 – Keeping Score

Now we have some interaction between two objects, we can turn it into a game. First we will need to keep score – counting how many times the ball misses the paddle and hits the bottom of the screen.

To do this we will need to create a variable for the score (or loss of life), and we will need to add a text field to the screen so the player can keep track of how many lives they have lost.

  1. Add a variable declaration below the ones you already have in the file you created and continued in Activity 2.1 and 2.2:

    var playerLives:int = 10 //sets the initial number of lives to ten

  2. Edit the code where you programmed the ball to check if it hit the bottom of the screen (red text below) so that it takes a life whenever it happens:

    else if (greenBall.y >= stage.stageHeight-greenBall.height/2) {
                      greenBall.y = stage.stageHeight-greenBall.height/2;
                     ballSpeedY *= -1;
                      playerLives--; //reduces playerLives by 1
     }

  3. On the stage, use the Text tool to create a text field on the screen. In this field, type Player Lives: 10. Select the field and, using the Properties panel, change it from Static Text to Dynamic Text. Assign the instance name playerLivesText.
  4. In the Actions panel, create a new function that will change the number of Lives displayed on the screen:

    function updatePlayerLives():void {
    playerLivesText.text = (“Player Lives: “ + playerLives);
    }

  5. Call this function whenever the ball hits the bottom of the screen:

    playerLives--; //reduces playerLives by 1
    updatePlayerLives();

  6. Run the game to test if this works

 

Mini Assignment B – Bat and ball

Create a program with two objects: one that moves around the screen, 'bouncing' off the edges of the screen; one that can be moved using the keyboard keys, but that cannnot leave the screen. The automated object should also 'bounce' off the user-controlled object when the two objects meet.

Hand in a copy of your working file and a copy of your movie file. You will be assessed on the following criteria:

LO1 Both files are in an appropriate format and have appropriate names
The layers, symbols, and instances have appropriate names
LO3 The ball and paddle both stay inside the window
The ball bounces off the walls and the paddle
The paddle moves left and right
The screen displays the number of lives remaining

ActionScript 3.0 – Start and End Frames

To implement a more professional feel to your game, it will be useful to have a start screen. This can contain a range of features and information, but our main interest is in providing the user with the ability to start the game either by using the mouse or the keyboard.

Once this event has occurred, we then want the game to start.

ACTIVITY 3.1 - Setting up the layers and frames

  1. Create and save a new ActrionScript 3.0 file in Flash (name it appropriately)
  2. Create 4 layers - Actions, Background, Content, and Score (These layer names should be self-explanatory as to what will appear on each layer)
  3. Create 3 blank keyframes - this will enable you to have a start screen, a game play screen, and a game over screen.
  4. Use an existing image, or create one, and add it to the Background layer to create a background for your game (anything you like) To import, use File>Import>Import to Stage. Make sure that this image is on all three frames of the Background layer. Ensure that the Background layer is at the bottom of the list of layers.

ACTIVITY 3.2 - The Welcome Frame/Screen

To create a welcome screen, you will need to use the first frame of the Content layer.  This should orient the player to the game, and provide them with the opportunity to interact with an object in order to start the game. 

The first step is to create a 'start' button for the player to click, indicating that they are ready to start playing the game:

1.    Draw a shape - this will become the start button, so make it a decent size

2.    Add text to the shape, with the Text tool, so that it says 'Start'

3.    Select the shape, including the text, and convert it to a symbol (Modify > Convert to Symbol)

4.    Name the symbol button, and select the type Button.

5.    Give the new symbol the Instance Name startButton

You now need to add some functionality to the start button so that it does something when the user clicks on it:

1.    ​Add code to the first frame of the Actions layer (click in the first frame, then go to (Window > Actions)

2.    Tell the game to stop on this first frame by adding the code:

​stop();

   3. Add an event listener to the start button (the event of the mouse button being clicked when located on the button):

startButton.addEventListener(MouseEvent.MOUSE_UP, startClicked);

   4. Our event listener has called the function 'startClicked', so now we need to define this function so that it moves the program to the second frame and stops on this frame:

function startClicked(event:MouseEvent):void {
gotoAndStop(2);
}

​The next step is to provide a welcome message and instructions for the game etc using the text tool, adding images etc - you should be familiar enough with Flash now to be able to do this without instructions.

ACTIVITY 3.3 - Design Game Objects (assign state & behaviour)

The game we are going to design for this activity is a 'click and score' game. A target moves around the screen, and the user score points every time they click on it. There is a time limit for how long the user has to get a score.  Therefore, we will need to design:

  • a target
  • a timer display
  • a score display

Target: On the second frame of the Content layer, draw a shape & convert it to a symbol etc.

Timer: On the second frame of the Score layer, create a dynamic text field with 'Time: ' (or something similar)

Score: On the second frame of the Score layer, create a dynamic text field with 'Score: ' (or something similar)

Lock the 'Score' layer


Now we have designed and created the objects for our game, we can now assign behaviour to these objects.  Before we continue with the code for the game, check that you have assigned meaningful, camelCase instance names to each of the three objects.

All of the code should be added to the second frame of the 'Actions' layer.

 

First, we define the variables that we are going to use - the score, and the time remaining.  At the top of the panel add:

var score = 0;
var timeRemaining = 10;

Next, we need to add these values to the text on the stage. I have chosen the instance names scoreText and timeText for the two dynamic text fields added in the previous step – you may need to adjust these to match the instance names you chose. Beneath the variable declarations, add the code:

scoreText.text = "Score: " + score;
timeRemainingText.text = "Time remaining: " + timeRemaining;

Then, we determine when the score text field should be updated. In this case, we want the score text to increase by one each time the target is clicked on by the user.

We also need to do something with the target when it is clicked. In this case, we will use pre-defined method Math.random to generate random numbers to send the target to an x coordinate, a y coordinate, and to rotate the target. The inclusion of the stage width and height will keep the target within the stage boundaries.

The code to achieve this requires us to first check for the event of the mouse clicking on the target, and calling a function when that happens (I have chosen the instance name for the target symbol smallTarget):

smallTarget.addEventListener(MouseEvent.MOUSE_DOWN, targetClicked);

Now we need to define the function (tell the program what to do when this happens):

function targetClicked(event:MouseEvent):void
{
event.target.x = 25 + Math.random() * (stage.stageWidth - 25);
event.target.y = 25 + Math.random() * (stage.stageHeight - 25);
event.target.rotation = Math.floor(Math.random() * 360);
score++;
scoreText.text = "Score: " + score;
}

Now that the target and score are sorted out, we need to update the timer as time elapses, and send the player to the game over frame page if the timer gets to 0.

We start by defining the variable and using the pre-defined method Timer:

var countdown:Timer = new Timer(1000);

We then check for a Timer event and call the function that will define what to do when this event occurs:

countdown.addEventListener(TimerEvent.TIMER, tick);
countdown.start();

The function is then defined:

function tick(event:TimerEvent):void{
if(timeRemaining == 0){
countdown.stop();
gotoAndStop(3);

else {
timeRemaining--;
timeRemainingText.text = "Time remaining: " + timeRemaining;
}
}


ACTIVITY 3.4 - The Game Over Frame/Screen

This is very similar to the Welcome screen, but instead of instructions and start button, you should build a ‘replay’ button that will take the player back to the Welcome screen.

  1. On the third frame of the Content layer, create a ‘replay’ button in the same way you created the ‘start’ button
  2. Add ‘Game Over’ text to the screen
  3. Add code to the third frame of the Actions layer:

replayButton.addEventListener(MouseEvent.MOUSE_UP, replayClicked);
function replayClicked(event:MouseEvent):void {
gotoAndStop(1);
}

  1. Think about how you might add a message on this screen about the player’s score – add this code.
Mini Assignment C - Start and End Frames

Create a game with three frames and four layers. It must include a welcome screen, a game over screen, and an interactive game.

Hand in a copy of your working file.

You will be assessed on the following criteria:

 

LO1 The file is named as required and is in an appropriate format
Layers, symbols, variables, and instances have appropriate names
LO2 The game has a professional look and feel
The instructions are clear
It is clear how to start the game, and there is a clear end to the game
LO3 The start button and replay button work as expected
The game is interactive and contains a functioning timer and score


ActionScript 3.0 – Commenting your code

Commenting in programming is very important at all levels. Comments are used as a way of annotating code so that it is programmer-readable, rather than machine-readable.

This assignment asks you to download a simple maze game that I wrote, and then to add comments to the code that explain what each part of the code does.

You can add single line comments by adding  // at the start of the comment.

You can add comments to multiple lines by adding /* at the start of the first line of code and */ at the end of the final line of code.

If you are not sure what the code does, go back to the three programs you have already written and use the information from the learning activities to help you.  You may need to do further research to understand some of the methods and terms (such as hitTestPoint).

Start by dowloading and saving with your name:  MazeGame.ForCommenting.fla

Assignment D - Commenting

Submit an .fla file, with comments describing the code in the Actions layer.

You will be assessed using the following criteria:

LO1

The file was named appropriately

LO2

Spelling and grammar errors did not detract from comprehension

LO3

The game functioned as expected

All aspects of the game were explained in the comments

Explanations in the comments were correct