Using FLASH BUILDER 4 Debugger to Debug Flash Professional Projects

In my previous two posts (Create Flash Professional Project in Builder- Part 1 and Part 2) I talked about how to create a Flash Professional Project in Adobe Flash Builder 4, which opened the door for Adobe Flash Professional CS5 to use the Adobe Flash Builder 4 debugger and profiler.

Once a user create a Flash Professional Project in Flash Builder a debug SWF will be generated by Flash Professional CS5 in the bin-debug folder of the project location. This SWF will get updated every time actionscript code in the project changes and is saved in Flash Builder. If you need to rebuild after tweaking assets in Flash Professional, you would need to trigger the debug SWF generation manually in Flash Builder just by modifying an actionscript file in the Flash Professional Project in Flash Builder, then saving.

Remember:

1. Adobe Flash Builder 4 debugger can only debug external actionscript classes. NO debugging for frame script.

2. When creating your Flash Professional Project, a default application class gets created automatically that has the same name as the project name. If you delete this file, the debugger will not work since it’s looking for an application file to start the debugging process.

In the below tutorial, I am going to demonstrate how to debug a Fla file that has a document class using Flash Builder 4 debugger.

1. Launch Adobe Flash Professional CS5.

2. File > New (ActionScript 3.0) Fla file.

3. File > Save the Fla file inside a folder on your machine. In my case, I am going to save it as (FBDebugger.Fla).

4. Window > Properties to open the Properties panel if it is not already.

5. Under Publish category in the PI. Add document class name. In my case, I am going to call it “DocClass” as follows :

6. Click on “Edit class definition” button .

7. Select Flash Builder when prompted with the following dialog :

8. Click OK which should launch Flash Builder if it is not launched already.

9. In Flash Builder, click “Finish” when prompted with the following dialog :

10. Since the document class did not exist, Flash Builder will prompt you to create one as follows :

11. Click “Finish” button.

12. Now let’s look at the Flash Professional Project structure that got created.

a. Project Name: The project name is always the same as the Fla file name.

b. Default Application File: This file is not used by the Flash Professional Project at all, BUT it is very important to have for the Flash Builder debugger to work. PLEASE DON’T DELETE THIS FILE SO THE DEBUGGER/PROFILER WORKS. In our case the default application file for the project is FBDebugger.as which is again not being used at all, but it is since Flash Builder requires that file to exist.

c. FBDebugger.swf (Debug swf) and FBDebugger.html inside the bin-debug folder. This swf is going to be used by the Flash Builder debugger to debug your project.

d. Reference Libraries: This has all the links to your libraries and classes.

13. Open DocClass.as in Flash Builder and add a break point for the document class constructor as follows :

14. Run > Debug FBDebugger as follows:

15. Click Yes when prompted with the following dialog :

16. Flash Builder Debugger session should get started as follows :

 In future posts I am going to demonstrate how to use Flash Builder 4 profiler for Flash Professional Project.

Enjoy!