Using the Flash IDE & FDT seems natural to me, and I think that it is the prefect work flow! While I enjoy working with the Flash IDE, as I use it daily, I much prefer writing all my code in FDT!

I will be showing how to set up everything in FDT for the Project, but will create the component in the Flash IDE, generating a .swc file and using that in FDT. This tutorial will have 2 parts. First I will  show how to just use the Flash IDE for the graphics and do everything else in FDT(my preferred work flow). The next one will first will be setting up FDT  but use Flash CS 4 to compile,

Part one will be using the FDT solution, and part #2 will show how to combine the Flash IDE with FDT.

when you open FDT 4 there is a nice welcome screen now!
click “create new project”

after you create a new project you will get a dialog. Give the project a name, and tell FDT how to compile. I am using the Flex SDK 3 for Flash Player 10.

FDT will create the project in your workspace. In the SCR folder create a new class(the green “C” button)

give the class a name of Main.as and extend Sprite

this will generate the base class

package {
	import flash.display.Sprite;

	public class Main extends Sprite {
		public function Main() {
		}
	}
}

Set up Flash
create a new Flash AS 3 file

call this file assets.fla and save it in the same directory as you Main.as
I will not be setting the document class, as we are just using flash to create the component swc for use in FDT

Drag an instance of the colorPicker & label to the library.
in the Publish settings, make sue you have “export swc”

Now in the “SRC” folder of the FDT project you will see the new files create by flash.
the only one we care about is the assets.swc(you can delete the rest of them)

right click on the assets.swc file, pick source folder, “add to classpath.

now you will have the classes that FDT will see for using the Color Picker

now in the main.as class ass the following code

package {

	import flash.display.Sprite;
	import fl.controls.ColorPicker;
	import fl.controls.Label;
	import fl.events.ColorPickerEvent;

	/**
	 *  uses the color picker from the Assets.swc(generated from Flash)
	 *
	 * @author johnbarrett
	 * @date Mar 27, 2010
	 */

	public class Main extends Sprite {

		//declare variables
		private var colorPicker:ColorPicker= new ColorPicker();
		private var label:Label = new Label();
		private var square:Sprite = new Sprite();

		public function Main() {
			init();
		}

		private function init() : void {
			//add box
			addChild(square);
			square.graphics.lineStyle(1,0x333333);
			square.graphics.beginFill(0xFFFFFF);
			square.graphics.drawRect(0,0,100,100);
			square.graphics.endFill();
			square.width = 300;
			square.height = 185;
			square.x = 10;
			square.y = 15;

			//add label propties
			label.text = "color is # "+ colorPicker.hexValue;
			label.width = 200;
			label.move(15, 55);
			addChild(label);

			//add color picker properties
			colorPicker:ColorPicker;
			colorPicker.move(30, 25);
			addChild(colorPicker);
			colorPicker.addEventListener(ColorPickerEvent.CHANGE, changeColor);
		}

		public function changeColor(evt:ColorPickerEvent):void {
			//update color properties when a new color is picked
			label.text = "color changed to # "+ colorPicker.hexValue;
		}
	}
}

Now run in FDT

final flash swf in FDT

that is it, easy right?
this is one way, next time I will show you another way
happy coding

Download Tutorial

By |2010-03-28T02:41:18+00:00March 28th, 2010|FDT, Flash|