using flash buttons

Creating invisible buttons

In this next section, we will create invisible buttons over the firefighter. These areas where we want to create buttons are called hit areas and will display more information about the firefighter's equipment.

Click on the new layer button on the bottom of the timeline to create a new layer. Name the new layer buttons.

Creating a new buttons layer

Next, we will create the buttons to go over the firefighter. First, we will set our colors before we create the oval shape of the button. Flash shapes have two parts: the stroke and the fill. The stroke is like an outline and the fill is the color that fills the inside of shapes. To set the colors of the stroke and fill, click the color boxes on the bottom of our tools window palette. (If tools are not visible, you can bring them up using the Window menu at the top of the screen and choosing Tools) We will first set the color of our stroke color, designated by an icon of a small pencil.

Choosing the stroke color

Select any one of the black colors with the color picker that appears.

Choosing black stroke color

Next we will set the fill color to white. But this time, we want to do an extra step. After setting the fill color to white, click on the color again, and set the alpha setting to 50 percent. Alpha determines the level of transparency of a color. By setting the fill color to 50 percent, we have made this white fill partially, but not completely, transparent.

setting the transparency using alpha of the color picker

After we have set both the stroke and fill colors, we can draw shapes for our buttons over the firefighter. Next, select the oval tool from our tool palette. The oval tool is hiding under the rectangle tool. Click and hold down the rectangle to pull up the oval tool.

Choosing the oval tool

Use the oval tool to draw a circle over the head of the firefighter. If you have followed these instructions, you should be doing this while the buttons layer in your timeline is selected. (If not, make sure the "buttons" layer is highlighted, and both of the other layers are locked.

drawing with the oval tool

Use the selection tool selection tool icon (the black arrow tool) and double-click on your shape to select both the fill and the stroke. You can use this opportunity to reposition your shape if you did not draw it in the exact placement your wanted. Just make sure that both the fill and the stroke are selected by double-clicking on the shape.

double-clicking to select

With both the stroke and the fill selected, click on the modify menu at the top of the screen and choose convert to symbol.

convert to symbol menu

In the window that comes up, choose button for the symbol type and type in the name "helmet" for the symbol name. The registration point will not be important to this tutorial, but you can place it in the center box.

Convert to symbol dialogue box

Once you have successfully converted the shape to a symbol, you will see a blue outline around your shape. This is an indicator that the shape is inside your button symbol. It is best to think about symbols as containers that hold elements of your Flash project.

To see the button symbol in action, try testing your project. You can test your project by pressing Ctrl + Enter (PC) or Command + Return (Mac). You can also test a project by selecting test movie under the Control menu at the top of the screen. When you move your mouse over the shape, you will see your mouse cursor change into a hand tool.

Hand tool

Close the preview window to return to your Flash project. Next, use your selection tool to double-click on the button symbol. You may notice that everything on your stage will soften to a white color, and your timeline will change completely. This indicates that you are in symbol editing mode. If you want to get back to your main timeline, click on the Scene1 button in the bread-crumb navigation bar. This bar will always show you where you are at in your Flash project.

going back to scene 1

If you go back to Scene 1, you can return to the inside of your button by double-clicking on the button symbol using your selection tool.

the timeline in symbol editing mode

Once you are inside your button, notice your timeline is separated into four different frames. These frames are called states. These states will determine the appearance of your button depending on how the user interacts with it. Here is a quick overview of the four states:

  • Up state: Anything on this state will be seen by the viewer when they first navigate to your site, and before they interact with your button.
  • Over state: Anything on this state will be seen when the viewer moves their mouse cursor over the button.
  • Down state: Anything on this state will be seen when the viewer clicks on your button.
  • Hit state: This state is a special state that determines the part of the button that will be clickable. Anything on this state will be never be seen by the end user, however the shapes of objects on this state will influence the "clickable area" of the button.

At this point, our button only has an Up state. We will drag the contents of our button to the Over state, so that it only appears when the user moves their mouse over the button.

Notice the dot that is in the Up state. This dot is called a keyframe. A keyframe signifies that there is content on the stage in this instance of the timeline. We will click on this dot, highlighting the keyframe.

highlighting keyframe

Next, click and hold down on the keyframe and drag it to the Over state. Do not click and hold down on the keyframe too long. If you do, a menu will open. If this happens, try dragging the keyframe again more quickly.

dragging keyframe in the timeline

After moving the keyframe to the Over state, you will notice a white circle in the Up state.

finished dragging keyframe

The white circle is called an empty keyframe, which is much like a regular keyframe, except that there is no content on the stage in that frame.

Now, click Ctrl+Enter (PC)/Command+Return (Mac) to test your project. Notice what happens when you move the mouse over the button. You can also test a project by selecting test movie under the Control menu at the top of the screen.

You may notice how the button is invisible when you first launch the project, but appears when you move your mouse arrow over the helmet. This is because our Up state is empty, so we see nothing when we first launch the project. But our oval shape is now on the Over state, so we see it appear when we move "over" the button. Once you are done, you can now close the preview window. (Example below is how your project should function)

Next we will create a keyframe on the hit state. The hit state specifies the area that activates the button. It is important that we create the hit state now so that we can specify the circle is area that will activate the button. Don't worry if the hit state does not make complete sense just yet. The hit state is the most confusing part of buttons. Often, it makes more sense after we complete the button.

Click on the hit state in the timeline highlighting the frame.

the hit state highlighted

Press F6 on your keyboard to insert a keyframe on the hit state

inserting a keyframe on the hit state

Anytime you insert a new keyframe, you are in essence making a copy of the previous keyframe. We now have two dots; one on the over state, and one on the hit state. These signify two areas in which content on the state can be different. Now, let's go back to the over state so that we can add some content to the project. Click on the over state keyframe to highlight it.

highlighting the over state

Next we will drag some media from the library to the stage. Since we are currently in our over state in the timeline, this is the media that will show up when we move the mouse over the button.

dragging image from library

Next, test your project by clicking Ctrl+Enter (pc) or Command+Return (mac). Notice how the helmet only shows up when you move the mouse over the button. (test the live demo below to see how your project should work)

Let's recap: Notice our Up state is empty. This means when we initially see the project, we will not see the button that is hidden over the firefighter's head. However, when we move the mouse arrow over the firefighter's head, we see the contents of the Over state in our button. The Hit state is a special state that is never visible to the viewer. It simply specifies what part of the button that is clickable.

Repeat these steps for each of the pieces of equipment. Remember to go back to Scene 1 for each step, so you don't accidentally create a button inside another button. When you go to Scene 1 you will notice that your buttons turn a teal color. This is Flash's way to signal to you that you have an invisible button in that location. These teal buttons will not be visible when you publish or test your Flash project.