Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

Invisible Buttons

You can exploit the flexibility of Flash button symbols 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.16). 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 any area on the Stage react to the mouse pointer. For example, you can place several invisible buttons over a map graphic to create hidden hotspots (Figure 4.17).

Figure 4.16

Figure 4.16 An invisible button symbol only has its Hit keyframe defined.

Figure 4.17

Figure 4.17 Two invisible button instances over a map.

When you drag an instance of an invisible button onto the Stage, you 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:

  1. Choose Insert > New Symbol (Ctrl-F8 for Windows, Cmd-F8 for Mac).

    The Create New Symbol dialog box appears.

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

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

  3. Select the Hit keyframe.
  4. Choose Insert > Timeline > Keyframe (F6).

    A new keyframe is created in the Hit state.

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

    Figure 4.18

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

  6. Return to the main Timeline.
  7. 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 (Figure 4.19).

    Figure 4.19

    Figure 4.19 An invisible button, when placed from the Library on the Stage, will display a transparent blue area that is identical to its Hit keyframe.

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

    When you choose Control > Enable Simple Buttons, the transparent blue area disappears, but your pointer changes to a hand to indicate the presence of a button.

  9. Give the button instance a name in the Property inspector and assign an event listener for it in the Actions panel as described in the previous tasks.
  • + Share This
  • 🔖 Save To Your Account