Unit 12.  Buttons (I)

What's a Button?

The symbols of type Button contribute mostly in the interaction between Flash movies and the user. In Flash, a button is just as any button of any computer environment; Web or any other.

They are elements that have to be pressed by the user for triggering a serie of actions. It's also usual to see how this type of elements responds when the mouse passes over them, or they are clicked, for example.

Then, to obtain the mentioned interactive effects in other Web oriented languages we must create relatively large programs. This is a quite big disadvantage since the use of buttons is a very common practice in the Internet design. Nevertheless, in Flash it doesn't happen so. Its interface is designed in an special way for the buttons creation, which allows us to easily create all these effects.

Like to the other symbols of Flash 8, the buttons have their own timeline. It is independent, but only four frames composes timeline, one for each possible state of the button.

Up. The aspect of the button by default, in other words, when the mouse pointer is not placed over it nor pressing it.

Over. Aspect of the button when we place the pointer over it. 

Down. Appearance that we want our button to have while we are pressing it.

Active area (Hit). Here we must indicate the entire area in which we want our button to respond. This is very important in the composition of buttons, as we will see further on.

It seems that the limitation of frames could imply a limitation in the great hit capacity and utility of these symbols, but it isn't so.

The buttons can contain in its turn other symbols, like clips or graphics (also of Bitmap type). The sum of the possibilities of all the symbols equips the buttons with great hit.

Creating a button

  In the creation of a button we can consider two phases. First we are going to transform an object into a symbol of button type and then we will see how to complete it internally, which will help to us understand its structure better.

First of all we’ll create the object that will represent the aspect of our button by designing it with the tools that Flash 8 offers us. 

We'll select the object and access to the menu Insert → Convert to Symbol, we'll set the behavior Button and we’ll assign a name to our new symbol.

In this way we've already transformed the object so that it behave like a button. Now we’ll complete it internally.

To determine how the button must response to the mouse actions, we’ll edit it by right clicking our new button and selecting the option Edit.

When we have the button timeline in front (notice that it has the aspect shown previously), we’ll select each one of the frames (over, up, down and hit) and click F6 to create a keyframe in each one of them.

Now we can modify the initial aspect of the button for each position and set the area of the button action (Hit frame) in which we can just put down the same figure as the initial one (in this case only the object form is important, not the colors or other options) or draw with the Flash draw tools a new figure; our button "will be alluded" on this surface.

Here we can see a sample for creation of a oval shaped button.  As result we obtain the next button:  

This one is a basic button, as we’ll see it can become very complicated, but to start it’ll be useful.

Once we've created the button, if we want to observe its different states without repeating everything, we can do it by accessing to the Library panel of our movie and dragging the button symbol. In order to see what we commented it’ll be enough to press the key located to the right of the preview of the symbol.

Shapes in the Buttons

  The buttons are symbols that can have large number of shapes. Although we usually see buttons of rectangular, square and circular shape, which creation is immediate as we saw in the previous point, there are also many other types of buttons, which we normally see on multitude of Web pages, in spite of its seldom use.

There are also several common shapes of button, such as the beveled button or the pill shape buttons. Since there exist many ways to obtain these effects, next you have an exercise step by step that shows a way to obtain a rectangular button with a bevel. Exercise Beveled Button.