• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Button Tracking Options

A button instance can be defined in one of two ways in the Instance panel: Track as Button or Track as Menu Item (Figure 4.32). These two tracking options determine whether button instances can receive a mouse event even after the event has started on a different button instance. The Track as Menu Item option allows this to happen, while the Track as Button does not. The default option, Track as Button, is the more typical behavior for buttons and causes one mouse event to affect one button instance. More complex cases, such as pull-down menus, require multiple button instances working together. For example, imagine that you press and hold down the menu button to see the pop-up choices, then drag your mouse 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 on a different button instance (in fact, on a different frame altogether). Choosing Track as Menu Item allows these events to be accepted and gives you more flexibility to work with a combination of mouse events.

Figure 4.32. The Instance panel button tracking options.


To set Track as Menu Item with the Press event:

1.
Create a pull-down menu as shown in the previous task, and go to symbol-editing mode for the movie clip.

2.
Select the button instance in the first keyframe, and change the mouse event to Press (Figure 4.33).

Figure 4.33. The collapsed menu button is assigned the Press event.


3.
Select each button instance in the expanded keyframe, and in the Options area of the Instance panel choose Track as Menu Item (Figure 4.34).

Figure 4.34. Each button instance in the expanded section of the Timeline needs to change to Track as Menu Item. This includes 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.

4.
Return to the main Timeline and test your movie.

You now must click and hold down the mouse button in order 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 is because your mouse button is, in fact, depressed, but that event occurred earlier on a different instance.


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

1.
Continuing with the pull-down menu constructed in the previous 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.35).

Figure 4.35. 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 Drag Over mouse event is detected in that button, signaling the playhead to jump to the keyframe labeled collapsed.


4.
Select the invisible button instance, and in the Instance panel choose the Track as Menu Item option.

5.
In the Actions panel, assign the Actions:

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

6.
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, it 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