Rollover button

26.11.2005, 13:34
Submited in: Flash | Total Views: 171323

In this tutorial you will see how to build a simple rollover button.


Step 1

Create a new flash document and let's quickly build a simple button. Select your Rectangle tool (R)...

...and in your Properties Pannel (Ctrl+F3) make sure that your fill color, stroke color and settings are what you wanted it to be...

...after that, draw and create a rectangle on the stage.

Select your selection tool (V) - select your whole graphic and press F8 key on your keyboard to convert your graphic to a symbol. After you press F8, flash will open up a new window in which you can choose three kinds of symbols (Movie clip, button, and graphic symbol). Add a name to your symbol, choose Button symbol and press ok.

Now we have a simple button.

Step 2

Double click on the button symbol instance that you just created. Now you are inside of the button.

You can see you're inside by looking up at your timeline and you can see that your timeline looks much different.

Up state in the timeline is the default state of the button. When users come to your web site, they see the button in the up state.
When they move their mouse over the button symbol, the playhead automatically jumps to 'Over' state. Now lets create a rollover.

Step 3

To do that, you need to add a keyframe to the 'Over' keyframe. Click on the frame below the over state and add a keyframe by pressing F8 on the keyboard or choose: insert > timeline > keyframe.

After that, select your button symbol and change the fill color. Fill color is being changed in the toolbox by pressing fill color swatch and changing to a diferent color. I choose white color.

Test your button by pressing Ctrl+Enter on your keyboard or choose Control - Test movie.

When you press Ctrl+Enter, flash will open a new window with your rollover button. First what you see is the up state button - Default state of that button.

When you move your mouse over that button, it's gonna switch automatically to the over state of that button.

Step 4

Close your preview window. If you want to change your button visually when the user presses their mouse button down on the button symbol you must add a 'Down' state. You can add a down state just like you created the over state.

Step 5

Click on the 'Down' frame and add a keyframe by pressing F6 on your keyboard.

While your symbol is still selected click at the fill color swatch and choose a different color. I'm gonna choose a blue color.

After that I'm gonna test my movie again by pressing Ctrl+Enter on my keyboard.
There is the up state of my button, when I move my mouse over the button, there's the over state and when I press my mouse down while holding the button, it's gonna change to down state.

  up state

  over state

  down state

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials