AS3-101: Game Development part 1

– taterboy | April 21st, 2011

Filed under: ActionScript 101, ActionScript 3, Flash, Flash AS2 to AS3, Games, Tutorials

This series has been taught to a few students over the last couple years with the intention of making it into a video tutorial series, but due to the lack of time and fear that it will never happen otherwise, we are going to have to do this old-school.

The series was originally taught in Flex / Flash Builder, but with so many Flash AS2 developers still learning AS3, this is a great program for new and old developers who want to develop Flash games using actionScript 3. This tutorial series will be focused on the Flash IDE, if you want a Flash Builder version of this series, please request it in the comments below.

Getting Started:
The foundation of any game is providing a way for users to control elements on the screen. At our game’s core is these 4 lines of code.

?View Code ACTIONSCRIPT
// 1B
function frameHandler(ev:Event):void{
	ball.x += 10;
}
 
// 1A
addEventListener(Event.ENTER_FRAME, frameHandler);

Making it Work:
1. Open Flash CS-whatever and create a shape on the stage, mine is a 75 pixel ball. For the sake of space, the Document Settings were changed; width: 500, height: 100.

2. Select the shape and press F8 or go to the Menu and select Modify: Convert to Symbol.

3. In the window that appears, type in a name, select MovieClip from the “type:” drop-down and click OK.

4. Now go to the properties panel (with the symbol still selected) and give the symbol on the stage an instance name. In this case, we are using “ball”.

5. Create a new layer, select the first frame of that layer, open the actions panel and paste in the code above.

6. Publish Preview.

Wow!, the ball just flies off the screen, not a very impressive game. Before we can provide a way for users to control things on screen, we have to know how to control them with code and create the rules for the user’s controls. First, let’s understand the code we are currently using.

Reading the Code:
1A. addEventListener is how we capture things that are already happening in the FlashPlayer, behind the scenes.

We are listening for the ENTER_FRAME event type, and telling the event to trigger a function we are calling “frameHandler”.

We can use any function we want, but since I’m writing this tutorial, I’ll chose “frameHandler”.

AS2 Hint: In actionScript 2 we used onEnterFrame = function(){ trace(“do stuff”); } in stead of addEventListener. This seems like a short cut, but we could do essentially the same thing in AS3.

addEventListener(Event.ENTER_FRAME, function(ev:Event):void{ trace(“do stuff”); });

Instead of using onEnterFrame for some events and adding listener objects to capture others, events in actionScript 3 are more consistent, which may seem more constrictive now, but they are actually more liberating and powerful as we continue to add code to this game.

1B. Inside the frameHandler function, we add the code that we want to execute when the function is called, in this case it is called every frame, depending on the frame rate of the swf.

Functions are loaded into memory when the playhead reaches the frame the actions are placed on, but they do not execute until they are called by actionScript.

Keeping the Ball on Screen:
To keep the ball on screen, we need to add a couple more elements. The first thing we’ll add is two variables called “speed” and “moveX”.

?View Code ACTIONSCRIPT
var speed = 10;
var moveX:Number = 20;

Speed will represent the distance the ball will move each frame and moveX will represent the ball’s current x position on the stage. We are using a variable for the ball’s x position to make the transitions smoother, only moving the ball after all the calculations are correct.

Tip: Select the instance of ball on the stage, then go to the INFO panel and type 20 into the x position field. This will prevent a jump in the beginning of the animation.

Next we will add two if statements to check if the ball is reaching the left and right x bounds of the game. If it is, we need to send it back the other way.

?View Code ACTIONSCRIPT
if(moveX >= 455){
	speed = -10;
}
if(moveX <= 20){
	speed = 10;
}

Demo:

Get Adobe Flash player

The Final Code with Comments:

?View Code ACTIONSCRIPT
/** CONFIG **/
 
// how far the ball travels each frame
var speed = 10;
 
// the current x position of the ball.
var moveX:Number = 20;
 
/** EVENT HANDLERS **/
 
// Enter Frame Event handler
function frameHandler(ev:Event):void{
 
	// increase the ball x position by the value of speed
	moveX += speed;
 
	// if ball x reaches right bounds
	if(moveX >= 405){
		// reverse speed to negative
		speed = -10;
		//  set the ball x position to the right bounds
		moveX = 405;
	}
 
	// if ball x reaches left bounds
	if(moveX <= 20){
		// reverse speed back to positive
		speed = 10;
		// set the ball x position to the left bounds
		moveX = 20;
	}
 
	// update the ball's x property to equal moveX
	ball.x = moveX;
 
}
 
/** EVENT LISTENERS **/
 
// setup event listener for the ENTER_FRAME event type
// point the event to trigger the "frameHandler" funciton above
addEventListener(Event.ENTER_FRAME, frameHandler);
 
 
// stop this timeline
stop();

Source Files: Click Here. (Flash CS4 or higher)

Where To Go From Here:
We did not get to the point where a user can control the ball, that will happen in the next lesson, but in the meantime master controlling the ball with actionScript. This tutorial covers animating the ball’s x property, there are many other properties you can animate using what we’ve learned. Try animating the y, alpha, rotation, scaleX and scaleY properties using the Enter_Frame event.

If you would like to get a deeper understanding of how Functions work, please see AS3-101 Intro to Functions. Also available, AS3-101 Introduction to Variables and AS3-101 Introduction to Events.

NEXT: ActionScript 3 101 : Game Development part 2 (Coming Soon!)

Technorati Tags: , , , , , , , , , ,

| No Comments » | facebook:

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

*