indieas

As announced I optimized the usage of Buttons in the indieas library.

SimpleButton with disabled state

So the first I create a MovieClip with the different states:

As you can see there is an additional disabled state compared to the normal SimpleButton. So one way to use this MovieClip now as a Button in my Actionscript project is to export it as a Class:

Now when I use the exported swc file as a library in my Actionscript project I can easily create a Button like that:

var but:Button = Button.FromClass( DemoButton );
but.enable = false; // to jump to the disabled state.
addChild( but );

Another way to create a Button is to turn an already placed DemoButton MovieClip into a Button. So you don’t have to add it as a Child and it just turns it into a Button instance:

var but:Button = Button.FromMC( myDemoButton ); // where myDemoButton is an instance of the DemoButton

Adding scripting animations

This is the simplest usage but more often I like to add scripting animations on mouse events. So for example you have an icon on the button that should pop-up on roll-over. The Button class provides an easy way to access MovieClips placed on the timeline. So lets enhance the DemoButton with an icon:

As this Button is special we create an IconButton class:

package {

	import org.indieas.tween.easing.Bounce;
	import org.indieas.tween.easing.Elastic;
	import org.indieas.tween.property.Scaler;
	import org.indieas.widget.button.Button;

	public class IconButton extends Button {

		public function IconButton() {
			super();
		}

		protected override function onOver():void {
			Scaler.To( stateManager.icon, 0.7, 1.5, 1.5, Elastic.easeOut ).start();
		}

		protected override function onUp():void {
			Scaler.To( stateManager.icon, 0.3, 1, 1, Bounce.easeOut ).start();
		}
	}
}

The animation is now done by the indieas tween engine, but you can use any tweening engine you like. The stateManager handles the access to the icon MovieClip that we placed earlier.

To instantiate the IconButton we can again do it with a MovieClip or the class:

var but:IconButton = new IconButton();

but.buildFromClass( DemoButton );
addChild( but );

// or
but.buildFromMC( myDemoButton );

This results in a button like this:

One big advantage of this approach is that you can have different MovieClips with other assets that uses the same Button class. For example to create another IconButton that just looks different you can call the buildFrom* method with another MovieClip/Class.

Buttons with labels

There is another handy class called LabelButton, where you place a TextField into the Button called label. You have now methods where you can style the Text with CSS. For example:

var label:LabelButton = LabelButton.FromMC( draft.labelButton );
label.setStyle( upFormat ); // set the style for all states.
label.setStyle( overFormat, Button.OVER_STATE ); // specific style for over state.
label.embedFont = true;
label.antiAliasType = AntiAliasType.ADVANCED;
label.gridFitType = GridFitType.SUBPIXEL;

So thats it, if you like to use these classes too,  go to the libary page and download the latest classes.

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.