Making Pong Game using FLASH

CLICK HERE to See Prior Students' Work

Today we will be using FLASH to create a game, Pong. FLASH software is used for a lot of the games you see on the Internet. In order to make the game you will need to follow the steps carefully and in their correct order. CLICK HERE to watch Mr. Durfee's video instructions on making a Pong Game.

Next, after making a basic Pong Game, as you learned in the video linked above, if you would like to put in images of your own it is important to get those images the right size and to remove any background colors from the images. CLICK HERE to watch Mr. Durfee's video on Preparing Images to Import Into Flash Animations.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Left Click on Game You Would Like to Play - Use Arrow Keys to Move Your Paddle

Copy and Paste the following ActionScript into your ActionScript window. Left click and highlight what you are copying, right click and select <Copy> then open Action Script Screen by clicking on the Symbol (paddley, paddlez or ball) and pushing F9. Right click and Paste in the action script.

For paddley (Do not copy the blue text):

onClipEvent(load)
{
this._y=390;
this._x=275;
this.paddlespeed=20;
}
onClipEvent(enterFrame)
{
if(Key.isDown(Key.LEFT)&&this._x>30)
{
this._x-=this.paddlespeed; //move paddle paddlespeed pixels left
}
if(Key.isDown(Key.RIGHT)&&this._x<520)
{
this._x+=this.paddlespeed; //move paddle paddlespeed pixels right
}
}

For paddlez

onClipEvent(load)
{
this._y=5;
this._x=275;
this.paddlespeed=20
}
onClipEvent(enterFrame) //below is my simple crappy AI for pong
{
if(this._x>_root.ball._x+5)
{
this._x-=this.paddlespeed;
}
if(this._x<_root.ball._x-5)
{
this._x+=this.paddlespeed;
}
}

For ball

onClipEvent(load)
{
function reset()
{
this._x=275;
this._y=200;
this.fullspeed=20;
this.xspeed=0;
this.yspeed=9;
this.udist=0;
this.edist=0;
this.ufraction=0;
this.efraction=0;
}
this.reset();
}

onClipEvent(enterFrame)
{
if(this._x>=525&&this.xspeed>0) //if ball hits right wall
{
this.xspeed=-this.xspeed;
}
if(this._x<=25&&this.xspeed<0) //if ball hits left wall
{
this.xspeed=-this.xspeed;
}
if(this.hitTest(_root["paddley"])) //if ball hits player paddle
{
this.udist=_root["paddley"]._x-_root.ball._x;
if(this.udist!=0)
{
this.ufraction=this.udist/(_root["paddley"]._width/2)
this.xspeed=-((1-Math.abs(this.ufraction))*this.fullspeed);
this.yspeed=this.ufraction*this.fullspeed;
}
else if(this.udist==0)
{
this.yspeed=-this.fullspeed;
}
if(this.yspeed>0)
{
this.yspeed=-this.yspeed;
}
}
if(this.hitTest(_root["paddlez"])) //if ball hits AI paddle
{
this.edist=_root["paddlez"]._x-this._x;
if(this.edist!=0)
{
this.efraction=this.edist/(_root["paddlez"]._width/2)
this.xspeed=-((1-Math.abs(this.efraction))*this.fullspeed);
this.yspeed=this.efraction*this.fullspeed;
}
else
{
this.yspeed=this.fullspeed;
}
if(this.yspeed<0)
{
this.yspeed=-this.yspeed;
}
}
this._y+=this.yspeed;
this._x+=this.xspeed;
if(this._y>440||this._y<-40)
{
this.reset();
}
}

Here are the instructions for this assignment typed out:

 

1. Open FLASH

2. Create a New Flash Action Script 2.0 Document.

3. Set the size of your new document to 550 pixels by 400 pixels and add an extra layer. Your animation will have two layers, your background layer for the picture in the back of your animation and a second layer, on top, where ALL of your paddles and the ball will be placed.

4. Draw your paddles and ball with only fill colors, no stroke, (or import images for these to your library and drag to your stage). NOTE: Be certain to have the images the correct size, cropped closely with no whitespaces and saved and imported as .swf files).

5. Convert each paddle and the ball to symbols <F8> Name one paddle paddley another paddlez and the ball, ball. Be certain to select Movie File and Center Register the Symbol [Movie Clip]. Also, be certain to type in the [Instance Name] for each of the Symbol [Movie Clips] paddley paddlez ball

6. Click on paddley and push <F9> to add the action script below. Copy and Paste action script to this paddle. Do the same for the ball and paddlez.

7. Save file as :pong and Control Test your movie to play your pong game.

Return to CMS Home Page