|
by
kirupa | 17 August 2009
In the previous page, you finished the visual side of
making a button. You got the normal, over, and down states
working. In this page, you will add some code that actually
makes your button do more than just look pretty.
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.
Well, this wraps up or overview of
buttons - both the visuals as well as the code needed to
make them useful. If you are curious to see how my example
looks, feel free to download the source files below:
I hope the information helped.
If you have any questions or comments, please don't hesitate to post them on the
kirupa.com Forums. Just post your question and I, or our friendly
forum helpers, will help answer it.
The following is a list of related tutorial and help resources that you may find
useful:
|
Buttons in Flash - Page 3
