indieas

Something that you learn at the very beginning of developing flash projects is how to create a button. There is this practical Button symbol where you can define the common up, over and down states of a button. This is great but has two major downsides:

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.

The problem:

Recently I struggled over another problem with the TextField where the textWidth / width was not calculated right.

On the screenshot you can see textfields stacked from the left to the right corresponding to the width of the textfield. If you look closely to the borders you see that the leading and tailing spaces around the words are not equal at all. Especially at the word “Newsletter” the tailing space too small. The texfield was setup like this;

label.autoSize = TextFieldAutoSize.LEFT;
label.wordWrap = false;
label.multiline = false;
label.antiAliasType = AntiAliasType.ADVANCED;
label.gridFitType = GridFitType.PIXEL;
label.embedFonts = true;
label.border = true;
var test:TextFormat = new TextFormat();
test.kerning = true;
test.font = "Futura";
label.setTextFormat( test );

The solution:

It seems that this is a flash bug and you can get over this by changing the GridFitType.PIXEL to GridFitType.SUBPIXEL.
The resulting textfields look like this;