Foundation Game Design with ActionScript 3.0, Second Edition (47 page)

Let's review what you know about how images are loaded into a program. A PNG file is loaded from the images folder into a loader object. The loader object is then added to a Sprite. The Sprite containing the loaded image is then placed on the stage.
Figure 4-29
illustrates how this works for a single button image. But this is nothing new; it's what you did in the previous chapter to load all your images. Easy stuff!

Figure 4-29.
The processes of loading one image into the program

To make a button with three states, all three images are loaded into one Sprite. Yes, you heard right: three images in one Sprite! However, only one of those images is visible at any one time. The images of the button states will become visible or invisible depending on what the mouse is doing.
Figure 4-30
illustrates this concept.

Figure 4-30.
The processes of loading one image into the program

If you understand this concept, the code will be very easy to follow. Let's take a look at the code that does this in the Buttons.as file.

The Buttons.as file is surprisingly long, so you're first going to look at the specific code that loads the button images and adds the button Sprite to the stage. You'll see how all this code fits together in context with the rest of the program in the pages ahead. The highlighted comments explain what each section of code does.

This is the code in the class definition that creates the three image loaders and the single button Sprite:

There's nothing new here; you saw all this code in the previous chapter. The only slight difference is a shortcut that I took to create the
URLRequest
objects. AS3.0 allows you to create the
URLRequest
object and assign the path to the file at the same time, like this:

You can see that the path to the image file is included in the parentheses. This saves you from having to write this line later in the program:

The next step is to load the images, which happens when the program runs.

But watch what happens next. The visible
property
of all the images is set to false, except for the
buttonUpImage
.

All three images are then added to the
button
Sprite.

They're all aligned on the
button
Sprite in exactly the same way—with their registration points at the top left corner. You can think of them as three playing cards that are perfectly stacked one of top each other. But only the
buttonUpImage
is visible.

The
button
Sprite then sets a few special properties that make it behave like a proper button.

Let's take a look at what each of these properties does.

• buttonMode
  turns a Sprite object into a button. It allows a hand icon to be displayed when the mouse hovers over it. It also allows the button to accept click events using the Enter or Space key, if it's active. The
  buttonMode
can be true or false.
  
• mouseEnabled
  determines whether or not the Sprite object can accept mouse events. Its default value is true, so you don't actually have to specifically write a line of code to set it to true. However, it's important to know that you can set it to false if you want to prevent the button from being clicked.
  
• useHandCursor
  determines whether or not the mouse arrow icon turns into a pointing hand when you move the mouse over the button. You can set this to either true or false. As soon as you set the
  buttonMode
property to true,
  useHandCursor
becomes true
  by
default, so you don't specifically need to set it as such. But again, it's important to know that you can turn this off if you need to.
  

4.
mouseChildren
determines whether the mouse can interact with any other objects inside the Sprite. In this example, there are three objects inside the button Sprite: the three images that you've loaded into it. AS3.0 refers to these internal objects as
children
. When you create a button, you don't want the mouse to interact directly with any of these children. You just want to the mouse to interact with the parent button Sprite. This means you should always set the mouseChildren property to false. If you don't, your program will become confused about whether the mouse is intending to click the button or the images that it contains.

Lastly, the
button
Sprite is added to the stage and roughly centered.

Now that the images are loaded into the button and the button is on the stage, you can use mouse events to determine which image is displayed.

The code adds four listeners to the button Sprite, with matching event handlers.

Each controls the display of a different state. In the previous chapter you just used the CLICK event. These other listeners work in an identical way, except that they're triggered by different mouse actions. Let's see how they work in the context of the running program.

The ROLL_OVER event happens when the mouse rolls over the button. This creates a highlighting effect by displaying the
buttonOverImage
and hiding the other states.

Figure 4-31
illustrates this.

Figure 4-31.
The ROLL_OVER event

The MOUSE_DOWN event happens when the left mouse button is pressed down over the button. This is the effect of pressing the button (see
Figure 4-32
).

Figure 4-32.
The MOUSE_DOWN event

The ROLL_OUT event happens when the left mouse leaves the button. In this case, the button is reset to its up state (see
Figure 4-33
).

Figure 4-33.
The ROLL_OUT event

The CLICK event happens when the left mouse is clicked. In this example, it sets the button to its up state again. The effect is the same as the ROLL_OUT event.

And there you have all four button events that control the display of the button. Here's the entire code for the Buttons.as file so you can see it all in its proper context: