Tuesday, September 21, 2010

Using the Button component: Part 2

Today we will learn how to add icons to our Buttons.

Here is a little flash example with buttons with icons in it:

To add icons to a Button component example, you'll need to use the setStyle method. It has 2 parameters - the first one is the name of the attribute you want to change (for example, "overIcon") and the second is the linkage name of the icon in your library.

btnAccept.setStyle("icon", greenIcon);
btnDeny.setStyle("icon", redIcon);

The "icon" attribute sets the icon default for all stances of the button (rolled over, selected, down, etc.), but we can add multiple icons for different situations, for example, an icon for a rolled-over button, an icon for a pressed button and an icon for an idle button.

btnTest.setStyle("icon", greenIcon);
btnTest.setStyle("overIcon", redIcon);

Here is the full list of icon attributes you can change:

Attribute When is icon displayed
iconall default icons
disabledIcon button is disabled
downIcon button is not selected and is down
overIcon button is not selected and mouse is rolled over
upIcon button is not selected and not mouse is not over
selectedDisabledIcon button is selected and disabled
selectedDownIcon button is selected and down
selectedOverIcon button is selected and mouse is rolled over it
selectedUpIcon button is selected and mouse is not over

Thank you for reading!


Using Button component part 1
Using Button component part 3
Using Button component part 4
Using Button component part 5

No comments:

Post a Comment