Quick Tip: Custom Crosshair Cursor and Gunshot Sound
In this Quick Tip we will create a custom crosshair along with a gunshot sound. This could be the basis for a shoot-’em-up game. In this example, we place bullet holes on the stage at the point where you click.
Note: In spite of the new Native Cursor feature introduced in FP10.2 this old-school method is still a valid way of creating a custom cursor. It has the advantage of allowing you to use bigger graphics, plus it’ll work with older versions of Flash Player. We’ll take a look at Native Cursor’s in FP10.2 tomorrow
Brief Overview
In the SWF you’ll see a Start button. When you click this button, your mouse becomes a crosshair ready to do some damage. As you click around on the stage, a gunshot sound plays and a bullet hole graphic gets added to the stage at the point where you clicked with the mouse.
Step 1: Setting Up the Document
Open a new Flash Document and set the following properties
- Document Size: 500x400px
- Background Color:#FFFFFF
Step 2: Setting up the Game Elements
For the Start Button, I drew a rounded rectangle and placed some text with the word Start on it. I then converted the Button and Text to a MovieClip by drawing a selection around them and pressing F8. I gave the button the name startGame, and also used startGame as the Instance Name in the Properties panel. If the Properties panel is not showing for you, go to Menu->Window->Properties or just press CTRL+F3.
Included in the exercise files are two images: one is the crosshair graphic, and the other is the bullethole graphic. I imported these one at a time to the stage and converted them to a MovieClip by clicking on them and pressing F8. I gave them the instance names “BulletHole” and “CrossHair”, made sure the registration points were set to the center in both cases, and used the same name for the Class in the Linkage of each symbol. Below is an image of how I set up the BulletHole; it is the same for the CrossHair.
For the sound, I imported it to the Library then right-clicked it and selected Properties. I then gave it the name GunShot and set the Linkage Class as GunShot as well.
Now that we have all our game elements ready we can dive into the code.
Step 3: Set up the Package and Main Class
Here we set up our package and the Main Class for our game
First we import some classes we will need, then we set up our document class. This main class must extend either MovieClip or Sprite; here we extend MovieClip. We then declare some variables we will be using, and code our constructor function. The constructor function adds an Event Listener to the button, which is where we set up the rest of the game.
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.ui.Mouse;
import flash.media.Sound;
import flash.media.SoundChannel;
public class Main extends MovieClip {
//The movie clips and Sound in the Library
var crosshair:CrossHair = new CrossHair();
var bullethole:BulletHole;
var gunshot:GunShot = new GunShot();
//Needed for the gunshot sound
var soundChannel:SoundChannel = new SoundChannel;
//Whether or not the user has clicked 1 time
var firstShot = true;
}
public function Main() {
//Show hand cursor when user mouses over the button
startGame.buttonMode=true;
startGame.addEventListener(MouseEvent.CLICK,startTheGame);
}
}
Step 4: Coding the startTheGame() Function
The startTheGame() function is called when the user clicks on the button. This function removes the button from the stage, hides the Mouse,and adds the crosshair to the stage. We then add two Event Listeners to the stage.
private function startTheGame(e:MouseEvent):void{
//Remove the button from the stage
removeChild(startGame);
//Hides the mouse
Mouse.hide();
//Adds the crosshair and sets its x and y properties
//to the mouse's x and y coordinates
addChild(crosshair);
crosshair.x = mouseX;
crosshair.y = mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveCursor);
stage.addEventListener(MouseEvent.CLICK,fireShot);
}
Step 5: Coding moveCursor() and fireShot()
The moveCursor() function is called whenever the user moves the mouse, due to the MOUSE_MOVE event listener we added to the stage. In this function we simply make sure the crosshair is at the same position as the Mouse by using mouseX and MouseY.
private function moveCursor(e:MouseEvent):void{
//Makes sure the crosshair x and y is always
//where the mouse's x and y is
crosshair.x = mouseX;
crosshair.y = mouseY;
}
The fireShot() function is called whenever the user clicks on the stage. We first check to see if this is the first time the user clicked; if it is not, then we play the gunshot sound and add the bulletHole to the same position on stage where the user clicked by using e.stageX ande.stageY. The event holds information about itself — you can see what it contains by using trace(e.toString()).
If we did not check if this was the first time, then when the user first clicked on the Start button it would add a crosshair and play the gunshot sound (we don’t want that).
private function fireShot(e:MouseEvent):void{
//If they have clicked once then we do this
if(firstShot == false){
//Plays the sound
soundChannel = gunshot.play();
//Creates a new bullethole and adds it to the
//stage at the place where the user clicked
bullethole = new BulletHole();
addChild(bullethole);
bullethole.x = e.stageX;
bullethole.y = e.stageY;
//We always want the crosshair on top so we swap the "Depths"
//of the crosshair and bullet
swapChildren(bullethole,crosshair);
}
firstShot = false;
}
}//Close the class
}//Close the package
Conclusion
This could be the basis for many shoot-’em-up type games.It would be very easy to spawn some enemies and then do a hitTestPoint() check with the mouse’s X an Y against the enemy’s display object.
I hope you have enjoyed this tutorial. Thanks for reading!
View full post on Activetuts+
Hmm.. tried creating a few clustered bullet holes, .. funny white edge effect around the bullet by the 22nd click
.. i know .. i have too much time to waste 
Oh crud, just saw the note at the top. Oh well :^)
It would be cool if this tutorial used the custom cursors API to do the cursor, as that’s a lot more (and unusual!) Anyway, if anyone’s interested, I have a demo of native cursors here from a little while ago here: http://bobthecoolguy.wordpress.com/2011/02/10/custom-cursors-demo-in-fp-10-2/
Anyway, I understand this was supposed to be a beginner’s tutorial, just wanted to point out there’s a different (and probably better albeit more complicated) way to do it. doing it the way noted does let you use bigger cursors, which is nice, and perhaps fancier visual effects.