|
|
02. Button Components
Perhaps one of the simplest components is the trusty button component.
It has come a long way since the Flash MX days, now sporting the Halo
look and implementing the version 2 events system. It's no longer possible
to use the .setClickHandler() function or define a click handler for the
button through the Property Inspector. Instead, we now have to set up
a listener object and use the .addEventListener method to register the
listener to listen for "click" events. As the following example
will show, it's actually easier to implement than it sounds:
- Start a new FLA (File -> New; Ctrl-N)
- Drag an instance of the Button component on Stage.
- Rename Layer 1 to button. (It may seem like a little thing,
but being organized like this will save your hide on large projects
with dozens if not hundreds of layers.)
- Using the Property Inspector, give the button the instance name myButton.
This is the name you will be using to refer to the button in ActionScript.
Also, set its label to read "Surprise!".
- Now a button is not much use unless we can do something when it is
clicked. To do this, we need to write some code (or, if you'd rather
not write code, take a look at Michelangelo Capraro's excellent
tutorial on Timeline Effects and Behaviors to see how you can
use a Behavior to do the same thing.)
Create a new layer and call it actions. In the first frame of that layer,
enter the following script into the Actions panel:
myButtonListener = new Object();
myButtonListener.click = function ()
{
trace ("You clicked the button! Tsk, tsk!");
}
myButton.addEventListener("click", myButtonListener);
- Test the movie. Click on the button and look in the Output window.
You should see the message in the script trace out whenever you click
the button.
The code in this example should be very easy to understand. First, you
create an object to act as your listener. It's called a listener because
it listens for events. To make a listener listen for events, you have
to register it with a component. You do this using the addEventListener()
method that all components have. The first argument this method takes
is the name of the event that you want to listen to. No, you don't have
to divine this, that's what the Help panel in Flash is for. To find out
what events a component broadcasts, open up the Help panel and browse
to Using Components -> Components Dictionary and then down
to the folder for the component in question. In the component's folder,
look for the class information page. For the Button component, the name
of this page is Button Class. As you can see in the screenshot below,
the class documentation page for a component lists its events. In this
case, the Button component has a single event called click.
Note that for other components, you can listen to multiple events by
including multiple listener methods on your listener object. For example,
if the Button component had an event called mouseOver, you could have
added a new listener method called myButtonListener.mouseOver()
and registered it with the component using myButton.addEventListener("mouseOver",
myButtonListener);
Don't try this in your movie, it won't do anything because the Button
component does not broadcast an event called mouseOver.
In the version 2 Button component, you are not limited to making buttons
with text labels like you were in version 1. Instead, you can use icons
within your buttons. Here's how:
- Continue with the FLA from the previous example. If you have closed
that file (or were not following along), open up button.fla from your
downloaded source files.
- First off, you need to import the icon. For this example, I've prepared
a magnifying glass icon in PNG format with transparency for you to use.
You can find it in the images directory in your downloaded
source files. The file is called search24.png.
To import the icon, select File -> Import -> Import to Stage
(Ctrl-R) and select the file from the resulting dialog. It does not
matter which layer you import the bitmap to, we're going to remove it
in a few steps.
If you're overly observant, you'll notice that the imported graphic
does not have a one pixel transparent border around it and yet it displays
correctly. This used to be a workaround employed in previous versions
of Flash due to a number of bugs that were present in Flash's rendering
of bitmaps. If you're outputting for previous versions of the player,
you may still need to watch out for this issue but the latest versions
do not display the problem.
- Make sure that your icon is selected on stage and select Modify
-> Convert To Symbol (F8).
- In the Convert to Symbol dialog, make sure that the Movie clip Behavior
is selected and give the symbol the Name search icon.
- In order to tell the Button component which movie clip to use as its
icon, you need to give the search icon movie clip you just created a
Linkage ID. To do this, open up the Library (Window -> Library; Ctrl-L)
and select the search icon movie clip symbol. Right-click (Mac:
Ctrl-Click) on the symbol to bring up the context sensitive menu and
select Linkage...
- In the Linkage Identier dialog box that appears, give the search
icon movie clip the Linkage ID searchIcon and make sure that
Export for ActionScript is checked.
- Finally, you need to tell the Button component to use the icon you
just created. To do this, you need to write just one line of code. At
the top of the code on Frame 1 of the Actions layer, enter the following
line of ActionScript:
myButton.icon = "searchIcon";
- Test the movie. The good news is that the icon shows up. The bad news
is that the button did not automatically adjust its dimensions to encompass
the icon. According to the docs, this is expected behavior. The onus
is on you to resize the button so that it displays correctly given the
dimensions of your icon. Note that this is also true for the label;
the button will not auto-size to fit the length of your label. Although
I don't agree that this is how it should work, we're stuck with it so
we may as well make the best of it. In the next step, you will see how
to resize the button and alter some of its other properties.
- Alter the script on Frame 1 of the Actions layer so it matches the
listing below:
myButton.icon = "searchIcon";
myButton.setSize(120, 35);
myButton.label = " Search!"
myButtonListener = new Object();
myButtonListener.click = function ()
{
trace ("Ah, you have found!");
}
myButton.addEventListener("click", myButtonListener );
- Test the movie. You should see that the button now looks better. In
the code you entered previously, you set its dimensions using the setSize()
method and changed its label by setting its label property. You also
changed the text that is traced out to the Output window by altering
the click event handler on your listener. Notice the space preceding
the text in the label. The Button component doesn't provide a method
for setting the gutter between the icon and the text so this is one,
albeit simple, workaround to add some spacing between the two. Another
way to do this would be to provide the gutter as part of the icon graphic,
however, this can be problematic if you're using a third-party icon
set.
|
|
Download Source Files (5MB!) 
go
to previous page