Sunday, October 10, 2010

Ponged pt.2

Time to start.

Today we are going to get our stage ( the background where the game takes place ) and our actors ( The paddles ) designed and ready to code.

- Open Adobe Flash CS4

- Choose 'New ActionScript 3.0 file

- Set your properties as such in the right hand side menu. The 'Class' field is the name of the ActionScript 3.0 file that the game will load when the game is loaded. We haven't actually created it yet so when you type in 'Engine' you will get a warning, just click [OK], we will fix it later.

- After your properties are set, create a straight line with the following properties.

- With these properties set, draw a line across the page, like so:

- Now use the 'Selection Tool' to select your line and manual change the properties to match:

-  Left-Click the line and select 'Convert to Symbol':

- Change the name field to "wall" (Capitalizations matter in ActionScript). Check the 'Export for ActionScript' box. Change the 'Class' field to "Wall". (As a matter of convention all class names should begin with a capital letter):

- When everything is ready, click [OK]. You will get a warning:

This simply means that the compiler cannot find the class file 'Wall' that we specified. Do not worry about this warning, we will be creating a class for our wall at a later point. Just click [OK].

- Your line is now a symbol that can be controlled by and referenced with ActionScript! Good job so far. Select your line and create a new copy (Ctrl+C, Ctrl+V). Select your new line and manually change its coordinates to: X:0.0, Y:290.

- Now select the 'Text Tool' (a picture of a T on the right hand side menu). Change the settings to:

- Click anywhere on your background and type "PONGED". After you have typed it, select it with your 'Selection Tool' and set its position to:

- Select your 'Text Tool' again, click anywhere on your backround and type "0:0" with the following settings:

- Of special note is the part that I circled in green. Changing the type to 'Dynamic Text' means we can use ActionScript to change what our text says dynamically, so when someone scores we can change one text to 1:0. The name 'scoreBoard' is the name of the text field, we will use that name when we want to access that text field with our ActionScript code.

- Using the 'Line Tool' create a dotted line with the following parameters:

- This will be our center line. It is merely aesthetic.

- Next create a line with the following properties:

This will be our paddle

- After you have created your paddle line create another one by selecting your paddle with the 'Selection Tool' and copying and pasting (Ctrl+C, Ctrl+V). Select your new paddle and change its color to something that you find appealing. I made mine light blue so it is easily visible against our black background. This will be the computer controlled paddle. Don't worry about the positions of either of the paddles at the moment, cause in our next lesson we will be converting them to symbols and using ActionScript to place and control them. Our paddle will be controlled by either keyboard or mouse and the enemy paddle will be controlled by scripted AI.

- Your project should look something like this:

- A copy of our project so far: PONGED.fla


  1. wow... i learned something today...

  2. Looks like I'm making pong now.

  3. Whoa, looks like I have something to do now.

  4. i like it man, keep the pong up

  5. hehe that's cool, nice guide

  6. oh thats a nice guide mate!

  7. thanks this stuff is cool, will definitly try to build my own pong, next week, Snake?

  8. That looks really frickin complicated

  9. pong was an amazing game... first game we made in our programming class in highschool

  10. Man, I haven't used flash in so long. This all looks so confusing compared to what I used to do.