MACROMEDIA FLASH  MX 2004

Alejandra Jarabo
MAT 116-0081
Media Arts & Technologies Division. Santa Barbara City College
BUTTONS IN FLASH

Buttons are a 3rd type of Library symbols. They have a direct interactive function.

Button's structure as a symbol is different from the other two: They have a limited Timeline, containing 4 labeled "cells".
The labels are called UP, OVER, DOWN and HIT. They refer to the different INTERACTIVE STATES of a button.

By only allocating different keyframes containing images for each or some of those states, Flash will create the internal scripting that allows you to see the button changing depending the interaction of the user with his/her mouse.

Later on we will create the action that it's triggered by the button with a language called ACTION SCRIPTING. This will be the beginning of Interactive authoring.

Notice in the screen capture below that I am using a Graphic symbol in the keyframe that corresponds to the "UP stage". This is a good way of saving file size if you want to change the color for each stage without dramatically changing shape.
 
The first time that
you edit a button
you need to
PHYSICALLY MAKE
the keyframes
for each stage!
   
UP
OVER
DOWN
HIT

How the button appers on Stage
when the user is not interacting with
the button's HIT_AREA.

This is the default state.

How the button appers on Stage
when the user is placing the mouse
"overflying" the hit area (Roll Over),
but not clicking.

When the user "Rolls Out" of the
button area the image reverts to
the Up state.

How the button appers on Stage
when the user's mouse is Over
the button area AND CLICLING on it.

As soon as the mouse is
Released the image
reverts to the Over state.

The Hit keyframe is NEVER visible on Stage
but instead, whatever shape is present in this keyframe will be considered the "sensitive area" to the mouse.

If your button only contains text, you should place here a rectangle a bit bigger than the text, not the text itself.

Make sure HIT areas NEVER Ovelay with eachother.

 

  
   
 
The roll Out image has been added with aditional Action Scripting
 
     

When you need to have a text INSIDE the button, it is a good idea to create 2 layers inside the button symbol. If you wanted to have a sound in some of the stages (a short interactive sound, we'll see later in the course) you will also create a layer for it .

Be careful to have as less as possible in the HIT area keyframe (just the area defined by a shape).
Make blank-keyframes in stages where you don't want a certain element to be present.

     

 
     
     
You can heve several instances of
the same button on Stage.

 

If you need a series of buttons with the same color and State-behaviour, but different text,
you shold consider using instances of only ONE button in one layer on STAGE,

and SET the text pieces above IN a different
Layer, so they to fake them as part of the button
(you get 5 or 6 buttons with only 1 symbol).