Dr. Codone's
Flash Tutorials - Making Interactive Buttons
adapted from My Flash Portal -- http://flashptl.cjb.net/
Objectives
Buttons are normally used to link from a page to another page,but
in Flash, you can actually create an interactive website with useful
buttons. In this tutorial, you will learn to create a button with
four states and use it to link to a page.
STEP ONE - Make an
Object
You can actually make buttons from any object. Let's take a
'rectangular' object as the button.First,create a rectangular using
the 'Rectangle Tool'.
STEP TWO - Convert
to Symbol
Next,select the rectangular by double clicking on it. Then, go to
Insert ---> Convert to Symbol. A Symbol Properties window will
popup asking you to choose from Graphic,Button and Movie Clip. Enter
a name for your button. Select 'Button' from the type list (not
graphic or movie clip.) Press OK.
STEP THREE - Edit
Symbol/Add States
After pressing OK,double click on the button and click on the Pencil
(Edit Symbol) icon to customize your button. Now you're in the button's
properties -- you'll see four frames at the 'Timeline' with the
names Up,Over,Down and Hit.
Up - The button's look
when your mouse is NOT on the button.
Over -The button's look when your mouse is AT on the button.
Down -The button's look when your mouse clicked on the button.
Hit -The place where your button will response to your mouse's click/over.
Insert a keyframe on
the frame in each state by right clicking on the frame and selecting
'Insert Keyframe' or by going to Insert on the main menu and choosing
Keyframe.
STEP FOUR - Modify
the Button States
Select the Over state frame,and then by using the 'Paint Bucket'
tool,color it with any color that you like - or modify it in any
way. Next, do the same with each of the remaining states. Don't
worry about modifying the Hit stage.
You're now finish with
the customization of the button. Click on Scene 1 at the top left
to return to your main movie.
STEP FIVE - Add an
Action to the Button
In the main movie, double click on the button to bring up the
Instance Properties. Click on the Action tab, and then Click on
the '+' icon and select 'Get URL'. Enter an URL at the box on the
right side. Don't forget to type the http://. Click on 'OK'.
Save the movie and publish
it as a .swf file. Test the .swf in a browser; your button should
change based upon the up, down, and over states, and when clicked,
should open the intended website.
|