Beginner tutorials for ActionScript 3.0 (Flash CS3)

Posted on 12th September, 2009 by Shervin Emami

Here is a simple shooting game I made within 1 day of learning how to use Flash. (Note that I am an experienced programmer so it might have been easier for me than you). These small tutorials assume you know the basics of using Flash and programming in some language like ActionScript/C/C++/Java (such as variables, if..else statements, functions, etc). Note that this tutorial only applies to ActionScript 3, not ActionScript 1 or 2.

The result of this tutorial is to make a VERY basic game, with the following features:

  • A running man moves across the screen on each new frame. (shows how to run code on each frame).
  • The blue paddle moves wherever the mouse is. (shows how to find where the mouse cursor is).
  • Clicking the left mouse button shoots out red animated bullets. (shows how to create new animations).
  • Pressing Left / Right / Up / Down arrow keys on your keyboard will move the paddle too, and Spacebar will shoot bullets. (shows how to obtain keyboard input).
  • If a bullet hits the running man, he flashes red and starts again. (shows how to detect collisions of objects, and use graphical filters).

You can try the game here:

Here are the steps to create this game from scratch:

  1. Learn how to move an object based on the mouse. Watch this video to see how to create vertical and horizontal lines that follow your mouse.
  2. Learn how to do things based on the keyboard. Watch this video to see how to move things using your keyboard.
  3. Learn how to move things with each frame. Watch this video to see how to make a simple shooting game effect.
  4. Learn how to use a timer. Example code to create a one-off timer: here.
  5. Learn how to use graphical filters using code. Watch this video to see how to modify graphical filters using ActionScript.
  6. Put it all together. Now you are ready to combine everything together, into the basic shooting game.

Here is the complete ActionScript 3 source code to do this:

/*
Very simple shooter game using ActionScript 3.0 for Flash CS3.
Created by Shervin Emami (shervin.emami@gmail.com) on 13th Sept 2009,
based on other tutorials:

Tutorials for moving the paddle based on the mouse position,
and to shoot bullets when you click the mouse:
"http://www.thetutorialblog.com/flashactionscript/basic-actionscript-3-game/"

Tutorial for applying filters dynamically using code:
"http://www.onenterflash.com/2009/08/actionscript-3-basics-tutorial-filters.html"
*/

var runnerIsHurt:Boolean = false;

// Create a player's paddle in the middle of the window
// This creates a new instance of the "Player" movieclip, which has been exported.
var player:Paddle = new Paddle();
player.x = stage.stageWidth / 2;
player.y = stage.stageHeight / 2;
// This adds the player instance that we just created to the stage for displaying.
addChild(player);

// Create a runner on the left side of the window
// This creates a new instance of the "Runner" movieclip, which has been exported.
var runner:Runner = new Runner();
runner.x = 0;
runner.y = 30;
// This adds the player instance that we just created to the stage for displaying.
addChild(runner);

// Create event handlers for Mouse and Keyboard events, so that my functions are 
// called whenever the user does things :-)
// When the user moves the mouse, the function "mousemoveHandler()" is called.
stage.addEventListener(MouseEvent.MOUSE_MOVE, mousemoveHandler);
// When the left button is pressed the function "mouseclickHandler()" is called
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseclickHandler);
// Grab key presses, and call "keydownHandler()" whenever a key has been pressed.
stage.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler);

// Set the time you want in milliseconds. The 2nd optional parameter sets how many
// times the timer will be called.
// So make the 2nd value 1 for a single call or leave it blank to repeat forever.
var myTimer:Timer = new Timer(2000, 1); // call the function once after 2 seconds.
// When the timer hits 2 seconds it will run the Action
myTimer.addEventListener(TimerEvent.TIMER, timerAction);
// If you wanted to start the timer from here, you would uncomment this line:
//myTimer.start();

// This function is called whenever the user moves their mouse in the Flash window
function mousemoveHandler(e:MouseEvent):void {
	// Update the Player X position to the mouses X when the mouse is moved.
	player.x = mouseX; 
	// Update the Player Y position to the mouses Y when the mouse is moved.
	player.y = mouseY; 
}

// This function is called whenever the left mousebutton has been pressed.
function mouseclickHandler(e:Event):void {
	shootBullet();
}

// This function creates a new bullet at shoots up from the player by itself.
function shootBullet():void {
	// This creates a new instance of the bullet movieclip.
	var bullet:Bullet = new Bullet();
	// The bullet X position is set to the same as the player X position.
	bullet.x = player.x;
	// The bullet Y position is set to the same as the player Y position.
	bullet.y = player.y;
	// Add the Bullet instance to the stage, so it will be displayed.
	addChild(bullet);
	// Add an event listener to Bullet for when it enters the frame and when it
	// does call the function moveBullet.
	bullet.addEventListener(Event.ENTER_FRAME, moveBullet);
}

// This function is called on each frame, to move a bullet up with each frame.
function moveBullet(e:Event):void {
	// The event's "target" will be the Bullet movieclip which caused the event.
	e.target.y -= 5;

	// Check if the bullet hit the person
	if (e.target.hitTestObject(runner)) {
		runnerIsHurt = true; // Show the crazy filters on the runner.
		// Start the timer, to eventually make the runner look like normal again.
		myTimer.start();
	}

	// Check if the bullet is completely off the screen.
	if (e.target.y <= -10) {
		// Remove the event listener and the dynamically created Bullet movieclip.
		e.target.removeEventListener(Event.ENTER_FRAME, moveBullet);
		removeChild(MovieClip(e.target));
	}
}

// This function is called whenever the user presses a key.
function keydownHandler(e:KeyboardEvent):void {
	if (e.keyCode == Keyboard.LEFT) {	
		// LEFT key
		player.x -= 5;
	} else if (e.keyCode == Keyboard.RIGHT) {
		// RIGHT key
		player.x += 5;
	} else if (e.keyCode == Keyboard.UP) {
		// UP key
		player.y -= 5;
	} else if (e.keyCode == Keyboard.DOWN) {
		// DOWN key
		player.y += 5;
	} else if (e.keyCode == Keyboard.SPACE) {
		// SPACEBAR key
		shootBullet();	// Same as clicking the mousebutton.
	}
}

// This function is called everytime the timer has run out.
function timerAction(event:TimerEvent):void {
	// output a message so you know it's working
	trace("Next Level");

	runnerIsHurt = false;
	runner.filters = [];	// don't use the filters unless if the runner is hurt

	// Move down to the next line
	runner.x = 0;
	runner.y += 50;
	// If the runner is falling off the screen, move him back to the top
	if (runner.y >= stage.stageHeight) {
		runner.y = 30;
	}
}

// Move the runner on each frame.
// Call the "frameTick()" function before each animation frame is about to start.
addEventListener(Event.ENTER_FRAME, frameTick);

// Create graphic filters to change how the runner appears dynamically.
var gfilter:GlowFilter = new GlowFilter(0xff0000,.5,4,4,3,3);
var bfilter:BlurFilter = new BlurFilter(4,4,3);
// Apply both the filters AFTER the runner is hurt
runner.filters = [];

// This function is called on every single frame (12 times per second).
function frameTick(e:Event) {
	// Make the person run along the screen.
	// move it 3 pixels to the right on each frame.
	runner.x += 3;
	// If the runner is running off the screen then move him back at the start
	if (runner.x >= stage.stageWidth) {
		runner.x = 0;
	}

	if (runnerIsHurt) {
		// Make a crazy graphic blurring effect on the runner
		bfilter.blurX = Math.random()*5;
		bfilter.blurY = Math.random()*5;
		gfilter.color = Math.random()*0xffffff;
		// Apply both the filters to the object's current image.
		runner.filters = [gfilter, bfilter];
	}
}
 

XML tutorial for ActionScript 3.0

Posted on 13th September, 2009 by Shervin Emami

Here is a video tutorial at DevelopPHP.com, explaining how to store information in an XML file and use it in ActionScript.