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

Hour 13. Making Buttons for Your User to... > Task: Add Multiple States to Your Si...

Task: Add Multiple States to Your Simple Button

In the file containing your super simple button (created previously), double-click the instance of the button to be taken into the master version of this symbol. By the way, if you're having trouble clicking the button because you keep getting the hand cursor every time you go over the button, select the menu Control, and make sure that the menu item Enable Simple Buttons does not have a check mark next to it.

Now that we're in the master version of the MyButton symbol, you should notice that this symbol has only four frames—and instead of being numbered, they're named Up, Over, Down, and Hit (see Figure 13.2). They are still four frames, they just all have names. Into each frame, we'll draw how we want the button to appear for various states. The Up state already contains how the button looks normally.

Figure 13.2. Inside a button symbol, you'll see four named frames.

Up state contains the visual look of the button in its normal state. Over contains the look for when the user hovers his cursor over the button. Down is when he clicks. Hit is a special state in which you place a visual representation of what portion of the button you intend to be clickable. This is what the user must “hit” in order to see the Over and Down states.

In the Over state, we want to draw how the button will look when the user's cursor hovers over it. To create an Over state, insert a keyframe into the second frame of the button. (Click in the Timeline under Over and press F6 or select Insert, Keyframe.) Select the Paint Bucket tool and a color similar to but slightly lighter than the color currently filling the rectangle shape. Fill the shape in the Over state with the lighter color.

Insert a keyframe in the Down state frame. (Click in the Timeline under Down and press F6 or select Insert, Keyframe.)

Select the entire contents of the Down frame and—using the arrow keys on your keyboard—nudge the shape down and to the right three pixels (click three times with the right arrow and three times with the down arrow).

We're done editing the master button, so get back into the main scene (either click Scene 1 at the top left of the Timeline or select Scene 1 from the Edit Scene clapper at the top right of the Timeline) and test the movie (by selecting the Control, Test Movie menu option).

This task proves you can create a pretty advanced button with very little effort. The various states contain the graphics for how the button will look in different situations: Up is the button's normal state, Over is when the user passes his cursor over the button, and Down is when the user presses the button. In this task the states only changed the color and location of the graphic, but you can put anything you want in each state (and you will later this hour).



Not a subscriber?

Start A Free Trial

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