9. Buttons



Buttons are a special category of symbols in Flash. But the most important thing is that you can add links and create buttons from any kind of symbols (movie clips, graphics) with a little bit of Actionscript.

We will talk about both categories: buttons as symbols and buttons created with Actionscript, but first of all open the file index.fla from template/flash.

Take a look at the Library. We have here 3 button symbols.

Go on and double click "inv_button copy" to edit it. As you will see the button's timeline is a little bit different. You have 4 keyframes: Up (for up state), Over (for over state), Down (for down state) and Hit (defines the button's area of interaction)

In our template we only use invisible buttons. These buttons have no content, they only have a Hit area defined. They are very useful because you can use them in many situations.

This invisible button has a sound that plays when you place your mouse over it. It was added in the Over keyframe.

To see more clearly now we use invisible buttons and how to create movie clips that act as a button go to the library and open the "home" movie clip:

As you can see this movie clip has 5 layers. This movie clip is a button in the main movie. If you place your mouse over it will move down and it also has a link to an external movie.

The light blue area is the image of the invisible button. It is just for reference, to help us see the area of interaction. This movie clip contains the graphic elements of the button, the home text, the invisible button and actions to help us create 2 states for the button (on roll over and on release outside). Layer 4 has 3 keyframes each of them with a single line of Actionscript code: stop();

This line of code stops the movie in that specific keyframe. Layer 1 contains the background of the button, the gray rounded square. It contains 2 tween animations: one that plays when you place your mouse over the invisible button, and the other when you move your mouse outside the invisible area.

Let's see now the Actionscript for the invisible button to understand the way this invisible button controls the timeline of the movie clip. Click on the invisible button and open the Actions palette to see the code associated with this symbol:

on (rollOver) sets the actions that will take place when the mouse cursor is on the invisible button. This action plays the animation from frame 2 to the first stop it meets (in our case frame 10)

on (releaseOutside, rollOut) sets the action that will take place when you go outside the button's hit area. This action plays the animation from frame 11 to the first stop it meets (in our case frame 20)

on (release) sets a link to an external movie. This movie will be loaded after we click and release our mouse button

You can modify this actions depending on your animation. But keep in mind to modify the "gotoAndPlay" action according with your animation.

This kind of combination movie clip - invisible button is frequently used for buttons because you can create more interesting button animations more easily.

Modify the animation or animate more elements in this movie clip. You can create very complex animations and control them using Actionscript.