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

The Button Object

The Button object 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 the instance, you choose Actions > Movie Control > on in the Actions panel. Flash adds the event handler:

on (release) {
} 

The second way to assign an event handler to a button requires that you give your button instance a name in the Property Inspector. Then you assign ActionScript to the main Timeline. Choose Objects > Movie > Button > Events > onRelease. An anonymous function is assigned to your button event:

myButton.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.

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.
Choose Actions > Movie Control > on (Esc + on).

The on(release) event handler appears in the Script pane (Figure 4.1).

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


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

Additional actions appear between the event handler’s curly braces (Figure 4.2).

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


Button Events
Button Event Triggered when
on(press)/onPress When the pointer is over the hit area and the mouse button is pressed.
on(release)/onRelease When the pointer is over the hit area and the mouse button is pressed and released.
on(releaseOutside)/onReleaseOutside When the pointer is over the hit area and the mouse button is pressed and then released outside the hit area.
on(rollOver)/onRollover When the pointer moves over the hit area.
on(rollOut)/onRollOut When the pointer moves from the hit area off the hit area.
on(dragOver)/onDragOver When 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)/onDragOut When 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.
onSetFocus When 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.)
onKillFocus When 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 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 (Figure 4.3).

Figure 4.3. This button instance (top) is called myButton in the Property Inspector (bottom).


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.
Choose Objects > Movie > Button > Events > onRelease.

An anonymous function appears. The event appears in the Method field of the Parameters pane (Figure 4.4).

Figure 4.4. This anonymous function has yet to assign the onRelease event to a button.


5.
In the Object field, enter the name of your button instance (Figure 4.5).

Figure 4.5. The name of your button, myButton, goes in the Object field.


Your onRelease event handler is complete.

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

Additional actions appear between the event handler’s curly braces (Figure 4.6).

Figure 4.6. When the viewer clicks and releases the button called myButton, Flash goes to frame 10 and begins playing. Compare this script with the one in Figure 4.2.


Tips

  • When naming your button instance in the Property Inspector, keep in mind these simple rules: Do not include spaces, special characters, or punctuation, and do not start your name with a number. These naming rules apply to all objects.

  • 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.
Choose Actions > Movie Control > on.

2.
In the Parameters pane, check additional button events or uncheck unwanted button events (Figure 4.7).

Figure 4.7. The Parameters pane of the on action contains a checkbox list of various events you can assign to the button instance.


or

Choose Objects > Movie > Button > Events, and choose a different event from the list of available events (Figure 4.8).

Figure 4.8. The Events category (below the Button category) lists the events you can assign with an anonymous function.


Tips

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

  • You can assign more than one event for one 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).

    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, in Expert mode, write the function in this form:

    myButton.onPress = myButton.onRelease 
    =function() {
    }  
  • Within one button instance, if you want one event to have a different consequence from another event, 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 way 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, as you should be comfortable using both on(press) and onPress.


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