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

Home > Articles > Design > Adobe Creative Suite

  • 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 circle-a.jpg.

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

To detect a mouse event on a button

  1. Create a button symbol (Insert > New Symbol), and drag an instance of the newly created button symbol from the Library onto the Stage.
  2. Select the button instance, and enter a descriptive name in the Properties inspector. Add the suffix _btn to the name. In this example, the button name is mybutton_btn circle-b.jpg.

    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, assign a listener to your button. The target should be the name of your button, like so:
    mybutton_btn.addEventListener(MouseEvent.CLICK, reportClick);

    When the MouseEvent.CLICK event happens on the button, the function reportClick is called.

  5. On the next available line, enter the following function:
    function reportClick(myevent:MouseEvent):void {
       // do something in response

    The function name reportClick and parameter name myevent can be any name of your own choosing as long as they conform to the standard naming practice. In between the curly braces, enter actions as a response circle-c.jpg.

  6. Choose Control > Test Movie > in Flash Professional.

    Whenever you click the mouse button on the button instance, Flash performs the actions listed within the reportClick function circle-d.jpg.

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 a different event that should trigger the function (such as MouseEvent.MOUSE_MOVE, MouseEvent.MOUSE_OVER, and so on) circle-e.jpg.
  • + Share This
  • 🔖 Save To Your Account