1. you can not change anything at runtime like a label.
2. there is no disabled state.

So I started to find a way to solve this. After a day playing around I came up with the following solution;

As it needs different states I was looking for a solution to encapsulate these states behind a single class and the StateManager was born. I setup the StateManager first with all the different states:

stateManager = new StateManager();
stateManager.addState( "up", ButtonUpDraft ); stateManager.addState( "down", ButtonDownDraft );
stateManager.addState( "over", ButtonOverDraft );

ButtonUpDraft, ButtonDownDraft, ButtonOverDraft are simple MovieClips exported from Flash that are instantiate inside the StateManager. Each one of these MovieClips contain a MovieClip called “bg” and a TextField called “label”. So to adjust for example the width of the “bg” on every state I can call:

stateManager.bg.width = 230;

To change the current state I simply can call:

stateManager.state = "up";

This way my Button class has not to deal with the individual states and can adjust properties of state assets over multiple states with one command. So my final Button class looks something like this:

package org.indieas.widgets {
 import flash.events.MouseEvent;
 import flash.text.AntiAliasType;
 import flash.text.TextFieldAutoSize;

 import org.indieas.theme.ButtonDisableDraft;
 import org.indieas.theme.ButtonDownDraft;
 import org.indieas.theme.ButtonOverDraft;
 import org.indieas.theme.ButtonUpDraft;
 import org.indieas.widgets.states.AbstractStatesWidget;

 public class Button extends AbstractStatesWidget {

 private var deltaWidth:Number;
 private var _resizeByLabel:Boolean = false;

 public function Button() {
 super();

 stateManager.state = "up";

 deltaWidth = stateManager.bg.width - stateManager.label.width;

 stateManager.label.autoSize = TextFieldAutoSize.LEFT;
 stateManager.label.multiline = false;
 stateManager.label.wordWrap = false;
 stateManager.label.mouseEnabled = false;

 addEventListener( MouseEvent.MOUSE_UP, onUp );
 addEventListener( MouseEvent.MOUSE_OVER, onOver );
 addEventListener( MouseEvent.MOUSE_OUT, onOut );
 addEventListener( MouseEvent.MOUSE_DOWN, onDown );

 useHandCursor = buttonMode = true;
 }

 protected override function initStates():void {
 stateManager.addState( "up", ButtonUpDraft );
 stateManager.addState( "over", ButtonOverDraft );
 stateManager.addState( "down", ButtonDownDraft );
 stateManager.addState( "disable", ButtonDisableDraft );
 }

 public function set label( value:String ):void {
 stateManager.label.text = value;
 if( _resizeByLabel ) {
 width = stateManager.label.width + deltaWidth;
 } else {
 width = stateManager.bg.width;
 }
 }

 public function get label():String {
 return stateManager.label.text;
 }

 public function set enable( value:Boolean ):void {
 mouseEnabled = mouseChildren = value;
 if( value ) {
 stateManager.state = "up";
 } else {
 stateManager.state = "disable";
 }
 }

 public function get enable():Boolean {
 return stateManager.state != "disable";
 }

 public override function set width(value:Number):void {
 stateManager.bg.width = value;
 stateManager.label.x = ( value - stateManager.label.width ) / 2;
 }

 public override function set height(value:Number):void {
 stateManager.bg.height = value;
 stateManager.label.y = ( ( value - stateManager.label.height ) / 2 ) + 1;
 }

 private function onUp( me:MouseEvent ):void {
 stateManager.state = "over";
 }
 private function onOver( me:MouseEvent ):void {
 stateManager.state = "over";
 }
 private function onOut( me:MouseEvent ):void {
 if( enable ) stateManager.state = "up";
 }
 private function onDown( me:MouseEvent ):void {
 stateManager.state = "down";
 }
 }
}

The advantage is obvious as there is no big mess with different states and you can focus only on the functionality of the button. So at the end of the day a friend, how had nothing to do with as, asked me what i was doing today. My answer was in a way disappointing as I said I just programmed a button… the whole day.