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

Invisible Buttons

Flash lets you define four special keyframes of a button symbol that describe how the button looks and responds to the mouse: the Up, Over, Down, and Hit states. The Up state shows what the button looks like when the pointer is not over the button. Over shows what the button looks like when the pointer is over the button. Down shows what the button looks like when the pointer is over the button with the mouse button pressed. And Hit defines the actual active, or hot, area of the button (Figure 4.11).

Figure 4.11. The four keyframes of a button symbol.

You can exploit the flexibility of Flash buttons by defining only particular states. If you leave empty keyframes in all states except for the Hit state, you create an invisible button (Figure 4.12). Invisible buttons are extremely useful for creating multiple generic hotspots to which you can assign actions. By placing invisible button instances on top of graphics, you essentially have the power to make anything on the Stage react to the mouse pointer. If you have several blocks of text that you want the user to read in succession, you can have the user click each paragraph to advance to the next one. Instead of creating separate buttons out of each text block, make just one invisible button and stretch instances to fit each one. Assign actions to each invisible-button instance that covers the paragraphs (Figure 4.13).

Figure 4.12. An invisible button has only the Hit keyframe defined.

Figure 4.13. Invisible-button instances over text blocks.

When you drag an instance of an invisible button onto the Stage, you actually see the hit area as a transparent blue shape, which allows you to place the button precisely. When you choose Control > Enable Simple Buttons (Ctrl-Alt-B for Windows, Cmd-Option-B for Mac), the button disappears to show you its playback appearance.

To create an invisible button:

From the Insert menu, choose New Symbol.

The Symbol Properties dialog box appears.

Type the symbol name of your button, choose Button as the behavior, and click OK.

A new button symbol is created in the Library, and you enter symbol-editing mode.

Select the Hit keyframe.

Choose Insert > Keyframe.

A new keyframe is created in the Hit state.

With the Hit keyframe selected, draw a generic shape that serves as the hotspot for your invisible button (Figure 4.14).

Figure 4.14. An invisible-button symbol. The rectangle in the Hit keyframe defines the active area of the button.

Return to the main Timeline.

Drag an instance of the symbol from the Library onto the Stage.

A transparent blue shape appears on the Stage, indicating the Hit state of your invisible button.

Move, scale, and rotate the invisible-button instance to cover any graphic.

When you enable simple buttons, the transparent blue area disappears but your pointer changes to a hand to indicate the presence of a button.

You can also create tool tips or helpful pop-up reminders by using invisible buttons. Create a short message in the Over state of an invisible button, and position these instances wherever the little messages apply (Figure 4.15).

Figure 4.15. The Over state of this invisible button has a balloon with directions to go to a glossary. Multiple instances can cover different words.

To create pop-up tool tips with invisible buttons:

Create an invisible button, as described in the preceding task.

Select the Over state, and insert a new keyframe.

In the Over state, create a graphic that tells users about a particular feature that may be scattered through your Stage or movie (Figure 4.16).

Figure 4.16. When only the Over state is defined in an invisible button, the graphics in the Over state will appear to pop up when the mouse rolls over the active area.

Return to the main Timeline, and place instances of your invisible button over all the appropriate spots.

✓ Tips

  • Be careful about rotating and scaling your instance because it will affect the button’s Over state (Figure 4.17).

    Figure 4.17. The instance over the words muscle contraction is stretched, making the Over state of the button stretch as much.

  • Be conscious of the stacking order of invisible buttons and how they are placed in your layers. The topmost button will take precedence over any button underneath it, effectively disabling the action of the bottom button.

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