Home / Design Center / Tutorials
Using the workspace
Chris Georgenes
This tutorial shows you the main parts of the Flash interface, including how to set up the workspace, work with the Stage, and create and open documents. This tutorial also shows you how to work with the edit bar and the library.
Requirements
To follow along with this article, you will need the following software:
Flash CS3 Professional
Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.
Understanding the Flash workspace
In Flash, choose File > New to open a new Flash document. Click OK to accept the default document type, Flash File (ActionScript 3.0).
Notice the panels in the new CS3 interface. You'll see many improvements here, especially in the way the panels are docked. Look at the Tools panel, for example, which is now one vertical row of tools (see Figure 1). You can switch to a double row of tools by clicking the double-arrow button at the top of the Tools panel.
Figure 1: The Tools panel appears as a single row.
Notice the panels on the right side of the workspace, as in previous versions, but now in a single dock. They also respond interactively. Closing one panel automatically expands another to take its place.
Click the new Collapse to Icons button at the top right of the dock. Clicking this button reduces the panel to a series of icons, with the name of the panel listed to the right (see Figure 2). When the panels are collapsed to icons, you can still open them easily by clicking the panel button.
Figure 2: Panels in the dock appear as icons in Icon view.
Click the Color panel button. This opens the Color panel, along with the other panels in the group, including the Swatches panel. Click the button again to close the panel group.
Drag the handle in the upper left corner of the dock (it turns into a double-arrow pointer when you press the mouse button) to the left or right, to widen or narrow the panel, respectively whether the dock is collapsed or expanded.
Still in Icon view, drag the handle to the right to collapse the dock so that just the icons show, not the labels. This creates a single vertical row of icons, similar to the Tools panel, and really maximizes the screen real estate.
To return to the default workspace, click the Workspace pop-up menu just above the Stage and choose Default.
You can also create custom workspace layouts, based on your particular workflow and the tasks at hand. For example, you could have one workspace for simple design projects and one for animation. To create a custom workspace, you use the Window menu to select the panels you will need for your type of project.
Choose Window > Info to open the Info panel. Then choose Window > Align to open the Align panel. These panels open in the right dock by default.
Now choose Window > Movie Explorer. This panel opens as a floating panel, separate from a dock.
Drag the Movie Explorer panel to the Property inspector below the Stage. You can also drag it to the right dock.
To save this custom workspace, choose Window > Workspace > Save Current. In the Save Current Workspace dialog box, type my workspace at the prompt to name your workspace, and click OK.
To open your custom workspace, choose my workspace from the Workspace pop-up menu above the Stage. You can create as many custom workspaces as you like.
On the Timeline, notice some small changes from previous Flash releases. The trash can icon for Delete Layer now is grouped with the other icons, moved from the right side of the toolbar (see Figure 3).
Figure 3: In the Timeline, drag the handle to widen or narrow the layers list. In CS3, the trash can icon now is on the left.
In CS3, the new location of the trash can icon makes room for the new grab handle that lets you resize the layers list horizontally.
Drag the handle (to the right of the layer tool icons, indicated by the two vertical lines) to the right or left to widen or narrow the list.
To resize the Timeline vertically, use the same method as in previous Flash releases: drag the bottom border of the Timeline down or up. In CS3, you can also grab the edit bar and move it up or down to expand or shrink the Timeline.
In the upper right corner of the Timeline, click the icon to display the Frame View pop-up menu, and choose Short to compress the height of the Timeline layers. Use this menu to change the appearance of the Timeline (see Figure 4).
Figure 4: Compress the layer height by choosing Short from the Frame View pop-up menu.
To change the size of the frames, click the icon in the upper right corner of the Timeline again, and choose Large from the Frame View pop-up menu. This widens the individual frames within the Timeline (see Figure 5).
Figure 5: Frames can be made smaller or larger using the sizing options (Tiny to Large) in the Frame View pop-up menu.
To modify the Stage, click directly on it. Notice that the Property inspector updates to include information about the Stage.
In the Property inspector, click the Document Properties button (labeled with the document dimensions) to open the Document Properties dialog box (see Figure 6). You use this dialog box to set a document's new width and height, change the background color, adjust the frame rate, and set other properties.
Figure 6: Use the Document Properties dialog box to change the dimensions, background color, and frame rate.
Type 800 for the width and 600 for the height. Click the Background color box and choose a turquoise color.
To change the default frame rate of 12 fps (frames per second), type 24 and click OK.
Another nice feature of Flash CS3 Professional is that you can have multiple documents open at the same time. They appear as tabbed panels at the top of the Document window. First, you'll need to create some content to navigate through.
Choose File > New to create a new document. Click OK to accept the default document type. Flash opens the second document.
Simply click the tab of the first document to return to it.
Choose the Rectangle tool in the Tools panel, and draw a rectangle on the Stage.
Choose the Selection tool in the Tools panel, and select the rectangle.
Choose Modify > Convert to Symbol. This opens the Convert to Symbol dialog box. Click OK to accept the default values.
Now double-click the symbol to enter symbol-editing mode. Notice that the edit bar updates to reflect where you are in relationship to the main Timeline and the Stage (see Figure 7).
Figure 7: When editing a symbol, return to the main Stage by clicking Scene 1 above the Document window.
Select this symbol and choose Modify > Convert to Symbol again. Click OK to accept the default values in the Convert To Symbol dialog box.
Double-click Symbol 1 to switch to symbol-editing mode for the new symbol. Notice the edit bar has updated again.
Now, to navigate around your Flash document, click the individual items in the edit bar, which act as a breadcrumb trail back to the Stage.
To return to the main Timeline, click Scene 1 or double-click outside the symbol on the Stage area. You can also click the Back arrow button on the left side of the edit bar to move back one level.
The edit bar offers a very convenient way to navigate around your Flash documents which, as many users know, can end up being very complex.
Where to go from here
For more information and additional tutorials, visit the Adobe Design Center.
Posts
