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

Hour 13. Making Buttons for Your User to... > Task: Remake a Multi-State Button Us...

Task: Remake a Multi-State Button Using Symbols in Each State

We'll do this exercise from scratch, so in a new file, draw an oval (which will become your button).

Select the Arrow tool, select the entire oval you just drew, and covert it to a symbol (using the Insert, Convert to Symbol menu option). Name it MyButton, make sure that the behavior is Button, and then click OK.

Now, let's edit the master version of the button we just created. Double-click the instance of the button and you'll be taken inside the master version.

Now that we're inside the master button, you should see the oval shape you drew. Notice that it's not a symbol—it's a shape. After all, you just told Flash to convert the shape into a symbol, so inside the symbol we have a shape. This will be an issue if we start adding keyframes inside the button.

To be totally efficient, let's convert the oval shape itself to a symbol. Select the entire shape, select the menu option Insert, Convert to Symbol, name it Oval, select Movie Clip Behavior, and then click OK.

Now that our first keyframe contains a symbol, insert a keyframe in the Over frame. Tint the instance of the Oval symbol (select the Oval and from the Properties panel, choose Tint in the Color Styles drop-down list, pick a hue, and set the amount set to 100%). If you want, you can even scale the instance of Oval and make it slightly larger.

Insert a keyframe in the Down frame. (Flash copies the contents of the previous frame.) The tinted instance of Oval in the Over frame can now be nudged down and to the right. (With the Oval symbol selected, click your down arrow twice and your right arrow twice.)

Go back to the main scene and test your movie. It should look like Figure 13.4, plus the file size will remain small because you did it all with just one shape.

Figure 13.4. A visual change occurs in the three states of the button: tinting for the Over state, and change of position for the Down state.

Instances of Buttons

Hopefully, you're beginning to get excited about the power you have to create buttons. Even the “quick and dirty” buttons we're making in these exercises are looking pretty good. Although we're still going to wait until next hour to make the buttons do anything when they're pressed, it's worth taking a quick peek ahead so that you understand where we're headed.



Not a subscriber?

Start A Free Trial

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