Printer Friendly Version

BellaOnline's Flash and Animation Editor

Flash CS3 Button Component Parameters

The button is one of the most useful components for FlashR projects. You can attach an event listener to the button and tell it to start or stop something when the button is clicked. There are many ways to add a button to your Flash project. One way is to use a Button symbol and another is to use a Button component. If you have used a Button symbol in your Flash projects, you know that it has its own timeline with those familiar button frames; Up, Over, Down and Hit. A Button component is something very different from a Button symbol. A Button component is a simple pre-built movie clip.

But, this component is only useful if you can customize its look and behavior to your own needs. Let's take a look at just what you can do to customize the Button component. First, we need to put a Button component on the stage. You can find the Button component in the Components panel which is not open in the workspace by default. To open this panel, click Window Components. In this panel, there are two lists of components and you will find the Button component in the User Interface list. Click and drag a Button component onto the stage.

As you can see, the button is very plain with only the generic text "Label' on top. However, if you check out the Properties Inspector, you will see that it is already set up as a movie clip and as an Instance of the Button class. Most importantly, it doesn't have an Instance Name. That is left for you to customize. Now, let's click the Parameters tab and see what we have there. You will see a list of the parameters attached to the Button component. These five parameters are preset to initial or default settings that determine the look and behavior of the button as it first appears on the stage at runtime.

emphasized - false
label - Label
labelPlacement - right
selected - false
toggle - false

This parameter is set to false by default. Let's set this parameter to true and see what happens . Click next to the word "false" and you will get a drop-down menu. Set the parameter to "true". Your button now has a thin border.

This is an easy one. You will use this parameter to set the text or label on top of the button. Let's change the "Label" text to "Click Me" by typing that in the text input box for this parameter.

This one is a little confusing. At first glance, you might think that it sets the placement of the button's label on top of the button. But, this is not the case. This parameter is used when you have an icon on top of your button such as a checkmark. With this parameter, you can set the placement of the text to the right, left, bottom or top in relation to the icon.

One advantage of using a Button component over a Button symbol is that the component has the built-in toggle behavior. What is a toggle? Let's start by talking about a regular button which has two stages; selected or unselected. When you click on a regular button, it will be in the selected stage until you release your mouse. With the release of your mouse, the regular button will automatically go back to the unselected state.

A toggle button also has two states; selected and unselected. The first time that you click on a toggle button, it will be set to the selected state, just like a regular button. However, unlike a regular button that goes back to the unselected state when you release your mouse, a toggle button stays in the selected state. To turn off the toggle, you must click on the toggle button again which will set the toggle back to the unselected state. A good example of this is the text formatting buttons in the Properties Inspector.

This parameter sets the toggle button to a default setting of selected or unselected.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor