Help Files and Tutorials for Computer Users
Two Player Pong Game Tutorial

 

Next page...

This tutorial will help you to create a variation of the previous pong game that will allow you to play against a friend instead of the computer.  The default controls are the mouse for one player, and the arrow keys for the second player, but you can re-write the code to substitute the "a" and "z" keys for the mouse to even things out, but keep in mind that the main purpose of this tutorial is to practice and learn Flash, and not to create a life-changing game.

Fig. 1

Start by opening a new Flash document. Open the Modify menu and select Document (1) to change the default document size to 650 px X 450 px and a frame rate of 60 fps. You can also click on the size button in the Properties  window. Change the background colour to black. Open the Window menu.  Check Timeline (2), Properties (3), Library (4), and Tools (5). Under Toolbars check Edit Bar.

Zoom out until you can see the entire stage.


Double-click the Layer name, or (right-click and select Properties),  and re-name it to board.

Fig. 2

 

Select the rectangle tool and a rectangle 630 px by 430 px as shown, with the X and Y coordinates at 10 and 10.

Hint: It will be easier to change the colour and dimensions as follows:

Draw any size rectangle. Using the Arrow Tool, drag a box completely around the rectangle. With the entire rectangle selected set the Width Property to 650, the Height to 430, and X and Y to 10. Hit Enter, or de-select the rectangle and you should have something that resembles Fig. 3.

Fig. 3

 

Right-click on the existing Layer and insert a new layer.  Give the new layer a suitable name.

Fig. 4

 

Right-click on the existing Keyframe, (the little white rectangle in the Timeline) in the new layer.  Add eight Frames. (This number is not critical, but it will help to visualize things later).
Fig. 5  

Click on the Keyframe on the board layer and drag it to Frame number 10 by holding down the mouse button. You should see a long white rectangle in front of it, between Frame 1 to Frame 9. Right-click on the Keyframe in Frame 10 and add nine more Frames until you project resembles Fig. 6.

Fig. 6

 

On the "play" layer, insert Keyframes at Frame 10, Frame 20, and Frame 30. Insert by either right-clicking on the empty frame, or selecting the Insert menu and selecting Timeline --> Keyframe.  Right-click on Frame 30 to insert nine more Frames.  The exact number is not important - this just allows more space for the Frame name.

 

 

Fig. 7

 

Fig. 8

Select each of the four frame areas, one at a time, and give them a Frame Label.  Name them as follows:
  • Frame 1: begin
  • Frame 10: play
  • Frame 20: win
  • Frame 30: lose

You should see a little red flag in each of the named areas.  Use lower case letters. The names will have to exactly match the code that we will be putting in. You can now see that we added frames to each Keyframe in order to be able to see the frame names. The game would still work with fewer frames.


Create a new layer and name it "start". Use the Text Tool to create an introduction to your game. Make sure that each text box is Static Text as indicated in the Properties panel.

Right-click on the new layer's Keyframe and add eight more frames to extend up to frame 9.

Fig. 9

 

Home

Next page...