Migrating from Flash 8 to Flash CS3 Professional

File import and product integration improvements

There are many improvements in Flash CS3 when it comes to integrating with other products, and importing file formats like Illustrator (AI) and Photoshop (PSD) files. The following sections show you how to import AI and PSD files, and then outlines how the various Creative Suite 3 products integrate.

Importing Photoshop and Illustrator files into Flash

One of the greatest improvements when working with multiple Creative Suite 3 components is when you need to import a PSD or AI file into Flash CS3. You can now directly import PSD and AI files into Flash, and know that most of the data types from those documents are supported. You will see many import options in Flash, allowing you to specifically control how each file imports. For example, you can retain, create, and rename layers, create symbol instances, add instance names, and so on.

When you import a PSD file into Flash, using File > Import > Import to Stage or Import to Library, you see the following dialog box.

Figure 22: Importing a Photoshop PSD file into Flash.

Notice how all of the layers and layer names are retained. After you import the Photoshop file, you can still edit the content that's contained within that file using Flash. However, if you do not need to modify the content, you can flatten the PSD content to a bitmap image.

The importer lets you convert all of those layers to either Flash layers (individual layers on the timeline), or keyframes. You also have the option to import a layer as a movie clip. The importer contains an option to place layers at their original position, which means that the PSD content imports retaining its Photoshop positioning. Otherwise, the content centers on the Stage after you import it.

If you import your content to the Stage, you also have the option to resize the Stage to match the PSD canvas size. I'm sure many of you will be excited to hear that!

You can also import Illustrator files into Flash, which is a lot like importing PSD files. When you import an AI file into Flash, using File > Import > Import to Stage or Import to Library, you see the following dialog box.

(+) view larger
Figure 23: Importing an Illustrator AI file into Flash.

Much like importing a Photoshop file, you can choose to convert layers to Flash layers, or keyframes. You also have an option to add all content to a Flash single layer, create a movie clip with a layer's content, and you have the option to import each layer as a bitmap or sometimes as an editable path.

Many of you will choose to copy and paste Illustrator content into Flash, often a lot quicker and easier than importing an entire file. It also makes sense when you're creating assets like characters or buttons, as opposed to a web site layout that you might need to import. When you copy and paste, you'll notice attributes like paths, strokes, shapes, gradients, text, symbols, masks, and blend modes are all retained in Flash.

Not only can you tightly control how your AI and PSD files import, but you can also change preferences for the import dialog box. Choose Edit > Preferences (Windows) or Flash > Preferences (Mac OS) to open the Preferences dialog box. There are two new options at the bottom of the Category list: PSD File Importer, and AI File Importer. Here, you can change the default preferences for how Flash imports Photoshop or Illustrator files (see Figures 24 and 25).

Figure 24: Change the default preferences for the Photoshop document importer.

Figure 25: Change the default preferences for the Illustrator document importer.

There is a lot of flexibility when you import AI and PSD documents into Flash, much more than can be covered in this article. For video tutorials about integration between Flash and Illustrator, see Importing Illustrator files into Flash, Using symbols effectively between Illustrator and Flash, and Using text effectively between Illustrator and Flash. For a video tutorial about integration between Flash and Photoshop, see Designing websites with Photoshop and Flash. Of course, also consult product documentation for more details.

Integrating Flash with Illustrator and Fireworks

Not only can you import Illustrator files and retain layers, there are new features within Illustrator to help integrate with Flash. For example, you can create symbols, manipulate their registration points, and assign names to instances of those symbols right in Illustrator. Then you can import symbols and instances into Flash, while retaining all of that information. You can also create static, dynamic, and input text fields in Illustrator. For a video tutorial on creating Flash text fields in Illustrator, see Using text effectively between Illustrator and Flash. For a video tutorial on creating symbols in Illustrator for use in Flash, see Using symbols effectively between Illustrator and Flash.

Illustrator, Flash, and Adobe Fireworks® all support for 9-slice scaling. You can create symbols in any of these three products, and enable 9-slice scaling to avoid distortion when you scale your symbols. For example, you might create some interface elements with 9-slice scaling, such as buttons, in Illustrator. Then you can create a website prototype in Fireworks that uses the buttons, and finally animate those buttons in Flash.

You can continue to roundtrip edit between Fireworks and Flash. In Flash CS3, you will notice a tidier import dialog box when you take PNG files from Fireworks to Flash (see Figure 26). In this new dialog box, you can import content onto specified pages, which is a great new feature found in Fireworks CS3.

Figure 26: A fresh new import dialog (right) when you import a Fireworks PNG file into Flash CS3. The previous import dialog (in Flash 8) is on the left.

For a video tutorial that includes several different ways you can integrate Flash and Fireworks, see Understanding the Fireworks and Flash workflow, by the smart and dapper Adobe expert Alan Musselman.

Integrating Flash with Device Central

The workflow for creating content for devices is different in Flash CS3. You will find yourself working more outside the Flash authoring environment in a new tool called Device Central CS3. This new tool lets you emulate mobile devices, and even select a target device right at the beginning of your development workflow. Using Device Central helps you know the abilities—and limitations—of your target device right away.

In Flash 8, you primarily worked with templates, the Device Settings window, and the Publish Settings dialog box when you created content for a mobile device (see Figure 27).

Figure 27: Creating content for a device in Flash 8.

Now, you can create a new FLA file with a target device in Device Central. Choose File > New Document In > Flash. A new window opens, where you can set up your target device, make appropriate settings, and click Create (see Figure 28).

(+) view larger
Figure 28: Creating a new Flash document in Device Central.

After you click Create, a new document with all the correct settings for your target device(s) opens in Flash CS3. You then work in the Flash authoring environment to create and modify your content for the device. When you're ready to emulate your animation, you return to Device Central instead of using the Flash test environment as you would in Flash 8.

(+) view larger
Figure 29: Emulating Flash content in Device Central.

Naturally, there are many new features in Device Central for emulation, such as reflections, backlight, and time of day (see Figure 29, above).

For video tutorials about creating mobile content in Flash, see Creating mobile content in Flash, and Creating interactive content for mobile devices. For a video tutorial about using Device Central in general, see Using the Device Central workspace.

Integration with Adobe Bridge and Version Cue

Flash CS3 now integrates well with Adobe Bridge CS3 and Adobe Version Cue® CS3. Organize your files and assets using Adobe Bridge, which is a tool to help you manage, browse, and preview files. Adobe Bridge can also help you automate certain procedures, apply color settings, and even purchase stock photos. Version Cue is useful for version control of your files, which is essential in a teamwork environment.

To quickly access Adobe Bridge, choose File > Browse. Adobe Bridge opens a file browsing system that lets you click through your files and view information about them. You can filter the files you want to see, and select a way to view your files (such as focus on metadata, or previewing the content). A nice advantage of using Adobe Bridge to browse your files is that it lets you preview SWF files (see Figure 30), and automatically test a selected file in Device Central (choose File > Test In Device Central).

Figure 30: Use Adobe Bridge to preview your work.

You can both label and rate files that you select using Adobe Bridge, which is useful if you have several versions of a document, many image assets, or several with similar names. Labels include star ratings, or labels such as Approved, Review, and so on (see Figure 31).

Figure 31: This SWF file was rated two stars and labeled as To Do.

One of the neat features of Bridge Home is that it contains links out to useful resources, and video tutorials from the Adobe Video Workshop (part of Adobe Design Center). For a video tutorial about using Adobe Bridge with Dreamweaver and Flash, see Using Bridge in a web design workflow.

Version Cue lets you apply version control to your projects, helping you manage assets. This is particularly useful in large projects, or projects involving a team of people. Bridge and Version Cue work together: You can use Bridge to browse Version Cue projects, files, and servers. You can also search for information about assets managed by Version Cue and compare information about the controlled files.

You install Version Cue when you install Flash. Consult product documentation to learn about turning on Version Cue server and making settings.

Choose Tools > New Project from Adobe Bridge to create a new Version Cue project (see Figure 32).
After you type a name for your project (in this case, I called the new project Groundhog), click OK to create the new project.

Now you can add any existing files to that project, which essentially moves those files into that project.
Right-click a file that you want to add to the Version Cue project, and then choose Move To > Groundhog (or whatever you named your project). Enter any comments about the file that you're adding to the project (see Figure 32), and then click OK to move the file.

Figure 32: Moving a file into a Version Cue project.
A handy way to view your files is to click the Folders tab in the upper-right corner of the default workspace, and drill down to your project (see Figure 33).

Figure 33: Viewing your new project file. Right-click the file, or use the buttons above the project files, to check it out.

For a video tutorial about using Version Cue, see Using Version Cue in a workgroup environment. For a video tutorial about using Version Cue in a project with designers and developers, see Setting up a Version Cue server.