Pong ~Part 1~ Setting up the Project

In 1972 Atari pioneered the video game industry with the release of Pong. If you think of classic games, Pong is almost always near the top of the list. So it is fitting that Pong should be at least one of your first flash games you make. In this tutorial, we are going to create a complete Pong game from start to finish.

This is intended for beginners, but if you have never programmed at all before you should check out my Getting Started tutorial first.

This is what we are going to create over the next 6 tutorials:

Step One: Set up the Flash project, and create the game pieces.

The first thing to do is to create a new Flash project (make sure your select the actionscript 3 version) and name it something like “Pong Tutorial”. I recommend creating a central “Flash” folder, and then creating a new folder inside that for each of your projects. This will keep things neat and organized.

Now what you want to do is to go into the properties panel of your new project, and next to where it says “Size” hit the edit button.

In here are 3 important things that we might want to change: The dimensions of your game, the FPS (frames-per-second), and the background color. Make sure that your project size is 550px wide by 400px tall – this should already be the default. Then change your background color to black. We’ll use white game pieces on a black background, just like the original. Finally, set your FPS to 60. This is the number of times the game will update its display every second that you play. So the higher your FPS, the smoother the visuals will be. 30 is a pretty standard FPS, but 60 gives even smoother gameplay. The only downside is that if your FPS is too high your game might lag and be worse off than using a lower FPS. Enough said.

Now that our project is set up, the first thing we are going to do is create the main game pieces for our Pong game. These will include 2 paddles and the ball. So first, let’s make the ball. Using the circle tool, create a white, 10 x 10 pixel circle. Tip: Hold down shift while using the Oval Tool to draw circles. Edit the size to be exactly what you want by using the “Position and Size” section of the properties panel.

And now use Modify –> Convert to Symbol and turn it into a new Movie Clip object. You can name it “Ball”, or anything else that takes your fancy. One thing to be careful about is the Registration section. Click on the center block of the grid. This will make the center of the ball become the center of the object instead of one of the corners.

Next up is are the two paddles. Since they are the same we can just make one paddle Movie Clip, and create two instances of it.

Use the rectangle tool to draw a paddle 10 pixels wide by 50 pixels tall.

Then convert it to a symbol, name it Paddle, and set its registration to the center.

Alright, that was easy. Now all we have to do is set up the stage with the game pieces. Go to your Library panel and drag two paddles onto the main stage, and 1 ball (if the library isn’t open go to Window –> Library or hit Command+L).

Set the position of one paddle to (20, 200), the other to (530, 200), and the ball to (275, 200). You want your screen to look like this:

Step One — COMPLETE!

If you run your game (Command+Return), you will see these graphics show up. But… they don’t do anything yet :(

Download the source code here!

Thanks for following along — read the next tutorial to add code to the game and make things work!