Buttons

							Flash – Leever – Making Buttons                                                          1


                                   Making Buttons
The second type of Symbol is a Button. Like Graphic Symbols, they have a unique
Timeline. This one however only has 4 frames in it. These 4 frames have special names
(besides 1,2,3,4) and are referred to as States. The States are:

      UP – The starting state of all buttons
      OVER – The state of the button when the user moves a mouse over top of it
      DOWN – A way a button looks while being clicked
      HIT – The area of the button that will react to the mouse

Creating a simple button:

Create a new Symbol in the Library:




This should take you directly to Symbol Editing Mode, but if it does not, open the library
and double click the Button Icon you see there. I can tell I‟m editing the button by the
choices that appear in the timeline. I can see the UP, OVER, DOWN, HIT states (blue
arrow). And notice the red arrow pointing to the bar under the timeline where it says
"Scene 1" and then "mybutton". Scene 1 is actually my main timeline -- the fact that the
name of the button appears next to it, indicates that I am editing the Symbol, not the
timeline.
Flash – Leever – Making Buttons                                                           2




Now, select the Up frame of the timeline and draw your button on the stage.




Then hit F6. This will copy your button into the OVER state of the timeline. Change the
color of the button. Do the same thing for the Down State.
Flash – Leever – Making Buttons                                                        3




When you get to the HIT STATE, just click F6 -- you don't need to worry about the color
of the button. The HIT STATE is not visible. It just defines the area of effect for the
Mouse. If you simply hit F6, the button itself becomes the area of effect (which is most
likely what you want).




In my example my button is Red in the Up State, Light Blue in the Over State, Dark Blue
in the Down State (and the Hit State).

Return to the MAIN TIMELINE by clicking the "Scene 1" button (blue arrow). Drag an
instance of the button onto the stage. The hit CONTROL > ENTER to test the buttons.
The button should react to the mouse.
Flash – Leever – Making Buttons                                                                 4




ADD SOUND
Now let‟s add a sound file to the button. First, find a sound file on your computer. I did a
search for *.wav files and found a bunch. I‟m going to use the FILE > IMPORT >
IMPORT TO LIBRARY feature to import the file to the main library. I‟ve imported a
file called “ding.wav”.




You can see it sitting in my library:




Create a New Layer for the button and name it Sound. (You should never put sound on a
layer with something else. If you put it on it's own layer, you can remove it by deleting
the layer. If you merge it into a layer with something else, it's very difficult to remove it
after the fact.)
Flash – Leever – Making Buttons                                                             5




Next I‟m going to select the DOWN frame of the Sound layer and hit F7. Then drag the
„ding.wav‟ file onto the button and drop it. The sound won't physically show up on the
stage, but it does show up as sound waves on the timeline. Now go test the button to see
if the sound is working properly. You should hear it when you click the button.




If you got the sound to start in the wrong frame, just go back into the Button Editing
mode and right mouse click the frames you want to remove the sound from. There should
be an option to „clear frame‟. This will delete any content that is in the frame including
any sound file.

ADD TEXT TO BUTTON:
There a bunch of different ways to add text to a button. You can add the text directly to
the button in Symbol Editing Mode, or you can create a generic button, and then add the
text to the Instance in the Main Timeline (this cuts down on the number of buttons you
might need but limits other options.) Regardless of which option you choose, it is very
Flash – Leever – Making Buttons                                                               6


important that you set your Text Tool to STATIC first. Text has a couple of different
options, but text on a button must be STATIC text. If it is not, your button won't work
properly.

CHANGE HIT STATE:

When I created the hit state in the button up above, I hit the F6 key which just made the
original button the actual hit state. But you can also redefine the Hit State to make it
bigger or smaller than the actual button. If you make it bigger, the mouse just has to get
'near' the button to trigger it. If you make it smaller, the mouse has to get on the button
and into the predefined area first before the button will react to it.

To change the hit state, you can either hit F6 and then resize the button. Or you can hit
F7, and draw a new shape into that frame (the hit state doesn't even have to be the same
shape as the button).

ACTION SCRIPTS:
Buttons are pretty useless without Action Script to make them do something. Action
scripting is one of the hardest parts of Flash to learn because it requires some
programming knowledge. There are a few short cuts to make things easier, but at some
point you are going to have to get into the actual programming back end of the software
and write code (or copy someone else's code). As luck would have it, a lot of the things
we do in Flash are pretty standard, so the code is the same from one project to another.

ACTION SCRIPT 3.0 vs 2.0:
Flash upgraded the Action Script language in the last version of the program to Action
Script 3.0. While this new version of the language is much more powerful, it is also much
more complicated. Some of the easy short cuts are gone if you are using 3.0.

You have to decide which version you are going to use -- your main project will
determine this. Action Script 3.0 has a bunch of pre-built Special Effects and Tools that
are available to you that the older versions of the languages don't have. But the draw back
is, you have to use the more complicated code options for some things that used to be
simple.

If you choose to create your masterfile (the one that will eventually display all your other
files) using Actionscript 2.0, you will not be able to fully load files made with 3.0 inside
of it. The two will conflict and some of the 3.0 scripts may not work. It is however
backward compatible so if the masterfile is 3.0 it should be able to run any older version
of the language.

RECOMMENDATION: I include the 2.0 notes at the end of this document. If you are
using a version of Flash older than CS3, you have no choice but to use 2.0. If you have
CS3 or CS4 I recommend you make the switch to 3.0. If you use the older version you will
not be able to use some of the new tools Flash has introduced.
Flash – Leever – Making Buttons                                                            7


SPECIAL NOTE: Many flash drives or thumb drives have hidden software on them
that prevents scripts from executing. You may not even know the software is
installed on your drive (it's a security feature). This means that if you have this
software, your ActionScript won't do anything. If you think you've done everything
correctly, but your file still won't work, try saving it to the desktop and testing it
again.

BASIC NAVIGATION WITH ACTION SCRIPT 3.0
        If you want to navigate to an URL with a button click using Action Script 3.0, you
would start with a button on your stage. If you notice in my set up in the image below, I
have 2 layers -- buttons and actions. The blue button is on the layer called 'buttons' (there
is nothing on the action layer at the moment.

This time when I dropped the button onto the stage I also gave it an instance name
(circled in purple). I named it 'google'.




In Action Script 3.0 we can not add any script to the button itself. Everything goes on the
Action Layer. Lock the Button Layer, and select the Action layer FRAME 1, then open
the Action Panel (F9). Cut and paste this piece of code into the action panel:

       google.addEventListener(MouseEvent.CLICK, openUrl);

       function openUrl(event: MouseEvent) {
       var request:URLRequest = new URLRequest("http://google.com");
       navigateToURL(request, "_blank");
       }


The word highlighted in yellow is what you named the instance of the button. The
address highlighted in green is where you want the button to navigate to. And the word
highlighted in blue is how you want the page to open (your choices are:_top, _self,
_blank).
Flash – Leever – Making Buttons                                                             8




BASICS OF ACTION SCRIPT:
Action Scripting is the language that makes your Flash files interactive. It‟s similar in
structure to Javascript, but the function names and commands are different.

Functions:
       An Action Script function is a command that does something. In some instances
the function will require some extra information or parameters to complete its command.
Two examples of this can be found in the following set of commands:

                       on (press) {
                       play();
                       }

The piece of code above has 2 functions in it:
                     on()
                     play();

In this case the function on() requires some further information. It requires a parameter,
which is the word „press‟. This function has a whole set of parameters that it understands
such as:

      press - The mouse button is pressed while the pointer is over the button
      release-- The mouse button is released while the pointer is over the button.
      releaseOutside – The mouse button is released while the pointer is outside the
       button after the button is pressed while the pointer is inside the button.
      rollOut – The mouse pointer rolls outside the button area
      rollOver – The mouse pointer rolls over the button
      dragOut – While the pointer is over the button, the mouse button is pressed and
       then rolls outside the button area
      dragOver – While the pointer is over the button, the mouse button has been
       pressed then rolled outside the button then rolled back over the button.
      keyPress(“key”) – The specified key is pressed.

The Curly Braces {} are used to group pieces of code together – in this case they indicate
that something should be done once the parameter has been met or returns „true‟. In this
case the function play() should be run once the on() parameter of „press‟ has been
successfully done. While in this script the only thing happening in this code is the
function play(), it is possible to put a whole long list of commands inside the curly braces
which will happen in sequence once the script is run.

Things to pay attention to:
Flash – Leever – Making Buttons                                                             9


      The Parentheses are import! The standard parentheses ( ) are not the same as the
       curly braces { } which are not the same as the square brackets [ ]. Do not mix and
       match them. Each has a specific function and they are not interchangeable.
      Spelling does count! You can't misspell a command and expect it to work. The
       commands must be typed exactly.
      Capitalization counts. Play() is not the same as play(). Make certain you check
       that your case is proper.
      Semicolons – The semicolon is a terminator. It indicates when a command is
       finished. Don‟t delete them.
      Colon - The colon is used frequently in version 3.0. It has a very different
       meaning and can not be interchanged with the semicolon.


Start and Stop a Timeline (3.0):

One of the biggest changes with Action Script 3.0, is that you can't add action script
directly to a button. It must all be added into the Action Layer.

For this example I have this set up:

            Animation Layer with a ShapeTween (or animation) on it
            Buttons layer with my 2 buttons (no code)
            Actions layer at the top of the other.


NAME the INSTANCES of the buttons using the Property Menu.

I named the Stop button 'stop_bt' and I named the Start Button 'start_bt'. See the Blue
Arrow pointing to where you name the instances. (By the way -- DO NOT name your
buttons 'stop' or 'play' -- those are reserved words that actually do something in Action
Script.)
Flash – Leever – Making Buttons                                                          10


Now Lock the Animation and Buttons layers, and select Frame 1 of the Action Layer.
Then open the Action Panel and add this piece of code to it:

       stop_bt.addEventListener(MouseEvent.MOUSE_DOWN, stopHandler);
       function stopHandler(event:MouseEvent):void
       {
       stop();
       }


Notice the word highlighted in yellow -- that's what I named the Instance of the Stop
Button.

If I test my SWF file now, the animation will stop the moment I click the Stop Button.

Now go back to the Action panel and add this piece of code directly under the first piece
of code:

       start_bt.addEventListener(MouseEvent.MOUSE_DOWN, playHandler);
       function playHandler(event:MouseEvent):void
       {
        play();
       }

Again the thing highlighted in yellow is what I named the Instance of my Start Button.
My two buttons now start and stop the animation.

Finally I want the animation to begin in the STOPPED position, so I still need to add the
stop command to the main timeline. Just add stop(); to the top of your list of code in
Frame 1 of the Action layer. That means the entire Frame 1 of the Action Layer looks
like this:

       stop();

       stop_bt.addEventListener(MouseEvent.MOUSE_DOWN, stopHandler);
       function stopHandler(event:MouseEvent):void
       {
       stop();
       }

       start_bt.addEventListener(MouseEvent.MOUSE_DOWN, playHandler);
       function playHandler(event:MouseEvent):void
       {
        play();
       }
Flash – Leever – Making Buttons                                                          11



Go to the last Frame of the Action layer, and hit F7 and add this piece of code to it:

                       gotoAndPlay(2);


Your file should work exactly the way it is supposed to now.




THE FOLLOWING INSTRUCTIONS ARE ONLY FOR PEOPLE USING AN
OLDER VERSION OF FLASH. IF YOU HAVE THE NEWEST VERSION,
DON'T PROCEED ANY FARTHER IN THE NOTES.


ACTION SCRIPT 2.0.
When you first create your Flash fla file, you get a choice of which version to use. If you
picked 2.0 you have a bunch of shortcuts available to you that you don't have with 3.0.
However the special effects and special tools that were introduced with 3.0 won't be
usable.




ADDING A BEHAVIOR:

With Action Script 2.0, you have access to the Behavior Menu (it doesn't work in 3.0).
This is a menu that writes some of the action script for you.

Start by creating a button and drag an Instance to the stage.

Below I have dragged a simple button (called mybutton) onto my stage. (I‟m going to
turn it into a hyperlink to http://www.google.com).
Flash – Leever – Making Buttons                                                     12




Next I‟m going to open the BEHAVIORS screen. You can find it by typing: SHIFT F3. It
looks like this:




Select your button on the stage -- you‟ll notice that the BEHAVIORS screen has it
already loaded and waiting for a command. By clicking the PLUS symbol on the
behavior menu you‟ll see a list of options. I‟m going to click: WEB > GO TO WEB
PAGE.




Then I‟m going to edit the box that appears so that it looks like this:
Flash – Leever – Making Buttons                                                               13




Then click OK. The button will now be a hyperlink to google‟s web site. The best way to
test this, is to actually PUBLISH the page and click the hyperlink to make certain it goes
where you want it to go.

That's probably one of the easiest ways to make a button do something.



Start and Stop a Timeline (2.0):
Below I have a very simple animation. There are 2 layers.
    The „animation‟ layer is a shape tween of a rotating ball.
    The „buttons‟ layer has my 2 button on it (red for stop, green for start). You can
      see those buttons sitting in the Library as well.




If I test this movie now, it will simply run the animation over and over again. I want to
set it up so that it doesn‟t start until I hit the START button, and stops the moment I hit
the STOP button. This means I have to add some actions to the two buttons.

The STOP button is the easiest, so I‟m going to do it first. The first thing I‟m going to do
is click the selection tool, then select the Stop Button on the stage (it's important that
ONLY the button instance of Stop is selected -- make certain you haven't
accidentally selected both Start and Stop) . Once done, I‟m going to open the Action
Panel (F9) and add this piece of code:
Flash – Leever – Making Buttons                                                              14



                               on(release){
                               stop();
                               }




If I click CONTROL ENTER now and test the animation, it will stop the moment I hit
the STOP button.

Now I want to control the START button. I‟m going to use the exact same steps. I‟m
going to use the selection tool to select the Start Button. Then I‟m going to add this piece
of code to the action panel:

                       on (release) {
                       play();
                       }


Now I‟m going to test the movie using CONTROL  ENTER. Again, the moment I
enter the TEST MOVIE phase, it starts the animation immediately. The Animation stops
as soon as I hit the STOP button, and it restarts the moment I hit the START button. But I
have one last thing to do. I don‟t want the animation to start right up. I want the
animation to wait until I hit the start button the first time. Which means I need to add a
stop() command at the beginning.

I am going to start by adding a brand new layer called „actions‟. It‟s important that this
layer be on top of the other layers since it is going to be controlling all of them.
Flash – Leever – Making Buttons                                                         15




Now I‟m going to select FRAME 1 of the „action‟ layer (it should already have a Blank
Key Frame in it) and I‟m going to add one piece of script to it:



                              stop();


When you add the Action Script to FRAME 1, a tiny letter „a‟ will appear in the frame
above the dot that indicates a key frame.




Now as it stands, my animation sort of works the way I want it to. It is in the STOP
position when I test the movie and won‟t start until I hit the START button. I can hit the
STOP button at any time in the animation and it will stop. But it also stops the moment it
gets to end of the animation and resets itself back to FRAME 1. That‟s because FRAME
1 possesses the command to STOP. It will STOP every time it gets to FRAME 1
automatically. This means I have to keep restarting the animation.

To fix this I‟m going to add a command to the end of the animation in the LAST FRAME
of the Action layer. I‟m going to select the frame and hit F7 to add a key frame and then
add this piece of code:

                              gotoAndPlay(2);
Flash – Leever – Making Buttons                                                  16




Now when it gets to FRAME 15, it will automatically jump to FRAME 2, meaning it will
skip over FRAME 1 which has the stop() command in it.

Now my START and STOP buttons control the Animation completely.