Main Content

You are here:

Pong (Part 1)

Welcome to Foundation Flash tutorials. In this series of tutorials you will learn how to make a full game of "Pong!" in AS3. A full version of the souce code created in this part in also available. In this part of the project, you will learn:

Over the course of the series you will make the game below:


Okay, let's get started. The first thing to do is to create a new project with one .fla and an ActionScirpt File. Save the ActionScript file as Game.as. Then set the document class of the fla to "Game". Then set the Frame Rate of the .fla to about 40, and the background colour to black. Now, finally, we can crack on with code. First comes the package declaration and then the imports; today we will be using Movie Clips, Events, and a new one, the "Keyboard" class. This Keyboard class allows us to utilise keyboard events, the focus of today's tutorial.

Next come the definition of a Movie Clip, which will hold the player. Then we move onto the constuctor function. This is the first block of our code.

package {
        import flash.display.MovieClip;
        import flash.events.*;
        import flash.ui.Keyboard;
        public class Game extends MovieClip {
                public var playerone:MovieClip = new MovieClip;
                public function Game() {

Apologies for ripping through the code like this, but it really is a neccesity, as they is quite a lot of code to get through. The next line, I think, requires a small description of its very own. For keyboard events to work the focus has to be on the stage. This line ensures that this is the case.

  stage.focus = this;

After that though, the next few lines we have have seen before, just drawing in the player.

     playerone.graphics.beginFill(0xffffff);
        playerone.graphics.drawRect(0,0,20,100);
        playerone.x = 10;
        playerone.y = 140;
        addChild(playerone);

You may question why the rectangle wasn't just drawn straight to (10,140). Well, this is because if we drew it to, say, (100, 100) then that point would become the player's point (0,0). Thus if we had wanted to mov ethe player to (0,0) on the stage, we would have had to set the x and y of the player to (-100, -100). To remove this potential complication we draw it at (0,0) and move it.

     stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyboardDown);
        }
        public function onKeyboardDown(event:KeyboardEvent):void {

The code above sets the event handler for keys being pressed (you should, perhap, not that line down); and so every time one is pressed a function will run. This function is called onKeyboardDown. The contents of which are such:

     if (event.keyCode == Keyboard.UP) {
                if (playerone.y > 0) {
                        playerone.y -= 5;
                }
        } else if (event.keyCode == Keyboard.DOWN) {
                if (playerone.y < 300) {
                        playerone.y +=5;
                }
        }
}//End function
}//End class
}//End package

Which means this:

If the key that has just been pressed is the 'up' key
and we are not touching the top or above
move up 5 pixels

Instead if the key that has just been pressed is the 'down' key
and we are not touching the bottom or below
move down 5 pixels

It is, of course, CTRL/Command and ENTER to view our work, once you have saved the .as file.

So what exactly have we made?

Well, today, we have made a white rectangle can move up and down, but only to the edge of the screen. Next time we will add in the ball (quite a complex thing). Why not go there now?