Big Bad Code

The goal here is to use the excellent code editing and application debugging/profiling available in Flexbuilder and still have the rapid prototyping and layout ability that the Flash IDE gives to you.

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.