TCO 290 Multimedia
Dr. Susan Codone Spring 2003

 

Home
My Classes
My Research
My Resume
My Faith
Contact Me

 

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.

 

 

 

 

 

 

 

 

Dr. Susan Codone, Assistant Professor Technical Communication
codone_s@mercer.edu