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 anything on the Stage react to the mouse pointer. If you want the user to read several blocks of text 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 block. Assign actions to each invisible button instance that covers the paragraphs (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 Invisible button instances over text blocks.

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 Symbol Properties dialog box appears.

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

  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.

  • + Share This
  • 🔖 Save To Your Account