Flash Buttons: The Up State	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Creating Buttons

Free Flash Tutorial

Step Three: Creating the Up State

1. In the middle of the Stage draw a rectangle with the rectangle tool:
2. When you have finished drawing your rectangle, return to the Selection tool:

Note: If you do not return to the Selection tool you may draw more rectangles by mistake.

3. Select the rectangle by double clicking it: Select Rectangle

This should select both the fill and the stroke (outline):


Fill and stroke highlighted: Both are dotty!

4. Select any Fill colour you may want with the Fill Color tool:
5. Select any Stroke colour you may want with the Stroke Color tool:

You need to align your rectangle to the centre of the Stage. It is easy to do this with the Align panel.

6. Go to: Window > Align (Ctrl K)

Warning: If the both the Fill and Stroke are not 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.

7. In the Align panel if the 'To Stage' option is off, turn it on:


Align To Stage is On when the To Stage icon has a white background:

8. With the rectangle selected click on the Align Vertical centre button:
9. Click on the Align Horizontal centre button:

Note: Your rectangle should now be centred:


Centred rectangle has a small cross in the middle.

It is now time to make the button's text label.

10. Select the Text tool:
11. Click next to your rectangle and type: Click Here (or whatever you might want your button to say)

Tip: Type next to the rectangle not on top of it. Otherwise if the colour of the text is set to the same colour as the rectangle's colour you will not be able to see the text!!


Typing the Button Label.

12. When you have finished typing return to the Selection Tool:
13. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
14. Look in the Property Inspector to make sure the text is set to: Static Text

With the text still selected the panel should say:

Important: If it is not set to Static Text use the drop down menu to select: Static Text

15. Change the Fonts Colour, Style Face etc to suite: Font Style

Do not select Bold as this will be used in the Over State. My Text properties are as follows:


My Font Properties.

16. If the Align panel is closed, open it: Window > Align (Ctrl K)

Note: The align To Stage' button should still be selected.

17. Click on the Align Vertical centre button:
18. Click on the Align Horizontal centre button:


My Button Stage.

After you have finished the text label 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.


19. To re-size the rectangle double click on it with the: Selection Tool
20. Then either use the:
    
    
    • Either 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 > Properties (Ctrl F3)
      

      
      My rectangle is 105 x 31 pixels.

      After you have re-sized your rectangle you may need to re-centre it with the Align Panel. You may also need to re-centre the text: