• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

The Button Class

The Button class handles the events involving how the pointer interacts with a button; to a limited extent, it also handles keyboard presses. You can assign event handlers to buttons in one of two ways. First, you can assign an event handler to the button instance that sits on the Stage. When you assign an event handler to a button instance, use the ActionScript command

on (release) {
}

where release represents a specific kind of button event. Other kinds of button events are possible.

The second way to assign an event handler to a button requires that you give your button an instance name in the Property Inspector. Then you assign ActionScript to the main Timeline. In the Actions panel, you start by entering the instance name of your button followed by a dot and then an event that is assigned to an anonymous function. If your button were named myButton_btn, then your code would look similar to this:

myButton_btn.onRelease = function() {
}

In both cases, you then add ActionScript between the curly braces of the event handler. Those actions will be performed whenever the event happens.

The release/onRelease button event is the typical trigger for button interactivity. The event is triggered when the mouse button is released inside the Hit state of a button symbol. This setup allows viewers to change their minds and release the mouse button over a safe spot outside the hit area even after they’ve already clicked a button. Other types of button events make possible a range of interactions. Table 4.1 lists all the button events.

Table 4.1. Button Events
BUTTON EVENTTRIGGERED WHEN
on(press)/onPressWhen the pointer is over the hit area and the mouse button is pressed.
on(release)/onReleaseWhen the pointer is over the hit area and the mouse button is pressed and released.
on(releaseOutside)/onReleaseOutsideWhen the pointer is over the hit area and the mouse button is pressed and then released outside the hit area.
on(rollOver)/onRolloverWhen the pointer moves over the hit area.
on(rollOut)/onRollOutWhen the pointer moves from the hit area off the hit area.
on(dragOver)/onDragOverWhen the pointer is over the hit area and the mouse button is pressed; then the pointer is moved off the hit area and back over the hit area while the button remains pressed.
on(dragOut)/onDragOutWhen the pointer is over the hit area and the mouse button is pressed; then the pointer is moved off the hit area while the button remains pressed.
on(keyPress"WhatKey")When the key whatKey is pressed.
onSetFocusWhen the button receives keyboard focus through the Tab key. (The button is highlighted by a yellow rectangle when the Tab key is used to select a button on the Stage.)
onKillFocusWhen the button loses keyboard focus through the Tab key. (The button is highlighted by a yellow rectangle when the Tab key is used to select a button on the Stage.)


To assign an event handler to a button instance:

1.
Create a button symbol, and place an instance of the button on the Stage.

2.
Select the button instance, and open the Actions panel.

3.
In the Script pane, enter the ActionScript word on followed by an opening parenthesis.

A code hint pull-down menu appears, providing you with all the events available to the button (Figure 4.1).

Figure 4.1. Use the on action to assign an event handler to a button instance.


4.
Choose an event from the code hint pull-down menu.

5.
Enter a closing parenthesis and then an opening curly brace.

6.
Choose another action as the response to the event.

7.
On your last line of code, end your statement with a closing curly brace (Figure 4.2).

Figure 4.2. When the viewer presses and releases this button, Flash goes to Frame 10 and begins playing.


or

1.
Create a button symbol, and place an instance of the button on the Stage.

2.
Select the button instance, and open the Actions panel.

3.
In the Actions toolbox, choose Global Functions > Movie Clip Control > on.

A code hint pull-down menu appears, providing you with all the events available to the button (Figure 4.3).

Figure 4.3. The code hint pull-down menu provides a list of available events.


4.
Choose an event from the code hint pull-down menu.

5.
In between the curly braces, choose another action as the response to the event.

To assign an event handler on the Timeline:

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. Make sure to add the suffix _btn to the name (Figure 4.4).

Figure 4.4. The button instance is called myButton_btn in the Property Inspector.


This name is the name of your button object; you will 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 Script pane, enter the instance name of your button followed by a dot.

A code hint pull-down menu appears (Figure 4.5).

Figure 4.5. The code hint pull-down menu appears automatically because it recognizes _btn as the extension to the name of a button object.


5.
Choose an event from the pull-down menu.

6.
Enter a closing parenthesis followed by =function(){}.

An anonymous function is assigned to a particular event of your button instance (Figure 4.6).

Figure 4.6. The response to the button click has not yet been added to the event handler.


7.
With the pointer between the curly braces, choose an action as the response to the event (Figure 4.7).

Figure 4.7. When the viewer presses and releases the button called myButton_btn, Flash goes to Frame 10 and begins playing. Compare this script with the one in Figure 4.2.


or

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. Make sure to add the suffix _btn to the name.

3.
Select the first frame of the main Timeline, and open the Actions panel.

4.
In the Script pane, enter the name of your button.

5.
In the Actions toolbox, choose an event from Built-in Classes > Movie > Buttons > Events. Complete the handler by adding =function(){}.

An anonymous function is assigned for the event.

6.
With the pointer between the curly braces, choose an action as the response to the event.

✓ Tips

  • As described in Chapter 3, it is recommended that you end all instance names for buttons with _btn so that Flash can provide the appropriate code hints in the Script pane.

  • When you create your event handler on the main Timeline, your button must be present on the Stage at the same time to “receive” its instructions. If you create the event handler in keyframe 1, for example, but your button doesn’t appear until keyframe 10, your button will not respond to the event handler.


To select different button events:

1.
Simply highlight the existing button event and press the Delete key (Figure 4.8).

Figure 4.8. Change the button event by highlighting it and choosing another. The event is in a different place, depending on whether your code is assigned to the button instance (top) or on the main Timeline (bottom).


2.
Press the Show Code Hint button above the Script pane or press Ctrl-space (Windows) or Cmd-space (Mac) to bring up the code hint pull-down menu.

3.
Choose a different event from the pull-down menu.

✓ Tips

  • All the button events except release require that you choose Control > Test Movie to see the behavior of the button instance. These events don’t work in the editing environment when you choose Control > Enable Simple Buttons.

  • You can assign more than one event for a single on action. The action on(press, release), for example, will detect when the mouse button is pressed as well as when the button is released and will execute any action within its curly braces if either of those two events occurs (Figure 4.9). After the first event, enter a comma and a second code hint pull-down menu will appear from which you can choose a second event.

    Figure 4.9. If either the press or release event happens, Flash goes to Frame 10 and begins playing.

  • If you want to assign more than one event by using an anonymous function, you can create separate function statements or you can write the code in this form:

    myButton_btn.onPress = myButton_btn.
    onRelease = function() {}
    

  • Within one button instance, if you want one event to have a different consequence than another event has, you must create separate on action statements or separate anonymous function statements. To have the rollOver event make your movie play and the rollOut event make your movie stop, your actions would look like this:

    on (rollOver) { play(); }
    on (rollOut) { stop(); }
    

  • Don’t confuse the rollover/onRollover button event with the Over keyframe of your button symbol. Both involve detecting when the pointer is over the hit area, but the Over state describes how your button looks when the mouse is over the hit area, whereas the rollover/onRollover event assigns an action when that event actually occurs. So the keyframes of a button symbol define how it looks, and the event handler defines what it does (Figure 4.10).

    Figure 4.10. The Over state of the button symbol (top) defines how the button looks when the pointer is over the Hit state. A rollOver event handler (bottom) defines what the button does when the pointer is over the Hit state.


on(press) or onPress?

With two ways to assign event handlers to buttons, which one do you use? The answer partly depends on the complexity of your Flash project. Although it may be simpler to put event handlers directly on the button instance, in the long run, it’s better practice to assign event handlers on the main Timeline. This method keeps all your ActionScript code in one place rather than scattered among individual buttons on the Stage. As your movie becomes more complex and you have more buttons to deal with, you’ll find it easier to isolate and revise button events. Putting the event handler on the main Timeline also forces you to name your button instances so that you can target and control their properties with ActionScript.

Assigning event handlers directly to button instances, however, offers one distinct advantage: You can copy and paste button instances during author time and their event handlers will be pasted along with them. In this book, we will use both methods in examples because you should be comfortable using both on(press) and onPress.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint