Creating a Button with Multiple Hot Spots

I l @ ve RuBoard

Part of the fun of buttons is that you can use them for anything. You don't have to simulate buttons or switches. Flash buttons are versatile in part because each frame of a button can have quite different content. The Hit-frame graphic, for example, need not coincide with any of the graphics of the previous frames : It can be a separate graphic that creates hot spots in various areas of the Stage.

Imagine an animated shell game in which your viewer must determine which cup is hiding a bean. You could create a separate button that displays the message "Nope, gues again!" for each empty cup, or you could create one button that displays the message and put a graphic for each empty cup in the Hit frame of that button.

To create multiple hot spots for a single button:

  1. Create a new Flash document with a simple illustration of five cups in Frame 1 (Figure 13.35).

    Figure 13.35. On the Stage, create the picture for which you want to activate multiple hot spots. Here, five cups are part of a shell game. One cup hides an item; the others are empty. You can use one button with multiple hot spots to display the same message when the user clicks any of the empty cups.

    graphics/13fig35.gif

  2. On the Stage, use the arrow tool to select four of the cups, and choose Edit > Copy (Figure 13.36).

    Figure 13.36. Copy the empty cups on the Stage.

    graphics/13fig36.gif

  3. Choose Insert > New Symbol.

    The Create New Symbol dialog box appears.

  4. Type a name , choose Button in the Behavior section, click OK.

  5. In symbol-editing mode, in the Timeline for your button, select the Hit frame.

  6. Choose Insert > Blank Keyframe.

  7. Choose Edit > Paste.

    Flash pastes copies of the four cups in the center of the Stage (Figure 13.37). You can fill these graphics with a solid color if you want to remind yourself that users will not see them.

    Figure 13.37. In symbol-editing mode, paste the Clipboard contents (the empty cups) into the Hit frame of your invisible button.

    graphics/13fig37.gif

  8. In the Timeline, select the Down frame.

  9. Choose Insert > Blank Keyframe.

  10. On the Stage, create the message that you want people to see when they click an empty cup (Figure 13.38).

    Figure 13.38. Whatever you place in the Down frame appears whenever someone clicks one of the hot-spot areas that you created for the Hit-frame graphic. Here, onion skinning is turned on to help with positioning the message text.

    graphics/13fig38.gif

  11. Return to movie-editing mode, and drag a copy of your button to the Stage.

    Flash shows transparent previews of the hot-spot area.

  12. Use the arrow tool or the arrow keys to reposition the hot-spot cups to coincide with the cups in Frame 1 of your movie (Figure 13.39).

    Figure 13.39. When a button contains no images in the Up frame, Flash displays a transparent version of the Hit-frame graphic. You can use the arrow tool or the arrow keys to position the button so that the preview graphics precisely cover the graphic elements on the Stage.

    graphics/13fig39.gif

    You're ready to see the button in action.

  13. Choose Control > Test Movie.

    Flash exports the movie and opens it in Flash Player. When you click one of the four empty cups, Flash displays the message that you created for the Down frame of your button.

graphics/01icon02.gif Tip

  • If you were creating a real game, you'd want to be sure to create another, separate button to place over the fifth cup. Not only might you want to display a winner's message (or start an animation or jump to another frame) when someone clicks this cup, but you also would want to be sure that the pointer would change to the pointing finger consistently, so as not to give the game away.


I l @ ve RuBoard


Macromedia Flash MX for Windows and Macintosh. Visual QuickStart Guide
Macromedia Flash MX 2004 for Windows and Macintosh (Visual QuickStart Guides)
ISBN: 0582851165
EAN: 2147483647
Year: 2002
Pages: 243

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net