Join Todd Perkins for an in-depth discussion in this video Creating a custom cursor, part of ActionScript 3.0 Projects: Game Development.
- [Instructor] In this movie we'll take a look at creating a custom cursor for our game. If you're following along, I'm in cursor.fla in the Capter One folder, inside of the Exercise Files folder. First let's take a look at this .fla file. We have three layers; actions, energy, and BG. There's nothing in the actions layer yet; we'll write that in this movie. In the energy layer, there is a movie clip and I'm going to zoom out by pressing Command or Ctrl 2 on my keyboard. There's a movie clip that's a little energy bar which we'll use later on, and the BG layer just has a big, square background movie clip.
Let's look at the library. We have Cursor which is going to be our cursor, mcBG which is the background, mcEnergy the energy bar and our little Monster that we're going to use for this game. Let's double-click the Cursor movie clip to take a look at it. I'm going to zoom in by pressing z on my keyboard then clicking and dragging around the cursor to see what it looks like; it's a little crosshair with an empty center, fairly simple graphic. Let's go back to the main timeline. What we want to do is pull this cursor out of the library at runtime.
If you remember how to do that, you have to right-click or Ctrl-click the symbol, and choose Linkage. And then check the export for ActionScript box, and just note the Class name in the Linkage Properties dialogue box. There's what you're going to use when you create a new instance of this cursor. Click okay, and if you see a warning dialogue box, just click okay; it's just Flash telling you that Flash is going to create a class for you since the class doesn't already exist. Let's go to the first keyframe of the actions layer and open up the actions panel.
The first thing we'll do is create a variable to hold our cursor; I'm just going to call it cursor, and for datatype I'm going to type in MovieClip. Now you may be wondering why I'm not typing in cursor instead; because the base class for cursor is MovieClip, in other words, because Cursor is basically a MovieClip with a different class name to distinguish it from any other any other MovieClip, we can use MovieClip for the data type. Next I'm going to declare a function called initializeGame; that's going to start our game. Let's go down a few lines, create a function called initializeGame().
The function's not going to return a value. And I'm going to run that function immediately when we run this application. So what I'm going to do is copy initializeGame and the parentheses, by selecting and pressing Command-c or Ctrl-c on the PC. I'm going to paste that at the very bottom of the code by pressing Ctrl or Command-v. All right, let's go inside the initialized game function and we'll use our cursor variable to create a new instance of the cursor class. So cursor = new Cursor with a capital C.
We type Cursor with a capital C here because that's what we set in the Linkage Properties in our library. Now this will create a new instance of the Cursor from the library. The next step is to add the cursor to the stage. Use addChild to do that. And then I'm going to disable the cursor. I'm going to type cursor.enabled = false;. What this will do is it will disable any mouse interactivity for the cursor. That way, when we use our mouse to click on monsters on the screen to shoot them, Flash won't think we're clicking on the cursor, but rather, Flash will know that we're clicking on the monsters.
Let's go to the next line. The next thing we want to do is hide the mouse. To hide the mouse, just type Mouse.hide and some parentheses; that runs the mouse.hide method which hides the mouse. So now that the mouse is hidden, we want to connect the location of the cursor to the location of the mouse. We'll do that by using the onMouseMove event. I'm going to connect the onMouseMove to the stage; in other words, I'm going to have the stage listen for the onMouseMove event. So type stage.addEventListener, and the event is going to be (MouseEvent.MOUSE_MOVE -- that's all caps; as we move the mouse we're going to run the dragCursor function.
Now let's define the dragCursor function. Below the initialized game function, we'll create that function. It's going to receive an event, and the data type is MouseEvent. And all we're going to do here is set the cursor's x position to the x position of the mouse and the cursor's y position to the y position of the mouse.
Let's take a second look over the code and make sure everything looks right. Let's test the move by Command-Return or Ctrl-Enter on the PC, and drag the mouse around stage. And notice that the crosshair cursor follows the mouse position; nice! So now you've created a custom cursor. In the next movie, we'll talk about how to take motion from a motion tween and copy that as ActionScript, and we'll use that for our monster in our game.
- Understanding game development
- Building a shooting game
- Making a Ping-Pong game
- Developing the enemy's artificial intelligence
- Creating a word-guessing game
- Placing tiles in a slider puzzle game
- Creating a tank battle game
- Winning and losing a game