Placing the Buttons On the Stage

You now have three buttons in the library that should be placed on the Stage before you can progress with adding other elements on the Stage. The three buttons need to be placed on top of the grBar graphic instance on their own layer. At the end of this lesson, you will create an invisible button that will surround these three buttons and also align menus with these buttons.

1.	Create a new layer called buttons. Select the text layer folder in the Timeline and click the Insert New Layer button. When the new layer is created, double-click the name and type in buttons to rename the layer.
2.	Drag the three buttons that you created from the library onto the Stage. btnProducts, btnCompany and btnContact should all be within the buttons folder in the library. When you drag the buttons onto the Stage, you should notice how the three buttons were created to be about the same height as the grBar.
3.	Move the three buttons into order, and place each button at the correct x coordinate using the Property inspector. Place the three buttons slightly apart from each other similar to the following graphic in the following order from left to right: btnProducts, btnCompany, and btnContact. Now that they're in the correct order, you need to move the three buttons into a correct vertical position. Select the btnProducts instance and change the x coordinate to 115 using the Property inspector. Then select btnCompany and set its x coordinate to 200 in the Property inspector. Finally select btnContact and set its x coordinate to 285.
4.	Align the three buttons horizontally with each other using the Align panel. Maximize the Align panel and make sure that the To Stage button is not selected. Select the three buttons by holding Shift while clicking each symbol. Then click the Align vertical center button so the buttons align with each other.
5.	Group and align the three buttons with grBar using the Align panel. Ungroup the three buttons and lock the buttons layer when you are finished. You can group symbols so they can be edited together as one object. Sometimes you have a couple of symbols on the Stage that you want to resize, rotate, or move together as one symbol, and you can achieve this by grouping the symbols together. Select the three buttons by holding down Shift as you click each symbol. Then select Modify > Group from the main menu. The three buttons can now be aligned as one object. Select the group of buttons and move the group below the grBar on the Stage. Unlock the bars layer and press Shift to select grBar. Now the grBar symbol and the group of buttons should be selected. In the Align panel, click the Align top edge button to align the grouped buttons to the top of grBar. Ungroup the three buttons by choosing Modify > Ungroup and then lock the buttons layer and the bars layer.
6.	Save your work. Now you have three buttons on the Stage that are aligned with the bar behind them. The three buttons should align to the top edge of the grBar and be evenly distributed. The buttons are placed so that when you have the menus attached to each button, they line up fine with the mask you created earlier in the book.