PreviousNext

Using the Button component

A button is a fundamental part of any form or web application. You can use buttons wherever you want a user to initiate an event. For example, most forms have a "Submit" button. You could also add "Previous" and "Next" buttons to a presentation.

To add an icon to a button, you need to select or create a movie clip or graphic symbol to use as the icon. The symbol should be registered at 0, 0 for appropriate layout on the button. Select the icon symbol in the Library panel, open the Linkage dialog from the Options menu, and enter a linkage identifier. This is the value to enter for the icon parameter in the Property inspector or Component Inspector panel. You can also enter this value for the Button.icon ActionScript property.

Note: If an icon is larger than the button it will extend beyond the button's borders.

Button parameters

The following are authoring parameters that you can set for each Button component instance in the Property inspector or in the Component Inspector panel:

label sets the value of the text on the button; the default value is Button.

icon adds a custom icon to the button. The value is the linkage identifier of a movie clip or graphic symbol in the library; there is no default value.

toggle turns the button into a toggle switch. If true, the button remains in the down state when pressed and returns to the up state when pressed again. If false, the button behaves like a normal push button; the default value is false.

selected if the toggle parameter is true, this parameter specifies whether the button is pressed (true) or released (false). The default value is false.

labelPlacement orients the label text on the button in relation to the icon. This parameter can be one of four values: left, right, top, or bottom; the default value is right. For more information, see Button.labelPlacement.

You can write ActionScript to control these and additional options for Button components using its properties, methods, and events. For more information, see Button class.

Creating an application with the Button component

The following procedure explains how to add a Button component to an application while authoring. In this example, the button is a Help button with a custom icon that will open a Help system when a user presses it.

To create an application with the Button component, do the following:

  1. Drag a Button component from the Components panel to the Stage.
  2. In the Property inspector, enter the instance name helpBtn.
  3. In the Property inspector, do the following:
    • Enter Help for the label parameter.
    • Enter HelpIcon for the icon parameter.

      To use an icon, there must be a movie clip or graphic symbol in the library with a linkage identifier to use as the icon parameter. In this example, the linkage identifier is HelpIcon.

    • Set the toggle property to true.
  4. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code: 
    clippyListener = new Object();
clippyListener.click = function (evt){
  clippyHelper.enabled = evt.target.selected;
}
helpBtn.addEventListener("click", clippyListener);

    The last line of code adds a click event handler to the helpBtn instance. The handler enables and disables the clippyHelper instance, which could be a Help panel of some sort.

PreviousNext