• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 13. Making Buttons for Your User to... > Task: Make a Button with an Extra La...

Task: Make a Button with an Extra Large Hit State

In a new file, use the Text Tool to draw the word Home.

Using the Arrow tool, select the text block you just created and convert it into a symbol (by pressing F8 or selecting Insert, Convert to Symbol). Name it Home button, make sure that you select Button Behavior, and then click OK.

Go ahead and test the movie (select the Control, Test Movie menu) and notice how the button is sensitive to where you move your cursor. You'll only see the Hand cursor when you're exactly on top of the text.

Back in our file, we can fix this by creating a larger Hit state for the button. Double-click the button (so we can edit the master button).

Now that we are inside our button, insert a keyframe in the Hit frame (click in the Hit frame, and press F6 or select Insert, Keyframe). Realize that the Home text in the Hit frame is just a copy of text in the Up frame (inserting a keyframe copies the contents of the other frame). After we draw the Hit state, we can delete this text as the user never actually sees anything in the Hit frame.

While in the Hit frame, use your Oval tool to draw a filled oval that's slightly larger than the text (turn off Snap to Objects temporarily if you want). When you have your oval, you can delete the text (from only the Hit frame).

If you test your movie now (select Control, Test Movie or press Ctrl+Enter), you'll see that the button gives the user a break because it's much easier to click.

The button you just created used a Hit state to create a larger area for the user to click. Often you can forgo creating a Hit state and the button's solid areas will define the clickable (or “hot”) area. Just remember that without a Hit state, the closest keyframe to the left of the Hit frame will define what's hot—that is, the graphics in the Down state.



Not a subscriber?

Start A Free Trial

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