Edit the button symbol

Next you modify the original button symbol. The changes you make will be automatically applied to all the button instances in your nav bar.

You may be wondering what the original button symbol looks like now that you changed the text on several of its instances.

1. Double-click any of the button instances in the workspace.

   The Button Editor appears with the original button symbol and text displayed in the workspace. The original button symbol is still intact and displays the original text.

   When you changed the text of each button in the workspace, you only edited a button instance. If you make any changes here to the rectangle or to text appearance, you will be editing the original symbol, so those changes will be reflected in all the instances in the workspace.

2. Click the Over tab.
3. Select the black rectangle.

   To select the rectangle, select the Subselection tool (or press A) and carefully select the outline with 4 selection points, not the one with six. If the name of the object in the Property inspector is "Button rectangle," you successfully selected the rectangle.

4. Click the Fill Color box in the Property inspector, enter FF6633 as the color value, and then press Enter to apply the color change.

   The rectangle is now orange.

5. Click Done in the Button Editor to apply the change to the button symbol.
6. Click the Preview button in the Document window and test the buttons.

   Each button's Over state is now orange. You changed only the button symbol, but the change was applied to all the button instances in your nav bar.

7. Click the Original button in the Document window and double-click any button instance in the workspace.

   You decide to change the appearance of the text in the button symbol.

8. In the Up tab, select the button text.

   To select the text, select the Subselection tool (or press A) and carefully select the outline with 6 selection points, not the one with four. If the name of the object in the Property inspector is "Button text," you successfully selected the text.

9. In the Property inspector, select Arial as the font.

   

10. Repeat this step for each button state.
11. With the Text tool, double-click the text block in the Button Editor, and delete the word BUTTON.

    

12. Click the Pointer tool in the Tools panel to deselect the text block.
13. Click Yes in the message box that asks whether you want to change the text in the other button states.

    Examine the various button states in the Button Editor. The text changes in one state are reflected across all the button states. Compare this to when you changed the font; you had to change it in each state. That's because you can apply different graphical and text attributes to each state of a button. This is useful if you want the text color to change when a user rolls over a button, for example.

14. Click Done to exit from the Button Editor.

    The font on each button instance changes to reflect the new font selection, but the text remains the same. Button instances reflect only the changes you make to a button symbol's graphical appearance, including its text attributes, but not changes you make to the text itself.

    Button symbols enable you to change the graphical appearance of all button instances in a nav bar quickly, while preserving each instance's unique text.

15. Save your work.