Flash 101 (Part 4): Don't Touch Me! - The Button Man (
Page 6 of 7 )
OK, enough of the Text tool. Let's move on
to something else.
Thus far, I've restricted you to creating and using
graphic symbols in your Flash movies. It's time to move to the next level, with
another symbol type known as a "button".
A button, in Flash, is just like
a regular symbol - you can create it, drop it into your Flash movies, and edit
it - with one important difference: unlike the graphic symbols you've been
creating, a Flash button comes with some pre-defined characteristics. These
characteristics define the behavior of the button when a mouse pointer moves
over it, or when a user clicks it.
Let's take a look. Pop open a new
Flash movie, and draw something which looks like this.
Fill it with a gradient fill to give it that
three-dimensional effect every good button needs.
Now, select the image
and convert it to a symbol. Remember to select "Button" as the symbol type this
time. When you're back on the Stage, right-click the symbol and select the
"Edit" option to switch to symbol-editing mode. You should see something like
this on the Timeline.
As you can see, every
button comes with three pre-defined frames – "Up", "Over", and "Down" (yes, I
know there's something called "Hit" as well, you can ignore it for the
moment.)
These three states allow you to specify the appearance of the
button, depending on where the user's mouse pointer is. To see how this works,
do the following:
Leave the "Up" state as is - this is the state the
button will appear in by default.
Select
the frame marked "Over" and right-click it to insert a new keyframe. Select the
button and fill it with a different colour. This is the colour that will appear
when the user's mouse pointer "hovers" over the button.
Select the frame marked "Down", insert a new keyframe,
and change the colour of the button again. If you feel like it, use the Text
tool to insert a line of text under the button as well - like this:
This is what the button will look like once a user
clicks it with the mouse pointer.
The last frame, "Hit", actually defines
the "hit area" of the button symbol - this is the area that will trigger the
"Over" and "Down" states when the pointer moves over it. You can define a hit
area that is smaller or larger than the dimensions of your button.
All
done? Switch back to the Stage, and make sure that the Control -> Enable
Simple Buttons menu item is activated - this will allow you to test the button
within the Flash authoring environment itself. Now try it out - you should see
something like this:
/ 16 
