Flash Tutorial: Creating Buttons	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Creating Buttons

Full Version: This is a shortened click by click version of a: Full Length Tutorial

 

Free Flash Tutorial

The aim of the tutorial is to be able to create your own buttons. These buttons will change appearance when you roll over them. The button will change again when clicked. This is referred to as different button States. This tutorial is designed for people who have little Experience of using Flash.

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document:
4. Click: OK
5. Go to: Modify > Document (Ctrl J)
6. Set the size. Mine is: 200 x 130px
7. If you wish select a: Background colour
8. Click: OK

Step Two: Creating the Button Symbol

1. Go to Insert > New Symbols (Ctrl F8)
2. Name it: Button 1
3. For Behavior select: Button
4. Click: OK

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:
3. Select the rectangle by double clicking it: Select Rectangle
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:
6. Go to: Window > Align (Ctrl K)
7. In the Align panel if the 'To Stage' option is off, turn it on:
8. With the rectangle selected click on the Align Vertical centre button:
9. Click on the Align Horizontal centre button:
10. Select the Text tool:
11. Click next to your rectangle and type: Click Here (or whatever you might want your button to say)
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
15. Change the Fonts Colour, Style Face etc to suite: Font Style
16. If the Align panel is closed, open it: Window > Align (Ctrl K)
17. Click on the Align Vertical centre button:
18. Click on the Align Horizontal centre button:
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.

Step Four: The Over State

1. In the Timeline right click (Mac - Ctrl click) in the: Over Frame
2. From the Menu select: Insert Keyframe
3. De-select both the rectangle and text by clicking on a blank area of the Stage: Deselect Button
4. Select the: Text
5. Change the text to bold: Text > Style > Bold (Ctrl Shift B)
6. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
7. If the Text is too big go to the Property Inspector and: Reduce the Size
8. In the Property Inspector change the Fonts colour. I selected: Black
9. So that you can get to the rectangle below: Drag the Text Aside
10. Click to select the: Rectangle Fill
11. In the Property Inspector change the Fill color:
12. If the Align panel is closed, open it: Window > Align (Ctrl K)
13. Select the: Text
14. Click on the Align Vertical centre button:
15. Click on the Align Horizontal centre button:

Step Five: The Down State

1. In the Timeline right click in the: Down Frame
2. From the Menu select: Insert Keyframe
3. De-select both the Rectangle and Text by clicking on the Stage:
4. Select the: Text
5. In the Property Inspector change the Text's: Colour
6. Select the: Rectangle Fill
7. In the Property Inspector change the Fill color:

Step Six: Placing the Button on the Main Stage:

1. Click on the Scene 1 Tab:
2. Click on Window > Library (F11)
3. Drag your symbol from the Library onto the: Main Stage

Making the Button Work: Actions

For a button to do something useful you have to give it instructions. You do this through the use of ActionScript. If you need to know how to do this see the previous tutorial: Creating Links within a Flash Movie

The Hit Area

The Hit Area is an invisible the area of a Flash button that responds when the mouse pointer passes over it or clicks on it. This can be a rectangular area surrounding the button, or an irregular shape. See Definition: Hit Area

Have fun with your buttons, make them wild and wonderful!

Full Version of this: Tutorial