Cogswell Polytechnical College Instructor: Audrey Blumeneau

SWE 120A Flash Programming: ActionScript 1

Lecture Notes 06 - Flash CC:

1. Buttons Creating your own
a. Adding Sound Effects
b. Animating your buttons


Goals:

1. Creating unique button designs
2. Creating buttons with sound effects
3. Creating button that animate
Cogswell Polytechnical College Instructor: Audrey Blumeneau
SWE 120A Flash Programming: ActionScript 2

Simple Interactivity - Buttons
In order to make our movies interactive with our audience we will want to use Buttons. Flash provides
ready made buttons in the Common Libraries but we can easily create our own individual three-state
buttons as well as add sounds and animations to them.

Buttons have threestates which can be described as up, over and down state.
! Up state is how you see the button when you arrive at a site.
! Over state is what you see when you roll your cursor over that button.
! Down state is what you see when you press down on your mouse to click on
the button.
! Hit State the hotspot area that one clicks on. Good for text or large areas
(similar to image mapping in HTML), or for making invisible buttons.
Cogswell Polytechnical College Instructor: Audrey Blumeneau
SWE 120A Flash Programming: ActionScript 3

Making a basic three-state Button:

What we will create and learn:
We will learn how to make a simple button with an up, over and down state by creating a new symbol
and, once completed, bring several instances of this
new symbol onto the stage.

Steps:
1. Insert > New Symbol and select Button
as the symbol behavior. Notice how the symbol
editor timeline looks different.

2. Take the Rectangle or Oval Tool and
draw a button shape. Make sure to draw over
the + as this is the registration mark for the
center of this symbol Use the Align Panel
(Cmd+K / Ctrl+K) to align the shape to the
center of the
registration mark
(make sure the To
stage on the Align
Panel is checked
when aligning).





3. Press the F6 key twice this puts a
KeyFrame in the Over and the Down
states on the timeline. You should
now have a three-state button all with
the same colors!
4. Change the colors in the Over and
Down states using the Paint
Bucket.
5. Go back to the Scene (Main
stage/timeline)
6. From your Library click and drag an
instance or two of your button to your
stage (Make sure you named and
selected a layer for buttons first).
7. To see it work you will Test the Movie. Control > Test Movie (Shortcut key:
Cmd + Return / Ctrl + Enter). Now you can mouse over your button and even click on it
to see how it looks. It wont go anywhere yet because we have given it any instructions yet.
Cogswell Polytechnical College Instructor: Audrey Blumeneau
SWE 120A Flash Programming: ActionScript 4

Adding a sound to a Button:

What we will create and learn:
Adding a sound to a button makes clicking on a button just a little bit more fun. In this exercise we will
use the button we created and return to the symbol editing mode so that we can add a sound to it. Note
that you can do this exercise using the clip art buttons in the Common Library as well just bring it to the
stage so that it resides in your movies Library.

Steps: (add on to any existing button in your movies library)
1. In your Library (Cmd+L / Ctrl+L), double click on the button icon you wish to edit. Note that you
can also get into the symbol editor by double clicking on a button instance on the stage (This is
something to be careful about as the stage doesnt change and it can be very confusing are you on
the main timeline or inside the symbol editor? Make sure you know where you are!).
2. Make sure you are in the symbol editor and not on the main timeline. It should look like this:



3. In the symbol editor of your button, add a new
layer and name it Sound.


4. Add a Blank KeyFrame (F7) to the Down
State on the sound layer.


5. If you can do this at home or at work to put the Soundsfx.fla or sfx.fla into
the Program folder for Flash then you can open the library from within the
Common Library. Otherwise, you will open up the library from File >
Import > Open External Library. Pick a sound you would like
your button to have. Drag this sound to your current library. You can listen
to them by clicking on the arrow in the view box of the library.
Cogswell Polytechnical College Instructor: Audrey Blumeneau
SWE 120A Flash Programming: ActionScript 5

6. With the Down State
KeyFrame selected in the
Sound layer, drag and drop an
instance of a sound onto the
stage (just drop anywhere).
Notice that as soon as you drop
the sound in, it shows up on the timeline as a little sound wave.

7. Go back to the stage by clicking the Scene icon.
8. Test your button by going to Control > Test Movie (Ctrl>Enter (Win) or
Cmd+Return (Mac)).


Add Animation to a button:

1. Create a movie clip with some sort of
animation.
2. Open up the button you are designing.
3. Add a new layer and call it Animation.
4. Add a Blank KeyFrame to the Over State.
5. Click and drag from the Library an instance of your animation movie clip to a location on your
stage.
6. Go back to the stage and test your movie.
When your cursor moves Over your button you should see your animation do its thing!
Cogswell Polytechnical College Instructor: Audrey Blumeneau
SWE 120A Flash Programming: ActionScript 6

Using the Hit State:

The Hit State is also known as the Invisible State because, whatever you put here - shape or symbol,
it will not be seen by the visitor. The Hit State simply defines the area that is Hot or
Clickable. It is similar to the concept of an Image Map in HTML.

Here is an example of a Button using text with a Hit State placed on it: