Home arrow Flash arrow Page 6 - Flash 101 (Part 4): Don't Touch Me!

The Button Man - Flash

In this article, learn about the text tool, experiment with a few texteffects, and find out all about a new type of Flash symbol: the button.

  1. Flash 101 (Part 4): Don't Touch Me!
  2. The Write Way
  3. High Fidelity
  4. Breaking It Down
  5. Fade Out
  6. The Button Man
  7. Click Me
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 18
January 10, 2001

print this article


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:

Pretty cool, huh?

This article copyright Melonfire 2001. All rights reserved.

>>> More Flash Articles          >>> More By icarus, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- An Overview of Flash and ActionScript
- Building Web Forms In Flash
- Building Data-Driven Flash Movies
- Flash 101 (part 6): The Final Countdown
- Flash 101 (part 5): Spiralling Out Of Control
- Flash 101 (Part 4): Don't Touch Me!
- Flash 101 (part 3): Bouncing Around

Developer Shed Affiliates


Dev Shed Tutorial Topics: