Using the profiling tools in Flash Builder to improve the performance of Flash Professional projects

The Adobe Flash Platform includes an integrated set of tools that enable you to create Flash projects and edit them using the product of your choice: Flash Builder, Flash Catalyst, and Flash Professional. You can move seamlessly from one product to another as you build and test projects that playback in Flash Player and Adobe AIR.

Each tool has specific advantages that you can use to develop and optimize your projects. For example, even if you use Flash Professional exclusively to create animations and applications, you can leverage the powerful profiling tools in Flash Builder to check for memory usage. After running a Flash application in the profiler, you can analyze the profile data and learn how to optimize its performance.

In this article, you'll explore how to set up Flash projects in Flash Professional so that you can work with them in Flash Builder. This involves using the Project panel in Flash Professional and configuring the FLA file for debugging in Flash Builder. You'll also learn how to open a Flash project in Flash Builder and run a profiling session in the Flash Builder workspace.

Before you begin, download and install the newest version of the Adobe Flash Player Debugger.

Preparing a Flash Professional project for a Flash Builder profiling session

You'll begin by creating a new project using Flash Professional and set it up to enable the debugging and performance profiling features in Flash Builder. This is the process you'll follow to create a Flash project so that you can edit it using all of the Adobe Flash Platform products. If you already have a FLA file that you'd like to test, you can use it to create a Flash project. Create a new folder with the same name as the FLA file and copy the FLA file into it. Otherwise, you can create a blank FLA file to learn how to set up future projects.

Creating a new Flash project in Flash Professional

Follow these steps to create a Flash project:

1. Launch Flash Professional CS5.5 and choose File > New.
2. In the New Document dialog box, choose Flash Project and click OK.
3. The Project panel appears and displays the Create New Project window. Click the folder icon to the right of the Root folder field and browse to select the folder that will contain all of the project files. Either select an existing folder on your machine that contains a FLA file, or select an empty folder named test to start a new project from scratch.
4. By default, the Project name and Default document name fields are populated using the name of the folder you selected. If the folder you selected was named test, the project name is test and the Default document name is test.fla. If you selected a folder with an existing FLA file, the Project name and Default document name fields are populated using the matching folder name. It's a good idea to always ensure the root folder name matches the FLA file name.
5. If your project requires a different version of Flash Player, use the Player menu to select the version you are targeting. Additionally, if the code used in the project is not ActionScript 3, use the Script menu to set the version of ActionScript. Otherwise, you can leave all of the other default settings (see Figure 1).

6. Click Create Project. Flash automatically creates a set of Flash project files and stores them in the root folder. The Project panel updates to display the list of files.

Note: If you selected a root folder in Step 3 that did not contain a FLA file, Flash generates a new FLA file for you, using the default document name: test.fla. If you selected a root folder that already contains a FLA file with a matching name, Flash uses the specified file rather than creating a new one.

During the project creation process, Flash generates the AuthortimeSharedAssets.fla file required to work with Flash Builder projects. By default, all of the project files are placed in the root folder. Keep your Flash project files in a single root directory to ensure that the Flash Platform tools can easily locate the project assets.

Enabling the debugging feature in the Publish settings

Next, you'll update the Publish Settings to work with the debugging features.

1. In the Project panel, double-click the name of the FLA file to open it, if it is not already open. Alternatively, choose File > Open and browse to select the default document FLA file that exists in the root folder.
2. While the FLA project file is open, choose File > Publish Settings. Click the Advanced section to expand the options. Select the checkbox next to the option: Permit debugging (see Figure 2).

3. Click OK to save your changes and close the Publish Settings dialog box.

This option is not enabled by default. You can't test your Flash project for performance using the profiler in Flash Builder unless you specifically configure the Publishing Settings in the FLA file to allow debugging to occur.

Creating a class file for the Flash project

There's one more thing to set up before you can test the Flash project with the profiler tools. The Flash project must have a class file in the root folder in order to run the application in the profiler, even if your project doesn't require a class file.

1. Open the Property inspector by choosing Window > Properties. If the panel is already open but hidden by another panel, click the Properties tab in the set of docked panels to make the Property inspector active.
2. Click the Edit class definition button (pencil icon) to the right of the Class field. The Create ActionScript 3.0 Class dialog box appears (see Figure 3).

3. If an existing project uses an ActionScript class, copy it to the root folder and enter its name in the Class name field to match the project's name. Otherwise, you can leave the Flash Professional option selected and enter the name of the project with the ActionScript class file extension in the Class name field. Follow the standard naming convention to capitalize the class file and match the name of the FLA file. For example, if you are creating a Flash project using test.fla, enter Test in the Class field.
4. Click OK to close the Create ActionScript 3.0 Class dialog box.
5. A file named Script-1 appears in a new tab of the Actions panel. This is the new class you just created. It contains the default code needed to create an ActionScript class. In the next step, you'll save this file in the project's root folder.
6. While the Script-1 file is active, choose File > Save. In the Save As dialog that appears, verify that the class is using the capitalized project's name with the .as file extension: Test.as. Click the Save As button to save the file inside the root folder, alongside the other project files.

Note: While a class file (AS file) with the same name as the project name must exist in the root folder of the Flash project in order to run the profiling session, it is not necessary for you to edit the code. The profiler will run the project even if the class file only contains the default class code; you don't need to add any additional ActionScript.

Adding some basic animation to the Flash project file

If you are working with one of your existing projects, you can choose Control > Test Movie to create the SWF file and skip down to the section titled: Opening the Flash project in Flash Builder. But if you created a brand new Flash file when you created the Flash project, follow the steps below to create a simple tween animation to add some content to the Timeline.

1. In the Timeline, select the blank keyframe on Frame 1 of Layer 1.
2. In the Toolbar, select the Oval tool. Use the Property inspector to select the desired fill color and leave the stroke set to none.
3. On the left side of the Stage, click and drag the Oval tool to create a small circle shape that is approximately 150 pixels wide.
4. Select the circle and press F8. In the Convert to Symbol dialog box that appears, name the symbol: circle. Use the Type menu to choose Movie Clip and click OK.
5. In the Timeline, right-click on Frame 1 and choose Create Motion Tween from the context menu that appears. The light blue highlight spans 24 frames, indicating a 24-frame motion tween has been added to Layer 1. The playback head is automatically repositioned on Frame 24—the last frame of the tween animation.
6. Since the playhead is already on the last frame of the tween in the Timeline, use the Selection tool to select the circle on the left side and drag it across the Stage horizontally, until it is located on the right side. A green motion path indicates the path the circle will follow. If desired, you can use the Selection tool or the Subselection tool to edit the motion path and adjust the course of the circle as it crosses the Stage.
7. Choose Control > Test Movie to export the SWF file and launch the standalone Flash Player. Review the looping animation you just created and then close the window to return to Flash.
8. Save the file and quit Flash. If you browse to the root folder of the project in the Windows Explorer or the Mac OS X Finder, you'll see it now contains the following files:
   
   AuthortimeSharedAssets.fla
   Test.as
   test.fla
   test.html
   test.swf

At this point, you've created the Flash project, added some test content, and configured the FLA file to debug it in the Flash Builder profiler.

Opening the Flash project in Flash Builder

Next, you'll bring the Flash project you just created into Flash Builder so that you can test the Flash content with the profiler.

1. Launch Flash Builder.
2. Choose File > Import. In the Import dialog box that appears, click the Flash Builder folder to expand it. Select the Flash Builder Project option and click Next.
3. In the Import Flash Builder Project dialog box, click the Project folder radio button. Click the Browse button and navigate to the Flash project root folder. Click Open to add the path to the Flash project in the Project folder field (see Figure 4).

4. After creating the path to the project folder, click Finish.
5. The Choose Flex SDK Version dialog box appears. Leave the setting to use the Default SDK and click OK to close the dialog box.
   
6. In the top left corner, locate the Package Explorer panel. Click the collapsed project name to expand it and see the list of project files and then click the subfolders to expand them (see Figure 5).

Notice that the project files include the SWF and HTML files that you created when you tested the FLA file in the previous section. The bin-debug folder contains the most recent version of the project you last published or tested.

You can double-click the class file (AS file) to open it if you'd like to add or edit the ActionScript code in the Flash Builder workspace. Also notice that you can choose Project > Flash Professional and then select the desired sub menu items to publish, test, or debug your movie right here, just like you can using Flash Professional (see Figure 6).

Debugging and profiling a Flash project FLA file using the profiler in Flash Builder

At this point, the Flash project is open in Flash Builder and you can initiate the profiling session. You'll begin by setting your document class as default application entry point for Flash Builder.

1. In the Package Explorer, click the default package to expand it. Right-click the ActionScript class file: Test.as. In the context menu that appears, choose Set as Default Application (see Figure 7).

2. Before running the Flash project, make sure to quit your browser if it is currently open. Right-click on the same AS file again. This time, use the context menu to choose Profile As > Web Application (see Figure 8).

The browser launches and the first frame of your application opens in the browser. The animation is not playing yet because the playback is currently suspended. The Configure Profiler dialog box is displayed on top.

3. Select or deselect the checkboxes to define the information you want to receive when you profile the project as it runs (see Figure 9).

4. Click the Resume button to run the application and start the profiling session.

The Flash Profile panel opens. The features you enabled are tracked and the selected data (such as memory usage) is displayed in the chart while the application runs in the browser window. Using the profiler tools, you can determine areas of the application that are taking up too many resources and identify the elements you can optimize to increase performance.

5. When you are finished testing, click the Terminate button (red square icon) to stop the profiler. Close the browser window to stop running the Flash project.

The Flash Builder profiler is a helpful tool for debugging your projects and locating areas of applications that are resource intensive. Even if you primarily use Flash Professional to develop applications, you can create Flash projects and work with the files using any of the tools in the Flash Platform. Take advantage of the profiling tools in Flash Builder to optimize your project files and make them run more efficiently.