Debugging Flash CS3 Projects with Flex Builder 3

Nov 9, 2008

Tags: ,

Lets face it Flash CS3's Debugger isn't the greatest it's missing many of the traditional features that the flex debugger offers. However getting the Flex Debugger connected to a Flash CS3 project is more or less a hack. Today I'll give you a quick tutorial on how to use Flex Builder's Debugger with Flash CS3 projects.

First off you have to go into the Publish Settings for you Flash CS3 project and check the box beside "Permit Debugging", then publish your movie. Now this is when Flex Builder comes into play along with the hack. You need to have some Flex project in your workspace.








Now you need to create a build configuration there's a few ways in Flex Builder/Eclipse to do this. To the left you'll find the easiest way to do this. All you have to do is simply click the little arrow beside the bug in the menu bar and in the menu that pops up select "debug configurations". The next window that pops up is the one that we must play around with to get what we want.



First off make sure you have "Flex Application" selected, and hit the new configuration button at the top of the screen (its the blank paper with the + symbol). Now all you have to do is uncheck "Use defaults", and fill all of the fields with "about:blank" (well just debug but do them all just for good measure).  Once you've done this just hit debug, now you must be fast to get the next step before the timer expires (its around a minute before it times out).




Now you need to open the HTML file that was generated when you published your flash movie in your browser of choice. You MUST have the debug version of flash player installed in that browser or this will crash and burn at this point. But chances are if you have flex builder installed than your browser has the flash debug player installed. When the page loads and you can see your flash movie running. Simply right click (control+click) on you flash movie and select "Debugger". In the window that pops up you shouldn't have to change anything but make sure the settings look like the picture to the left just to be sure. Now just click connect and if you did this all before the timeout expired in flex builder the flex debugger should come to life. It will even allow you to set break points in the project (via Flex Builder) and the flash movie will stop when it hits that break point as it would with a Flex project. However break points and displaying the error's line only works if the project you have opened in flex builder contains the sources for that flash movie. So your best bet when using this method is to have your fla and all of your sources in a Flex Builder project and your all set. You'll still have to use this "hack" to get it to debug the right swf but other than that this will work just like the normal Flex Debugger would with a Flex project.

I always find myself using Flex Builder for writing ActionScript for any projects bigger than five AS files so this normally works well for me because the sources for the application are part of the project even if I do most of the interface design in Flash CS3.

Also this will work for any Flash movie on the internet assuming that the developer left the permit debugging option checked in the publish settings or put up the debug build generated by Flex Builder. One more thing, if you use this method to debug your flash movie remember to turn of permit debug before posting it on the internet or someone else can go a snooping.

Posted in: Articles |