Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Flash

  • Print
  • + Share This
This chapter is from the book

The SimpleButton Class

In the previous section, you were able to listen for a mouse click on the Stage. But more often than not, you'll want to detect a mouse click when it happens on a specific object on the Stage, like a button, movie clip, or a text field. The SimpleButton class handles the visual objects that interact with the mouse pointer. Flash lets you define four special keyframes of a button symbol that describe how the button looks and responds to the mouse: the Up, Over, Down, and Hit states. The Up state shows what the button looks like when the pointer isn't over the button. Over shows what the button looks like when the pointer is over the button. Down shows what the button looks like when the pointer is over the button with the mouse button pressed. And Hit defines the actual active, or hot, area of the button (Figure 4.10).

Figure 4.10

Figure 4.10 The four keyframes of a button symbol.

It's important to realize that events can target many kinds of objects, and not just buttons. Buttons just give you a convenient way to create graphics that provide visual feedback when the mouse is interacting with it.

To detect a mouse event on a button

  1. Create a button symbol, and place an instance of the button on the Stage.
  2. Select the button instance, and enter a descriptive name in the Property inspector. Add the suffix _btn to the name. In this example, the button name is mybutton_btn (Figure 4.11).
    Figure 4.11

    Figure 4.11 The button instance is named mybutton_btn in the Property inspector.

    This name is the name of your button object; you'll use it to reference the button from ActionScript. This name is not the same one that appears in your Library.
  3. Select the first frame of the main Timeline, and open the Actions panel.
  4. In the first line of the Script pane, enter the following function:
    function buttonClick (myevent:MouseEvent):void {
         // do something in response
    The function name buttonClick and parameter name myevent can be any name of your own choosing as long as it conforms to the standard naming practice. In between the curly braces, enter actions as a response.
  5. On the next available line, assign a listener to your button. The target should be the name of your button, like so:
    mybutton_btn.addEventListener (MouseEvent.CLICK, buttonClick);
    When the MouseEvent.CLICK event happens on the button, the function called buttonClick that you defined earlier is called (Figure 4.12).
    Figure 4.12

    Figure 4.12 The event handler consists of defining a function and adding an event listener. In this example the movie will stop when the button is clicked.

  6. Choose Control > Test Movie.

    Whenever you click the mouse button on the button instance, Flash performs the actions listed within the buttonClick function (Figure 4.13).

    Figure 4.13

    Figure 4.13 When the mouse click occurs over this button, named mybutton_btn, the actions in the function are executed.

To select different mouse events

  1. Highlight the existing first parameter of the addEventListener() method, and press the Delete key.
  2. Type in the name of the event that should trigger the function (such as MouseEvent.DOUBLE_CLICK, MouseEvent.MOUSE_OVER, etc.) (Figure 4.14).
    Figure 4.14

    Figure 4.14 Change the MouseEvent properties to listen for different kinds of mouse events.

  • + Share This
  • 🔖 Save To Your Account