Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Creating Simple Buttons

Free Flash Tutorial

Step Three: Creating the Up State

1. In the middle of the stage draw a rectangle with the rectangle tool:
   When you have finished drawing your rectangle, make sure you go back to the Selection tool:
   If you do not do this you will draw more rectangles by mistake.
2. With the selection tool , single click on the rectangle fill and select any colour you may want with the Fill Color tool:
3. You need to align your rectangle to the centre of the stage using the Align panel. Go to: Window > Design Panels > Align (Ctrl K)
4. Double click on the coloured fill of the rectangle. This should select both the fill and the stroke (outline).
   
   Fill and stroke highlighted: Both are dotty!
   Warning: If the fill and stroke are not both highlighted you will only move part of your rectangle. Often the stroke will get left behind, even if the stroke is white, and cannot be seen, be careful not do to do this, as this 'debris' may cause problems latter.
   
   
5. In the Align panel click the 'To Stage' button:
6. With the rectangle selected click on the Align Vertical centre button:
7. Click on the Align Horizontal centre button:
8. Use the Text tool to type 'Click Here' (or whatever else you might want your button to say).
   
   Note: If you are familiar with the use of Layers in Flash it would be better to have the text in its own layer. This makes it easier to change the rectangles colour or shape latter (you simply need to lock the text Layer). Having said that it not essential, so I have not used layers in this tutorial.
   
9. The text must be set to Static. To check this open the Property panel: Window > Properties.
   With the text still selected the panel should say: . If it does not, use the drop down arrow to select static text.
10. Select your text with the Arrow tool:
11. In the Align panel the 'To Stage' button should still be selected (it will be white, not gray, see picture below).
12. Click on the Align Vertical centre button:
13. Click on the Align Horizontal centre button:
    
    
    
14. After you have finished the text you may need to re-size your rectangle. Because the text is on top of the rectangle it may be difficult to select. If need be just move the text out of the way - you can always re-position it using the Align Panel later.
    
    To re-size the rectangle double click on it with the: Selection Tool
    Then either use the: Free Transform Tool
    Or use the Property Inspector and type in the size you want. If it is not open go to: Window Properties
    
    
    
    After you have re-sized your rectangle you will need to re-centre it with the Align Panel. You may also need to re-centre the text.