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!