Building Flash CS3 components

Issue: Develop an ActionScript 3 component for Flash CS3 that resizes correctly and has a live preview.

To find the solution, first, I searched the documentation, and I got almost nothing. Just references to how to customize a component or how to export a SWC file, things I already knew. Then I googled it, only to find out that the new component architecture is now FLA-based. There were only a few pages about it and even less pages explaining how to actually build a FLA-based component (one of them was in japanese, so it was useless). This guy spender has a very good step-by-step tutorial of how to build a simple FLA-based component. But those steps are so annoying: edit-save-reopen flash-copy-edit-close-reopen… and so on. And this guy’s component extends UIComponent which adds another 10K to your published SWF. Where is the old-style export to SWC solution? If it exists (and yes, it’s still there), why is it so poorly documented? To me, the documentation seems a little misleading, it gives you the impression that the FLA-based components are the only components supported by Flash CS3. But this is not true!. The new features brought by the new FLA architecture are cool, but you don’t need them every time you build a simple component. If you are, for example, building your ActionScript application in Flex and want to use it as a Flash CS3 component (again, without the styling features), follow the old steps:

– write your actionscript class which will be the base component class in your favourite editor
– create a new fla file
– add a MovieClip symbol to the library, check Export for ActionScript and Export in first frame, in the Class textfield write the path to your component’s .as file, set the Base Class to the class extended by the previously mentioned .as file (actually flash.display.MovieClip will do in most cases).
– make sure your component class defines a public “setSize” method as it is the method used for live previewing. Add all resize handling there. (for more information check out the fl.livepreview.LivePreviewParent class)
– right click the symbol in the library, select component defenition, type in the name of the .as file again in the Class textfield, check “Display in Components panel”, click OK
– right click again > Export to SWC file > save to (for windows) Documents and Settings/$user/Local Settings/Application Data/Adobe/Flash CS3/Configuration/Components/MyComponent.swc
– create another FLA file, reload the components panel (a small button with an arrow pointing down below the x button)
– search (in the Components panel) for the name of the directory created in the previous step, drag and drop your new component

Here is the code I used to create a trivial component that has a rounded rectangle as the background and a textfield which tells the width and height of the component:

package { 

	import flash.display.Sprite;
	import flash.text.TextField;
	public class MyComponent extends Sprite	{ 

		private var _tf:TextField;
		private var _width:Number = 0;
		private var _height:Number = 0; 

		private var _background:Sprite; 

		public function MyComponent() {
			init();
			createChildren();
			draw();
		} 

		private function init():void { 

			_width = width;
			_height = height;
			scaleX = 1;
			scaleY = 1; 

			// remove the avatar
			removeChildAt(0);
		} 

		private function createChildren():void { 

			_background = new Sprite();
			_tf = new TextField();
			_tf.autoSize = "left"; 

			addChild(_background);
			addChild(_tf);
		} 

		protected function draw():void { 

			_background.graphics.clear();
			_background.graphics.beginFill(0xFF0000, 1);
			_background.graphics.drawRoundRect(0, 0, _width, _height, 10, 10);
			_background.graphics.endFill(); 

			_tf.text = "w: " + _width + ", h: " + _height;
			_tf.x = Math.floor((_width - _tf.width)/2);
			_tf.y = Math.floor((_height - _tf.height)/2); 

		} 

		public function setSize(w:Number, h:Number):void {
			_width = w;
			_height = h;
			draw();
		} 

	}
}