• 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 depressed. And Hit defines the actual active, or "hot," area of the button (Figure 4.1).

Figure 4.1. 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. An invisible button contains only a Hit state, which defines the area that responds to the pointer (Figure 4.2). Invisible buttons are extremely useful for creating multiple, generic hot spots 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 a button. For example, if you have several blocks of text you want the user to read in succession, you can set it up to have the user click on 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.3).

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

Figure 4.3. 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, allowing you to place it precisely. When you choose Control > Enable Simple Buttons, the button disappears.

To create an invisible button:

From the Insert menu, choose New Symbol.

The Symbol Properties dialog box appears.

Type in the name of your button, and choose Button as the Behavior. Click OK.

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

Select the Hit keyframe.

From the Insert menu, choose Keyframe.

A new keyframe is created in the Hit state.

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

Figure 4.4. An invisible button symbol. The rectangular shape in the Hit keyframe defines the active area of the button.

Return to the main Timeline.

As with any button symbol, 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.

From the Actions panel, assign an action to the button instance.

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

Tool tips or helpful pop-up reminders can also be created 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.5).

Figure 4.5. The Over state of this invisible button has a balloon with directions to go to the Glossary. Multiple instances can be used to cover different words.

To create pop-up tool tips with invisible buttons:

Create an invisible button as illustrated in the previous task.

Select the Over state and insert a new keyframe.

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

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

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


Be careful about rotating and scaling your instance because it will also affect the button's Over state (Figure 4.7).

Figure 4.7. The instance over "muscle contraction" is stretched, making the Over state of the button stretched 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 its action.

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