Table of Contents

1. Coding Paddle Movement
2. Programming the Ball
3. Setting Up the Bricks on Stage
4. Hit Testing the Bricks
5. Creating Levels
6. Finishing Touches

Step 6: Finishing Touches

Well, we’re almost done with our game, now we just have to add some finishing touches. I won’t make a menu system like you usually should in a game before releasing it. But, this is just a tutorial, and hopefully you’ve learned something. You probably already know how to make a menu anyway. Also, I’m not going to teach you how to do some of the things that we need because hopefully you can do it yourself. If you can’t , there’s always the source file at the bottom.

Now, where were we? Oh yes. I realized that the last lesson, we were supposed to make more levels. I taught a lot of stuff, but I forgot to make more levels for you! I apologize. Anyway, here’s an example of a 5 level game (Put it on the first frame).

//The array code for lvl 1
//All of the later levels add one more row of bricks
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
var lvl2Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl3Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl4Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl5Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code, lvl2Code, lvl3Code, lvl4Code, lvl5Code);

It’ll be a pretty straightforward game. Next, I think the gamer needs to know that he has to click the screen to start, and not think the the game is frozen or something. So, just add a dynamic textfield to the middle of the stage. Give it an instance game of txtStart, and make sure it isn’t selectable.

Next, add this code at the end of the frame.

//setting the text's word
txtStart.text = "Click To Begin";

You can make the text different, but don’t be too mean. Next, we have to remove the text, which we can do in the mcBg’s onRelease() function. We aren’t going to remove the text field itself because we need it again for every level.

//removing the "Click to Start" Text
txtStart.text = '';

Now, we have to reset it every level. I’m not going to tell you how to do it. I hope you’ve learned enough to be able to.

Now, we can make the scoring happen. 10 points should be awarded to the player for destroying one brick. I’ll leave it to you to find out how to do this.

The next thing we have to do is display the current level, the score, and how many lives the user has. This will be pretty simple as well, so I won’t really go into details about how to do it. Just create a dynamic text field and update it in the onEnterFrame() function. Pretty easy, eh?

The Final Product

Source .fla File

Table of Contents

1. Coding Paddle Movement
2. Programming the Ball
3. Setting Up the Bricks on Stage
4. Hit Testing the Bricks
5. Creating Levels
6. Finishing Touches

Step 5: Creating Levels

Now that we’ve got the basic gameplay down, we can create some levels. Because we’re making only a simple game, we aren’t going to make that many. But before we even start making multiple levels, we have to make it possible to win or lose a level. This will be pretty easy.

We’re first going make it possible to beat the level. In order for this to happen, we have to track how many bricks are on the stage. Just define the following variable at the top of the code.

var brickAmt:Number = 0;

Now, we have to increment this number every time a brick is placed onto the stage. Type in this code into the makeLvl() function where we actually create the brick:

//incrementing how many bricks are on the stage
_root.brickAmt ++;

Next, we have to decrement the number every time a brick is destroyed. Just type in this code in the hitTest if statement:

//decrementing how many bricks are on the stage
_root.brickAmt --;

That was pretty easy, right? Now, we have to add some code that will check if the value of bricks is 0.
You can do so in the onEnterFrame() function:

//checking if the bricks are all gone
if(brickAmt == 0){
	//reset the level by increasing the level
	currentLvl ++;
	//and re-running makeLvl
	makeLvl();
}

When this code runs, nothing will happen when you break all of the bricks because we haven’t defined more levels. But, there is one thing I want to fix before doing that. The game starts automatically, even if the player isn’t ready. So, we want to start the level only when the user first clicks on the screen. This is actually easier than you might think. The first thing we need to do is create a black rectangle that covers the entire stage. Then, we have to turn it into a MovieClip. Name it mcBg, Export it for ActionScript, and give it an instance name of mcBg. Then, add the following to the bottom of the code:

mcBg.onRelease = function(){ //creating a function that will run when bg is clicked
	//move the bg out of range so it isn't bothersome
	mcBg._x = 800;
}

Now, we have to add the entire onEnterFrame() function to this, so it looks like this:

mcBg.onRelease = function(){ //creating a function that will run when bg is clicked
	//move the bg out of range so it isn't bothersome
	mcBg._x = 800;
	_root.onEnterFrame = function(){ //this function will run during every single frame
		//The paddle follows the mouse
		mcPaddle._x = _xmouse - mcPaddle._width*.5;
 
		//If the mouse goes off too far to the left
		if(_xmouse < mcPaddle._width / 2){
			//Keep the paddle on stage
			mcPaddle._x = 0;
		}
		//If the mouse goes off too far to the right
		if(_xmouse > Stage.width - mcPaddle._width / 2){
			//Keep the paddle on stage
			mcPaddle._x = Stage.width - mcPaddle._width;
		}
 
		//MOVING THE BALL
		mcBall._x += ballXSpeed;
		mcBall._y += ballYSpeed;
		//Bouncing the ball off of the walls
		if(mcBall._x >= Stage.width-mcBall._width){
			//if the ball hits the right side
			//of the screen, then bounce off
			ballXSpeed *= -1;
		}
		if(mcBall._x <= 0){
			//if the ball hits the left side
			//of the screen, then bounce off
			ballXSpeed *= -1;
		}
		if(mcBall._y >= Stage.height-mcBall._height){
			//if the ball hits the bottom
			//then bounce up
			ballYSpeed *= -1;
		}
		if(mcBall._y <= 0){
			//if the ball hits the top
			//then bounce down
			ballYSpeed *= -1;
		}
 
		if(mcBall.hitTest(mcPaddle)){
			//calculate the ball angle if ball hits paddle
			calcBallAngle();
		}
 
		//checking if the bricks are all gone
		if(brickAmt == 0){
			//reset the level by increasing the level
			currentLvl ++;
			//and re-running makeLvl
			makeLvl();
		}
	}
}

This is pretty solid code, but it does have some issues. One problem we have to fix is that the level is immediately made after you break all of the bricks, without resetting the ball’s position or anything (it may not be like that on yours, but trust me, I’ve tested it). Just paste in this code where we level up in the onEnterFrame() function:

//checking if the bricks are all gone
if(brickAmt == 0){
	//reset the level by increasing the level
	currentLvl ++;
	//and re-running makeLvl
	makeLvl();
	//reset the ball's position
	mcBall._x = 175;
	mcBall._y = 250;
	//then move the background back
	mcBg._x = 0;
	//and remove all of these events
	_root.onEnterFrame = null;
}

Now that we can beat a level, we now have to lose a level. We’re going to have to add a lives variable at the top first. We’re also going add a variable that defines if the game is over.

//how many lives you got
var lives:Number = 3;
//if the game is over
var gameOver:Boolean = false;

Then, we have to subtract a life every time the ball hits the floor and do other stuff when the lives are all gone.

if(mcBall._y >= Stage.height-mcBall._height){
	//if the ball hits the bottom
	//then bounce up and lose a life
	ballYSpeed *= -1;
	lives --;
	//if there aren't any lives left
	if(lives <= 0){
		//the game is over now
		gameOver = true;
		//go to a lose frame
		gotoAndStop('lose');
	}
}

Of course, now we have to create a frame called “lose”. I’m just going to make a frame that that has the text, “YOU LOSE”. Make sure to give your frame a label of “lose”, or the code won’t work.

Also, we have to remove the bricks from the stage, because they were added dynamically and won’t go away if you just change a frame. So, type the following code into the brick’s onEnterFrame function.

if(_root.gameOver){//if game's over
	this.removeMovieClip();//then remove this from stage
}

Now, we have to make the player be able to restart the game after losing. This will be easy. Just add the mcBg back to the stage that will reset the game if the stage is clicked. This code should be in the “lose” frame:

mcBg._x = 0; //putting the mcBg back
mcBg.onRelease = function(){
	gotoAndPlay(1);//restart the game
}

Well, that’s all for this lesson. The next one will be the final one, where we add some finishing touches, and fix some bugs.

The Final Product

Source .fla File

Table of Contents

1. Coding Paddle Movement
2. Programming the Ball
3. Setting Up the Bricks on Stage
4. Hit Testing the Bricks
5. Creating Levels
6. Finishing Touches

Step 4: Hit Testing the Bricks

Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. All you have to do is change this code in the makeLvl() function:

		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}

to this:

		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//giving this brick some actions
			_root['brick'+i].onEnterFrame = function(){
				if(this.hitTest(_root.mcBall)){//if this touches the ball
					//then destroy this mofugger!
					this.removeMovieClip();
					//and make the ball bounce away
					ballYSpeed *= -1;
				}
			}
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}

That was pretty easy, wasn’t it? Definitely much easier than what had to be done in AS3. Well, since we have time, I’m going to post here what your code should look like at this time:

Frame 1:

//Current level player is on
var currentLvl:Number = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Frame 2:

stop();
//These variables are needed for moving the ball
var ballXSpeed:Number = 10; //X Speed of the Ball
var ballYSpeed:Number = 10; //Y Speed of the Ball
 
onEnterFrame = function(){ //this function will run during every single frame
	//The paddle follows the mouse
	mcPaddle._x = _xmouse - mcPaddle._width*.5;
 
	//If the mouse goes off too far to the left
	if(_xmouse < mcPaddle._width / 2){
		//Keep the paddle on stage
		mcPaddle._x = 0;
	}
	//If the mouse goes off too far to the right
	if(_xmouse > Stage.width - mcPaddle._width / 2){
		//Keep the paddle on stage
		mcPaddle._x = Stage.width - mcPaddle._width;
	}
 
	//MOVING THE BALL
	mcBall._x += ballXSpeed;
	mcBall._y += ballYSpeed;
	//Bouncing the ball off of the walls
	if(mcBall._x >= Stage.width-mcBall._width){
		//if the ball hits the right side
		//of the screen, then bounce off
		ballXSpeed *= -1;
	}
	if(mcBall._x <= 0){
		//if the ball hits the left side
		//of the screen, then bounce off
		ballXSpeed *= -1;
	}
	if(mcBall._y >= Stage.height-mcBall._height){
		//if the ball hits the bottom
		//then bounce up
		ballYSpeed *= -1;
	}
	if(mcBall._y <= 0){
		//if the ball hits the top
		//then bounce down
		ballYSpeed *= -1;
	}
 
 
 
	if(mcBall.hitTest(mcPaddle)){
		//calculate the ball angle if ball hits paddle
		calcBallAngle();
	}
}
 
function calcBallAngle():Void{
	//ballPosition is the position of the ball is on the paddle
	var ballPosition:Number = mcBall._x - mcPaddle._x;
	//hitPercent converts ballPosition into a percent
	//All the way to the left is -.5
	//All the way to the right is .5
	//The center is 0
	var hitPercent:Number = (ballPosition / (mcPaddle._width - mcBall._width)) - .5;
	//Gets the hitPercent and makes it a larger number so the
	//ball actually bounces
	ballXSpeed = hitPercent * 10;
	//Making the ball bounce back up
	ballYSpeed *= -1;
}
 
function makeLvl():Void{ //Places bricks onto Level
	//finding the array length of the lvl code
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:Number = _root.lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:Number = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:Number = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//giving this brick some actions
			_root['brick'+i].onEnterFrame = function(){
				if(this.hitTest(_root.mcBall)){//if this touches the ball
					//then destroy this mofugger!
					this.removeMovieClip();
					//and make the ball bounce away
					ballYSpeed *= -1;
				}
			}
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}
	}
}
 
makeLvl(); //finally, run the function

The Final Product

Source .fla File

Table of Contents

1. Coding Paddle Movement
2. Programming the Ball
3. Setting Up the Bricks on Stage
4. Hit Testing the Bricks
5. Creating Levels
6. Finishing Touches

Step 3: Setting Up the Bricks on Stage

Ok, we’ve got the paddle and the ball. Now, the only major thing left to program is the brick. This is also the hardest to program, so it will be split up into 2 parts, setting them up, and breaking them down. Let us begin.

First of all, we need to look at how we’re going to set the bricks on the stage. We’re going to use an array with different numbers that will signify different bricks. In this tutorial, because we are keeping it simple, we will only use 2 different numbers, 1 and 0. 1 will mean to place a brick, and 0 will mean and empty space. An example for a simple level would be this:

//this would create one row of bricks
lvl1Array:Array = new Array(1,1,1,1,1,1,1);

Of course, this code will do nothing unless we create a function to actually make the bricks. The first step to this is actually making the brick MovieClip. So, mine is just going to be a plain white, with dimensions of 70×15 pixels. Also, this MovieClip should be exported for ActionScript so we can dynamically add it to the stage.

Got it? Now, here comes the tricky part, programming it. First of all, we are going to define a function called makeLvl(). Then, we are going to need to make some starting variables. These variables, however, can’t be reset every time the user beats a level, so it we have to make a frame before the the frame with all of the code. If you don’t get it, then here’s a picture.

In this frame, put the following code:

1
2
3
4
5
6

//Current level player is on
var currentLvl:Number = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Hopefully, I’ve explained what each of the variables do well enough that you understand. Also, in the 2nd frame, the game frame, just add a stop(); to the beginning. This way, the game doesn’t keep on looping.

Now, we’re going to go back to the game farme and we are going to add some intense code into the makeLvl() function. Here we go:

function makeLvl():Void{ //Places bricks onto Level
	//finding the array length of the lvl code
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:Number = _root.lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:Number = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:Number = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}
	}
}
 
makeLvl(); //finally, run the function

The next step is getting the ball to break the bricks. But, that is for a later time.

The Final Product

Source .fla File

Table of Contents

1. Coding Paddle Movement
2. Programming the Ball
3. Setting Up the Bricks on Stage
4. Hit Testing the Bricks
5. Creating Levels
6. Finishing Touches

Step 2: Programming the Ball

The next obvious step in creating a brick breaker game is making the ball. So, I’m just going to make a small 10×10 pixel white circle into the symbol, “mcBall”.

I’m also going to give my ball an instance name of mcBall.

Now, before we actually create the code for ball movement, we need 2 variables. Can you guess what they are? Great job! They are the x speed variable and the y speed variable! You’re such a smart little child. Add the following code to the very beginning (line 1) of your code. I like to organize all my variables so that they are all in the same place.

//These variables are needed for moving the ball
var ballXSpeed:Number = 10; //X Speed of the Ball
var ballYSpeed:Number = 10; //Y Speed of the Ball

You can change these values if you want, but this is what I’m going to use. Now, we have to use these variables to make the ball move. We should now add the following code to the onEnterFrame() function:

//MOVING THE BALL
mcBall._x += ballXSpeed;
mcBall._y += ballYSpeed;

Of course, when you test the movie, the ball is just going to move diagonally without any force stopping it. The next step is to make the ball bounce off of the walls. This is pretty easy if you think about it. All you have to do is multiply the x speed by -1 if it hits a vertical wall, and the same for the y speed with a horizontal wall. Let’s do it. Add the following code to the onEnterFrame() function:

	//Bouncing the ball off of the walls
	if(mcBall._x >= Stage.width-mcBall._width){
		//if the ball hits the right side
		//of the screen, then bounce off
		ballXSpeed *= -1;
	}
	if(mcBall._x <= 0){
		//if the ball hits the left side
		//of the screen, then bounce off
		ballXSpeed *= -1;
	}
	if(mcBall._y >= Stage.height-mcBall._height){
		//if the ball hits the bottom
		//then bounce up
		ballYSpeed *= -1;
	}
	if(mcBall._y <= 0){
		//if the ball hits the top
		//then bounce down
		ballYSpeed *= -1;
	}

If you test the movie, then the ball will just keep on bouncing off the walls. Of course, we’re going to change the bottom bounce, but for now we’ll keep it like this. The next step is making the ball bounce off of the paddle. This might take a little more math skills. We don’t want the ball to keep on moving at the same angle the whole time, so we’re going to make it change depending on which part of the paddle it hits. Because this will take some intense calculations, we’re going to make a new function called calcBallAngle(). So, let’s first add this code to the onEnterFrame() function.

if(mcBall.hitTest(mcPaddle)){
	//calculate the ball angle if ball hits paddle
	calcBallAngle();
}

This part is simple. It just runs the calcBallAngle() function whenever the ball hits the paddle. Now, here’s the code for the actual function. It’s pretty intense.

function calcBallAngle():Void{
	//ballPosition is the position of the ball is on the paddle
	var ballPosition:Number = mcBall._x - mcPaddle._x;
	//hitPercent converts ballPosition into a percent
	//All the way to the left is -.5
	//All the way to the right is .5
	//The center is 0
	var hitPercent:Number = (ballPosition / (mcPaddle._width - mcBall._width)) - .5;
	//Gets the hitPercent and makes it a larger number so the
	//ball actually bounces
	ballXSpeed = hitPercent * 10;
	//Making the ball bounce back up
	ballYSpeed *= -1;
}

I’ve commented the code out pretty extensively. Just read it and hopefully you’ll understand.

That’s basically all that I’m going to teach you today. Join us next time!

The Final Product

Source .fla File

Table of Contents

1. Coding Paddle Movement
2. Programming the Ball
3. Setting Up the Bricks on Stage
4. Hit Testing the Bricks
5. Creating Levels
6. Finishing Touches

Step 1: Coding Paddle Movement

Alright, I’ve decided to make a tutorial for you guys on how to create a brick breaker game in ActionScript 2.0. It’ll be very similar to my one for AS3, except coded differently. So, here we go, eh?

First of all, we’re going to make the background of the stage black, simply because it looks better, and we’re going to set the frame rate to 24. Then, we’re going to draw the paddle and we’re going to convert it into a MovieClip.

Mine is 55×10

Next, we’re going to give the paddle an instance name, mcPaddle. The instance name is case sensitive, so type it exactly the way I did.

Now, we get into some basic ActionScript. Create a new layer named “actions” where all of your code will go in. Next, type in this code:

onEnterFrame = function(){ //this function will run during every single frame
	//The paddle follows the mouse
	mcPaddle._x = _xmouse;
}

Hopefully, I’ve explained enough in the comments for you to get an idea of what the code does. If you test the movie, you might see a few problems. First of all, the paddle is not centered with the mouse, but is left aligned with it. This is easy to fix. Just replace:

mcPaddle._x = _xmouse;

with:

mcPaddle._x = _xmouse - mcPaddle._width*.5;

This code basically makes it so instead of using the paddle’s _x value, which is the left side of the paddle, it uses the middle of the paddle instead to follow the mouse.

Another problem with this code is that the paddle sometimes runs off stage. We don’t want this, it annoys the user. So, we’re going to add the following code to the onEnterFrame function.

//If the mouse goes off too far to the left
if(_xmouse < mcPaddle._width / 2){
	//Keep the paddle on stage
	mcPaddle._x = 0;
}
//If the mouse goes off too far to the right
if(_xmouse > Stage.width - mcPaddle._width / 2){
	//Keep the paddle on stage
	mcPaddle._x = Stage.width - mcPaddle._width;
}

This code will keep your paddle in bounds, no matter how large the stage is or how wide your paddle is. I’m leaving the explanation of the code up to you to figure out yourself. After all, you can never become a real programmer if you just copy and paste the code without any idea of what it means.

And now I conclude part one of this tutorial with the final code you should have in your file with an example of what mine looks like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onEnterFrame = function(){ //this function will run during every single frame
	//The paddle follows the mouse
	mcPaddle._x = _xmouse - mcPaddle._width*.5;
 
	//If the mouse goes off too far to the left
	if(_xmouse < mcPaddle._width / 2){
		//Keep the paddle on stage
		mcPaddle._x = 0;
	}
	//If the mouse goes off too far to the right
	if(_xmouse > Stage.width - mcPaddle._width / 2){
		//Keep the paddle on stage
		mcPaddle._x = Stage.width - mcPaddle._width;
	}
}

Source .fla File

Academic Superstore is a great place to find any kind of program for an amazingly cheap price (up to 80% off). It’s the place where I bought my Creative Suite 3 Design Premium for about $1000 less than it would have been from the Adobe site. That is quite a deal, isn’t it? But, there is one catch. You need to be eligible for the savings. Don’t worry, it’s very easy to be eligible.

Here is the site’s page about eligibility for savings. In order to be eligible, all you have to be is either a student, the parent of a student, or a teacher. The eligibility requirements are different for different products. I’m a student, so that’s how I got my savings.

So, why don’t you go now and pre-order Adobe CS4 now?

First of all, we’re going to create a new flash file. Then, we’ll name “Layer 1″ to “actions” because that will be the only layer that we’ll need to use today.

Drawing Circles

In order to draw a circle, we have to place the following code into the first frame:

//defining a new variable that will be the circle
var newCircle:Shape = new Shape();
//now we begin adding a fill to the variable
//this will make the circle red
newCircle.graphics.beginFill(0xFF0000);
//now we call a function that will draw the circle
//the first value (100) is the x value
//the second value (100) is the y value
//and the third value(50), is the radius
//the x and y values count for the center of the circle,
//now the left corner like you'd usually see
newCircle.graphics.drawCircle(100,100,50);
//this function just tells actionscript that we're done
//using this red fill
newCircle.graphics.endFill();
//adding the circle to the stage
addChild(newCircle);

I really commented out this one so hopefully you can understand what this code does. This will just draw a red circle that is 50 pixels in radius, 50 pixels from left and top of the stage. Without the comments, it only takes 5 lines, so it isn’t too complicated.

End Product

(I made the stage a bit smaller)

Drawing Rectangles/Squares

Drawing a rectangle or square is very similar to the circle, except with a different function called. Here’s the commented code for doing so:

var newRect:Shape = new Shape();
newRect.graphics.beginFill(0xFF0000);
//now we call a function that will draw the square
//the first value (50) is the x value
//the second value (50) is the y value
//the third value (100), is the width
//and the final value (100), is the height
newRect.graphics.drawRect(50,50,100,100);
newRect.graphics.endFill();
addChild(newRect);

I just commented the new stuff that was added in.

The End Product

ActionScript 2.0

We’ll first make the effect in ActionScript 2.0. To begin, we have to create an object that we have to add the perspective to. I’m simply going to make a square that is 50x50px. Here it is:

Next, convert it into a MovieClip. Make sure it’s registration point is set to the center. It doesn’t matter what you call it. I’m going to call mine “box”. After doing so, give your newly created MovieClip an instance name of mcBox. We can now reference it in ActionScript.

Now, simply create a new layer called “actions” and place the following code into it:

//creating a function that will run every frame
mcBox.onEnterFrame = function(){
	//scaling the box based on the y value
	mcBox._xscale = 100*(mcBox._y/Stage.height);
	mcBox._yscale = 100*(mcBox._y/Stage.height);
 
	//making the box follow the mouse
	//so we can actually show the perspective change dynamically
	mcBox._x = _xmouse;
	mcBox._y = _ymouse;
}

It’s pretty easy, right? But, if we test out the application, it isn’t as realistic as it could be. All you have to do to help with it is to add a gradient to the background, and have a horizon line at the top. Here’s the final product:

ActionScript 3.0

Now, we can make this effect in ActionScript 3.0. We’re going to start off with the same thing as we did in AS2. If you skipped that part, don’t worry I’ll sum it up for you.

1. Make a 50x50px box
2. Convert it into a MovieClip with registration point in center
3. Give it an instance name of mcBox
4. Create a new layer called actions

Now, all we have to do is add some code to the actions layer. Here it is:

mcBox.addEventListener(Event.ENTER_FRAME, moveBox);
 
//creating a function that will run every frame
function moveBox(event:Event):void{
	//scaling the box based on the y value
	mcBox.scaleX = mcBox.y/stage.stageHeight;
	mcBox.scaleY = mcBox.y/stage.stageHeight;
 
	//making the box follow the mouse
	//so we can actually show the perspective change dynamically
	mcBox.x = mouseX;
	mcBox.y = mouseY;
}

Pretty nifty code, eh? Well, here’s what it’ll turn out to look like (after I add a gradient background).

This is going to be a smaller tutorial about how to paginate objects in ActionScript 2.0. By paginate, I mean taking a large group of objects, and making it so the user can navigate through them by page. For example, in our previous tutorial, Make a Rhythm Game in AS2, we made a list of levels that the user could play. However, this list was only limited to 5 levels, and we didn’t paginate them. We’re going to do something like this today.

In this tutorial, I’m just going to take excerpts of text from my AS2 tutorial and will make updates in the code a bit. The process will be the same, just with different code. Let’s get started, shall we?

First of all, we’re going to make a large array of random values that we can paginate. Because we don’t care what the values are right now, we’re just going to make them totally random. If you’re going to use pagination for something more than a tutorial, then you probably should use your own values.

//this values array will hold all of the values we need to paginate
var values:Array = new Array();
//defining the 'i' variable so we can use it multiple times in for loops
var i:int;
 
//this loop adds 1000 different values to the array
for(i=0;i<1000;i++){
	//the values will range from 0-9999
	values[i] = Math.round(Math.random()*9999);
}

If you want to check, then try making a trace() statement to see what the values are.

Next, we’re going to have to make a MovieClip called “mcValueHolder” that will be placed onto stage with a certain value in the array within it. We also need a dynamic text field to actually have the value in it. Here’s what mine looks like:

Also, give the text field an instance name of “txtValue”, so we can reference it in actionscript.

Now, we have to export the MovieClip for ActionScript. If you don’t know how to do that, then right click on the MovieClip in the library and click on “Linkage…”. Then, check off “Export for ActionScript”. That’s all you have to do. Click on “Ok” and we can continue.

We also need two buttons to click to get to the next page and the previous page. Hopefully, you can figure out how to do that yourself. Just add them to the bottom of the stage and give them instance names of “mcPrev” and “mcNext”.

Also, we need to make a text field which tells the user which page they are on out of the total pages. Just add it to the stage and set the instance name to txtPage.

Now for the hard part, actually coding the pagination. Place this code in after we define the values variable.

//the current page we're on
var page:int = 1;
//the limit of values we need per page
var limit:int = 6;
//the current row that we're working on
var row:int = 0;
//The total pages that we have
var totalPages:int = Math.ceil(values.length/limit);
 
function createValues():void{
	//this will always limit the amount to the limit variable
	//but, "i" will act as a marker for which part of the values
	//array that we're going to use
	for(i=(page-1)*limit;i<page*limit;i++){
		//checks if there actually is a value where "i" is
		//otherwise we'll get some undefined movieclips
		if(i < values.length){
			var newValue:mcValueHolder = new mcValueHolder();
			//sets the coordinates based on the row
			newValue.x = 5;
			newValue.y = 5+newValue.height*row;
			//sets this guys value to the correct part of the array
			newValue.txtValue.text = values[i];
			//changing this guys name so we can reference it later
			newValue.name = 'value'+row;
			//adds the mc to stage
			addChild(newValue);
			//move onto the next row
			row ++;
		}
	}
	//then we reset the rows so we can use the variable again
	row=0;
}
//function to remove the mc's
function removeValues():void{
	//this loop will run once for each mc on stage
	for(i=0;i<limit;i++){
		//get the object in the current row and kill it!
		removeChild(getChildByName('value'+i));
	}
}
//we're defining a function which updates the string
function updateString():void{
	txtPage.text = 'Page '+page+' out of '+totalPages;
}
//next page and previous page functions
function prevPage(event:MouseEvent):void{
	//checking if the current page isn't too low
	if(page > 1){
		//take away all of the objects so we can make new ones
		removeValues();
		page --;
		createValues();
		//then update the page text
		updateString();
	}
}
function nextPage(event:MouseEvent):void{
	//checking if the current page isn't too high
	if(page < totalPages){
		removeValues();
		page ++;
		createValues();
		updateString();
	}
}
//first things first, update the string to be as it is
updateString();
//then we place the movieclips onto the stage
createValues();
//adding listeners to the buttons
btnPrev.addEventListener(MouseEvent.CLICK, prevPage);
btnNext.addEventListener(MouseEvent.CLICK, nextPage);

Pretty intense, eh? Well, this code is basically useless by itself. I doubt that anybody wants to look through random numbers. But, implementing it into your project will help a lot.

The Final Product

Source .fla file