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.

After my introduction article about my workflow I like to dig in a bit deeper and describe you my way of working with Flash and Flex. So far we have the assets ready to use but we need to add functionality to the assets so how do we join these to things together. One approach would be to extend from the exported MovieClip. So in my example that would be:

package {
 public class ControllBar extends ControllerBarDraft {

 public function ControllBar() {
 super();

 playButton.alpha = 0.5;
 }
 }
}

This way we have all assets on the timeline ready to use. Nothing more to do. But there is one major drawback. What when we want to extend from another class that from our exported MovieClip? You maybe think this happens not that often – but it does – so we can use this approach.

Luckily there is another way to come around that problem. We can simply instantiate the ControllerBarDraft (exported from Flash through swc) and copy the assets to our main class. That would look something like this:

package {
 import flash.display.SimpleButton;
 import flash.display.Sprite;

 public class ControllBar extends Sprite {

 public function ControllBar() {
 super();

 var cbd:ControllerBarDraft = new ControllerBarDraft();
 var playButton:SimpleButton = cbd.removeChild( cbd.playButton );
 addChild( playButton );
 }
 }
}

This is pretty cumbersome to do that for everything placed on the ControllerBarDraft MovieClip so I was looking for a way to do that automatically. And I ended up with a simple but powerfull Draft class. The core is this method:

public static function copyAssets( from:DisplayObjectContainer, target:DisplayObjectContainer ):* {

 while ( from.numChildren > 0) {

 var current:DisplayObject = from.removeChildAt( 0 );
 target.addChild( current );
 }

 return from;
 }

This preserves the z-order but more important it copies the whole DisplayObject with its blendMode, filters, colorTransformations etc.  It also copies normal shapes that you draw in Flash on the timeline. Simply it just copies everything into your class that you will work on. The code with the Draft class looks like this:

package {
 import flash.display.Sprite;

 import org.indieas.util.Draft;

 public class ControllBar extends Sprite {

 public function ControllBar() {
 super();

 var draft:ControllerBarDraft = Draft.copyAssetsFromClass( ControllerBarDraft, this );
 }
 }
}

So the assets are in place on your ControllerBar class but you probably need a reference to the playButton that you put inside the ControllerBarDraft thats why you get back this draft reference. To get the playButton you have now autocomplete on the draft instance as you see:

So you can now decide if you need a reference as an attribute in your class or if you just have to setup a listener or do something once in the constructor as the following example shows:

package {
 import flash.display.SimpleButton;
 import flash.display.Sprite;
 import flash.events.MouseEvent;

 import org.indieas.util.Draft;

 public class ControllBar extends Sprite {

 private var playButton:SimpleButton;

 public function ControllBar() {
 super();

 var draft:ControllerBarDraft = Draft.copyAssetsFromClass( ControllerBarDraft, this );
 playButton = draft.playButton;

 draft.stopButton.addEventListener( MouseEvent.CLICK, onStop );
 }
 }
}

This is now already very handy but as I have the Draft class I added some more functionality. I personally like the fact that I do the design part in Flash and the coding in FlexBuilder. But I am not a big fan of setting up position and width/height for everything I do by code. So I though that can do the Draft class for me and I added a method like this:

package {
 import flash.display.Sprite;

 import org.indieas.util.Draft;
 import org.indieas.widgets.scrollbar.ScrollBar;

 public class ControllBar extends Sprite {

 public function ControllBar() {
 super();

 var draft:ControllerBarDraft = Draft.copyAssetsFromClass( ControllerBarDraft, this );

 var scrollBar:ScrollBar = Draft.replaceAsset( draft.playButton, ScrollBar );
 }
 }
}

Now this is replacing my draft element “playButton” with a new instance of a ScrollBar class. The width, height, x, y and so on is automatically applied. What this allows you is to put placeholders in your design and swap them later with our DisplayObject classes you like. You can think of a design where you need a TextArea and some other visual elements around. You use a simple box as a placeholder where the TextArea should belong and export that and replace the placeholder with the TextArea class with the help of the Draft class. If there are design updates you dont have to change anything in your code you simple just adjust the placeholder in your MovieClip and hit CTRL-ENTER to update the swc.

So far I very happy with this workflow because it allows me to have full controll over my class – what I need as attribute – but also hide the elements I dont need. Something that I forgot to mention so far is the fact that you can work easily with multiple people on one project when they have their own fla files and export their swc’s.

If you like to play around with the Draft class you can either download the demo flex project or download our indieas library where you have also more stuff to explore.

You probably remember the mtasc compiler from the old AS2 times. One major benefit was the speed because it didnt compile the graphic assets all over again. With a right setup you can archive the same thing with Flash and Flex.
The key is the swc export feature of the Flash IDE:

If you export your MovieClips from Flash as Classes:

and add the swc in the Flex Builder as library:

you can access/create them by simply create a new instance:

You have to recompile (ctrl-enter in flash) the swc when you change something in your graphic assets. But in the FlexBuilder if you compile it just recompiles the source and includes the assets from the swc.
This workflow looks great in the first moment because you have autocomplete and strict typed access to the assets on the ControllerBarDraft. If you like to play around with the setup I made a simply actionscript FlexBuilder project that you can download here.

To use this workflow in an more advanced way, wait for the next article: Another Flash-FlexBuilder workflow: The Draft. Where I describe problems of this workflow as a nice workaround. Stay tuned.