|
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... |
