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

Creating Buttons

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.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Button States

A button can change it's appearance according to what 'State' it is in. There are three states: Up, Over & Down:

• Up: Is when the mouse pointer is not over the button.
• Over: Is when the mouse pointer is over the button.
• Down: Is when the mouse pointer is over the button and the mouse button is down.
  
  My Example: Download the Flash File  Beg 005a
  
  
  Click and drag your mouse over this button.

Click and roll your mouse over the button below. You will see the Up, Over and Down states.

My Example: Download the Flash File  Beg 005b

Click and roll your mouse over to see the different button states.

Note: The button has no actions and so does not do anything.

See Flash MX04 Demo Movie of how to build this Flash file

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

Note: You should now be able to see a new Flash document.

5. Go to: Modify > Document (Ctrl J)
6. Set the size. Mine is: 200 x 130px

   Note: The document size is important as 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:

   My Example: Download the Flash File  Beg 005c
   
   
   A Flash Movie with several buttons. File size: 400 x130px

   
   My Example: Download the Flash File  Beg 005d
   
   
   A Flash Movie which is a single button. File size: 106 x32px

7. If you wish select a: Background colour
8. Click: OK

Step Two: Creating the Button Symbol

A button is a type of Symbol, so the first thing to do is create a 'Button Symbol'.

1. Go to Insert > New Symbols (Ctrl F8)

Note: The "Symbols Properties" dialog box will open.

2. Name it: Button 1
3. For Behavior select: Button


New Symbol Dialog Box.

4. Click: OK

   Note: 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

   The Button States

   
   

   Frame 4 - Hit

   The Hit Area

   Button States: The first three frames refer to the three Button States as described earlier.

   Hit Area: The fourth frame enables you to set what is called a Hit Area. This will be described latter but briefly it enables you to set an area that responds when the mouse pointer passes over it or clicks in it.

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:

    

Step Four: The Over State

The Over State refers to what the button looks like when the mouse cursor is moved over the button. If the button looks different it is visually clearer to the user when the button is ready to be clicked, as they can see that the Mouse Cursor is in the correct place to click on the button. In this case I will show you how to change the Button's Font style and background color. Like this:

My Example: Download the Flash File:  Beg 005a

Click and drag your mouse over this button.

Note: It is not essential to have an Over State but the button will look better and be clearer to the user with an Over State.

1. In the Timeline right click (Mac - Ctrl click) in the: Over Frame
2. From the Menu select: Insert Keyframe


Right Click in the Over Frame and select: Insert Keyframe

Note: The Play Head will move to the Over Frame and your text and rectangle from Frame 1 is copied to the Over Frame:


The red Playhead is now in the Over Frame.

3. De-select both the rectangle and text by clicking on a blank area of the Stage: Deselect Button


The text & rectangle are no longer selected.

4. Select the: Text
5. Change the text to bold: Text > Style > Bold (Ctrl Shift B)


Text is now too big for the background rectangle!

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


Reducing the text size in the Property Inspector.

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:



You will now need to re-align the text to the centre of the Stage again:

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:

The Over State is now done! Although we changed the font style, colour and background color you could have changed any combination of attributes.

Step Five: The Down State

The Down State is similar to the Over State in that it enables you to change the button so that it looks different when clicked. This helps the user to verify that they have actually clicked on the button.

Again you don't have to have a Down State but the button will look better and be clearer to the user if you create a Down State.

1. In the Timeline right click in the: Down Frame
2. From the Menu select: Insert Keyframe


Right Click in the Down Frame and select: Insert Keyframe.

Note: The Play Head will move to the Down Frame and your text and rectangle from Frame 2 is copied to the Down Frame:


The red Playhead is now in the Down Frame.

3. De-select both the Rectangle and Text by clicking on the Stage:


The text & rectangle are no longer selected.

4. Select the: Text

   
   Only the Text is selected.

5. In the Property Inspector change the Text's: Colour

I selected white:



6. Select the: Rectangle Fill


Only the rectangle is selected.

Tip: If the text is in the way and you cannot get past the text to select the rectangle then move the text to one side and then select your rectangle. Later you will be able to move the text back into place with the Align panel (Ctrl K).

7. In the Property Inspector change the Fill color:

   I selected a dark blue (003366):

   

Step Six: Placing the Button on the Main Stage:

1. Click on the Scene 1 Tab:

Note: You will return to the Main Stage, which should be empty. Don't panic you haven't lost your symbol. It's in the Library.

2. Click on Window > Library (F11)


The button is in the Library.

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.

If you have a background shape in your button - such as a rectangle you do not need to create a hit area:

My Example: Download the Flash File:  Beg 005a

No Hit Area is needed as the button has a background rectangle.

My Example: Download the Flash File:  Beg 005e

The Hit Area is not in the same position as the visible button.

Note: Normally the Hit Area is invisible but in the example above I have cheated and made it visible.

Important: 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 click and move the mouse over button 1 below and you will see the problem.

My Example: Download the Flash File:  Beg 005f

Move your 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.

To create a Hit Area you need to edit the button and create a rectangle (or other shape) in the Hit Frame:

The red rectangle is drawn in the Hit frame inside the button and defines the Hit Area.

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