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.

I know there are so many different tweening engines out there and it makes really no sense program another one. But as I always had my one version from the sfug library I thought it would be the time to port that to the indieas library. Further more I not just copy it and adapted the package name I tried to improve it once more. So in the new version when you apply another tween on the same object it checks the tweened properties and takes over only the properties defined by the new tween and let the old tween running with the other properties. So no more flickering when to tweens are acting on the same target/property.

As always feel free to download the library: http://www.indieas.org/library/