Button design

You can place the same or different artwork on each one of the Stages:

UP | ROLLOVER | DOWN | HIT

You can use raw shapes and lines, text, graphic symbols or movie-clip symbols (containing animation) inside each stage of the button.

If you are reusing the same artwork (with slight variation) on 2 or more Stages, place it in a graphic symbol so you can save file-size.

Remember that what you draw on the HIT area is invisible to the user, it tells Flash where (in which area) to make the button active.
The button itself will not show the rollover stage until the user hasn't contacted the HIT area.


Squirrel button

Profile illustration on UP
3/4 view on ROLLOVER
Sound on ROLLOVER
Movie-clip on DOWN

Wine-glass button

Full-glass illustration on UP
Middle-glass Illustration on ROLLOVER
Empty-glass illustration on DOWN

 

Drawn-gun button

Gun illustration on UP
No change on ROLLOVER
Fire movie-clip on DOWN
Sound on DOWN
Trigger illustration on DOWN

SUV button

SUV illustration on UP
Animated-wheel movie-clip on ROLLOVER
Sound on ROLLOVER
SUV illustration on DOWN
Circle underneath the arrow on HIT

   
 

Tricky-arrow button (look up)

Red circle with right arrow and "its over here" text on UP
"no, over here" text on ROLLOVER
Sound on ROLLOVER
Yellow circle with star and "here it is" text on DOWN
Circle on the same spot that the rollover artwork on HIT

 

 

More Button examples

 

 
Animated movie-clip on UP
Animated movieclip on ROLLOVER
Animated movieclip on DOWN
  Stage animation created by many buttons,overlapping each other.

The UP stage of the button is the same green tone than the background.
On ROLLOVER the button contains an animation of a circle going from green to white and then back to green.

 

Examples of complex buttons

 

 
Still artwork on UP
2 Animated movie-clip on ROLLOVER
Sound on ROLLOVER
 

3 buttons on stage.
The door, the ring-bell and the window.

Each one of them contain text on ROLLOVER and sound on DOWN.