- Listening for Events
- Mouse Detection
- The SimpleButton Class
- Invisible Buttons
- Animated Buttons and the Movie Clip Symbol
- Complex Buttons
- Button-Tracking Options
- Changing Button Behavior
- Creating Buttons Dynamically
- Keyboard Detection
- The Contextual Menu
- Creating Continuous Actions
- A Summary of Events
This chapter is from the book
This chapter is from the book
This chapter is from the book
Button-Tracking Options
You can define a button instance in the Property inspector in one of two ways: "Track as button" or "Track as menu item" (Figure 4.37). These two tracking options determine whether button instances can receive a button event even after the event has started on a different button instance. The "Track as menu item" option allows this to happen; the "Track as button" option doesn't. The default option, "Track as button," is the typical behavior for buttons; it causes one button event to affect one button instance. More complex cases, such as pull-down menus, require multiple button instances working together.
)
Figure 4.37 The button-tracking options in the Property inspector.
Imagine that you click and hold down the menu button to see the pop-up choices, drag your pointer to your selection, and then release the mouse button. You need Flash to recognize the MouseEvent.MOUSE_UP event in the expanded menu even though the MouseEvent.MOUSE_DOWN event occurred in the collapsed menu for a different button instance (in fact, in a different frame altogether). Choosing "Track as menu item" allows these buttons to receive these events and gives you more flexibility to work with combinations of buttons and events.
In the second task, you refine the pull-down menu with the MouseEvent.MOUSE_OVER event so that the menu collapses if the user's pointer wanders off the menu. This technique is important to keep pull-down menus expanded only when your viewer is making a choice from the menu.
To set "Track as menu item" for a pull-down menu
- Continue with the pull-down menu, as described in the preceding task.
- Go to symbol-editing mode for the movie clip.
- Select the keyframe on frame 1 containing the event handler actions for the button instance, and change the mouse event to MouseEvent.MOUSE_DOWN (Figure 4.38).
Figure 4.38 The collapsed-menu button listens for the MOUSE_DOWN event.
- Select the keyframe containing the ActionScript for the expanded section. Replace all the MouseEvent.CLICK events with MouseEvent.MOUSE_UP (Figure 4.39).
Figure 4.39 The expanded-menu buttons listen for the MOUSE_UP event.
- Select each button instance in the expanded keyframe.
- In the Property inspector, choose "Track as menu item" (Figure 4.40).
The button instances in the expanded menu will now trigger a MouseEvent.MOUSE_UP event even if the MouseEvent.MOUSE_DOWN event occurs on a different instance.
Figure 4.40 You need to change the setting to "Track as menu item" for each button instance in the expanded section of the timeline.
Return to the main Timeline, and test your movie.
You now click and hold down the mouse button to keep the menu open, then release the mouse button when you've made your selection.
)
)
)
To set a MOUSE_OVER event to collapse the menu
- Continuing with the pull-down menu constructed in the preceding task, go to symbol-editing mode for the movie clip.
- Add a new layer under the existing layers.
In the new layer, create an invisible button, and place an instance in a new keyframe corresponding to the expanded keyframe.
Your invisible button instance should be slightly larger than the expanded menu (Figure 4.41).
Figure 4.41 When the pointer leaves one of the buttons in the expanded state of the menu, it rolls over the invisible button that sits in the bottom layer.
- Select the invisible button instance.
- In the Property inspector, give the invisible button an instance name.
- Select the keyframe containing the event handler actions for your expanded menu buttons. In the Actions panel, assign a listener for your invisible button to detect a MouseEvent.MOUSE_OVER event (Figure 4.42):
invisible_btn.addEventListener (MouseEvent.MOUSE_OVER, collapsemenu);
Figure 4.42 The MOUSE_OVER event is detected on the invisible button, making the playhead jump to the keyframe labeled collapsed.
Return to the main Timeline, and test your movie.
The invisible button instance under the expanded menu detects whether the pointer leaves any of the other button instances. If it does, Flash sends the movie clip back to frame 1 and collapses the menu.
)
)