Flash, Flex and ActionScript tutorials – flashadvanced

In this tutorial you will learn how to create a small “shooting stars” game using Flash and ActionScript 3. Let’s get started!

1. Open a new Flash document and save it under “ShootingGame.fla”. Set its size to 500 x 300 pixels.

2. First of all we need to draw the sight of our weapon. So rename the first layer to “sight”. Take the Oval Tool and from the properties panel set its properties to Solid, Disabled Fill, Stroke height should be set to 3.
Then take the Selection tool, select a part of the circle and cut it like this:

The final step is to take the Line tool and to draw a cross. Just change the Stroke height value to 1.5. Select the whole sight and convert it to Movie Clip with instance name “sight” and registration point center.

3. Now our sight is ready and we need to draw a star. Take the PolyStar Tool and set it properties like this:

If your star is ready, select it and convert it to Movie Clip with registration point center. Linkage the star to class Star by going to the Library panel (Ctrl + L), right-clicking the Star movie clip and then setting the class name. Remove the star from the stage.

4. Take the text tool and first create a Static text field and type “Score:”. Then create a dynamic text field with instance name “points_txt” and position it next to the static text field. Embed the Numeral values for the font and for color choose #FF0000. Align the text fields to the bottom right part of the stage.

5. Create a new layer called “actions”, open Actions Panel and type this:

//importing tween classes
import fl.transitions.easing.*;
import fl.transitions.Tween;

//hiding the cursor
Mouse.hide();

//creating a new Star instance
var star:Star = new Star();
//creating the timer
var timer:Timer = new Timer(1000);
//we create variables for random X and Y positions
var randomX:Number;
var randomY:Number;
//variable for the alpha tween effect
var tween:Tween;
//we check if a star instance is already added to the stage
var starAdded:Boolean = false;
//we count the points
var points:int = 0;

//adding event handler on mouse move
stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorMoveHandler);
//adding event handler to the timer
timer.addEventListener(TimerEvent.TIMER, timerHandler);
//starting the timer
timer.start();

function cursorMoveHandler(e:Event):void{
	//sight position matches the mouse position
	sight.x = mouseX;
	sight.y = mouseY;
}

function timerHandler(e:TimerEvent):void{
	//first we need to remove the star from the stage if already added
	if(starAdded){
		removeChild(star);
	}

	//positioning the star on a random position
	randomX = Math.random()*500;
	randomY = Math.random()*300;
	star.x = randomX;
	star.y = randomY;
	//adding the star to the stage
	addChild(star);
	//changing our boolean value to true
	starAdded = true;
	//adding a mouse click handler to the star
	star.addEventListener(MouseEvent.CLICK, clickHandler);
	//animating the star's appearance
	tween = new Tween(star, "alpha", Strong.easeOut, 0, 1, 3, true);
}

function clickHandler(e:Event):void{
	//when we click/shoot a star we increment the points
	points ++;
	//showing the result in the text field
	points_txt.text = points.toString();
}

Here is the final result: