Migrating from Flash 8 to Flash CS3 Professional

Updated Flash workspace and workflow

The updated Flash workspace shares a common interface with other Adobe Creative Suite 3 components. The consistent appearance across all Creative Suite 3 components helps you work easily with multiple applications. There are notable improvements to the Flash workspace that will improve your day-to-day workflow.

There are many obvious changes to the Flash workspace, perhaps most notably the updated appearance of panels and tabs. You can't miss them when you open Flash CS3 for the first time.

The Tools panel

The Tools panel has changed to a single column of tools by default (see Figure 1). This new Tools panel layout saves a considerable amount of screen real estate.

Figure 1: By default, the Tools panel is a single column of tools.

You can change the Tools panel layout easily. Simply click the double arrow above the Tools panel to change it between a single and double-column layout (see Figure 2).

Figure 2: Click the double arrow to change the Tools panel layout. After you click the icon, the Tools panel changes to a double-column layout.

There are some new tools in the Tools panel. You can find more information about these new tools later in this article, in the section called New drawing tools in Flash.

Docking and undocking panels

Docking panels has changed in Flash CS3, and offers more flexibility than in previous versions of Flash. You can easily change the location of any tabbed panel by clicking and dragging it (sometimes called "tearable panels")—something you might have expected to see in Adobe Flash! For example, you can rearrange the default locations of the panels grouped with the Property inspector at the bottom of the workspace (Window > Properties > Properties)—just click and drag to rearrange the three default tabs. Or, you might want to move one of those panels to the right of the Stage. All you need to do is click the tab and drag it to a new location, which is a lot faster and easier than in Flash 8.

To undock a panel, drag it by its tab away from the docked location to elsewhere in the workspace. To redock the floating panel, drag the tab to a panel to group it with other panels, or above or below other panels. Watch for the blue "drop zone" that indicates where the panel will be placed (for example, docked above, below, or grouped with other panels). The drop zone looks like a line if you place it above or below panels in a column. You can place a panel within another panel by dragging its tab into that panel. When panel title bar highlights blue, release the mouse button.

Note: The column of panels to the right of the Stage is called the dock in Flash CS3.

You can create a new column by dragging the panel over the dock. Stop when you see a blue drop zone, this indicates the panel will be docked to the left of the current column of panels (see Figures 3 and 4).

Figure 3: Create a second column of docked panels. Release the mouse button when you see a blue drop zone like this one.

Figure 4: Now the Library is in a second docked column.

Tip: If you want to undock a panel, click and drag its tab away from other panels. Make sure you do not see a drop-zone indicator, and release the mouse button.

Changing Timeline placement

If you want to maximize on screen real estate, try moving the Timeline to this column of panels, and expanding the Stage to fill the main area of the Stage, as illustrated in Figure 5. There is a lot more flexibility in Flash CS3 for Timeline placement. This section shows you how to manipulate the timeline to change your workspace and enhance your workflow, especially if you are an animator.

(+) view larger
Figure 5: Let the Stage fill your workspace, while still quickly accessing the Timeline.

Follow these steps to undock the Timeline and redock it with other panels.

Choose Placement > Undock from document from the Frame View menu. Find this menu in the upper right corner of the Timeline (see Figure 6).

Figure 6: Undock the Timeline using the Frame View menu.

Drag the panel by its tab to dock it with other panels to the right of the Stage. Release the mouse button when you see the blue drop-zone indicator.
If you want to put the Timeline back where it was, choose Placement > Above Document from the panel menu. The panel menu opens from the upper-right side of each panel.
To achieve even more room for the Stage, click the double-arrow icon in the upper-right corner of the workspace, labeled Collapse to Icons.

You collapse the dock so each panel appears as an icon, which leaves even more room for the Stage. By now, you should have achieved the same workspace as shown in Figure 5.

You can finally let the Stage fill your monitor (see Figure 5), and still access your most-used tools. Even if you leave the Timeline in its default location, you still save a lot of real estate by minimizing the panels to icons.

Stacking panels

You can also stack undocked, or free-floating, panels, which is a feature that's new to Flash. To stack free-floating panels, follow these steps:

Drag a panel over the Stage, and release the mouse button making sure you do not see a blue drop-zone indicator.
Drag a second panel directly underneath the first panel you dragged over the Stage. Watch for a blue drop-zone indicator to appear at the bottom of the first panel (see Figure 7).

Figure 7: Watch for a blue drop-zone under the first panel, and then release the mouse button when you see it.
Release the mouse button when you see the drop zone. The two panels are now stacked, so you can drag them around the workspace together.

Panel icons and buttons

You can now close panels using the “X” button located on the panel's tab (see Figure 8). And just like Flash 8, you can reopen closed panels using the Window menu.

Figure 8: Close panels using the “X” button in the panel's tab.

In Flash 8, there were arrows next to the panel name used to expand and collapse the panel. Now, there is a minimize button in the upper right of panels, which you can use to minimize (or maximize) the panel. Use the “X” button next to it to close a panel group (see Figure 9).

Figure 9: Minimize panels or close a panel group using these two buttons.

You can also double-click the panel's tab to expand or collapse the panel. You can click a panel's icon when it’s in icon mode to expand or collapse the panel as well (for more info on icon mode, keep reading).

Tip: The Options menu (Flash 8) is now called the panel menu in Flash CS3. Find the panel menu in the upper-right corner of each panel (where the pointer is located in Figure 9).

In Flash 8 and earlier, you could change the height of the Property inspector (Window > Properties > Properties) using a triangle in the lower right of the panel. Now, you can expand and collapse the Property inspector using a small dual-sided expander arrow to the left of its name (see Figure 10). You can rotate between the fully expanded panel, the half-size panel, and the fully minimized panel.

Figure 10: Expand and minimize the Property inspector.

Changing panel appearance

Exhausted yet? Wait, there's more. One of the greatest new workspace enhancements to Flash CS3 is the ability to collapse panels in the dock to icons and text, or just icons. Try it yourself.

Click the Workspace button in the edit bar (see Figure 11).
Select Icons And Text Default from the menu.
The workspace changes so the panels down the right side only appear with icons and text.

Figure 11: Select Icons And Text Default from the Workspace menu in the edit bar.
Click one of the panel icons in the dock to open the panel (see Figure 12).

Figure 12: Click a panel's icon to open it.
Click the Workspace button in the edit bar again, and select Icons Only Default from the menu.

The workspace changes so there are only icons for each open panel down the right column. You can click icons to open each panel as you did previously.

You can also change the size of the dock two other ways. You can click the double-arrow icon at the top of the dock (see Figure 13) to toggle between views.

Figure 13: Click the double arrow at the top of the dock.

Another way to resize the dock is to click and drag the gripper at the top left of the dock (see Figure 14). You can resize using the gripper when the dock appears in the Icons And Text or Icons Only view.

Figure 14: Click and drag the gripper to resize the dock between Icons Only and Icons And Text views.

The dock lets you save a lot of screen real estate, which was always a problem with Flash. You will probably find that this feature can vastly improve your workflow. Maybe you can get rid of that second monitor? OK, maybe not.

Saving and changing your workspace

As always, you can save your favorite workspace and quickly change between saved workspaces. New in Flash CS3, you can save and open workspaces directly from the edit bar (see Figure 15).

Figure 15: Save and open workspaces from the edit bar.

Once you have saved a workspace, it appears at the top of the Workspace menu. You can also save new workspaces from this menu, manage workspaces (such as remove or rename them), choose a default dock view, and select Maximize mode. Maximize mode removes the title bar and fills in the workspace (below the dock and Tools panel) in Mac OS.

This feature is fairly self-explanatory if you have ever worked with saved or pre-defined workspaces.

Enhancements in Flash for Mac OS

Finally, Macintosh users can now enjoy an application window with docked panels instead of floating panels (see Figure 16). You now have the option of using Flash with docked panels, or floating panels if you prefer. You can dock and undock panels just like you would on Windows (see above for details).

You can also toggle to Maximize mode, which removes the title bar at the top of the workspace, and fills in the interface (compare Figures 16 and 17).

(+) view larger
Figure 16: No more floating panels!

(+) view larger
Figure 17: Use Maximize mode to fill in the gaps.

Remember, these interface elements are available in many Creative Suite 3 components (applications, no relation to the Components panel), so you are also able to use these features in Adobe Photoshop®, Adobe Illustrator®, and Adobe InDesign®. For a video tutorial on using these shared interface elements, see Using shared elements of the Photoshop, Illustrator, InDesign, and Flash workspace.