Beginner tutorials for ActionScript 3.0 (Flash CS3)
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:
- 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.
- Learn how to do things based on the keyboard. Watch this video to see how to move things using your keyboard.
- Learn how to move things with each frame. Watch this video to see how to make a simple shooting game effect.
- Learn how to use a timer. Example code to create a one-off timer: here.
- Learn how to use graphical filters using code. Watch this video to see how to modify graphical filters using ActionScript.
- 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];
}
}