Code in Flex, test in Flash

Over the past year, Adobe received feedback from designers and developers requesting updated workflow integration between Adobe Flex 3 and Adobe Flash CS4 Professional. Users of previous versions of Flex and Flash indicated that they enjoy building projects with both programs, and would appreciate a more seamless experience when using these two powerful tools together. We listened to these requests and have responded by improving the workflow features in the release of Adobe Creative Suite 4.

The Flash and Flex teams have made many changes in the CS4 release to ensure a smooth workflow to facilitate application design and development. This article highlights one of the major advantages: the ability to develop your code in Flex and then test the project using Flash. I also describe some of the new enhancements designed to make the process of moving between Flex and Flash more intuitive than ever before.

This section highlights some of the new workflow integration features available in Creative Suite 4. I'll begin by describing some of the new settings available in Flash CS4 Professional that make the Flash authoring environment more consistent when developing code in Flex.

Follow the steps below to review the new class path interface:

1. Launch Flash CS4 Professional.
2. Choose File > New > Flash File (ActionScript 3.0).
3. Save the file (File > Save) and name it class_path.fla.
4. Choose Window > Properties to open the Property inspector, if it is not already open.
5. Choose File > Publish Settings, and then select the Flash tab.
6. In the Publish Settings dialog box, click the Settings button next to the Script drop-down menu (see Figure 1).

The Advanced ActionScript 3.0 Settings dialog box appears (see Figure 2).

The interface has been revised in Flash CS4 to offer a consistent workflow for Flex developers. There are now three tabs for setting the class path, and the tab sections are organized by Source path, Library path, and External library path to mirror the setup in Flex and Flex Builder (see Figure 3).

Here's a description of the information to add in each of the three new path sections available in Flash CS4 Professional:

• Source path: Set the source path for ActionScript files in this section.
• Library path: Set the path to a specific SWC file or a folder containing SWC files in this section. Click the SWC icon to browse and select any SWC on your hard drive to add it to the Library path. Alternately, click the folder icon and browse to select a folder that contains multiple SWC files. This option makes it possible to add multiple SWC files to the Library path of the active SWF all at once. When you use the folder option, the path to the selected folder will display in the Library path dialog box (see Figure 4).

Note: If you wish to remove a path to a folder or a specific SWC file, click the minus (–) icon while the path is selected.

• External Library path: Set the path to SWC files or folders that contain SWC files which are compiled against for definitions but are not otherwise linked into the published SWF file. This can be useful when using the "Import for runtime sharing" option for a Library item, or when loading a SWF file with a flash.display.Loader and then accessing the classes defined in the loaded SWF. In Flex Builder, SWC files and folders are put in the external Library path by expanding the tree under the file or folder in the Library path view and setting Framework Linkage to "External"—as opposed to "Merged into code" (see Figure 5).

You can access all three of these sections by clicking the corresponding tabs in the Advanced ActionScript 3.0 Settings dialog box (see Figure 6).

Note: The fourth tab on the right accesses the section to set Config constants. An overview of this section is outside the scope of this article, although I plan on discussing this in an upcoming article that focuses on working with these settings and conditional compilations.

Changes to the class path settings

In previous versions of Flash, the Source path was displayed as part of the global class path. In Flash CS4, the Source path is organized and displayed in its own section.

The Source path contains "." by default. By default, the Library path automatically contains:

The External library path contains "." as well.

These changes have been made to make Flash CS4 behave more like Flex, which does not use a global class path at all. However, the global class path in Flash CS4 is still available for use by Flash developers who have become familiar with setting the global class path and want to continue using it (see Figure 7).

In the previous section I reviewed the changes to the Advanced ActionScript 3.0 Settings dialog box and compared the new sections for setting the Source path, Library path, and External library path in Flash CS4. This is just one of the many improvements to make Flash CS4 more consistent with the workflow used in Flex.

This section covers the step-by-step instructions for testing your code created in Flex within the Flash CS4 Professional authoring environment. This is an exciting new way to build projects because you can code in Flex and then take advantage of Flash to review and test the project. If you wish to follow along, download and uncompress the sample files folder:

• flex_to_flash.zip (ZIP, 7K)

Building the Flex project

Follow these steps to see how you can build a project in Flex:

1. Launch Flex Builder.
2. Choose File > New > Flex Library Project.
3. Enter the project name FlashClass and click Finish.
4. Right-click the project name to access the context menu. Select New > ActionScript Class.
5. In the window that appears, enter the name of the ActionScript class: FlashClass. Also set the superclass to MovieClip (see Figure 8).

6. In the Script window, copy and paste the following code inside the constructor. This code snippet uses the Drawing API to dynamically draw a rectangle vector shape:

7. After adding the code, save the file. The operation of saving the file automatically generates a SWC file of the same name inside the Library folder (see Figure 9).

Testing the project in Flash

Now that you've created a small Flex project, let's see how to test that code in Flash:

1. Launch Flash CS4 Professional.
2. Choose File > New > Flash File (ActionScript 3.0).
3. Choose File > Save and name the file FlashClass.fla. The location of the saved Flash file is unimportant, so you can save it in any folder you like.
4. Choose File > Publish Settings to access the Publish Settings dialog box.
5. Click the Flash tab to see the Flash Player and ActionScript settings.
6. Click the Settings button next to the ActionScript drop-down menu.
7. Click the Library Path tab.
8. Click the red SWC icon and browse to select the SWC file named FlashClass.swc that was generated by Flex in Step 7. After you select the FlashClass.swc file, the path to the file is added to the Library path window (see Figure 10).

9. Click OK to close the Advanced ActionScript 3.0 Settings dialog box and then click OK to save your changes and close the Publish Settings dialog box.
10. Open the Actions panel by choosing Window > Actions. Since the FlashClass.fla file contains only one layer, Frame 1 of Layer 1 is automatically selected. Copy and paste the following code into the Script window to instantiate an object of FlashClass:

11. Choose Control > Test Movie. The test FlashClass.swf appears and the rectangle vector shape is dynamically drawn using the code within the Flex project (see Figure 11).

Testing the Flex–Flash workflow

Now let's try the entire workflow to see how Flex works with Flash. You'll update the Flex code to see how the changes made to the project are automatically reflected in the Flash SWF file:

1. Launch Flex Builder.
2. In the Script window, update the following two lines of code with new parameters. Change the color of the vector shape and also change the width of the rectangle from 200 to 400 as follows:

3. After updating the code, be sure to save the FlashClass.as class file. When you save the file in Flex, a new SWC file named FlashClass.swc is automatically generated, overwriting the previous version of the file in the bin folder.
4. Return to Flash CS4 Professional.
5. Choose Control > Test Movie. The test FlashClass.swf appears and the updated version of the vector rectangle is displayed (see Figure 12).

Note: The approach described above does not work when applied to the Doc class or to symbols inside the Library.

Where to go from here

To learn more about working with Flex and Flash together, read R Blank's article, Exploring a unified component workflow between Flex and Flash. Also watch the online video tutorials on the Flash channel and Flex channel on Adobe TV.

Also be sure to visit the Flash Developer Center and Flex Developer Center, where you'll find more articles, tutorials, and sample projects to get you up to speed quickly.