Creating mobile projects with the shared assets feature and the Project panel in Flash

The process of producing multiple versions of the same project is much easier in Adobe Flash Professional CS5.5 than in earlier versions. For example, if you need one version of your project for web browsers, one for iOS devices, and another for Android devices, you can now easily share graphics and other assets across all three files during development. By using the Project panel and the new author-time shared assets feature, you can produce projects for web, desktop, and mobile more efficiently and in less time.

To use this author-time shared assets feature, you must organize each of your FLA files in the Project panel. You can share symbols in the Library among any FLA files within the same project—specifying which symbols to share by selecting the sharing option for those items in the Library panel. Once a Library item is shared, you can edit and update it once and see the change reflected all of the shared FLA files. This way you can avoid redundant copying of assets.

In this tutorial, you will learn how to create a new Flash project, share library items, and edit and update shared library items.

Before following along with the instructions, it's helpful to learn more about the Project panel and what it can do.

Opening the Project panel

In Flash Professional CS5.5, use one of the following three ways to launch the Project panel:

• In the Welcome Screen, choose Create New > Flash Project. The Create New Project dialog box appears.
• Select File > New > General tab > Flash Project. The Create New Project dialog box appears.
• Select Window > Project. Use the Main menu to choose the New Project option.

Take a moment to examine the options in the Project panel (see Figure 1).

• Main menu includes the options to create a new project and open an existing project.
• Project organizing tools enable you to add and remove files; these options  become available after you've created a project.
• Test Project button makes it easy to preview a project you are developing.

Creating a new project

When you select the option to create a New Project, the Create New Project dialog box appears. Specify a project name and choose the project's location:

• Project name: Enter a descriptive project name.
• Root folder: Click the Browse button and navigate to the folder on your computer where you want to save the project. You must save all of the related FLA files in this root folder in order to share assets as you develop your project.
• Create default document: If desired, you can define the document information when you first create a new project. Enable the option to Create default document and enter the information. You can also create a default document later, after you've created a project.

Follow these steps to create your first Flash project:

1. Create a folder on your desktop. Name it MyFirstProject. This new folder will be the root folder of your project; it will contain all of the project files.
2. Launch Flash Professional CS5.5 and select Window > Project.
3. Use the main menu in the Project panel to select New Project.
4. The Create New Project dialog appears. Enter the project name, click the folder icon and browse to select the root folder on your desktop (to define the path), and set the default document name as shown in Figure 2.

5. Click the Create Project button to create your first project (see Figure 3).

6. Click the New File icon in the lower right corner to create another FLA file (for Android) and add it to the project.
7. The Create File dialog box appears. Enter the new file information as shown below and then click Create File (see Figure 4).

8. Repeat Steps 6–7 to create a different FLA file for the iPhone OS. Enter the following settings:
   • File name: iPhone.fla
   • File type: Flash Document
   • Player: AIR for iPhone
   • Script: ActionScript 3.0
9. Click the Create File button. The updated list of project files is displayed in the Project panel (see Figure 5).

You have successfully created a project that contains three different FLA files that target three different Player versions: Flash Player 10.2, AIR for Android, and AIR for iPhone.

Understanding the AuthortimeSharedAssets.fla file

After you create a new project, you'll notice that an AuthortimeSharedAssets.fla file is created and stored within the project folder (see Figure 5). Any library items that you enable for sharing with other FLA files in the same project are stored in this file. The AuthortimeSharedAssets.fla file behaves just like a normal FLA file. You can open it and edit assets in this FLA file. Any changes made to the assets are reflected in all linked library items in your entire project. However, it is a best practice not to edit this file at all because Flash will seemlessly update shared library items without requiring you to open this file. Specifically, avoid changing the filenames or deleting the AuthortimeSharedAssets.fla file. These actions are not recommended because you can lose link information for the project.

In the next section, you'll dive into working with the sample projects. If you haven't already, be sure to download the sample files provided at the beginning of this article. Uncompress the ZIP file and save the sample files folder to your desktop.

In this example, you'll produce a fictitious Hawaiian travel guide, named Let's Go To Hawaii. The project requirements include delivering three different versions of the same product: one version for web browsers, one version for the iPhone, and one version for Android-based mobile phones.

Step 1: Opening the sample project: Hawaii-Green

Follow these steps to open the sample project:

1. Launch Flash Professional CS5.5.
2. Select Window > Project to open the Project panel.
3. Use the main menu to select the Open Project option.
4. Browse to select the subfolder named Hawaii-Green, located in the sample files SharedAssets folder on your desktop. Click Choose. The Hawaii-Green project opens (see Figure 6).

5. Double-click each of the FLA files in the project to open them, except for the AuthortimeSharedAssets.fla file. It is not necessary to open that FLA file.
6. Compare the assets in the Android-Green.fla, iPhone-Green.fla, and Web-Green.fla files. Notice that the green surfboard buttons are only present in the Web-Green.fla file (see Figure 7).

Step 2: Sharing library items

In this section, you'll learn how to copy the green surfboard buttons from Web-Green.fla file to the other two FLA files in the project. You'll also learn how to make the common assets shareable.

Follow these steps to share a library item:

1. Open the Library panel while the Web-Green.fla file is active. The column with the link icon header contains a check box next to every movie clip asset. This column is displayed only when you are working with FLA files that are included in a Flash project. You can enable the check box option next to each movie clip item that you want to share with the other FLA files in the project (see Figure 8).

2. Select the check box next to the Oahu movie clip. This operation automatically copies the Oahu movie clip to the library of the AuthortimeSharedAssets.fla file. This means it is available to be shared across the other FLA files in the project. Notice that as you enable the share option for the Oahu movie clip, the shared options for the Surf Board and Turtle movie clips are automatically selected as well. This occurs because the Surf Board movie clip and the Turtle movie clip are nested inside the Oahu movie clip.

When you enable a movie clip asset for sharing, any nested movie clips are automatically also set to be shared, but their check boxes are dimmed in the Library panel (see Figure 9).

3. Although you've enabled the shared assets feature, the Oahu movie clip still only exists in the Web-Green.fla file and hasn't yet been added to the other two FLA files for the iPhone and Android versions of the project. Right-click (or Control-click) the Oahu movie clip symbol in the Library panel and choose the Copy option from the context menu that appears.
4. Use the menu at the top of the Library panel to select the Android-Green.fla file's library. Right-click (or Control-click) on the blank area below the assets list in the Library panel and select Paste from the context menu. The list updates to include the Oahu movie clip, and the pasted symbol's check box is enabled. The nested movie clips Surf Board and Turtle have also been pasted and added to the list. Their shared check boxes are enabled and grayed out.

Note: If the dialog box appears to ask if you want to enable the auto-save feature, click No.

5. Click the tab above the Stage to make the Android-Green.fla file active. Drag the Oahu movie clip symbol from the Library panel to the Stage. Press the Q key and use the transformation handles to resize the graphic to fit the Android OS Stage dimensions. Reposition the instance to place it within the desired location in the design. (You can also resize and position the movie clip using the Property inspector.)
6. Save the Android-Green.fla file. This ensures that the Oahu movie clip symbol is now shared with the Web-Green and Android-Green versions of the project. Now that the symbol is shared in two FLA files, you can edit it once and have it update in multiple versions of the same project.
7. Repeat Steps 1–6 to share and copy the Maui, Big Island, and Kauai movie clips from the Web-Green library to the Android-Green library.
8. After sharing, copying, resizing and positioning the movie clips, review the Android-Green file. The workspace should look similar to Figure 10.

9. Repeat Steps 1–6 to share and copy the Oahu, Maui, Big Island, and Kauai movie clips from the Web-Green.fla file to the iPhone-Green.fla file. Resize and reposition the instances on the Stage so that all of the green surfboard buttons are now arranged in the same configuration within all three versions of the Hawaii-Green project FLA files.
10. If you'd like to check your work before moving on to the next section, open the Hawaii-Green-Completed project located in the samples file folder. Compare your version of the project files with the completed version of Example 1.

Sharing other types of library items

In the Library panel, the sharing column displays check boxes next to movie clip, button, and graphic symbol assets in a FLA file that is included in a Flash project. However, you are not limited to sharing these asset types. You can share other types of assets—all other library items can be enabled for sharing if you wrap them in a movie clip symbol. Select an item on the Stage and drag it to the Library panel to invoke the Convert to Symbol dialog box. You can also select an object on the Stage and choose Modify > Convert to Symbol or press F8. After creating the new wrapper movie clip, select its checkbox to enable it for sharing. By sharing the parent movie clip, all nested items are automatically copied to the AuthortimeSharedAssets.fla file and enabled for sharing.  

In this section, you'll learn how to revise the existing shared assets in a Flash project to see how easy it is to update an entire set of versions without the labor-intensive work of editing the assets in each FLA file individually. Now that you've shared the assets and copied them within a set of project files, you can take advantage of the shared assets feature to quickly make changes.

In this scenario, imagine that your client reviewed the project files and is pleased with the design direction. However, they've requested that you change the green surfboard buttons to blue. In the instructions below, you'll update the assets that are already shared, to modify their appearance across all three versions of the FLA files in the project.

Revising a project with shared symbols

Follow these steps to edit and update shared symbols:

1. Close all FLA files from the previous example and quit Flash Pro CS5.5. (This is an optional step, to avoid confusion. Rather than beginning where you left off, you'll use the second set of project files to begin this sample project from scratch.)
2. Launch Flash Professional CS5.5.
3. Select Window > Project to open the Project panel. Use the main menu to select the Clear Menu option (if the previous project is still listed in the Project panel).
4. Use the main menu to select the Open Project option.
5. Browse to select the subfolder named Hawaii-Blue, located in the sample files folder on your desktop. Click Choose.
6. Double-click the Web-Blue.fla, Android-Blue.fla and iPhone-Blue.fla files listed in the Project panel to open them. Look at the Stage and confirm that the surfboard symbols are still green in all three FLA files.
7. Close the Android-Blue.fla and iPhone-Blue.fla files. You'll only edit the Web-Blue.fla file.
8. On the Stage, double-click the instance of the Oahu movie clip symbol to enter symbol editing mode. Use the Property inspector to change the text color from dark green to dark blue.
9. While still in symbol editing mode for the Oahu movie clip, double-click the nested Surf Board movie clip symbol to edit the shape fill. Use the Property inspector to change the fill color of the surfboard from green to light blue. Change the fill color of the surfboard stripes from green to blue.
10. While still in the symbol editing mode for the nested Surf Board symbol, double-click the nested Turtle movie clip symbol. Use the Property inspector to change the fill color of the turtle's body from dark green to dark blue and the turtle's spots from light green to light blue. Using this strategy, you've drilled down to edit the sub-elements that are nested inside the parent movie clip symbol. Return to the Stage and exit symbol editing mode by selecting Scene 1 or clicking the back arrow icon located at the top left side of the Stage.
11. Since the button assets were created using common symbol elements, the text and fill colors are updated automatically for the remaining surfboard buttons: Maui, Big Island, and Kauai.
12. After updating the colors, the Stage of the Web-Blue.fla file will look similar to the screenshot below (see Figure 11).

13. Save the Web-Blue.fla file. By saving the FLA file, the changes you made to this file are saved and then applied to the rest of FLA files that contain the same shared symbols.
14. Open the Android-Blue.fla and the iPhone-Blue.fla files to confirm that all of the surfboard button instances on the Stage have been updated to the same blue colors.
15. If desired, you can open the Hawaii-Blue-Completed project located in the samples file folder. Compare your version of the project files with the completed version of Example 2.

Understanding the basic rules of sharing and updating assets

All shared assets (library items that have been enabled for sharing) will be updated when you save the current file. When you open multiple FLA files that contain shared assets, whichever document you save last will overwrite any changes you made to the other FLA files in the project. To avoid confusion, don't edit the same shared asset in multiple FLA files at once. Instead, only open one FLA file at a time to make changes. When you are finished, save the file you are editing first. Then open the other FLA files to confirm that your changes were updated across the entire project, as described in the steps above.

Now that you've learned how to work with the Project panel and the new shared assets feature, you'll find that you can produce deliverables for multiple versions of a project quickly and more efficiently.

The sample projects provided in this article could be extended to use for multilingual projects as well. For example, you could add a FLA file that is designed to display a specific language environment. When your client requests more changes, you could easily edit one shared asset and apply the same updates to all FLA files in the project at once.

After you become more familiar with using the Project panel and sharing assets, continue your research by experimenting with the following concepts:

• The classic method of sharing assets still works in Flash Professional CS 5.5. You can set a path to a source symbol in the Symbol Properties dialog box, one symbol at a time. This process is not as convenient as using the Project panel. However, if you do not wish to use the Project panel, it's worth noting that you can still share library items using the older strategy. For more information about the classic sharing method, see the section titled Sharing library assets at author-time in the Flash Professional Help documentation.
• Because sharing and updating symbols with the Project panel relies on the timing of your Save operations, the use of the new Auto Save and Auto Recovery features are not recommended. These features are turned off by default. By not enabling them, you gain more control over when to save files and when to update the shared assets that are linked in the other FLA files in a project. To learn more about enabling and disabling the Auto Save and Auto Recovery features, see the Set preferences in Flash section of the Help documentation.
• If you are interested in publishing the sample files of this tutorial to iOS or Android, please read the sections titled Packaging applications for AIR for iOS and Publishing AIR for Android applications in the Flash Help documentation to learn more.

Finally, Flash Product Manager Richard Galvan has a popular blog that covers various topics on Flash, including the Project panel and other exciting new features.

I encourage you to experiment with using the Project panel to organize your FLA files and assets. Leverage the new features in Flash Professional CS5.5 to streamline your workflow when developing multiple versions of a project to be deployed on the web, desktop, and mobile devices.