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.
