This tutorial teaches how to create simple buttons in Flash. It explains the four states buttons can be in: up, over, down, and hit. It then walks through steps to make a button symbol with different graphics and colors for each state. These include drawing shapes, adding text, and aligning objects. Finally, it discusses placing the button symbol onto the main stage and adding basic actions. The tutorial is aimed at beginners to help them understand the button creation process.
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Button
1. http://www.webwasp.co.uk/tutorials/a05-buttons/images/mx/buttons-mx.php
Tutorials • Downloads • Newsletter • Bulletin Board • Contact Us
Free Flash Tutorials
Members • Business • Web Design • Home •
Search
100 Flash Tutorials 360-Degree Mouse Button Create Animated Tutorials
Experts Show You How: Instructional Training for cellphones, PDAs, MP3 players MicroNav by Record your PC and create animated Flash
Videos, Tips and Shortcuts Interlink Electronics tutorials with voice/audio.
LearnFlash.com www.micronavlink.com www.DemoCharge.com
Flash Tutorial - Creating simple buttons
005 Beginners
MX
Flash Compatibility: For Flash MX 2004 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.
Flash Tutorial: Simple Buttons - webwasp.co.uk 1 of 5
2. http://www.webwasp.co.uk/tutorials/a05-buttons/images/mx/buttons-mx.php
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" dialogue 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
Flash Tutorial: Simple Buttons - webwasp.co.uk 2 of 5
3. http://www.webwasp.co.uk/tutorials/a05-buttons/images/mx/buttons-mx.php
'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 (frame 1)of the Text Layer use the Text tool to type 'Click Here' (or whatever else 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.
Flash Tutorial: Simple Buttons - webwasp.co.uk 3 of 5
4. http://www.webwasp.co.uk/tutorials/a05-buttons/images/mx/buttons-mx.php
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: Simple Links
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 2: 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!
If you have not found this tutorial useful, help us improve by telling us why: Forum
previous tutorial next tutorial
• 10295 visitors to this page since Jan 04
• Home • Tutorials • Downloads • Newsletters • Bulletin Board • Contact Us •
• Members • Business • Web Design • Other • Top of Page •
Flash Tutorial: Simple Buttons - webwasp.co.uk 4 of 5
