To get started create a new “Actionscript Project” in Flexbuilder.

Now we will add some code to testDebug.as that traces out when the application is run:

package {
import flash.display.Sprite;
public class testDebug extends Sprite
{
public function testDebug()
{
trace("I am created")
}
}
}

With that code saved we will Debug this actionscript project and if everything is working correctly you should see something like this in your console window:

So far everything is working correctly in Flexbuilder, now lets get Flash into the action.

Open up flash and create a new Flash file, lets call it TestFlexBuilderIntegration.fla. Add some timeline animation or something so you know it’s coming from the Flash IDE, save this file into the root directory of your new Flex project.

Now set the document class of your Flash file to ‘testDebug.’ The AS class that we wrote in flexbuilder will now be the document class for your flash file as well.

Here come the tricks, under Publish Settings enable “Permit debugging”

Next in the Formats tab of Publish Settings change the .swf file to be published to the flexbuilder bin-debug folder.

The path will be something like

"/Users/YourName/Workspace/testDebug/bin-debug"

Now if you test the movie in Flash you should see your animation as well as the trace “I am created” in the flash IDE.

For the final steps we go back to Flexbuilder and under the html-template folder open index.template.html in a text editor. This is a template file that generates the index.html that is used to launch your app. We are going to update it so it points to the .swf generated by Flash IDE instead of Flexbuilder.

Replace all occurrences of ${swf} with the name of your Flash IDE generated swf file. In this case it would be TestFlexBuilderIntegration.

The moment of truth! In Flexbuilder Debug your project, it should launch the .swf in a browser for you and the animation you created should be playing, additionally the trace(“I am created”) line should show up in your console.

If Flexbuilder has trouble connecting to the debugger, right click in the swf in the browser and change the debugger connection to 127.0.0.1 and that should solve that issue.

Now you have the full power of Flexbuilder to code and debug and you still have the Flash IDE to layout movieclips and rapidly prototype things. Sweet.

Notes:

As you make changes to the code in Flexbuilder, you’ll need to go back to Flash and republish.

Profiling should probably work as well though I haven’t played with it yet.

You can set breakpoints in Flexbuilder without needing to republish.

To get started download the latest xray code from their SVN repository.
http://code.google.com/p/osflash-xray/source

Then create a new AS3 flash document using the code below as the document class:
Make sure that you add the ‘trunk’ directory that you downloaded to your class path (so flash can find the xray files)

Once you are compiling correctly, launch the xray viewer in a browser from http://www.rockonflash.com/xray/flex/Xray.html. You will get a notification about not finding a SWF to connect with, ignore this for now (full xray support is not yet therefor AS3 projects). Make sure that the Show Output checkbox along the bottom is checked.

Now if you click the red square in your swf player, you should see the following show up in the XRay viewer windows.

Congratulations you are now logging. Big thanks to John Grden and everyone else contributing to Flash development methodologies.

package {
	import com.blitzagency.xray.logger.XrayLog;
 
	import flash.display.*;
	import flash.events.*;
 
	public class testLoggingAS extends MovieClip {
 
		private var log:XrayLog = new XrayLog();
		private var mc:MovieClip
 
		public function testLoggingAS() {
			log.debug("Application starting up");
			createClickableMovieClip()
			log.debug("Application has completed startup");
		}
 
		private function showTheClick(e:Event):void {
			log.debug("Square was clicked. Tracing out the Event", [e]);
		}
 
		private function createClickableMovieClip():void {
			mc = new MovieClip();
			mc.name = "ClickableMovieClip"
			mc.graphics.beginFill(0xFF0000);
			mc.graphics.drawRect(0, 0, 100, 80);
			mc.graphics.endFill();
			mc.x = 80;
			mc.y = 60;
			addChild(mc);
			mc.addEventListener(MouseEvent.CLICK, showTheClick)
		}
 
	}
}