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

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.36). These two tracking options determine whether or not 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 does not. 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.36. 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 release event in the expanded menu even though the press 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 button events.

To set Track as Menu Item with the press event:

1.
Create a pull-down menu, as described in the preceding task.

2.
Go to symbol-editing mode for the movie clip.

3.
Select the button instance in the first keyframe, and change the mouse event to press (Figure 4.37).

Figure 4.37. The collapsed-menu button is assigned the press event.


4.
Select each button instance in the expanded keyframe.

5.
In the Property Inspector, choose Track as Menu Item (Figure 4.38).

Figure 4.38. You need to change the setting for each button instance in the expanded section of the Timeline to Track as Menu Item, including buttons 1 through 4 in keyframes 9 and 12.


The button instances in the expanded menu will now accept a release event after the press event occurs on a different instance.

6.
Return to the main Timeline, and test your movie.

You now click and hold down the mouse button to keep the menu open.

? Tip

  • When you set Track as Menu Item for this pull-down menu, the expanded button instances display their Down state as you move your pointer over them. This display occurs because your mouse button is, in fact, pressed, but that event occurred earlier on a different instance.


Refine the pull-down menu with a dragOver event so that the menu collapses even if no selection is made. 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 with the dragOver event:

1.
Continuing with the pull-down menu constructed in the preceding tasks, go to symbol-editing mode for the movie clip.

2.
Add a new layer under the existing layers.

3.
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.39).

Figure 4.39. When the pointer leaves one of the buttons in the expanded state of the menu, it is dragged over the invisible button that sits in the bottom layer. The dragOver event is detected in that button, signaling the playhead to jump to the keyframe labeled collapsed.


4.
Select the invisible-button instance.

5.
In the Property Inspector, choose the Track as Menu Item option.

6.
In the Actions panel, assign these actions:

on(dragOver) {
    gotoAndStop("collapsed");
}

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

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