Creating a small shooting game
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:
Arg this isnt working for me!!! I have MX pro 2004 maybe thats why.
This doesn’t work! i have action script 3 and i did everything you told me but it still isn’t working!
Can you please help
oh by the way i’m new to it so that could be why
Great Tutorial! I’ve slowed down the appearance of the star by editing the Timer value but it is now possible to click multiple times on the star. How would you go about making it so that after you click on the star, the star disappears yet you get one point added. that would mean that its a point per star per click.
@Joe &
@Arrow
It appears that you both want to remove the star after it has been hit. To do so, go to ‘clickHandler’ function and add this block of code:
@Dan
This was interesting one. You sure have to linkage every face to a class. Then you have to make a different timer for every face. This means you will need to write a timer handler function for every timer. This isn’t the best way to do this for sure but it is going to work. Try it yourself
when i load the file it always shows that error
“interface ‘Event’ could not be loaded.
function clickHandler(e:Event):void{
Total ActionScript Errors: 8 Reported Errors: 8
“
@admin
Thanks for that one! I think I’ve got it working, i’ll post a link on here once it’s up and live! Just can’t get my face timing right
it works! thx:) you need to link the star to a class, so dont name it in the instance name area!
i keep getting these errors and i cant figure out whats up, any ideas?
1120: Access of undefined property sight. sight.x = mouseX;
1120: Access of undefined property sight. sight.y = mousey;
1120: Access of undefined property points_txt. points_txt.text = points.toString();
Does this work for CS3 and can I add sounds?
@CS3
Yes, it does. But the polygon star part is not in CS3. I have both Adobe and Macromedia.
@Max
yo!
i dont know if u still need this info:
delete the whitespace between sight. sight.x! that should do the trick!
peace
Great, easy to follow. I’m using a variation of this but need the sight on top of my targets (I do not want to keep it below and change the alpha of my target as you do). When it is on top the click no longer works, unless I move the registration point to the top left, which doesn’t make for an accurate sight… Any ideas? Thanks.
Nice one! However, I want to make a game where the goal would be killing the members of my band, so I need to replace the star with 8 elements that would take turns appearing. Also, I’d like to add sounds. I’d really appreciate your help.
Whenever I try to do this, I get these errors. I followed the instructions to the letter.
**Error** Scene=Scene 1, layer=actions, frame=1:Line 9: The class or interface ‘Star’ could not be loaded.
var star:Star = new Star();
**Error** Scene=Scene 1, layer=actions, frame=1:Line 11: The class or interface ‘Timer’ could not be loaded.
var timer:Timer = new Timer(1000);
**Error** Scene=Scene 1, layer=actions, frame=1:Line 16: The class or interface ‘fl.transitions.Tween’ could not be loaded.
var tween:Tween;
**Error** Scene=Scene 1, layer=actions, frame=1:Line 20: The class or interface ‘int’ could not be loaded.
var points:int = 0;
**Error** Scene=Scene 1, layer=actions, frame=1:Line 29: The class or interface ‘Event’ could not be loaded.
function cursorMoveHandler(e:Event):void{
**Error** Scene=Scene 1, layer=actions, frame=1:Line 35: The class or interface ‘TimerEvent’ could not be loaded.
function timerHandler(e:TimerEvent):void{
**Error** Scene=Scene 1, layer=actions, frame=1:Line 53: The class or interface ‘fl.transitions.Tween’ could not be loaded.
tween = new Tween(star, “alpha”, Strong.easeOut, 0, 1, 3, true);
**Error** Scene=Scene 1, layer=actions, frame=1:Line 56: The class or interface ‘Event’ could not be loaded.
function clickHandler(e:Event):void{
Total ActionScript Errors: 8 Reported Errors: 8
Help? I can’t make it work…I typed exactly from the text but it just keep giving me these errors =(
1120: Access of undefined property sight. [sight.x = mouseX;]
1120: Access of undefined property sight. [sight.y = mousey;]
1120: Access of undefined property points_txt.text [points_txt.text = points.toString();]
1120: Access of undefined property sight. [sight.x = mouseX;]
1120: Access of undefined property sight. [sight.y = mousey;]
1120: Access of undefined property points_txt.text [points_txt.text = points.toString();]
same problems as above..
any help?
its ok. got it working.. small problem with the class. i didnt have it exporting to flash in the properties section..
@Quite puzzled. im having the same problem and i dont know how to fix it…
1046: Type was not found or was not a compile-time constant: Star.
1180: Call to a possibly undefined method Star.