Whether you've been using Flash since the early days of version 2, or you've just opened the program for the first time, you can quickly see that the Flash interface has finally matured — enough to remain recognizable from one release to another! As Flash has grown and evolved, the interface has been through a number of variations, but Flash CS3 continues to build upon the streamlined panel system that was introduced with Flash MX. One of the most obvious UI changes in CS3 is the implementation of a true tabbed panel system consistent with other Adobe applications. Some small but significant modifications have also been made to the look and function of common tools, menus, and panels. We cover them as we discuss workflows for specific tasks throughout the book.

In Flash 8, Macromedia focused on expressiveness as much as on efficiency, and as a result, Flash helps users at all levels to be creatively inspired. With Flash CS3, Adobe maintains the creative features of the previous version while fine-tuning performance and taking ActionScript to the next level (AS3), making this the most balanced and powerful release yet. Some of the most significant changes in Flash CS3 are hinted at in the interface, but we give you a peek under the hood in this chapter.

The Start Page (shown in Figure 4.1) gives you quick access to tutorials and other help features and provides a handy way to choose the file you want to open or create.

By default, the Start Page should appear when you first launch Flash and any time you close all Document windows while the program is running. After you have opened or created a new file, the Start Page automatically closes to make room on your desktop. If you prefer not to use the Start Page, select the Don't show again check box at the bottom of the panel, or change the settings for On launch in General Flash Preferences (Edit

The links at the bottom of the Start Page connect you to the built-in Help system in Flash as well as to online content available through the Adobe Web site. These links are worth investigating if you want to get a quick introduction to Flash.

Figure 4.1. The Start Page provides quick access to file lists, templates, and resource links.

One of the most useful links in the Start Page is to Macromedia Flash Exchange (under the Extend title). If you are connected to the Internet, you can browse the Flash Exchange for helpful tools and add-ons that Flash developers have made available through Adobe's site.

The options listed under the Create New title in the Start Page have changed since Flash 8. The options for creating a Flash Document, Flash Slide Presentation, or Flash Form Application have been replaced with options for three different types of Flash file. Each type targets a different version of ActionScript:

If you select more or any of the other options listed under Create from Template in the Start Page (or use the application menu to select File

The Flash Help menu is your gateway to local versions of the documentation and examples on Adobe's support site. You can browse or search a listing of available Help topics and use the drop-down menu to choose the "books," or categories of Help content you want to view. An accordion divider separates the main reference content from the table of contents (or book listings) that will expand or collapse to show sublistings as you use the control icons at the top of the panel. You can also navigate books and subcategories using the expand and collapse arrows on the left edge of the book list. To adjust the division of the book list and the content area (shown in Figure 4.2), simply hover over the dividing line until you see a dual arrow cursor; then drag the divider until you're happy with the panel split.

Figure 4.2. The Flash Help panel includes a drop-down menu to help you sort a list of reference categories or "books" and a search field to find content on specific topics.

If you don't want to muddle around in the Help panel, the Flash application Help menu offers quick shortcuts to commonly used reference content. Unless you've removed the help files from your Flash installation, you can access a number of offline resources directly from the Help menu. These resource topics will launch the Help panel and load the offline HTML content you have requested. First, have a look at the What's New in Flash CS3 link to get an overview of the new features. Next, if you're a new user, you may want to browse the video tutorial content for Flash (along with other Creative Suite 3 products) in the Adobe Video Workshop that is available on the CD provided with your Flash product package or online at www.adobe.com/designcenter/video_workshop/about.html

Adobe has also included guided entry points to a vast array of online resources. The Flash Exchange is an online resource created to support use and development of Flash extensions. It is a great place to look for new tools, components, and effects that you can download and add to your Flash toolkit. The Flash Support Center is Adobe's primary vehicle for the distribution of up-to-date information about Flash and Flash-related topics. It is a searchable area with current (and archived) articles on many Flash topics. You can also find links to downloads, documentation, forums, and many other invaluable Flash-related resources and updates. Use Help

Before discussing the various Flash menu items, panels, and miscellaneous dialog boxes that you can use to control and customize your workspace, we begin with a look at the interface with its default array of toolbars and panels as they appear on Macintosh and Windows. Use the application menu to select Window

Thanks to some Adobe magic, the Flash UI finally works in the same fluid way as other programs in the CS3 Suite. The old Macromedia UI has been polished into a flexible system of panels that can be docked individually or easily arranged into tabbed groups that can be expanded or collapsed as needed. The implementation of panels is consistent across both Mac and Windows. Throughout the book, we discuss each panel in context with the tools and tasks where it is used. As you'll quickly find, there are many ways to arrange these panels for a customized workflow. Your preferred panel layouts for different tasks can be saved as custom Workspace layouts and recalled from the Workspace menu.

Figure 4.3 shows how the default layout (Window

Along with the default Workspace layout, Flash CS3 ships with two space-saving presets that load the main panels as a condensed docked group with cool new graphic icons, shown in Figure 4.4.

Figure 4.3. The default layout for Flash CS3 as it appears on Macintosh OS X

Figure 4.4. The new graphic panel UI that loads when you select Window

Workspace

Icons and Text Default

The Mac version now has the same docking functionality as Windows. Note that the Tools panel docks only to the sides of the screen, while most other panels can dock to any edge of the screen or with other panels. To prevent docking while you are moving panels, press the Control key while dragging.

For clarity, we have capitalized terms that refer to specific Flash interface features such as Document window, Stage, Timeline, Tools panel, and Options area. You may see these words lowercase in other parts of the text, where they are used as general terms rather than as labels for specific parts of the Flash interface.

We describe the actual uses and options for most of these various interface elements in the context of where the elements are applied. To get started with Flash, we introduce the Property inspector, Tools panel, Document window, Scene panel, Timeline, and Controller, along with the related menu items. We discuss the remainder of the panels and windows, and how they are used, in chapters on drawing, animation, interactivity, and other specific production topics.

The Property inspector is a centralized place to access most common options for various authoring items. You can select or modify many options directly in the Property inspector, but for some items, buttons appear that you can use to launch additional menus or dialog boxes. Generally, you will only need to access separate panels for a few specialized editing tasks. Figure 4.5 shows how the Property inspector changes to display options relevant to the currently selected item.

The top figure shows the Property inspector (collapsed), as it appears when the PolyStar tool is active (selected in the Tools panel) — displaying Stroke and Fill colors and options, buttons for launching Settings dialog boxes for line styles and tool options, and the icon for launching the Help panel. The bottom figure shows the Property inspector (expanded), as it appears when a Button symbol instance is selected on the Stage — displaying instance properties and options. The launcher icon for the Help panel is still available, and icons for launching the Actions panel and the Accessibility panel are also visible when the Property inspector is expanded.

Notice the tabs at the top of the Property inspector for switching between Properties, Filters, and component parameters. We explain the applied uses of these tabs in later chapters where we introduce Filters and components in more detail. For now, all you need to know is that you can use the Filters tab to apply and sort Filter effects and use the Parameters tab to access component parameters in the Property inspector.

Depending on what is currently selected, the Property inspector will display relevant attributes for a document, frame, symbol instance, component instance, shape, or text box. Pop-up menus and editable value fields make it quick and easy to make changes without hunting through panel sets or the application menu. As shown in Figure 4.5, when an element is selected that can have code attached to it, a gray arrow appears on the right edge of the Property inspector. Clicking this icon launches the Actions panel for editing code on individual frames or symbol instances.

Figure 4.5. The Property inspector, as it appears when the PolyStar tool is active (top), and when a Button symbol instance is selected (bottom)

Because the Property inspector and the Tools panel provide access to all tool options (with the exception of some drawing and text attributes that are adjusted in the Preferences window), there are only four panels that you might need to open separately for additional options while drawing and editing graphics on the Stage. They are Color, for adding alpha, gradients, and custom colors; Align, for accurately arranging elements in relation to each other or to the Stage; Transform, for quickly making exact size or rotation adjustments; and History, for tracking or changing your edits. You can optimize this simple setup even further by sorting panels into custom stacked or tabbed groups, as we describe in the next section.

As in many other programs, you will find Flash contextual menus pop up in response to a right-click on a selected item in the Timeline, Library panel, or on the Stage. (Control+click for the Mac if you don't have a two-button mouse.) Contextual menus duplicate most functions and commands that are accessible either through the application menu or through the various panels and dialog boxes, which we discuss in this chapter. Because contextual menus show you only those options relevant to the element you have selected, they provide a handy authoring shortcut that can also help you get familiar with Flash.

The awkward group and ungroup workflow that was introduced in Flash 8 has been replaced with a clean and intuitive panel system that is consistent with other Adobe Creative Suite programs. You can drag and drop individual panels to create vertical stacks or horizontal tabbed groups that will maximize your workspace while keeping options handy. Figure 4.7 shows a tabbed panel group, a panel stack, and a free-floating panel.

Figure 4.7. Tabbed panel groups (left) are more space efficient than stacked (center) or individual floating panels (right).

Grouping panels for tabbed access is more space efficient than just docking panels to the sides of your work space or stacking panels vertically, but you will probably still want to stack some panels or panel groups to keep your workspace orderly. To group, dock or stack panels, follow these steps:

Unstacking or undocking panels is easy: Just click the top gray area and drag to pull any panel away from the other panels in a stack and make it free-floating.

Prior to Flash 4, only one area of the application required users to pay attention to focus — when they were selecting colors for either the stroke or fill — because it was easy to confuse the two. As the interface has grown to include more panels and windows that can be active at different times within the Flash environment, focus has become an important aspect of the program. What is focus? Focus is a term used to describe which part of the application is active, or has priority, at a given time. For example, all panels, such as the Actions panel, do not automatically "have focus" — this means that you have to click within the panel to begin working there. Similarly, to return to the Document window or Stage to edit an element, you must click there to return focus to that aspect of the application. The Property inspector can actually remind you what area or element is active because it displays the attributes of the currently active item. Otherwise, if a panel or dialog box doesn't seem to respond, just remember to focus on what you're doing.

Whether you have chosen a layout from the Window menu (Window

To save your current panel layout as a custom set that can be accessed from the Workspace menu the next time you open Flash, follow these simple steps:

Deleting or renaming Workspaces is easy. Select Window

Figure 4.8. The dialog box for managing saved Workspace layouts makes it easy to delete or rename your custom layouts.

Do you really love your custom layout? You can save Workspace layouts just as you would project files in order to share them with other people or take them with you when you upgrade to a newer version of Flash (or move to another machine). When you want to add them to your current version of Flash, just place the files in the Workspace Layouts folder and they'll appear in the menu, ready for you to use. The only limitation is that Workspace Layout files cannot be shared between the Mac and Windows versions of Flash.

Workspace layouts are stored in a folder on your hard drive. Once you find the Workspace folder you can either add or delete any of these files and the Workspace menu in Flash will update to show only the files that you currently have saved there.

Keyboard shortcuts enable you to work more quickly because you avoid the hassle of clicking through a menu to activate a feature with your mouse. This is a workflow trick that many people use even when working in text-editing applications. Instead of browsing to the Edit menu to find the Copy command, you can just press the key combination Ctrl+C (or

A default set of keyboard shortcuts is available without having to change any settings, and these shortcuts are listed after most commands in the various application menus. However, if you would like to use different shortcut keys for certain tasks or add a new shortcut key for a custom Panel group or tool, you can make changes to the default settings in the Keyboard Shortcuts dialog box shown in Figure 4.9 (Edit

Figure 4.9. The Keyboard Shortcuts dialog box as displayed on Mac OS X. The appearance is slightly different on Windows, but the options available are the same.

As shown in Figure 4.9, the Keyboard Shortcuts dialog box enables you to customize your Flash keyboard shortcuts to maintain consistency with other applications or to suit a personalized workflow. Not only can you choose keyboard shortcuts developed from other applications, but you can also save your modifications and custom settings. A full explanation of this dialog box follows.

You can find the Keyboard Shortcuts dialog box in the application menu (Edit

The Tools panel cannot be scaled or minimized like other panels, but it can be set to display as one vertical stack of icons (long view) or as a double-wide stack (short view) by clicking the small arrow toggle at the very top left of the panel. It can also be hidden (and unhidden) along with other panels by choosing Window

If you would rather not see the tooltips that display when tool icons are pointed to in the Tools panel, you can turn them off in your General Preferences. (In OS X, go to Flash

The Tools panel contains all 17 Flash tools (see Figure 4.10 for tool icons and shortcut keys), as follows from left to right and top to bottom: Selection (arrow), Subselection, Free Transform (with Gradient Transform in the submenu), Lasso, Pen, Text, Line, Rectangle (with other shape tools in the submenu), Pencil, Brush, Ink Bottle, Paint Bucket, Eyedropper, and Eraser. The Flash View tools: the Hand and Zoom are below the drawing tools. Beneath the View tools is the Color area, with swatches for assigning Stroke color and Fill color, and buttons for Black and White, No Color, and Swap Color (to reverse stroke and fill colors). The last section of the Tools panel is the Options area, where some of the available tool modifiers appear for any active tool.

Depending on the tool selected, the Options area may display some of the options, or properties, that control the functionality of that particular tool, while other controls may appear in the Property inspector or in a panel that launches separately. Of the options located in the Options area, some appear as submenus with multiple options, while others are simple buttons that toggle a property on or off. (For example, if the Lasso tool is selected, the Magic Wand option can be turned on or off by clicking a toggle button in the Options area.) If an option has more than two settings, these are generally available in a submenu.

Many of the options that appear within the Options area of the Tools panel can also be accessed from the Property inspector, from the application menu, or with keyboard shortcuts.

All the tools accessed from the Tools panel have keyboard equivalents, or shortcuts, that are single keystrokes. For example, to access the Selection tool — which is the tool with the black arrow icon, located in the upper-left corner of the Tools panel — you can simply press the V key when the Stage or Timeline is in focus. Thus, the V key is the keyboard shortcut for the Selection tool on both Mac and Windows. This is faster than moving the mouse up to the Tools panel to click the Selection tool, and it saves mouse miles on repeated tasks. To help you learn and remember shortcuts, throughout this book when we mention a new tool, the keyboard shortcut for that tool follows in parentheses, like this: Selection tool (V).

Figure 4.10. The Mac Tools panel is shown here in long view with the keyboard shortcuts for each tool. Aside from system display characteristics and docking behavior, the Tools panel is identical on both Mac and Windows.

Because the Tools panel is the most convenient place to store and access drawing tools, Adobe has provided a user-friendly interface that makes it possible to add, delete, or rearrange the tools (and icons) that appear in the Tools panel. Open the dialog box shown in Figure 4.11 by choosing Edit

The PolyStar tool is a good example of how you can store new tools that you want to use in Flash. The PolyStar tool was added to Flash MX 2004, and unlike the original Flash Oval tool and Rectangle tool, it did not get its own square in the Tools panel. The PolyStar tool had to move in and share a square with the Rectangle tool. The PolyStar icon is only visible in the Tools panel when the tool has been selected from the drop-down menu triggered by clicking and holding the Rectangle tool icon. Any tool square that has more than one tool stored in it will display a small black arrow below the currently active tool to indicate that a drop-down menu is available. By default, the tool icons will appear in the drop-down list in the order that they are added to the Current selection list in the Customize Tools Panel dialog box. The first tool added to the list will show up in its assigned square in the Tools panel unless one of the other tools in the same square is selected from the drop-down menu. The most recently selected tool in any square will be visible until Flash is restarted or another tool is selected from the same square.

Figure 4.11. Use the Customize Tools Panel dialog box to add or rearrange the tools available in the Tools panel.

All assigned tool shortcut keys remain mapped to individual tools and can be used to activate a specific tool regardless of which square the tool is stored in. If all of the tools are removed from a square, that space on the Tools panel is left blank. Thanks to the Restore Default button in the Customize Tools Panel dialog box, you can have fun moving, grouping, or even deleting tools from different tool squares with the knowledge that you can always go back to the original layout. To illustrate the steps for adding a new Flash tool and storing it in the Tools panel, we have included a brief tutorial on a custom Grid tool developed by Joey Lott.

Adding New Tools to Flash, by Joey Lott

Authors' Note: Although it is beyond the scope of this book to describe the steps involved in actually scripting your own custom tools for Flash, we can tell you how to use custom tools that other developers have made. Joey Lott has generously agreed to let us include the code for one of his Flash tools on the CD-ROM. This brief tutorial is adapted from Joey's notes on how to install and use his "Grid" tool. We hope you will be able to follow these same steps to use other custom tools available from Adobe or from generous developers in the Flash community.

The first step to using a custom tool is to find the files that Flash needs to make the tool work in the authoring environment and the icon that will be visible in the Tools panel. Unless you happen to know some brainy coders, the best place to look for new custom tools is in the Flash Exchange area of Adobe's site (www.adobe.com/exhange).

The three files you will want to find and download are as follows:

• An XML file that describes the functionality of the tool and controls any "settings" that can be used to modify the final result

• A JavaScript-Flash file (.jsfl) that implements required methods for manipulating the Flash authoring tool based on parameters specified by the XML file

• A .png file that will appear in the Tools panel as the icon for the custom tool

Note

We have included Grid.xml, Grid.jsfl, and Grid.png on the CD-ROM in the CustomTool subfolder of the ch04 folder.

You have to save these files in your Flash CS3 Tools folder so that the tool can be applied in the authoring environment.

• The standard directory path on Windows is:

  C:Documents and Settings(username)Local SettingsApplication DataAdobeFlash CS3(language)ConfigurationTools

• The standard directory path on Mac is:

  HDUsers: (username)LibraryApplication SupportAdobe
  Flash CS3(language)ConfigurationTools

After the three files for the Grid tool are saved to the Tools folder, the Grid tool is added to the list of available tools in the Customize Tools Panel dialog box.

The steps for adding the Grid tool icon to a square on the Tools panel are the same as those used to assign any other tool to a specific location in the panel:

1. Open the Customize Tools Panel dialog box (Edit

   

2. Select a location square on the Tools panel preview on the left side of the dialog box, select the Grid Tool from the list of Available tools, and click the Add button. (As shown in Figure 4.12, we chose to add the Grid Tool to the Line Tool square.)

3. Click OK to apply your changes and close the dialog box.

   

   Figure 4.12. Any tool added to the Tools folder — by saving the relevant .xml, .jsfl, and .png files there — will appear in the Available tools list in the Customize Tools Panel dialog box.

Now that the Grid tool icon has been added to the Tools panel, you will be able to select it from the square that you chose to store it in. As with the PolyStar tool, you will notice that when the Grid tool is active, an Options button appears in the Property inspector. Use this button to launch the Tool Settings dialog box (shown in Figure 4.13) where it is possible to control the number of rows and columns that you want to draw with the Grid tool.

Figure 4.13. After they have been added to the Tools panel, custom tools and options can be used as easily as other standard Flash tools.

After you choose settings for the grid and click OK to close the dialog box, you can draw a grid as easily as you would draw a rectangle with the Rectangle tool: Click the Stage and drag horizontally to create width and vertically to create height — the live preview lets you see how the grid looks before you release the mouse. You can select individual lines in the final vector grid, modify them with other drawing tools, group the lines, or convert them into a reusable symbol. This is a simple tool, but it creates perfect grids every time and saves you time and mouse miles, too!

Let's hope there will be many more useful and creative tools available that will open new possibilities for your Flash designs. You can continue to save other custom tool files to your Tools folder, and they will be added to the Available tools list in the Customize Tools Panel dialog box.

Warning

Obviously, it would be a big mistake to save a custom tool file to your Tools folder if it had the same name as an existing tool. Unless you want to overwrite existing Flash tools, make sure you're using unique names for any custom tools that you add. If you'd rather not change the name of a tool, simply add a unique number to the tool name to avoid overwriting other files with the same name.

You can remove tool icons from the Tools panel at any time without actually deleting the files stored in the Tools folder, but if you decide you don't need a tool anymore, or if your available tool list gets too cluttered, simply remove the relevant .xml, .jsfl, and .png files from the Tools folder (save them somewhere else if you liked the tool, trash them if you didn't).

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 CS3 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 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

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.15 shows the Document window on Macintosh as it appears with default settings and with the Document Properties dialog box open.

Figure 4.15. The Document window as it appears with the Document Properties dialog box open

The default document settings of Flash will automatically create new documents with a size of 550 × 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

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) that frames the Stage enables you to place elements into your project while keeping them out of the visible area. This feature 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.

The narrow bar located above the Stage and Pasteboard is referred to as the Edit bar (shown in context in Figure 4.15). This bar contains 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 below the Timeline by default. To move the Edit bar above the Timeline hold down Shift+Ctrl (or Shift+

Stage view control

Although the scale value box is at the end of the bar, we 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 × 400 pixels and your screen resolution is 1024 × 768, then the Stage area would occupy almost 50 percent of your screen if view scale was set to 100 percent (Ctrl+1 or

The first three settings in the View submenu list are Fit in Window, Show Frame (Ctrl+2 or

• 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

  

There are two additional tools available in the Tools panel (see Figure 4.10), which will also control your view of the Stage and Pasteboard 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

The Scene panel (Shift+F2 or Window

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.

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

Figure 4.16. The Scene panel showing document scenes in the order they will play back by default

To navigate and modify scenes from within the Document window:

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 shortcut key combinations listed after most commands). The basic functions of these various commands are as follows:

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 good starting point for standard Flash presentations. (See Figure 4.17.)

Figure 4.17. The prebuilt templates that ship with Flash provide a good starting point for authoring simple 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.

You can also create your own reusable template from any Flash document by choosing File

C:Program FilesAdobeFlash CS3(language)ConfigurationTemplates

HD/Applications/Adobe Flash CS3/Configuration/Templates

On both Macintosh and Windows, the default position for the Timeline is docked at the top of the Document window, which is often the most logical place to put it. If you don't see the Timeline when you open Flash, go to Window

You can always adjust the position, size, and shape of the Timeline to suit your workflow. You can dock the Timeline to any edge of the Document window, but you cannot group it with other panels. You can, however, move it anywhere as a floating window, even exile it to a second monitor — leaving the Document window all for the Stage and Pasteboard.

The Controller (Window

Warning

Playback speed within the document (.fla) is not as accurate as it is in the movie file (.swf), so the Controller is not intended as a replacement for the Test Movie command (Control

As you can see in Figure 4.18, the buttons on the Controller will be familiar to anyone who has used a remote control. The only special function to note is that the Play button toggles to start and stop; you don't have to use the Stop button.

Figure 4.18. The Controller showing callouts for the buttons as they are used to control movement of the Playhead

The Timeline graphically orders Flash content across two dimensions — time and depth — and provides you with some options for how this content is displayed on the Stage and within frames on the Timeline.

www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14437.

Timeline window features

Figure 4.19 shows the Timeline window, as it appears when it is undocked or floating. The various controls of the window interface are labeled here, but we defer detailed explanations of some of these controls to the drawing and animation chapters where we show you how they are applied.

Figure 4.19. The floating Timeline window with callouts showing the principal features and control elements

As shown in Figure 4.19, the principal features and controls of the Timeline are:

Window features

• Timeline (panel): More than one Timeline tab can be opened and displayed in the Timeline panel at the same time. Individual Timeline tabs can be closed by using the "x" icon on the tabs or the entire Timeline window can be minimized or closed using the controls on the top-right corner of the Timeline panel.

• Timeline header: The Timeline Header is the ruler that shows frame numbers and measures the time of the Timeline — each tick is one frame.

• Playhead or Current frame indicator: The red rectangle with a line extending down through all layers is the Playhead. The Playhead indicates the current frame. Drag it left or right along the Timeline to move from one area of the Timeline to another. Push it beyond the visible area to force-scroll the Timeline. You can also drag the Playhead at a consistent rate for a preview of your animation; this is called "scrubbing the Timeline."

Tip

On Windows, if you have a mouse with a scroll wheel, you can scroll up and down through the layers, or by holding down the Shift key while you scroll, you can move the Playhead forward and backward along the Timeline. If all of your layers (or layer folders) are already visible in the Timeline window, then the scroll wheel will just scroll you forward and backward along the Timeline without moving the Playhead.

Layer controls

• Active layer icon: To make a layer active, either click the layer's name, or select a frame or group of frames. Then the pencil icon appears, indicating that the layer is now active. That's in addition to this more obvious clue: The Layer bar of the active layer is a darker gray than that of inactive Layer bars. Although you can select multiple layers or content on multiple layers, only one layer will be marked as active at a time. For more about frame selection and editing behaviors, please see the section "Editing frames and layers," which follows this one.

• Show/Hide layer toggle: Click the dot beneath the eye icon to hide the contents of a layer from view on the Stage. When the layer is hidden, a red X appears over the dot. To return the layer to visibility, click the X. To hide or show all layers at once, simply click on the eye icon directly.

  Warning

  Hidden layers do export, and any content on the Stage within a hidden layer will become visible upon export. Even if the content is offstage and not visible, it may add considerably to the file size when a Flash movie (.swf) is published, so you should save your document (.fla) and then delete these layers or convert them to Guide layers before your final export.

• Lock/Unlock layer toggle: This toggle locks or unlocks the layer to either prevent or enable further editing. When the layer is locked, a padlock icon appears over the dot. To lock/unlock all layers at once, click directly on the lock icon.

• Outline Layer toggle: This toggles the colored layer outlines on or off. When on, the filled square icon changes into an outline, and all elements in that layer appear as colored outlines in the Document window. The outline color for the layer can be changed with the Outline Color control of the Layer Properties dialog box, which can be accessed by double-clicking the square Outline color icons in the layer stack or by choosing Modify

  

• Frame View options: This button, at the far-right end of the Timeline, accesses the Frame View options menu, which affords many options for the manner in which both the Timeline header and the frames are displayed.

• Add layer: Simply click this button to add a new layer above the currently active layer. By default, layers are given sequential numeric names. Double-click the layer name in the Layer bar to change the name. Click and drag any part of the Layer bar to move it to a new position in the stack, or drag it on top of a folder layer to place it inside the folder.

• Add Motion Guide layer: Motion guide layers are used to move elements along a path. This button adds a Motion guide layer directly above (and linked to) the currently active layer. To learn about using Motion guide layers, refer to Chapter 13, "Applying Layer Types."

• Add Layer folder: This button enables you to create folders for storing groups of layers. New folders will automatically be placed above the currently selected layer and labeled in the same number sequence as layers. They can be renamed or moved in the same way as other layers.

• Delete layer: This button deletes the currently active layer, regardless of whether it is locked. Flash always retains one layer in the Timeline, so if you only have one layer in your document, you can't delete it unless you add another layer to the Timeline.

Tip

Because using the Delete key on your keyboard does not remove an active layer or folder, but rather removes all of the content from those frames, it can be helpful to get in the habit of right-clicking (Windows) or Control+clicking (Mac) a layer that you want to remove, and choosing Delete from the contextual menu. You can always click the trash icon to dump a selected layer or folder, but sometimes the contextual-menu click is a work habit that can be easily applied.

Frame controls

• Center frame: Click this button to shift the Timeline so that the current frame is centered in the visible area of the Timeline.

• Onion skin: This enables you to see several frames of animation simultaneously.

• Onion Skin outlines: This enables you to see the outlines of several frames of animation simultaneously.

• Edit Multiple frames: In general, Onion skinning permits you to edit the current frame only. Click this button to make each frame between the Onion Skin markers editable.

• Modify Onion markers: Click this button to evoke the Modify Onion Markers pop-up. In addition to making manual adjustments, you can use the options to control the behavior and range of Onion skinning.

Note

Onion skinning is further described in Chapter 11, "Timeline Animation."

Timeline Status displays

• Current frame: This indicates the number of the current frame.

• Current rate: This indicates the frame rate of the movie, measured in frames, or frames per second (fps). The program default of 12 fps is usually a good starting point. Ideally, you should do some testing in the final playback environment before deciding on an optimal frame rate. You can double-click the Frame Rate Indicator to invoke the Document Properties dialog box (Modify

  

  Note

  The fps setting is not a constant or absolute — it really means "maximum frame rate." The actual frame rate is dependent upon a number of variables, including download speed, processor speed, and machine resources; these are variables over which you have no control. However, another factor, over which you do have control, is the intensity of the animation: Complex movement with multiple elements or many layers of transparency is more processor intensive than simple movement. Previewing real-world playback speed at different frame rates — on various machines — early on in your development process is very important.

• Elapsed time: This indicates the total movie time, measured in seconds (or tenths of a second), which will elapse from frame 1 to the current frame — provided that the movie is played back at the optimal speed.

After you learn to recognize the visual conventions of the Timeline and how it displays different types of frames, you will be able to learn a lot about what is happening in an animation just by reading the Timeline. Figure 4.20 illustrates the Flash conventions for frame and layer display.

Figure 4.20. Flash Timeline conventions for naming and display of various frame and layer types

The Timeline features noted in Figure 4.20 are defined as follows:

Frame specifics

The Timeline might look a bit chaotic or confusing at first but there are a lot of cues to help you keep track of the content of your file. Empty keyframes are marked with an empty circle (white dot), the last frame of a span is marked with the empty bar icon, and keyframes with content are marked with a filled circle (black dot).

Flash MX 2004 introduced the option of using either Flash 4 or Flash 5 frame-selection behavior. In Flash 4, individual frames could be selected just by clicking them, even if they were part of a span (a series of frames following a keyframe). With Flash 5, Span-based selection was introduced as the default behavior — all the frames in a span would be selected just by clicking one frame. Since Flash MX, the default has gone back to Flash 4 selection style, but double-clicking a frame selects a span. For the option of going back to the Flash 5 selection style, go to Edit

Tip

Although double-clicking a frame in the default selection style will select a span of frames, if the span is moved, it will automatically extend along the Timeline until it meets another keyframe. This can be helpful or annoying depending on what you are trying to accomplish. With Span-based selection behavior enabled, when you relocate a span, it does not auto-extend and the original span length is preserved.

So that you can better understand the various frame-editing options available, we have listed them here with notes on the ways you can accomplish your intended result. Some of the methods differ depending on whether you have enabled Span-based selection as we described previously. For users of previous versions of Flash, this may take a little getting used to. For new users, deciding on a preference will be a matter of testing out both selection style options. The default methods are listed here first, followed by the methods that differ when Span-based selection is turned on.

The default Flash CS3 selection methods are as follows:

• Selecting frames: The methods for selecting single frames and spans of frames have not changed since Flash 8.

  • Frame spans: To select a span of frames extending between two keyframes, double-click anywhere between the keyframes.

  • Single frames: To select a single frame within a span, or a keyframe outside of a span, simply click to select it.

  • Multiple frames or spans: To select multiple frames along the Timeline (within a span or independent of a span), click and drag in any direction until you have selected all the frames you want to include in the selection. You can also use Shift+click to add to a selection of frames.

  Note

  The difference between selecting a frame by dragging over it, and moving a frame by selecting it and then dragging can be hard to differentiate. At first, you may find yourself moving frames that you only wanted to select. The trick is to be sure that you don't release the mouse after you click a frame before you drag to select other frames. Conversely, if your intention is to move a frame or a series of frames, you have to click and release the mouse to select them first and then click again and drag to move them.

• Moving frames: Select the frame(s) that need to be moved and then drag them to the new location.

• Extending the duration of a span: There are two ways to change the duration of a span, which is the same result as inserting frames (F5) or removing frames (Shift+F5) after a keyframe. To change where a span begins, select the keyframe and then drag the keyframe to the position where you want the span to begin. To change where a span ends, Ctrl+click or

  

  Note

  If you click and drag any nonkeyframe (frame or endframe) without pressing the Ctrl key (or the

  

• Copying frames: Select the frame(s) that you want to copy. Choose Edit

  

• Pasting frames: Select the frame where you want the copied or cut frames to be inserted (Flash automatically adds frames or layers below and to the right of the selected frame to accommodate the pasted content), and choose Edit

  

  Warning

  Edit

  

• Inserting frames: Select the point at which you would like to insert a new frame, and select Insert Frame (F5) from the contextual menu or from the application menu (Insert

  

• Inserting keyframes: Select the point at which you would like to insert a new keyframe, and select Insert Keyframe (F6) from the contextual menu or from the application menu (Insert

  

• Inserting blank keyframes: Select the point at which you would like to insert a new blank keyframe, and select Insert Blank Keyframe (F7) from the contextual menu or from the application menu (Insert

  

  Note

  If you already have content in the current layer and you insert a keyframe, a new keyframe will be created that duplicates the content of the endframe immediately prior. But if you insert a blank keyframe, the content of the prior endframe will cease and the blank keyframe will, as its name implies, be void of content.

  Note

  For a hands-on example of frame-based Timeline editing, refer to the file frames_example.fla in the ch04 folder of the CD-ROM that accompanies this book.

• Removing frames (to shorten a span): Select the frame(s) that you want to remove, and then choose Remove Frames (Shift+F5) from the contextual menu or from the application menu (Edit

  

• Clearing a keyframe: To remove a keyframe and its contents, select the keyframe and choose Clear Keyframe (Shift+F6) from the contextual menu or from the application menu (Modify

  

• Cutting frames (leaves blank frames or keyframes): To replace selected frames in a span with blank frames, while keeping content in the remainder of the span intact, select the frame(s) you want to "blank" and then choose Cut Frames (Alt+Ctrl+X on Windows or Option+

  

  Warning

  Selecting a frame or keyframe and using the Delete key will remove the content from the entire span, but will not remove the keyframe itself, or change the length of the span. You can delete content from multiple layers this way, but it will leave all the empty frames and keyframes on the Timeline.

  Tip

  Flash MX 2004 introduced a command called Clear Frames (Alt+Delete or Option+Delete). This is a flexible command that will eliminate the content on a selected frame, keyframe, or span of frames without changing the number of frames in a span. If you select a keyframe and apply Clear Frames, the keyframe will be cleared and the content of the keyframe will be removed. If you select a normal frame and apply Clear Frames, the selected frame will be converted into a blank keyframe to eliminate the content in that frame while preserving the content in other frames within the same span. This command is also listed in the contextual menu and in the application menu under Edit

  

• Editing the contents of a keyframe: Select the keyframe where you want to edit content. This moves the Playhead to the selected frame so that its content is visible in the Document window, where it can be edited. Note that if you edit content on a keyframe or frame within a span, the changes will apply to the current frame and the span it is part of.

Note

We detail numerous techniques for editing content in later chapters of this book that address specific types of content. For the most relevant information, look for chapters that describe the types of content you are working with — vector art, bitmaps, sound, video, and so on.

The Span-based selection methods are as follows:

• Frame spans: To select a span of frames extending between two keyframes, simply click anywhere between the keyframes.

• Single frames within a span: To select a single frame within a span, press the Ctrl key (on Windows) or the

  

• Single frames not within a span: To select a single frame that is not implicated with a span, simply click to select it.

• Multiple frames or spans: To select multiple frames along the Timeline (within a span or independent of a span), use Shift+click to add to a selection of the frames.

Figure 4.21 shows a Timeline that illustrates some editing points. The top layer shows the Original layer, with content starting on a keyframe on frame 1, followed by a span of 19 frames, putting the endframe on frame 20. This layer was copied into all three lower layers, with the result that the initial content of all four layers was the same. When a frame was inserted at frame 10 of the Insert frame layer, the content was extended, pushing the endframe of the span to frame 21. When a keyframe was inserted at frame 10 of the Insert keyframe layer, the content was maintained in the new keyframe, but the span was not extended, as indicated by the gray filled frames in the span from frame 10 to frame 20. When a blank keyframe was inserted at frame 10 of the Insert blank keyframe layer, the content was cleared following the new blank keyframe, as indicated by the white frames extending from frame 10 to frame 20.

Figure 4.21. Editing on the Timeline

Note

For more information about how frames are used to author and control animation, refer to Chapter 11, "Timeline Animation."

The main place to find options for controlling the appearance of the Timeline within the window is in the submenu available from the Frame View options button, shown in Figure 4.21.

As noted previously, the Frame View options menu is used to customize the size, color, and style of frames displayed within the Timeline. These features can prove very helpful when you're working with cartoon animation and want to see each frame previewed. Or, if you're working on an extremely long project with a huge Timeline, it can be helpful to tweak the size of the individual frames, so that you can see more of the Timeline in the Timeline window.

When you use the Frame View option in conjunction with the Layer Height option of the Layer Properties dialog box, you can customize your Timeline display in several ways to better suit your particular project. Your options include