Free Flash Tutorials	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

Flash Tutorial - Creating simple buttons

005 Beginners
Flash Compatibility: MX  For Flash 8: click here   For Flash MX04: click here

Written by: Phil

Length: 1200

This tutorial is designed for people who have little Experience of using Flash. The aim of the tutorial is to be able to create your own buttons, how to Align objects to the stage and create layers.

States of the button

The button can change it's appearance according to what 'state' it is in. There are four states: Up, Over, Down and Hit.

1. Up: Is when the mouse pointer is not over the button.
2. Over: Is when the mouse pointer is over the button.
3. Down: Is when the mouse pointer is over the button and the mouse button is down.
4. Hit: Is an invisible area of the screen. This area defines when the mouse pointer is 'over' the button or not.

Roll your mouse over the button below and click to see the Up, Over and Down states. You can't see the Hit area as it is invisible. The button has no actions so does not do anything.

My Example: Download the Flash File  Beg 005a

Step one: Setting up the Document

1. Set the size of the Flash Movie: Modify > Document
   The movie above is: 200 x 130px

   Note: You can either have a Flash movie which contains a number of buttons or you can have a Flash movie that is a single button and no more.
   
   
   A Flash movie with several buttons. File size: 400 x130px
   
   
   A Flash movie which is a single button. File size: 105 x31px

Step two: Creating the button symbol

To create a button you need to have a symbol.

1. Go to Insert > New Symbols (or hit CTRL+F8 on your keyboard).
2. The "Symbols Properties" dialog box will open. Select button.
3. Name it button 1 and select 'button' as the behavior.
4. Click OK.

You will go to a new stage, called button 1. In this stage, you will have four frames:

Frame 1 - Up
Frame 2 - Over
Frame 3 - Down
Frame 4 - Hit

Step three: Creating the up state

1. Double click on the layer label and name the layer 'background'.
2. In the background layer, frame 1 'Up', draw a rectangle shape with the rectangle tool:
   When you have finished drawing your rectangle, make sure you go back to the Arrow tool , otherwise you will draw more rectangles by mistake.
3. With the Arrow tool , single click on the rectangle fill and select any colour you may want with the Fill Color tool:
4. You need to align your rectangle to the centre of the stage using the Align panel. Go to Window > Align.
5. 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.
   
   
6. In the Align panel click the 'To Stage' button:
7. With the rectangle selected click on the Align Vertical centre button:
8. Click on the Align Horizontal centre button:
9. Click on the insert layer button to create a new layer and name it 'text'.
10. In the up Frame (1st Frame) of the Text Layer use the Text tool to type 'Click Here' (or whatever else you might want your button to say).
11. 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.
12. Select your text with the Arrow tool:
13. In the Align panel the 'To Stage' button should still be selected (it will be white, not gray, see picture below).
14. Click on the Align Vertical centre button:
15. Click on the Align Horizontal centre button:

Step four: The over state

1. Right click in the 'over' frame in the 'text' layer and select: Insert Keyframe
   You will notice the play head has moved to the 'over' frame and your text from frame 1 is copied to the over frame.
2. Change the text to bold by going to Text > Style > Bold.
3. You may need to align the text centre of the stage again.
4. Right click in the 'over' frame in the 'background' layer and select Insert Keyframe.
5. Change the rectangle to another colour by single clicking the fill colour of the rectangle (only the fill will be dotty). Select a colour by clicking on the Fill Color tool:

Step five: The down state

Do the same as step three by:

1. Inserting new Keyframes in the Down frames of both layers.
   
   Your timeline should look like this: Note the keyframes - black dots.
2. • Change the colour of the rectangle and/or...
   • Change the colour or the look of the text.

Step six: Placing the button on the main stage:

1. Click on the Scene 1 Tab . You will return to the main stage, which should be empty. Don't panic you haven't lost your symbol.
2. Click on Window > Library. Your symbol will be in the library.
3. Drag your symbol onto the main stage.

Step seven: Actions

You now have a new button which you will need to add actions to so that it does something. See previous tutorial for details of how to do this: Creating Links within a Flash Movie

The hit state

The hit area is normally the same as the rectangle. You do not need to create this unless the hit area is different to the original rectangle you created on frame one.

Note: If your button does not have a solid background (in this case a rectangle) but only text, you will have to create a rectangle (or other solid shape), in the hit area frame. Otherwise when the mouse pointer goes over the gaps between the letters, the button will go back to frame one: The over state.
Very slowly move the mouse over button 1 below and you will see the problem.

My Example: Download the Flash File:  Beg 005b

Move the mouse slowly over the Buttons to see the difference.

Button 1 is not stable and moves between states with small movements of the mouse.

Button 2 is stable. Button 2 has a rectangle in the 'Hit' frame. This is not visible in the movie, but controls the 'Up', 'Over' and 'Down' states.

If you are having difficulty understanding this, download the movie and look inside the symbol at the Hit Frame. To look inside the symbol double click it on stage.

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

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here