HOWTO: Button: Using the Button class to create custom buttons

Introduction

While DSAir contains a modified version of the MinimalComps lib, sometimes you want to use your own graphics and have them act as a button. The Button class takes all that hassle and makes it easy.

Details

Check out the TestButton.as file for the full details.

As with all examples, you need to init the framework before doing anything:

#!actionscript

DSAir.init( this ); // "this" is your Document class

When you create a Button, you pass the graphics that you want to use, plus an optional onClick callback. The onClick callback is just for ease you use; you can target the rest using the addEventCallbacks() function.

As with all callbacks for the Button class, you function can take an optional parameter of type Button.

Graphics

The Button class takes any InteractiveObject as it's graphics, so Sprite, MovieClip, SimpleButton, or TextField to name the most common. Depending on what you pass, it will set different parameters on each one, e.g. if it's a TextField then it will set the selectable property to false etc.

A special note is saved for the MovieClip class. If you MovieClip has multiple frames, named "over", "out" and "down", then it will call gotoAndStop() accordingly. This is useful if you have a button that has graphics inside that you need to access (e.g. TextFields). If you use the SimpleButton class, then it's a PITA to get them, and they reset with every state change (so if you set text in a TextField, it would get cleared).

Positioning

You can access the x, y, width and height as normal.

Enabling

You can call enable to enable or disable a Button. Disabled Buttons are greyed out.

Adding Callbacks

You can use the function addEventCallbacks() to add callbacks for your Buttons for the over, out, down, up, and click states.

#!actionscript

private var m_but:Button = null;

private function _createButton():void
{
    // graphics is a Sprite that was created before and is on the stage
    this.m_but = new Button( graphics ); // no onclick callback as that's after
    this.m_spriteButton.addEventCallbacks( this._onClick, this._onOver, this._onOut );
}

// called when we click on the button (with a Button parameter)
private function _onClick( b:Button ):void
{
    trace( "Did we click our button? " + ( b == this.m_but ) );
}

// called when we mouse over the button (no parameter)
private function _onOver():void
{
    trace( "On mouse over" );
}

// called when we mouse out of the button (no parameter)
private function _onOut():void
{
    trace( "On mouse out" );
}