The Document Window

The Document window is the work table of your Flash project. This window tells you what document (.fla) is currently active and shows you where you are working in the project. When you open or create a new Flash file, a new Document window appears on the screen. You can have multiple files open simultaneously — click to move from one Document window to another. You have the option of choosing a document type from the Start Page (discussed earlier in this chapter; shown in Figure 4-1) or from the New Document dialog box invoked by the New File command: File ð New (Ctrl+N or z+N).

Tip 

If you prefer to bypass the New Document dialog box, you can create and open a basic Flash document in one step, by using the shortcut command Alt+Ctrl+N (or Option+z+N on a Mac).

Figure 4-15 shows the New Document dialog box for Flash Professional 8. The dialog box includes a General tab for opening Flash documents and a Templates tab for opening Flash documents with prebuilt elements that you can use as guides for designing specific kinds of presentations.

Figure 4-15: Use the New Document dialog box in Flash Professional 8 to create new documents or open template files.

In addition to the basic Flash document (.fla) file type available in Flash Basic, Flash Professional includes several specialized file types that can be opened from the General tab. These files give developers more options for application development and script editing.

Cross-Reference 

For more information on working with slides (a new file type introduced in Flash MX 2004), search Flash Help for the term "slides" or check out the most current documentation on the Macromedia Web site at:

• www.macromedia.com/support/documentation/en/flash/index.html#jsapi

Advanced authoring with Flash JavaScript and Flash Form applications is beyond the scope of this book, but if you want to take your Flash development to the next level, the Flash 8 ActionScript Bible by Joey Lott (Wiley, 2006) provides more information on these topics.

Controlling the Document Window

Even when you choose to hide all panels (F4), the Document window remains visible — closing the window will close your Flash project. On Macintosh, the Document window is always free-floating and can be moved anywhere onscreen by grabbing the top of the panel with your mouse, or scaled by dragging the size box in the lower-right corner. By default, on Windows, the Document window is maximized to fill the workspace and it cannot be scaled or moved independently, unless you first click the document Restore Down button (between the Minimize button and the Close button) in the top-right corner of the window (below the larger buttons that control the application). This will "free" the Document window from other panels in the program window so that you can move it around and scale it.

Flash 8 optimizes screen real estate and makes it easier to work with multiple documents by automatically grouping open Document windows into the same tabbed format used for panels. As you create new documents or open existing documents during a session in Flash, they will be added as sequential tabs along the top of the Document window. Click any tab to switch to a specific document, click and drag a tab to move it to a new position in the tab order, and click the small "x" icon to close a Document.

Tip 

If you prefer not to work with tabbed Document windows, you can turn off this new Flash 8 default setting by deselecting the first check box in the Preferences panel under the General category.

Tip 

If you need to see two tabbed Document windows side by side (to facilitate dragging items from one file to another or to compare two files), use the Duplicate Window command (Window ð Duplicate Window) to make a clone of an original document. Any changes made in the cloned window will also apply to the original file that will still be available in the tabbed main Document window. Duplicate Document windows are indicated by a colon after the name followed by a number (a duplicate of myFile would be labeled myFile:2 then myFile:3, and so on), but these numbers do not affect the saved file name. To make things less confusing, you can close the tabbed version of the document and keep the free-floating clone as your working version. Take note of the shortcut keys for this command if you use it often: Alt+Ctrl+K or Option+z+K.

The main reason you may want to alter the default placement of the Document window is to organize your panel layouts to suit a dual-monitor workstation. Although you can drastically change the size and location of the Document window, generally you will want it centered in your workspace and scaled to allow you to comfortably work with objects on the Stage. Figure 4-16 shows the Document window on Macintosh as it appears with default settings and with the Document Properties dialog box open.

Figure 4-16: The Document window as it appears with the Document Properties dialog box open

New Feature 

The Document Properties dialog box includes two helpful new fields for entering metadata for your published Flash files. Title and description information entered in Document Properties will be embedded in the published .swf file as metadata that will help search engines to find and catalog your Flash content. Unfortunately, this information is not automatically carried over to the .html file published from Flash.

The default document settings of Flash will automatically create new documents with a size of 550 x 400 pixels, a white background color, and a frame rate of 12. All of these attributes are displayed in the Property inspector and can be changed at any time. Clicking the Size button in the Property inspector launches the Document Properties dialog box where you can enter a custom size or use the Match options to automatically create a document that fits your current printer page settings (Printer), include all the elements you have placed into your document (Contents), or restore the default size setting (Default).

Tip 

If you wish to change the default settings for all new documents, invoke the Document Properties panel by clicking the Size button on the Property inspector or choosing Modify ð Document (Ctrl+J or z+J) from the application menu. After you have chosen the attributes you would like to assign to new documents, click the Make Default button at the bottom of the panel.

Reading the Document Window

The white Stage area is the central part of the Document window that becomes the visible area or "screen" of a published Flash movie (.swf). As we noted earlier, you can change the color and size of this "background" at any time, but it is best to establish these settings before you begin creating other elements.

The light gray Work area (also called the Pasteboard in Flash 8) that frames the Stage enables you to place elements into your project while keeping them out of the visible area. This is useful if you want to show only part of an element or animate it as it moves onto the Stage. A good example of the utility of the Pasteboard feature can be seen in some cartoons in which very large background artwork hangs off the Stage (or View area) until it's called upon or tweened through to create the effect of a camera pan. The Stage and the Pasteboard are always available in the Document window. The default panel layout also includes the Timeline docked at the top of the Pasteboard, because this is generally the most convenient place to use it.

Tip 

You can strip the Timeline panel out of the Document window and leave it free-floating, or you can redock it to the top or bottom of the Pasteboard. On Windows, you can also dock the Timeline to either side of the Pasteboard, but this is usually an awkward view.

The narrow bar located above the Stage and Pasteboard is referred to as the Edit bar (shown in context in Figure 4-16). This bar contains three icons and a value box that help you navigate within a document.

Tip 

When the Timeline is docked at the top of the Document window, the Edit bar appears above the Timeline by default. To move the Edit bar below the Timeline (where it appeared in Flash MX), hold down Shift+Ctrl (or Shift+z on Mac) and double-click the Edit bar. Repeat the same steps to move it back above the Timeline at any time.

Stage View Control

Although the scale value box is at the end of the bar, we will discuss it first because it can be useful even when you first begin putting artwork on the Stage. This value box, called the Stage View control, shows you the current scale of the Stage area and enables you to type new percentages or select a preset value from a submenu.

Note 

The view percentages are based on the pixel dimensions of your project, as defined in Document properties, and your screen resolution. For example, if your project size is 500 x 400 pixels and your screen resolution is 1024 x 768, then the Stage area would occupy almost 50 percent of your screen if view scale was set to 100 percent (Ctrl+1 or z+1).

The first three settings in the View submenu list are Fit in Window, Show Frame (Ctrl+2 or z+2), and Show All (Ctrl+3 or z+3); these settings will automatically scale your Stage view to fit your current Document window size in various ways. Fit in Window scales the Stage view to fill the current Document window without cropping the visible area. Show Frame sets the Stage view to a scale that fits the content of a frame in the Document window; if there is nothing on the current frame, the Stage view is set at a scale that shows the entire Stage area within the current Document window size. Show All sets the Stage view to a scale that includes any elements you have placed on the Pasteboard outside the Stage. You can find these same view options from the application menu (View ð Magnification).

There are two additional tools available in the Tools panel (see Figure 4-11), which will also control your view of the Stage and Work area within the Document window.

The Hand tool (H) allows you to move the Stage area within the Document window by "grabbing" it (clicking and dragging). Double-clicking the Hand icon in the Tools panel quickly gives you the same Stage view as choosing the menu item Show Frame.

Tip 

To toggle the Hand tool on while using any other tool, without interrupting your selection, hold down the spacebar.

The Zoom tool, or magnifier (Z, M), does just what the name implies — adjusts the scale of your Stage view. The available magnification range is between 8 percent and 2,000 percent. However, you can apply this handy tool in a few ways. With the Zoom tool active, clicking consecutively on the Stage will pull in closer to artwork with the Enlarge option (Ctrl+[+] or z+[+]), or move farther away with the Reduce option (Ctrl+[-] or z+[-] key). Each click adjusts the Stage view magnification by half. Pressing the Option or Alt key as you click toggles the Zoom tool between Enlarge and Reduce. Double-clicking the Zoom tool icon in the Tools panel always scales the Stage view to 100 percent (Ctrl+1 or z+1). One last way of applying the Zoom tool while it is active in the Tools panel is to drag a selection box around the area that you want to fill the Document window. Flash will scale the Stage view to the highest magnification (up to 2,000 percent), which fills the Document window with the selected area.

Edit Options

Now back to the other icons on the Edit bar. The location label on the top-left edge of the window shows you the current scene and what part of the project you are editing. The sequence of labels that displays in this area are sometimes referred to as breadcrumbs because these labels show the steps, or the path, leading back to the Main Timeline from the location you're editing. When in Edit mode, you can use these sequential labels to step your way back to the Main Timeline of the current scene, or click the arrow in front of the labels to return to the Main Timeline of the first scene in your project. To the right is the Edit Scene icon, and at the far right is the Edit Symbols icon. Click these icons to access menus of scenes or symbols in the current document that can be opened and edited within the Document window.

Using Scenes

The Scene panel (Shift+F2 or Window ð Other panels ð Scene) enables you to add, name, and sequence scenes. By default, when your Flash movie (.swf) is published, the scenes play in the order in which they are listed, as shown in Figure 4-17. Scenes can help to organize a Flash project into logical, manageable parts. However, with the increasingly robust power of ActionScript, there's been a trend among many developers to move away from scene-based architecture. Using individual Flash movies instead of scenes to organize sections of a project results in files that download more efficiently and that are easier to edit due to their modular organization. It's like the difference between one huge ball of all-purpose twine that's the size of a house, and a large drawer filled with manageable spools — sorted neatly according to color and weight.

Figure 4-17: The Scene panel showing document scenes in the order they will play back by default

Dividing logical project parts into separate documents also facilitates efficiency in team environments, where developers can be working on different pieces of a project simultaneously. Scenes can still be useful for organizing certain types of projects, such as simple presentations without a lot of graphics, or for animators who prefer to organize a cartoon in one file before handing it off for integration into a larger site structure.

Adding named anchor keyframes is another useful option for linear Flash presentations. These enable Forward and Back buttons in a Web browser to jump from frame to frame or scene to scene to navigate a Flash movie. For more on how to set and publish named anchor keyframes, refer to Chapter 20, "Making Your First Flash 8 Project."

Tip 

You turn the option of making the first keyframe in a new Scene a named anchor keyframe on or off in the Timeline section of the General Preferences panel (Ctrl+U or z+U).

Caution 

Named anchors work well on Windows browsers but almost always fail on Mac browsers, so this is not a reliable option for Web navigation within a Flash movie if you expect some visitors to your site to be using Mac systems.

To navigate and modify scenes from within the Document window:

• Click the Edit Scene button on the Edit bar and then choose the desired scene from the submenu.

• Navigate to a specific scene from the application menu with the View ð Go To command.

• To add a new scene, either use the Scene panel's Add button — indicated by the plus sign — or, from the Insert menu, use Insert ð Scene. New scenes will continue in the same autonumbering sequence started with Scene 1. Thus, even if you delete Scene 2, the next added scene will be named Scene 3.

• Use the Duplicate button on the Scene panel to make a copy of a scene, including all content on the scene's Timeline.

• To delete a scene, use the Scene panel's Delete button — indicated by the trashcan icon. (To bypass the alert asking if you want to delete the scene, use Ctrl+click or z+click.)

• To rename a scene, simply double-click the scene name within the Scene panel and type a new name. Using numbers in scene names will not affect playback order; the scenes will play from the top to the bottom of the list.

• To rearrange scene order, simply click and drag a scene to alter its position in the Scene panel list. You can use actions to direct the movie to access scenes outside the default linear order. For more about actions, refer to Chapter 18, "Understanding Actions and Event Handlers."

  Caution 

  Although scenes give you the visual impression of having a whole new timeline to work on, they are really continuations of the Main Timeline that begins in the first scene of your document. If you're using any actions to control your movie playback, it's important to avoid duplicate naming on frame labels or named anchors. Thus, even if it seems logical, it isn't a good idea to label the beginning of each new scene "intro," because you won't be able to differentiate these labels as easily for targeting with ActionScript.

Using Document Window Menu Options

There are several options available from the application menu that control display or editing in the Document window. These can be helpful when you're creating or placing elements on the Stage. All of these can be accessed from View on the application menu (notice the short-cut key combinations listed after most commands). The basic functions of these various commands are as follows:

• Goto: Leads to a submenu of scenes in the current movie, including four handy short-cuts to the First, Previous, Next, and Last scenes. This menu is also available from the Edit scene icon on the Edit bar in the Document window.

• Zoom In: Increases the scale of the Stage view by 50 percent.

• Zoom Out: Decreases the scale of the Stage view by 50 percent.

• Magnification: Leads to the same view options that are available in the Stage View Control on the top right of the Document window. Note that three of these options also have corresponding keyboard shortcuts.

• Preview Mode: Leads to a menu of various settings for rendering and displaying content in the authoring environment:

  • Outlines: Simplifies the view of elements on the Stage by showing all shapes as outlines, and all lines as thin lines. This option is helpful when reshaping graphic elements. It also speeds up the display of complex scenes and can assist in getting the general timing and sense of a movie. It is a global equivalent of the outline options available in the Timeline window for layers and frames.

  • Fast: Turns off both anti-aliasing and dithering to speed up the display. The default is off, to create the most accurate screen image, and it is only recommended that you turn this option on if you need to reduce demand on your processor.

  • Antialias: Dithers the edges of shapes and lines so that they look smoother onscreen. It can also slow the display, but this is only an issue with older video cards. This is actually a toggle in opposition with the Fast command: Turn this On and Fast goes Off.

  • Antialias Text: As with Antialias, this is also a toggle in opposition to the Fast command. It smoothes the edges of text only and is most noticeable on large font sizes. You can only have one Antialias option on at a time, so you can make a choice between smoothing text or smoothing shapes, depending on what content you're working with.

  • Full: Use this option for the most "finished" or high-definition preview. If you are working on intensive animation, it may slow down rendering of the display in the authoring environment.

• Work area: Makes the light-gray area that surrounds the Stage available for use — this is now called the Pasteboard, but the command in the Window menu didn't get updated before Flash 8 was released. When the Work area is visible, your Stage area will display centered in the Document window when you apply Show Frame or Show All. If the Work area (Pasteboard) has been turned off in the View menu, then the Stage will align to the top-left of the Document window.

  Caution 

  Items that are selected and offstage when View ð Work area is toggled off can still be deleted, even if they are not visible. So it's best if you don't have anything selected when you choose to hide the Work area (Pasteboard).

• Rulers: Toggles the reference Rulers (which display at the top and left edges of the Work area) on or off — use Modify ð Document (Ctrl+J or z+J) to change units of measurement. Rulers are a helpful reference for placing guides to align elements in a layout.

• Grid: Toggles visibility of the background Stage grid on or off. This grid does not export with the final Flash movie (.swf), but it does serve as an authoring reference. You can control the appearance of the Grid and the precision of grid snapping by adjusting the settings in the dialog box invoked with the Edit Grid command. When the Snap to grid option is active, it works even if the Grid is not visible. Edited Grid settings can be saved as the default by clicking the Save Default button, which enables you to have these setting as presets for all subsequent Flash movies.

  Note 

  The default Grid size of 18 pixels is equal to 0.25 inch. Grid units can be changed by entering the appropriate abbreviation for other units of measurement (for example: 25 pt, 0.5", 0.5 in, 2 cm, and so on) in the Grid Spacing entry boxes. Although the specified units will be applied to the grid, they will be translated into the current unit of measurement for the Ruler. Thus, if the Ruler is set to pixels, and the Grid units are changed to 0.5 in, then, on reopening the Grid dialog box, the Grid units will be displayed as 36 pix (because pixels are allocated at 72 pix = 1"). Changing Ruler units via Modify ð Document also changes Grid units.

• Guides: When Rulers are turned on, you can drag horizontal or vertical Guides onto the Stage from respective rulers. These four commands control the parameters of these Guides:

  • Show Guides: This is a simple toggle to either show or hide Guides that you have dragged out from the rulers.

  • Lock Guides: This is a toggle that either locks or unlocks all current Guides. This is useful to prevent Guides from accidentally being moved after you have placed them.

  • Edit Guides: This command invokes the Guides dialog box, where Guide Color and Guide-specific snap accuracy can be adjusted. Also included are check boxes for the other three Guide commands: Show Guides, Snap to Guides, and Lock Guides. This enables you to establish Guide settings and then click the Save Default button to have these settings as presets for all subsequent Flash movies. To delete all Guides from the Stage, press the Clear All button.

  • Clear All: The Clear All command gets rid of all visible guides in the current document. It does the same thing as the Clear All button in the Edit Guides dialog box.

• Snapping: Leads to a menu of various options for controlling snapping behavior in the authoring environment.

  Note 

  When Snap to Pixels is turned on, a 1-pixel grid appears when the Stage view is magnified to 400 percent or higher. This grid is independent of the Show Grid command.

• Hide Edges: Hides selection patterns so that you can edit items without the visual noise of the selection pixel "highlight." This only applies to currently selected items and allows a clean view without having to lose your selection. Most useful for seeing colors or fine lines that may appear visually distorted by the selection pattern.

• Show Shape Hints: This toggles Shape Hints to make them visible or invisible. It does not disable shape hinting. Shape Hints are used when tweening shapes.

  Cross-Reference 

  For more about Shape tweens (or Shape Morphing) refer to Chapter 11, "Timeline Animation."

• Show Tab Order: This is a toggle to turn on or off numbers that will mark the tab order set in the Accessibility panel for elements in the authoring environment.

Working with Flash Templates

The library of predefined Flash documents available in the Templates tab of the New Document dialog box (or in the Create from Template list of the Start Page) is a great starting point for creating many common Flash presentations. The templates shown in Figure 4-18 are listed in both Flash Basic and Flash Professional, but some of the templates can only be used in the pro version of the program.

Figure 4-18: The prebuilt templates that ship with Flash provide a good starting point for authoring many common Flash presentations.

To work with a Flash template, open it as you would any other Flash document. You can then add your own content to the Stage or modify the Timeline following the guides in the template and save the finished document with a new name.

Cross-Reference 

For descriptions of each of the available templates, do a search for "Using templates" in the Flash Help panel.

You can also create your own reusable template from any Flash document by choosing File ð Save As Template. Before the template is saved, you are given options for naming, assigning a category, and description — making it easy to manage a whole library of custom templates. The preview visible for each template is actually just the content on the first frame of the template document. In some cases, this does not provide much visual information for how the template might be used. If you use templates often or if you create your own templates, you may find it helpful to modify the default previews to make them more informative.

Tip 

Although each template type has a different file structure and may contain different content, the preview for any template will include only the visible content in the Stage area on the first frame of the template file. Changing the content in the first frame of a template file will also change the preview for that template.

Tip 

The standard directory path for the Templates folder on Windows is:

 C:\Program Files\Macromedia\Flash 8\(language)\ Configuration\Templates 

The standard directory path on Mac is:

 HD/Applications/Macromedia Flash 8/Configuration/Templates 

Web Resource 

If you are interested in creating custom template previews, visit www.flashsupport.com/archive to find Bill Perry's tutorial and example files from the Flash MX 2004 Bible.