Sharing projects between Flash Professional and Flash Builder

Sharing projects between Adobe Flash Professional and Adobe Flash Builder has been simplified by the unification of their project file formats. Flash Professional CS5.5 can open projects created in Flash Builder 4.5 (of the Flash Professional nature), and Flash Builder can import projects created in Flash Professional. When project settings change and the project is open in both applications, the settings will update automatically in the other application.

This feature increases productivity for developers who want to leverage all the code editing features in Flash Builder 4.5 and use Flash Professional to design and animate their assets.

In this article you'll create a project in Flash Professional, open it in Flash Builder, and see how changes made to the project in each application are automatically propagated to the other.

To create a Flash Professional project in Flash Professional, follow these steps:

1. Launch Flash Professional CS5.5.
2. Choose Window > Project to open the Project panel (see Figure 1).

3. Select New Project from the Project pop-up menu in the Project panel (see Figure 2).

4. When the Create New Project dialog appears, note the new Default Document section, which you can use to specify a default document name, target player, and ActionScript version.

5. Click the browse icon (to the right of the Root Folder setting) and browse to the folder you want to target as the project root folder.
6. For this example, you are going to use InteractiveDesign, a folder included with the sample files for this article, so download and unzip the sample files to your desktop if you have not already done so.

Once you select the root folder (the folder that hosts your FLA files), the Project Name and Default Document Name will be populated automatically.

Note: The Project Name and Default Document Name will be set to the same name as the root folder. You can change these names if you choose to. Also, you can change the target player and the script version. For this example, however, leave the default settings (see Figure 4).

7. Click Create Project to create your project. When the project is created you will see the default document, CityGuide.fla, and an AuthortimeSharedAssets.fla file (see Figure 5). The AuthortimeSharedAssets.fla file is a library FLA file that is used for multiscreen projects, which are beyond the scope of this article.

Follow these steps to open a Flash Professional project in Flash Builder 4.5:

1. Launch Flash Builder 4.5.
2. Choose File > Import or right-click in Package Explorer and select Import.
3. In the Import dialog box, expand the Flash Builder category and then select Flash Builder Project (see Figure 6).

4. Click Next.
5. Select Project Folder (see Figure 7) and click Browse.
6. Browse to your Flash Professional project's root folder. In this case, it's InteractiveDesign.

7. Click Finish.
8. In the Choose Flex SDK Version dialog box (see Figure 8), select the SDK you want to use and click OK. For this example, choose the Flex 4.5 SDK, which is the default.

9. Click OK.

Your project will be imported into Flash Builder (see Figure 11). It will have the same project structure as the one you created in Flash Professional CS5.5 since both projects point to the same root folder.

After importing, note that you have access to three new Flash Professional workspace buttons in the toolbar: Publish Movie, Test Movie, and Debug Movie (see Figure 9). Note also that the project has the Flash Professional nature.

In this section, you'll see how a change to a project setting in one application automatically updates the other application.

Currently InteractiveDesign.fla is the target project file (that is, it is the default document). To change the target to CityGuide.fla, follow these steps:

1. Switch back to Flash Professional.
2. Right-click CityGuide.fla in the Project panel and select Make Default Document (see Figure 10). (The default document has a star indicator.)

3. Switch to Flash Builder and verify that the default document has changed to CityGuide.fla. (The target FLA file is indicated with a bold blue dot (see Figure 1).

Next you'll update Flash Professional project settings in Flash Builder and check that those settings get updated automatically in Flash Professional.

4. In Flash Builder, right-click the project in the Package Explorer and select Properties to open the project Properties dialog box (see Figure 12).

5. Select ActionScript Build Path then click the Source Path tab.
6. Click Add Folder.
7. Browse to the AdamAtomic-flixel folder and add it to your source path in Flash Builder (see Figure 13).

8. Click OK.
9. Switch to Flash Professional.
10. Click the Project panel Option menu and select Project Properties (see Figure 14).

11. Click the Paths tab and then click the Source tab.

As you can see, the change you made in Flash Builder was automatically propagated to the Flash Professional project settings (see Figure 15).

12. Click OK.
13. Switch to Flash Builder.
14. Select the Project and click the Test Movie button in the toolbar to test the project.

Here are a few more exercises you may want to try on your own:

• Add a SWC library to your project in one application and see that it is added in the other application as well.
• Create a FLA file from the Project panel in Flash Professional and verify that the file is automatically added to your project in Flash Builder.
• Start your workflow by creating your project in Flash Builder and then open the project in Flash Professional.

Look for upcoming Adobe Developer Connection articles on using Flash Professional and Flash Builder together.