Flash workflow and workspace



Adobe recommends...

Have a tutorial you would like to share?

Identifying the elements of the Flash workspace

Adobe Press Learn By Video
This lesson introduces the Flash Professional CS5 user-interface.

General Flash workflow

To build a Flash application, you typically perform the following basic steps:

Plan the application.

Decide which basic tasks the application will perform.

Add media elements.

Create and import media elements, such as images, video, sound, and text.

Arrange the elements.

Arrange the media elements on the Stage and in the Timeline to define when and how they appear in your application.

Apply special effects.

Apply graphic filters (such as blurs, glows, and bevels), blends, and other special effects as you see fit.

Use ActionScript to control behavior.

Write ActionScript® code to control how the media elements behave, including how the elements respond to user interactions.

Test and publish your application.

Test to verify that your application is working as you intended and find and fix any bugs you encounter. You should test the application throughout the creation process. Publish your FLA file as a SWF file that can be displayed in a web page and played back with Flash® Player.

Depending on your project and your working style, you might use these steps in a different order.

For more help getting started with the Flash workflow, see the following:

Workspace overview

You create and manipulate your documents and files using various elements, such as panels, bars, and windows. Any arrangement of these elements is called a workspace. The workspaces of the different applications in Adobe® Creative Suite® 4 share the same appearance so that you can move between the applications easily. You can also adapt each application to the way you work by selecting from several preset workspaces or by creating one of your own.

Although the default workspace layout varies in different products, you manipulate the elements much the same way in all of them.
View full size graphic
Default Illustrator workspace

A.
Tabbed Document windows

B.
Application bar

C.
Workspace switcher

D.
Panel title bar

E.
Control panel

F.
Tools panel

G.
Collapse To Icons button

H.
Four panel groups in vertical dock

  • The Application bar across the top contains a workspace switcher, menus (Windows only), and other application controls. On the Mac for certain products, you can show or hide it using the Window menu.

  • The Tools panel contains tools for creating and editing images, artwork, page elements, and so on. Related tools are grouped.

  • The Control panel displays options for the currently selected tool. The Control panel is also known as the options bar in Photoshop. (Adobe Flash®, Adobe Dreamweaver®, and Adobe Fireworks® have no Control panel.)

  • Flash, Dreamweaver, and Fireworks have a Property inspector that displays options for the currently selected element or tool.

  • The Document window displays the file you’re working on. Document windows can be tabbed and, in certain cases, grouped and docked.

  • Panels help you monitor and modify your work. Examples include the Timeline in Flash, the Layers panel in Adobe Photoshop®, and the CSS Styles panel in Dreamweaver. Panels can be grouped, stacked, or docked.

  • On the Mac, the Application frame groups all the workspace elements in a single, integrated window that lets you treat the application as a single unit. When you move or resize the Application frame or any of its elements, all the elements within it respond to each other so none overlap. Panels don’t disappear when you switch applications or when you accidentally click out of the application. If you work with two or more applications, you can position each application side by side on the screen or on multiple monitors. If you prefer the traditional, free-form user interface of the Mac, you can turn off the Application frame. In Adobe Illustrator®, for example, select Window > Application Frame to toggle it on or off. (In Flash, the Application frame is on permanently. Dreamweaver does not use an Application frame.)

Hide or show all panels

  • (Illustrator, Adobe InCopy®, Adobe InDesign®, Photoshop, Fireworks)To hide or show all panels, including the Tools panel and Control panel, press Tab.

  • (Illustrator, InCopy, InDesign, Photoshop) To hide or show all panels except the Tools panel and Control panel, press Shift+Tab.

    You can temporarily display hidden panels if Auto-Show Hidden Panels is selected in Interface preferences. It’s always on in Illustrator. Move the pointer to the edge of the application window (Windows®) or to the edge of the monitor (Mac OS®) and hover over the strip that appears.

  • (Flash, Dreamweaver, Fireworks) To hide or show all panels, press F4.

Display panel options

 Click the panel menu icon in the upper-right corner of the panel.
You can open a panel menu even when the panel is minimized.

(Illustrator) Adjust panel brightness

  In User Interface preferences, move the Brightness slider. This control affects all panels, including the Control panel.

Reconfigure the Tools panel

You can display the tools in the Tools panel in a single column, or side by side in two columns. (This feature is not available in the Tools panel in Fireworks and Flash.)

In InDesign and InCopy, you also can switch from single-column to double-column (or single-row) display by setting an option in Interface preferences.

  Click the double arrow at the top of the Tools panel.

Manage windows and panels

You can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switch among them.

Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products.
Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group.

A.
Title bar

B.
Tab

C.
Drop zone

In Photoshop, you can change the font size of the text in the Control panel, in the panels, and in tool tips. Choose a size from the UI Font Size menu in Interface preferences.

Manage Document windows

When you open more than one file, the Document windows are tabbed.

  • To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.

  • To undock a Document window from a group of windows, drag the window’s tab out of the group.

  • To dock a Document window to a separate group of Document windows, drag the window into the group.

    Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimize button to create floating windows.

  • To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or sides of another window. You can also select a layout for the group by using the Layout button on the Application bar.

    Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands in the Window menu to help you lay out your documents.

  • To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s tab for a moment.

    Note: Some products do not support this functionality.

Dock and undock panels

A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock panels by moving them into and out of a dock.

Note: Docking is not the same as stacking. A stack is a collection of floating panels or panel groups, joined top to bottom.

  • To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.

  • To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.

  • To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock or make it free-floating.

Navigator panel being dragged out to new dock, indicated by blue vertical highlight

View full size graphic
Navigator panel now in its own dock

You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets the edge of the workspace.

Move panels

As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floats freely in the workspace.

  • To move a panel, drag it by its tab.

  • To move a panel group or a stack of floating panels, drag the title bar.

Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while moving the panel to cancel the operation.
Note: The dock is stationary and can’t be moved. However, you can create panel groups or stacks and move them anywhere.

Add and remove panels

If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a drop zone appears.

  • To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window menu.

  • To add a panel, select it from the Window menu and dock it wherever you want.

Manipulate panel groups

  • To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.

    Adding a panel to a panel group

  • To rearrange panels in a group, drag a panel’s tab to a new location in the group.

  • To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.

  • To move a group, drag the title bar (the area above the tabs).

Stack floating panels

When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unit when you drag the topmost title bar. (Panels that are part of a dock cannot be stacked or moved as a unit in this way.)

Free-floating stacked panels

  • To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.

  • To change the stacking order, drag a panel up or down by its tab.

    Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.

  • To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.

Resize panels

  • To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also single-click the tab area (the empty space next to the tabs).

  • To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized by dragging.

Manipulate panels collapsed to icons

You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace.

Panels collapsed to icons

Panels expanded from icons

  • To collapse or expand all panel icons in a dock, click the double arrow at the top of the dock.

  • To expand a single panel icon, click it.

  • To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text disappears. To display the icon text again, make the dock wider.

  • To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.

    In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, an expanded panel icon collapses automatically when you click away from it.

  • To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically collapsed to icons when added to an icon dock.)

  • To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into other docks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating, expanded panels).

Restore the default workspace

  • Select the default, Essentials workspace from the workspace switcher in the Application bar.

  • (Photoshop) Select Window > Workspace > Essentials (Default).

  • (InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name].

Save and switch workspaces

By saving the current size and position of panels as a named workspace, you can restore that workspace even if you move or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar.

In Photoshop, the saved workspace can include a specific keyboard shortcut set and menu set.

Save a custom workspace

  1. With the workspace in the configuration you want to save, do one of the following:

    • (Photoshop, Illustrator) Choose Window > Workspace > Save Workspace.

    • (InDesign, InCopy) Choose Window > Workspace > New Workspace.

    • (Dreamweaver) Choose Window > Workspace Layout > New Workspace.

    • (Flash) Choose New Workspace from the workspace switcher in the Application bar.

    • (Fireworks) Choose Save Current from the workspace switcher in the Application bar.

  2. Type a name for the workspace.

  3. (Photoshop, InDesign) Under Capture, select one or more options:

    Panel Locations
    Saves the current panel locations.

    Keyboard shortcuts
    Saves the current set of keyboard shortcuts (Photoshop only).

    Menus
    Saves the current set of menus.

  4. Click OK or Save.

Display or switch workspaces

 Select a workspace from the workspace switcher in the Application bar.

In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly.

Delete a custom workspace

  • Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then click Delete. (The option is not available in Fireworks.)

  • (Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher.

  • (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete icon.

  • (InDesign) Choose Window > Workspace > Delete Workspace, select the workspace, and then click Delete.

(Photoshop) Start with the last or default panel locations

When you start Photoshop, panels can either appear in their original default locations, or appear as you last used them.

In Interface preferences:

  • To display panels in their last locations on startup, select Remember Panel Locations.

  • To display panels in their default locations on startup, deselect Remember Panel Locations.