IconButton

Overview

A button designed to display an icon and its label using a flyout animation.

Creating the IconButton

Extends the Button class. Can be added to any container that implements IVisualElementContainer.

Using the IconButton

The label is set via the "label" property, like a vanilla Button. However, the label for an IconButton is not displayed until the button is moused over.

Set the direction the label flies out via the "flyoutDirection" property. If the flyout will overflow the screen, the direction will be automatically flipped.

Removing the Flyout Label

The flyout label can be removed instantly by calling removeFlyoutLabel();

If the IconButton is removed from the stage, the flyout label will also be removed immediately to prevent a situation where the IconButton is on the stage but the flyout label is still on the stage and visible.

However, if an IconButton's visibility changes, the flyout label's visibility will not change automatically. For example, assume that an IconButton is inside a Viewstack and the visible child changes which causes the IconButton to no longer be visible. If this occurs while the flyout label is visible, the flyout label will remain visible since it is parented by the SystemManager. This behavior is typically not desired.

Plan ahead if your application will hide an IconButton while it may be moused over. This is especially relevant if clicks on an IconButton trigger visibility changes.

<buttons:IconButton id="ib"
	click="ib.visible=false;ib.removeFlyoutLabel();"/>

Skins

Included are 2 default skins: a black (or white) background that changes to white (or black) on rollOver. The icon is colorized via the ColorTransform filter to either black or white depending on the skin.

Note that for custom skins, the SparkButtonSkin class is not necessary because the custom layout contained within the SparkButtonSkin is not used or desired. Use a plain Skin or SparkSkin class. If a SparkButtonSkin is used, the IconButton will disable automatic icon management in the skin and remove the displayLabel skin part automatically.

Animations & Effects

The flyout animation is hardwired and is a Parallel effect of a Move and a Fade animation. The duration of the animation and the amount the label "flies out" is controlled by the "duration" and "flyoutDistance" properties.

Accessibility

Accessibility mirrors that of the Spark Button class.

Custom Events

FLYOUT_SHOW
ardisia.components.iconButton.events.IconButtonEvent
Dispatched when the flyout label has finished animating in and is displayed.

FLYOUT_HIDE
ardisia.components.iconButton.events.IconButtonEvent
Dispatched when the flyout label has finished animating out and has been removed.

Custom Styles

iconOffsetX
Icon offset along the x axis.
default 0

iconOffsetY
Icon offset along the y axis.
default 0

flyoutBackgroundAlpha
The alpha applied to the background of the flyout label.
default 1

flyoutBackgroundColor
The color applied to the background of the flyout label.
default #FFFFFF

flyoutColor
The color applied to the flyout label color.
default #000000

Themes & Skinning

Two skins are provided for a white and black background for the Spark theme.

Example

See the IconButton application for example code.

Back To Top