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.