Being completely new to Flash and ActionScript 3.0, I turned to online tutorials to learn some of the basics to make my own Pong game. I’ve never made an online tutorial before, but I wanted to help other people who are new to Flash learn how to expand on the tutorials I used to make a better Pong game (and learn more about ActionScript 3.0 and Flash in the process).

I started with a the Pong tutorial from AS3 Game Tutorials. That tutorial is a good start, but will only give you the basic functions of the game. You’ll need to do some more work to get something with all of the bells and whistles of a completed game (start button, ending screen, sound effects, etc.).

In addition to what was covered in the above tutorial, I wanted to give the player a way to win or lose, and have separate ending screens for winning and losing, a way to restart the game at the end, and, of course, sound effects. The following is assuming you have already followed all of the Pong tutorials from AS3 Game Tutorials and have a working Pong game.

Sound Effects

For the sound effects, you will need to import your sound file into Flash. To start, after you have the sounds you want to use, go to file -> import to library and select the sound file you want to use. Navigate to your library panel, right click on the sound file you just imported, and click properties. Make sure Export for ActionScript and Export in frame 1 are checked. Rename the class to something like sndBeep or whatever you want to call it.

Go back to the Actions window. Declare the variable for your sound at the top of your code with the rest of your variables using something like this:

var sndCollision:Sound = new sndBeep();

Where “sndCollision” is the variable name and “sndBeep” what you called your sound previously.

Now simply use code like:

sndCollision.play();

Wherever you want that particular sound to play (for example, every time the ball hits the paddles). Repeat these steps for each sound effect you’d like to include in your game.

I got my sound effects from SoundJay.com.

Start Button

I figured this one out from a forum post on AS2 Game Tutorials. First, simply create your start button (I used Photoshop, but you could just make one right in Flash), giving it an instance name such as btnStart, and place it in your game (it doesn’t matter if it is covering your game. We will hide it upon button click). Now go to the actions window and replace:

init();

with something like this:

btnStart.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
btnStart.visible = false;
init();
}

Once the button is clicked, it will be hidden from the screen and the game will start.

End Screen

I also figured this one out from the same forum post as the start button, but I changed it up a bit. The instructions posted there have you simply making a score board to display when either the player or the computer gets to 5 points. I wanted separate screens to show whether the player won or lost, so I modified it a little bit (if you just want a scoreboard or one ending screen, follow the instructions in that forum post. The biggest difference is that I used two if statements, whereas the original poster used one).

First create two movieclip objects, one for winning (instance name winText) and one for losing (instance name loseText). I just used the words “You Win!” and “You Lose!” in the same font that I used for the scores. Place them so that they are overlapping each other, but not overlapping the start button (we will be reusing the start button to restart the game in the next section).

Reopen the actions window and add two if statements like these (one to check if the player won, and another to check if the computer won):

if(playerScore >= 5)
{
stage.removeEventListener(Event.ENTER_FRAME, loop);
winText.visible = true;
}

if(cpuScore >= 5)
{
stage.removeEventListener(Event.ENTER_FRAME, loop);
loseText.visible = true;
}

This stops the game and displays the win or lose text. But we’re not done yet! There’s no easy way for the player to restart the game and continue playing for hours and hours on end!

Restart Button
There might be better ways to include restart functionality to this game, but I couldn’t find any tutorials, and this was the best I could come up with after looking over the code with my limited experience in Flash and ActionScript 3.0. I basically just made the start button visible again, and reset the scores to 0 when the game ends.

To start with, add the following code inside both of the if statements we added in the last section, under where we made the win or lose text visible.
btnStart.visible = true;
cpuScore = 0;
playerScore = 0;

This makes the start button visible again and resets the scores. Now, go to the onClick function that we added when we made the start button. Add the following code:

winText.visible = false;
loseText.visible = false;
updateTextFields();

This will hide the win or lose text, and reset the score text fields to display zero again once the game is restarted.

I think that’s about it. I also added credit text with my name and website address to both ending screens the same way I added the winning text and losing text. You can play my finished Pong game here.

I hope someone found this helpful! As I said at the beginning of this post, I am a beginner at this myself. I’m also new to making tutorials, so if I accidentally left something out or wrote something wrong, let me know!