Buttons in Flash - Page 1

by kirupa | 17 August 2009

Whenever you click on something, there is a very good chance that what you clicked on is a
button. This is not something specific to just Flash - almost all applications use buttons for doing
something. Given how common place they are, lets use this tutorial as a way of familiarizing
ourselves with buttons in Flash!

By the end of this tutorial, you will have created a button that looks and functions similar to the
following:

In the above example, I have a small button made up of some image and text. Play with the
button by hovering over it with your mouse and clicking on it. There are two things I want you to
notice. First, notice that the look of the button changes as you mouse over and click it. Second,
depending on whether you are mousing over or clicking, some text below changes to display
what action you just performed.

Creating the Look of the Button

In this and the following pages, you'll learn how to do everything seen in the above example
from actually creating your button to writing the code. Let's get started:

1. Launch Flash CS4, and Create a new Flash document. Feel free to tweak some settings
such as the stage size, frame rate, etc., but none of that is important for this tutorial. Just
make sure that you have a blank artboard:
 [ is there nothing sweeter than a blank stage? ]

2. What you are going to do next is add an image. If you need an image, I am using the
Flash icon from the Silk Icons set, so feel free to use it:

You cannot copy and paste an image into Flash from your browser. Instead, you have to
save the image to your hard drive and then insert it by dragging/dropping from your hard
drive and into your document or by going to File | Import | Import to Stage.

Your perfectly empty stage now contains a lonely image:

[ your stage now has the image you inserted ]

3. Next, let's add some text. Use the Text tool from your Tools panel and write something
generic like Click Here:
 [ write some text to go along with the image ]

4. Right now, you should have two elements on your artboard - the image and the text.
What we want to do is convert both of these elements into a single button. Doing this is
fairly straightforward. First, select both your image and your text:

[ select both your image and text ]

With both of these elements selected, hit F8 or go to Modify | Convert to Symbol to launch
the Convert to Symbol dialog. In this dialog, for the name, write simpleButton, and under
Type, select the Button type:

[ give your new symbol the type Button and name simpleButton ]

Once you have done this hit OK to accept the changes you have made and to close the
Convert to Symbol dialog.
5. Right now, nothing much will seem to have changed. If you look closely, the two
elements you had selected before have been condenesed into just a single element:

[ your selection has been condensed into one element now ]

Looking in your Properties panel paints a much clearer picture.

[ the properties inspector is more clear ]

What you have selected is now a button - as you would have expected after having
completed the previous step.

6. Ok, great. You now have a button. Press Ctrl + Enter to test your application and to see
your button at work. When you hover over your button, notice that your mouse cursor
changes from an arrow to a hand:

[ you have a very simple button ]

Defining the Button States
Let's get started with creating the various button states so that you get more visual feedback
when you are interacting with your button:

1. In your stage right now, you have a button. What we are going to do next is specify the
look of the button when you mouse over it and when you click on it. To do that, you are
going to have leave the root of your stage and actually dive into your button itself.

To do that, double-click on your button or right click on the button and, from what may
be the longest context menu ever seen by humans, select Edit in Place:

[ double click or right-click, Edit in Place to edit your button ]

2. You will now be inside the button. There are two things that indicate that besides the
transition that you see when you select Edit in Place or double click on the button. First,
look at your navigation history at the top:

[ the navigation bar shows that you are no longer at the root, Scene 1 ]

Second, look at your timeline. It displays four distinct frames - Normal, Over, Down, and
Hit:

[ your timeline when editing a button is different ]

What you are going to do is add content to each of the various frames to indicate when the
content will be visible.
3. When you hover over your button, we want to do two things. We want to display a
colored rectangle that goes behind both the image and the text. Second, we want to
display a underline below the text. Everything associated with what happens when you
hover over your button goes in the Over frame.

First, go ahead and add two new Layers below Layer 1. You can do that by Right
clicking on Layer 1 and selecting Insert Layer from the menu that appears. Rearrange the
layers so that they appear below Layer 1 - the layer that contains your image and text:

[ add new Layers below Layer 1 ]

4. In order for you to define what happens in the Over frame, you need to insert some
keyframes. There are several ways of doing that, but the easiest way is to select all three
frames in the Over column, right click, and select Insert Keyframe. Your timeline will
now basically look as follows:

[ insert a new keyframe in the Over frame ]

The other approach is to right click on each of the empty frames in the Over frame
individually and select Insert Keyframe. Either case, the result will be the same.

5. Next, select the keyframe in the Over frame in Layer 2 by clicking on it. Anything you
draw now will appear only in the Over stage and live in Layer 2. What you are going to
draw is a small line directly under your text on the artboard using the Line tool.

You are trying to simulate an underline, so try to make it look similar to what you see in
the following image:

[ draw a straight line to simulate an underline ]

 Because you drew your line in the Over frame in Layer 2, the empty keyframe that once
lived there is now a solid keyframe:

[ your empty keyframe is now filled in with your underline ]

6. If you test your application now, you will notice that when you hover over your button,
the underline you added appears. Likewise, when you hover out, the button returns to
normal.

Next, what we are going to do is add the colored rectangle that appears behind the image
and text when you hover over your button. This is actually as simple as it sounds. Select
the empty keyframe under Over in Layer 3. Draw a small colored rectangle that is large
enough to contain the image and the text:

[ draw a rectangle large enough to contain your image and text ]

To be able to easily draw the rectangle behind the underline layer (Layer 2) and the
image/text layer (Layer 1), you may need to lock Layers 1 and 2 first to avoid the
"snapping to other things" that occurs when you are drawing.

Your timeline will now look as follows with the empty keyframe under Layer 3's Over
frame filled in:

[ your timeline is getting more filled in now ]

 7. What we are going to do next is define how your button looks when you click on it. That
is defined in the frames found in the Down column. So, select the empty frames in the
Down column, right-click, and select Insert Keyframe. Once you have done this, your
timeline will now look as follows:

[ your Down column will now have keyframes ]

8. When the button is clicked, we want the pink rectangle to turn blue. To do that, make
sure your playhead is on the Down frame and select the rectangle. Once the rectangle is
selected, change the color from Pink to a Light Blue:

[ change your rectangle's color to a light shade of blue ]

There are several ways in Flash that you can change the color of something. The easiest
way is to change the color defined in the Fill property found in the Properties panel when
your rectangle is selected:

[ change the color easily from the Properties panel ]

If you test your application now, everything should be good to go. By default, your button looks
as follows as defined by the frames in the Normal column:
 When you hover over your button, the text is underlined with a pink rectangle appearing as
defined by the frames in the Over column:

Finally, when you click on the button, the frames from the Down column are activated, and you
see the pink rectangle turn a slight blue:

Ok, great. You now have something that sort of looks and behaviors like a button. It's time to go
back to the root of your stage and look at the next step of making a real button. You can go back
to the root by clicking on the Scene 1 text found in the navigation bar:

[ go back to the root by clicking on the Scene 1 link ]

The Button and ActionScript

To have your button do different things beyond changing its look when you hover over it or click
on it, you need to write some code. First, you will need to give your button an instance name so
that you can refer to it from your code. Make sure your button is selected, and from the your
Properties panel, you'll see a text field at the very top that says "Instance Name":
 [ find the Instance Name text field ]

Replace the text with the name myButton:

[ give your button the instance name myButton ]

Once you have given your button an instance name, you can easily refer to it using code. Let's
look at the code itself next. All code in Flash is entered primarily via the Actions window. To
display the window, select the first frame on your timeline and hit F9 or right click and select
Actions from the menu that appears.

Your Actions window will appear:

[ your Actions window will contain your code ]

It is here where you will write some code that will make your button work. What I am going to is
provide you the code to do basic handling of mouse over and click events, and then I'll explain in
detail how it all works.

Into your Actions window, copy and paste the following code:

function setupEvents() {
// associate events with event handlers
myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);
myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);
}
setupEvents();

function clickButtonHandler(e:MouseEvent) {
trace("Clicked Button!");
}

function hoverButtonHandler(e:MouseEvent) {
trace("Hovered Over Button!");
}

Once you have pasted your code, test your application again and press Ctrl + Enter or go to
Control | Test Movie. Your application will appear in the Flash Player window. Go ahead and
hover over and click on your button. The Output panel will appear, and you will see some text
such as "Clicked Button" or "Hovered Over Button" appear:

[ look at the Output panel ]

The output you see is an indication that you have written some code that intercepts your mouse
events on your button and does something based on it. Let's look at what the code does...starting
with setupEvents:

function setupEvents() {
// associate events with event handlers
myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);
myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);
}
setupEvents();

The setupEvents functions gets called first, and it just associates each mouse event with the
appropriate function that needs to be called when that event is found. That is handled by the
following two lines:

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);
myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

To take a few steps back, here is what you are trying to accomplish. When you click on the
button or when you move your mouse over the button, you want some code to be executed. To
determine when you click or when you mouse over something, you need something in the
background that periodically checks where your mouse is and whether it is over your button or
clicking on the button.

That something in ActionScript is known as a listener. A listener is something you attach, much
like a parasite, to a host. The host is the element that you want to intercept and process the events
on. When an event you are listening for is overheard, your listener is responsible for calling the
appropriate function to handle this event. This function is commonly known as an event handler.

In our code, the host is myButton:

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);
myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

On the myButton instance, we call the addEventListener function to associate an event with an
event handler it needs to call.

In the first line...

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);

...we tell our listener to listen for the MouseEvent.CLICK event, and when the click event is
heard, call the clickButtonHandler function.

In the second line, we do something very similar:

myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

Our listener associates the MouseEvent.MOUSE_OVER event with the hoverButtonHandler that
gets called when the mouse over event is overheard.

The only missing piece right now is our event handler. Let's look at our two event handlers next:

function clickButtonHandler(e:MouseEvent) {
trace("Clicked Button!");
}

function hoverButtonHandler(e:MouseEvent) {
trace("Hovered Over Button!");
}

Your event handler is nothing more than a regular function with the exception of one thing - it
must have an argument of type that is Event or based on Event. In our code, our argument is of
type MouseEvent because both of the listeners are actually listening to something found in the
MouseEvent class.
Be careful to note that not all events will be mouse events, so be prepared to change the
argument to your event handler to the appropriate event type as needed.

Complex Button RollOver/RollOut Effects

by warhero : 24 April 2005

It seems everywhere you look now has some form of complex button. Most buttons that have an
animation when rolled over and an animation when you roll out are done with some form of this concept
that I intend to share with you.

If you understand basic Flash concepts and just a smidgen of Actionscript, you will catch on in no time.

Before we get started, take a look at what will be created. It may not look like much, but from this one
simple concept, sites like " The Life Aquatic" movie site are possible.

Here is How

i. Create a new Flash document.

ii. Open up the document properties by pressing ctrl+j (cmd+j on Mac) and change the stage size to
100x100. Change the Frame Rate to 30.
iii. Rename layer 1 on the main timeline to complexButton. The main timeline should now look like
this:

iv. Create a new movieclip by pressing ctrl+F8 (cmd+F8 on Mac). Name it mc_complex.
v. Double click mc_complex in the library to edit the symbol. Select the Oval Tool(o) and make a
30x30 circle on the stage. In the properties panel set the x and y values for that circle to 0.
vi. Double click the circle to select the Fill and Stroke. Press F8 to convert it to a symbol so we can
tween it. Make it into a graphic symbol and name it gr_circle:
 vii. Still editing the mc_complex movieclip select frame 15 and press F6. This inserts a keyframe.
Resize the circle a little bigger than what is there. I went with 40x40.
viii. Right click on any frame between the two keyframes on the timeline and select Create Motion
Tween.
ix. Create a new layer and call it actions. Insert a blank keyframe(F7) on frame 15. The timeline for
mc_complex should now look like this:

x. Select the first frame of the actions layer. Type this code in the actions panel:

//stop();

this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}

this.onRollOver = function(){
rewind = false;
play();
}

this.onRollOut = function(){
rewind = true;
}

this.onRelease = function(){
getURL("http://www.kirupa.com","_blank");
}

xi. Select frame 15 of the actions layer, Type this code in the actions panel

stop();

xii. Navigate back to the root timeline. Put an instance of mc_complex from the library onto the stage.
xiii. Save the flash document and test your movie(ctrl + enter). There you have it, a button that
animates on rollover and on rollout.

Now lets look at the code:

stop();

this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}

The first stop command just stops the movieclip from playing (so the animation doesnt loop). What the
onEnterFrame event handler is doing is checking to see if rewind is set to true. If it is, the animation plays
backwards until it reaches a stop.

this.onRollOver = function(){
rewind = false;
play();
}

The onRollOver event handler does two things, it sets rewind to false so that the onEnterFrame event
handler doesn't execute the prevFrame script. The other thing the onRollOver does is play the animation.
So when you roll over the button, rewind gets set to false, then the animation plays and you see the
button grow until the playhead hits the stop command on frame 15.

this.onRollOut = function(){
rewind = true;
}

this.onRelease = function(){
getURL("http://www.kirupa.com","_blank");
}

This last chunk of code is rather simple. When you roll out of the button, rewind gets set to true. So now
the onEnterFrame will execute the prevFrame (becuase rewind is equal to true) until it reaches a stop.
The onRelease event is where you place your code for when the button is clicked.