Creating a simple button with sound in Flash 8

(beginner )

In order to add interactivity to our flash movies we need to create a special type of symbol that will allow the user to tell the movie to perform some action such as play, next, stop sound etc. By defining a symbol as a button symbol we let Flash know that this shape will behave as a button (ie something that is clickable). Flash's buttons can be defined to have a different appearance for each state (up, down, and hover) and we can easily add sound to give more feedback to the user that something happened in response to their clicking the button. .

Step 1: Creating the button shape

A button can be any shape and colour you wish it to be buttons can even be invisible (by defining a hit state only). For the purposes of this tutorial we are going to create a simple rounded rectangle shape for our button.

Choose the rectangle tool. Then, in the options section of the toolbox click on the rounded corner option. This will open the set corner radius dialog box. I entered a value of 12 but you can experiment with different values to see which results in the rectangle shape you are looking for.

Tip: you can also change the corner radius of a rounded rectangle on the fly by clicking the up or down arrow buttons while drawing out the shape.

Set the colour of your fill and stroke - in the example button a fill of blue and no stroke was chosen.

To draw out the shape simply click on the stage and drag out a shape of size you desire. When you release the mouse button the final shape with the fill and stroke colours you chose will be displayed.

Step 2: Adding text

In most cases buttons will contain text or symbols to let the user know what will happen when they click on them. First we need to set some attributes for our text, from the property inspector set the text type to static, choose a font, font-color, font size. Because this text is not going to be animated I have left the anti-aliasing option set to Anti-alias for readability. Then simply click on the stage and start typing.

Step 3: Aligning button and text

Use the selection tool (black arrow) to drag a marquee around both the text and button or select the button and shift+click to select the text as well. Then open the alignment panel by choosing Windows > Align or Ctrl + K (Win) Cmd + K (Mac).

Turn off the To Stage option by clicking it if is on and choose align horizontal center and align vertical center to center the text over the button.

Step 4: Converting to symbol

So far we have created a great button shape but at this point it just looks like a button it actually isn't a button yet. Using the selection tool (black arrow) draw a marquee around the button shape to select it or click the button shape and shift click the text to select both objects. Then choose Modify > Convert to Symbol or F8. This will process will convert it from some a shape and text that looks like a button to an actual button symbol.

From the convert to symbol dialog box give your button symbol a name and make sure to check the button symbol type and then click ok.

You will see your new button symbol appear in the library palette.

Step 5: Adding a down, hover and hit state to your button.

Double-click the button symbol in the library panel to open the button in symbol editing mode. The button will display on a screen all by itself. And in the timeline section you will see that the button has its very own timeline with four possible states up, over, down and hit.

The up state is how the button appears by default when the user isn't interacting with the button. The over state is what shows when the user holds his mouse over the button and the down states is what shows for that brief period when the button is actually clicked on. Finally the hit state is not a state that is visible to the user but simply defines the shape and space that is clickable by the user.

Adding an over state

Place your cursor in the frame under the Over label and add a keyframe by either choosing Insert > Timeline > Keyframe or right-clicking and choosing Keyframe from the context menu or F6. This will place a copy of the existing button shape and text on the stage for the over state. So the user will see the button react to the mouse over event select the rounded rectangle shape and choose a different fill colour.

Adding a down state

Place your cursor in the frame under the Down label and add a keyframe by either choosing Insert > Timeline > Keyframe or right-clicking and choosing Keyframe from the context menu or F6. This will place a copy of the existing button shape and text on the stage for the down state. So the user will see the button react to the mouse over event select the rounded rectangle shape and choose a different fill colour.

Adding a hit state

Place your cursor in the frame under the Hit label and add a keyframe by either choosing Insert > Timeline > Keyframe or right-clicking and choosing Keyframe from the context menu or F6. This will place a copy of the existing button shape and text on the stage for the hit state. All you really need for this state is a shape of the buttons size to let flash know how big an area should be clickable so leaving this state identical to the down state is just fine.

Test how your button reacts to mouse movement by choosing Control > Test Movie or Ctrl + Enter (Win) or Cmd + Return (mac)

Step 6: Adding Sound

First we need to import a sound to our library. A great source for event sounds is www.flashkit.com. Flash can use many types of sound files including .mp3s . wavs.

To import a sound to your library choose File > Import to Library and then navigate to the file you wish to use, select it in the file viewing window and click open. The sound file will then appear in your library.

Add a sound layer to the button timeline

In the layers palette click the insert layer button. Rename the new layer sounds by double-clicking within the layer text.

Add a keyframe in the sound layer

Place your cursor under the Down label in the sound layer and add a keyframe by either choosing Insert > Timeline > Keyframe or right-clicking and choosing Keyframe from the context menu or F6.

Adding the sound to the keyframe

Click inside the keyframe on the sound layer to select it then drag the sound icon from library and drop it on to the stage. There will be no visible difference to the stage but a blue wave form will appear within the down keyframe extending beyond it.

Click in the down state keyframe on the sound layer again and on the property inspector make sure that the sync option is set to event. An event sound will play for its full length regardless if there is room on the timeline for it or not.

Test how your button reacts to mouse movement by choosing Control > Test Movie or Ctrl + Enter (Win) or Cmd + Return (mac)

Adding actionscript commands to buttons will be covered in a future tutorial.