Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | 10 Comments

In this tutorial, you’ll learn how to create a simple point and click game. The objective is simple: Do not let any balloons go over the top of the screen!

Preview

The Plan

As always, plan how the game is going to behave before you start any coding!

  • First of all, we want a start button.
  • We want a new balloon every 5 seconds.
  • Each balloon should start at the bottom of the page and move to the top of the page.
  • If the balloon goes over the top of the page, then it’s game over; remove all balloons from the stage and offer a restart button.

Step 1: Buttons

We know we are having a start and restart button, and we want a balloon, so let’s create those. I am using the pixlr.com editor.

Starting with a freshly generated Main.as file in FlashDevelop, we embed our images:

[as3]
[Embed(source=”../lib/start.jpg”)]
private var StartButton:Class;
private var startButton:Sprite = new Sprite();

[Embed(source=”../lib/restart.jpg”)]
private var RestartButton:Class;
private var restartButton:Sprite = new Sprite();
[/as3]

We create one instance of the start and restart buttons as Sprites. We have not embedded our balloon image as we want to do that in a separate class.

We have created and embedded our buttons. Now to make them do something. In the init function, add the following code:

[as3]
//add start button
startButton.addChild(new StartButton());
startButton.addEventListener(MouseEvent.CLICK, startGame);
startButton.buttonMode = true;
startButton.x = (stage.stageWidth / 2) – (startButton.width / 2);
startButton.y = (stage.stageHeight / 2) – (startButton.height / 2);
addChild(startButton);
[/as3]

This code will add the StartButton image to the sprite, and make it so that when the user clicks on it it calls the function ‘startGame’. We also make it change the user’s cursor when they hover over it. We then add our start button to the centre of the stage!

We now need a function called startGame.
[as3]
/**
* Create some balloons and get them moving!
* @param MouseEvent e
*/
private function startGame(e:MouseEvent):void {
startButton.removeEventListener(MouseEvent.CLICK, startGame);
removeChild(startButton);
}
[/as3]

First, some garbage collection. This is just some basic optimisation. Instead of waiting for FlashPlayer’s garbage collection to kick in and remove the event listener for us, we’ll remove it now and free up some CPU cycles.

We don’t want to show the start button any more, so we remove that from the stage.

Step 2: Balloons

Now we get to create some balloons.

First, planning. What do we want our balloons to do?

It would be nice if the balloons were not pure white. Let’s colour our balloons.
They need to move.
When a user clicks on the balloon, we want to recycle it. That is, make it move to the bottom of the screen again and begin it’s tween to the top of the page. Sounds like a reset function to me.

Here is our skeleton balloon class:
[as3]
/**
* Balloon.as
* Balloon Class.
*/
package
{
import flash.filters.DropShadowFilter;
import flash.display.MovieClip;
import com.greensock.*;

public class Balloon extends MovieClip
{
[Embed(source = “../lib/balloon.png”)]
private var BalloonImage:Class;

private var myTween:TweenLite;
private var colours:Array = [0xFF0000, 0x00FF00, 0x0000FF, 0x006633, 0xFFFCD6, 0x16A5DF];
private var dropShadowEffect:DropShadowFilter;

public function Balloon():void
{
addChild(new BalloonImage());
myTween = new TweenLite(this, 7, {y:-this.height, ease:”Linear.easeNone”});
changeColour();
}

public function reset():void
{
changeColour();
myTween.restart();
}

public function die():void
{
myTween.pause();
}

public function changeColour():void{
dropShadowEffect = new DropShadowFilter(0,45,colours[Math.floor(Math.random() * colours.length)],1,width,height,1,1,true,false,false);
filters = [dropShadowEffect];
}
}
}
[/as3]

As you can see we have embedded our balloon image in this class, and picked some bright colours to show it in. For the moving of the balloon I have chosen to use Greensock’s TweenLite as it offers a smoother tweening action than anything I can come up with.

Back in our Main class, create a property called timer
[as3]
private var timer:Timer = new Timer(5000, -1);
[/as3]

and add the following to the startGame function:
[as3]
timer.addEventListener(TimerEvent.TIMER_COMPLETE, createBalloon);
timer.start();
createBalloon();
score = 0;
[/as3]

This will create a new balloon every 5 seconds. And to get the ball rolling, we call createBalloon immediately:

[as3]
private function createBalloon(e:TimerEvent = null):void {
var balloon:Balloon = new Balloon();
balloon.addEventListener(MouseEvent.CLICK, popBalloon);
balloon.y = stage.stageHeight;
balloon.x = Math.floor(Math.random() * (stage.stageWidth – balloon.width));
balloons.push(balloon);
addChild(balloon);
timer.reset();
timer.start();
}
[/as3]
This function creates a new balloon, positions it randomly along the bottom of the screen, and tells the application to run popBalloon when a user clicks our newly created balloon.

[as3]
private function popBalloon(e:MouseEvent):void {
e.target.x = Math.floor(Math.random() * (stage.stageWidth – e.target.width));
e.target.reset();
}
[/as3]
This function simply moves the balloon back to the bottom of the screen and tells it to begin moving to the top of the screen again.

If you test your game at this point you will have the beginning of your game!

Step 3: Game Over and Restart

You may have noticed that the game doesn’t actually end. Let’s fix that. When a balloon passes the top of the screen we shall remove all the balloons on the screen and show a game over message. And, because games like to keep track of their l33t skilz, we’ll even tell them how many balloons they have clicked.

In the Main class, add another property:
[as3]
private var score:int;
[/as3]
This will keep track of how many balloons have been clicked.

Update startGame so that score equals 0:
[as3]
score = 0;
[/as3]

Finally, update popBalloon so that the score goes up:
[as3]
score++;
[/as3]

With score tracking in place, let’s put an end to this game. Update startGame:
[as3]
addEventListener(Event.ENTER_FRAME, balloonCheck);
[/as3]
What this is doing is calling a function on every frame checking if any of our balloons are above the screen.
[as3]
private function balloonCheck(e:Event):void {
if (balloons.length)
{
for (var i:int = 0; i Final Classes

Main.as
[as3]
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.Timer;

[SWF(width=’800′,height=’600′,backgroundColor=’#FFFFFF’,frameRate=’25’)]
/**
* Pop the balloons game. Main Class
* @author Richard Parnaby-King
*/
public class Main extends MovieClip
{
[Embed(source=”../lib/start.jpg”)]
private var StartButton:Class;
private var startButton:Sprite = new Sprite();

[Embed(source=”../lib/restart.jpg”)]
private var RestartButton:Class;
private var restartButton:Sprite = new Sprite();

private var balloons:Array = [];
private var timer:Timer = new Timer(5000, -1);
private var score:int;
private var textBox:TextField = new TextField;
private var textFormat:TextFormat = new TextFormat(null, 30);

public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point

//add start button
startButton.addChild(new StartButton());
startButton.addEventListener(MouseEvent.CLICK, startGame);
startButton.buttonMode = true;
startButton.x = (stage.stageWidth / 2) – (startButton.width / 2);
startButton.y = (stage.stageHeight / 2) – (startButton.height / 2);
addChild(startButton);

//instantiate the restart button
restartButton.addChild(new RestartButton());
restartButton.buttonMode = true;
restartButton.x = (stage.stageWidth / 2) – (restartButton.width / 2);
restartButton.y = (stage.stageHeight / 2) – (restartButton.height / 2);

textBox.defaultTextFormat = textFormat;

}

private function balloonCheck(e:Event):void {
if (balloons.length)
{
for (var i:int = 0; i Conclusion

In this tutorial you have learned how to make a simple pop-the-balloons game in ActionScript3.

Extra Credit

Even I will admit the graphics are a bit underwhelming. What about adding a background image? Perhaps a few floating clouds to add a little distraction? Could even increase the difficulty by having the balloons get a little smaller every time they are clicked on. And putting the score on the game page (in the top left corner, perhaps).

Category: AS3, Coding, Flash, Flash Develop

Posted By:

Comments

  • ABOUT

    Having fifteen years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • SUBSCRIBE TO OUR FEED