Unit 12.  Buttons (II)

Text buttons. The importance of the active area

Since now, the buttons have a frame in which we indicate the active area. This seemed to be useless in the examples we saw up to now, since it's commonly believed that, evidently, the active area where we want to have our button is the area that includes the limits of this button.

Let's see that this isn't always so trivial. Here are two buttons created in Flash 8. Let's verify what happens when the mouse moves over one and another.

Although they seem identical, the difference happens at the moment in which we locate the mouse on one of the spaces that exist between letter and letter or, in general, all those places that don't belong to the text itself.

In the left text the button is activated only when we place the mouse pointer over the letter. This can be uncomfortable and can bring to confusion, since someone that browses through our pages simply would like to make use of the button and not have to aim concretely some letters that perhaps could be very narrow.

This is due to the poor use of the active area. In the right button this problem is solved as we can verify again. To solve this problem follow the next steps:

1. Double click on the button to enter its Edition mode.
2. Clik on the Hit frame. If there wasn't a keyframe, press F6 in order to create one.
3. Once in the Hit state, select the Rectangle tool and draw a rectangle covering the whole text. With this we will set the rectangle's area as the hit zone of the button.
4. Return to the normal mode clicking on the Scene 1 link in the timeline.

Here you have an example of how to do it.

Including a clip in a button

  The inclusion of movie clips in the buttons can make them more colorful.

     It is usual to place a clip in the Over frame to indicate some type of extra information or an animation to go beyond a change of color.

     It's also common to see a movieclip acting as a button. This can be done, for example, by inserting the clip in the Up frame.

Let's see for example the following button:

Verify all the states of the mouse. From what the button tells us we can discern that something begins, but perhaps we don’t know clearly what.

If at certain moment we don’t want this to happen on our Web pages, we can introduce a clip in the button, to explain a little more about what will happen if we click.

To include a button is very easy. Following the example, you will have to double click on the button to enter its edition mode.

The click on the Over state to modify it. Select the text and press the DEL key.

No open the Library from the menu Window → Library, where you will find the clip we've made previously. Select and drag it over the button.

Now it's ready. When you pass the mouse over the button, the movie clip will start to play.

Here you can follow the process that we commented 

And that is the result. 

Bitmaps and Buttons

  In addition to clips, the buttons can also contain symbols of Graphic type.

     Since we've already seen, everything that is possible to do with a graphic can be done with a clip as well, let's focus in the Bitmaps that Flash allows us to import, since they are wide used as form of graphical expression all over the Network.

     If we consider the already known limitations on the bitmaps, then using of them in the creation of buttons can seem to be uninteresting, but it isn't the case.

     Basically we can make two things:

     1) Including different bitmap in each one of button frames, obtaining an effect similar to the effect obtained with languages like Javascript (always in view of the larger ease of Flash).

     2) Taking advantage of the Graphic properties in Flash. For this, first, we would have to import the Bitmap and convert it later into button symbol. Then we would publish it and, after inserting each keyframe, we would convert its content to Graphic symbol. Once we've done this, we will be able to obtain quite good effects by varying the effects of the instances in Flash (Alpha, Red, Brightness).

     Here is a small sample where we've only used a Bitmap of GIF type. We've converted it into a graphical button by applying an Alpha (Transparency) effect to the Up state. In the Over frame we have left the original GIF so that when passing over the button it seems to be switched on. Finally we have increased the intensity of red in the Pressing frame to make it seem to be incandescent.