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:
- Launch Flash Professional CS5.5.
- Choose Window > Project to open the Project panel (see Figure 1).
Figure 1. The Project panel in Flash Professional.
- Select New Project from the Project pop-up menu in the Project panel (see Figure 2).
Figure 2. Selecting New Project from the Project panel.
- 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.
Figure 3. The Create New Project dialog box.
- 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.
- 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).
Figure 4. The Create New Project dialog box after specifying the root folder.
- 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.
Figure 5. Folders and files in the new project.
Follow these steps to open a Flash Professional project in Flash Builder 4.5:
- Launch Flash Builder 4.5.
- Choose File > Import or right-click in Package Explorer and select Import.
- In the Import dialog box, expand the Flash Builder category and then select Flash Builder Project (see Figure 6).
Figure 6. Selecting Flash Builder Project in the Import dialog box.
- Click Next.
- Select Project Folder (see Figure 7) and click Browse.
- Browse to your Flash Professional project's root folder. In this case, it's InteractiveDesign.
Figure 7. Browsing to the Flash Professional project folder.
- Click Finish.
- 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.
Figure 8. Choosing the Flex SDK Version.
- 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.
Figure 9. The Flash Professional project in Flash Builder.
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:
- Switch back to Flash Professional.
- Right-click CityGuide.fla in the Project panel and select Make Default Document (see Figure 10). (The default document has a star indicator.)
Figure 10. Selecting a different target FLA file in Flash Professional CS5.5.
- 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).
Figure 11. Verifying CityGuide.fla is now the target.
Next you'll update Flash Professional project settings in Flash Builder and check that those settings get updated automatically in Flash Professional.
- In Flash Builder, right-click the project in the Package Explorer and select Properties to open the project Properties dialog box (see Figure 12).
Figure 12. The project Properties dialog box.
- Select ActionScript Build Path then click the Source Path tab.
- Click Add Folder.
- Browse to the AdamAtomic-flixel folder and add it to your source path in Flash Builder (see Figure 13).
Figure 13. Changing the ActionScript build path in Flash Builder.
- Click OK.
- Switch to Flash Professional.
- Click the Project panel Option menu and select Project Properties (see Figure 14).
Figure 14. Accessing the project properties in Flash Professional.
- 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).
Figure 15. Verifying that a change made in Flash Builder updates the project in Flash Professional automatically.
- Click OK.
- Switch to Flash Builder.
- 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.