Knight Digital Media Center Multimedia Training

Tutorial: Using Flash buttons

By Jeremy Rue

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/flash-buttons/

Introduction

Flash CS4 icon

This tutorial is an introduction to the Adobe CS4 Flash program. It will walk through the process of creating button symbols, which is one of the most fundamental parts of Flash. Buttons allow the user to interact with a Flash project, and extend the capabilities of Flash beyond simple animations.

This tutorial will use elements of a Flash project originally built by the Minneapolis Star Tribune as a way for learning how buttons work. An original copy of the project by the Star Tribune can be viewed here.

First, let us take a look at the example of the finished project this tutorial will describe how to build:

A special thanks to the Minneapolis Star Tribune for providing elements of this Flash project.

Notice as you move the mouse arrow over the different areas of the firefighter, a circle appears to indicate that an area is clickable. When clicked, a larger detail image of a piece of equipment is displayed for more information.

Each of these areas on the firefighter are called invisible buttons in Flash. We will walk through the process of creating a basic button, and then learn how to edit the button so that it no longer appears except when a user moves their mouse arrow over an area of the project.

The materials for this tutorial can be downloaded by right-clicking (control-click for mac) and saving the Heroes-tutorial.zip file to a folder on your computer. The file is a compressed .zip file that contains all of the images and sounds that will be used in this tutorial.

Importing images in a new document

The first step in building our firefighter project is to create a new document in Flash. This tutorial will use ActionScript 2.0, which is easier for most people to learn. Open Flash CS4 on your computer, and from the new document menu select Flash File (ActionScript 2.0).

New document window in Flash

In the upper right side of the Flash screen, set your workspace layout to Classic. This tutorial will use the classic layout, as it is more familiar for people who have used earlier versions of Flash.

classic workspace

Download the Heroes-tutorial.zip file and extract it if you have not downloaded the tutorial files yet. To import the images we will be using in this tutorial, go to the File menu at the top of the screen, and select Import -> Import to Library.

import menu in Flash

Select all of the images from the tutorial folder. Use the shift key (command key on a Mac) to select multiple photos at one time so that you do not have to import each file separately.

selecting images in import window

Next, drag the firefighter.gif image from the library to your stage. If your Library is not visible, select it from the Window menu at the top of the screen. You can drag the library window to the right side of the screen.

dragging firefighter to stage

After you drag the firefighter image to the stage, we will name the layer that your firefighter is on. Naming the layer allows us to have an easy way to know what elements are on this layer. In your timeline, double click on the word "layer 1" to edit the layer name, and type "firefighter".

Naming firefighter layer

Our firefighter image will serve as a background reference for the invisible buttons we will create later. Layers are a way of organizing elements in our Flash project. Layers determine the stacking order for objects on your stage.

Since our firefighter needs no further work, we will lock the firefighter layer to prevent us from accidentally modifying it or moving it. When a layer is locked, you cannot make any modification or additions until it is unlocked. To lock the firefighter layer, click the small dot below the eyeball symbol in the timeline.

locking the firefighter layer

Next, we will create a new layer above the firefighter layer and name it "title". To create a new layer, click the small new layer button on the lower right side of the timeline.

create a new layer

Name the new layer "title" by double clicking on the layer name.

name the layer title

Click the text tool in your tool palette text tool icon. When you select the text tool, Flash will automatically display properties related to the text tool in your properties window. If your properties window is not displayed, you can bring it up by first clicking on the Window menu and selecting Properties.

Text properties window

Here you can choose text properties like the font, font-size, color and other characteristics of text. Next, click on your stage and type in a title for your project. This tutorial will use the same title the Minneapolis Star Tribune used, "Heroes of Public Safety" for the title.

typing text on the stage in Flash

To move your text, you must switch your tool to the selection tool (the black arrow tool). The selection tool is always used for moving objects on the stage. If you want to make further adjustments to your text, choose the text tool and highlight the text you want to adjust, and you can make additional adjustments like changing the font size.

Once you set the text size and position the way you want, use the selection tool (black arrow tool) to select your text once. The selected text will display a blue outline to indicate it is selected. From the properties window, scroll down to the bottom and find the filters section and click the small add filter button at the bottom right of the image.

add filter icon

From the pop-up menu, choose the drop shadow filter.

choosing the drop filter menu

Several menu options will be displayed in the filter properties section. Feel free to edit these options to see how they affect the drop shadow on your text. We recommend choosing the high quality setting and reducing the distance of the shadow from the text for the most aesthetic appearance.

changing filters

After you have made your desired text adjustment, lock the title layer.

The next section will take you through the process of creating invisible 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:

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.

Adding sound to each button

In this next step, we will add some audio to each of the buttons. Adding sound to the button timeline is a little counter-intuitive due to the way sound was originally designed to work in Flash. The idea is to have some audio play when we move the mouse arrow over a piece of equipment, and have the audio stop when we move the mouse off of the equipment.

First, we must import the audio files from tutorial materials to our Flash project. Click on the File menu at the top of the screen and from the import option select import to library.

import to library menu

Navigate to your sounds folder and while holding the shift key, select all of the sounds. This is an easy way to import multiple sounds at one time without having to repeat the process for each file.

selecting multiple sounds

Once you import your sounds, it is good practice to keep them organized in your library. Click on the new folder icon at the bottom of your library window and name the new folder sounds. Drag each audio file to the folder.

organizing the library

Now let's add some sound to each of the buttons. To start, double-click on one of the buttons on the stage that you created from the previous lesson. This will bring you into symbol editing mode. In this example, we will use the helmet button. Click on the over state in your timeline, highlighting the keyframe.

highlight the over state

Next, click on your properties window. Look under the section for sounds. (if you do not see the sounds menu in your properties window, try clicking on the over state keyframe again.) The sound name option will list all sounds that it finds loaded into your library. Pick the corresponding sound that matches with your button.

sound menu

Next set the sync option to start. The sync describes how the sound will be synced with the timeline. If we choose event, every time a person moves the mouse over the button a new instance of the sound will be played, and this will sound chaotic. The start option will make sure only one instance of the sound file is played until it is stopped.

sync menu

If you test the project now, you will see we are only have way done with the sound. It will play when we move the mouse arrow over the button, but will not stop when we move off of the button. This next step seems a little counter-intuitive, but it allows Flash to stop the sound that is playing. Next, click on the Up state in your timeline.

up state selected

Then in your properties window, you will repeat the process of setting the sound name to your audio file. However, this time set the sync to stop.

setting sync to stop

Now test your project and you will see how the sound plays when you move the mouse arrow over a button, and stops when you move it off of a button.

About this Tutorial

Tutorial Presented by the Knight Digital Media Center at the University of California, Berkeley

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.