2Understanding the. Interface. If you are new to Adobe Flash CS3 Professional, don t skip this chapter. Exploring the Welcome Screen 13

Transcription

1 2Understanding the Interface Exploring the Welcome Screen 13 Interface Overview 14 Exploring the Tools Panel 15 Working with the Panels 16 Creating a New Custom Keyboard Shortcut Set 19 If you are new to Adobe Flash CS3 Professional, don t skip this chapter. Although you might be tempted to jump right in with the hands-on exercises, take the time to read this chapter first so you can get a big picture look at the Flash CS3 interface. This chapter begins with an overview of the main interface elements: the Timeline, the Stage, the Stage pasteboard, and the various panels in Flash CS3. This will be a relatively short overview so you can get to the actual exercises as quickly as possible. After all, hands-on exercises are the best way to learn how these tools work. If you are a veteran of Macromedia Flash 8, feel free to skim this chapter, but be sure to check out the new features in the Actions panel and the Tools panel. 12 Adobe Flash CS3 Professional : H O T

2 Exploring the Welcome Screen When you open Flash CS3 for the first time, you will see the Welcome Screen, which gives you a quick way to open a recent file, create a new file, or create a file from a template. To use the features of the Welcome Screen, click any of the text links, such as Flash File (ActionScript 3.0). Note: Your Welcome Screen will look a bit different from the one shown here, depending on which files you opened last. If you prefer not to see the Welcome Screen, click the Don t show again check box on the bottom left of the Welcome Screen. If you choose not to show the Welcome Screen but later want to see it, you can do so by choosing Edit > Preferences (Windows) or Flash > Preferences (Mac), then choosing General on the Category tab, and finally choosing Welcome Screen from the On launch pop-up menu. Chapter 2 : Understanding the Interface 13

3 Interface Overview Tools panel Timeline Panels Stage Edit bar Stage pasteboard Property inspector Each time you create a new document in Flash CS3, you are presented with a blank document window, which is divided into seven main components: Timeline: The Timeline controls all the elements in a project file, including layers, frames, the playhead, and the status bar. You ll learn more about these features later in this chapter. By default, the Timeline is docked above the Stage, but you can undock and move the Timeline to any location onscreen. You ll learn how later in this chapter. Stage: The Stage displays your animations, images, and other content. It is the area visible to users after you publish or export a finished project. You ll learn how to modify the properties of the Stage, such as size, color, and frame rate, in Chapter 4, Animating in Flash, and how to export and publish projects in Chapter 17, Publishing and Exporting. Stage pasteboard: The Stage pasteboard is the light gray area around the Stage. The contents of the Stage pasteboard are not visible to users when you export or publish your projects. As a result, you can place objects here and animate them onto the Stage so they enter and exit from offstage. You can also store objects with no graphic representation, such as data elements, on the Stage pasteboard, keeping the Stage uncluttered. Edit bar: The edit bar displays your current location inside the project file, including the name of the current scene. It also provides controls for editing scenes and symbols and lets you change the magnification using the Zoom box. The edit bar changes location depending on whether the Timeline is docked or undocked. (You ll learn how to dock and undock the Timeline later in this chapter.) Tools panel: The Tools panel contains tools for creating and editing artwork. This long vertical bar gives you access to just about every tool you need in order to create and modify objects. Panels: Each panel has a unique set of tools or information for viewing or modifying specific file elements. For example, the fill and stroke colors in the Color panel will change based on the object selected on the Stage, letting you make changes to the current selection quickly, right in the panel. You ll learn more about panels later in this chapter. Property inspector: The Property inspector is not just another panel in Flash. It opens at the 14 Adobe Flash CS3 Professional : H O T

4 bottom of the Stage in the default Flash CS3 workspace, and you ll find yourself accessing it more often than any other panel. You ll use the Property inspector for naming object instances, adding animations and sounds to the Timeline, and much, much more. To really understand its importance, you have to use it; therefore, you ll spend a lot of time working with the Property inspector throughout this book. Exploring the Tools Panel The Tools panel contains tools for creating and editing artwork. You will learn more about the various tools in the Tools panel in Chapter 3, Using the Drawing and Color Tools, and in various exercises throughout the book. Click the double-arrow icon to toggle between a singlecolumn and doublecolumn Tools panel. Each of the main tools has an associated keyboard shortcut. When you position the cursor over a tool icon, a small tool tip appears with the name and keyboard shortcut for the tool, which is listed in parentheses next to the tool name in the illustration. You can disable the tool tips feature in the Preferences dialog box by choosing Edit > Preferences > (Windows) or Flash > Preferences > (Mac). In Flash CS3, the Tools panel can be displayed in either a two-column view (traditional) or a one-column view. To toggle between views, click the double-arrow icon at the top left of the Tools panel. TIP: Using the Tools Panel Pop-Up Menus When you see a small arrow on the lower-right corner of a tool in the Flash CS3 Tools panel, it indicates hidden tools in pop-up menus. To access the hidden tools, click the arrow and hold your mouse down until the pop-up menu appears, and then select a tool from the menu. Chapter 2 : Understanding the Interface 15

5 Working with the Panels Panels are windows containing tools and information to help you work in your project file more efficiently. You can use each panel to view and modify elements within your project file. The options within the panels let you change settings, such as color, type, size, rotation, and many others. You can display, hide, move, resize, group, and organize the panels in any way you want. In the next few sections, you ll learn how to dock, resize, and work with panels. Undocking and Docking Panels In the default workspace, all the panels are docked, or fitted to, one side of the stage or another. However, by clicking and dragging panels away from the docks, you can create undocked or freefloating panels. You can dock and undock panels to create new combinations that better fit your workflow preferences. To undock a panel or panel group, position your cursor over the panel title bar. Click and drag to undock the panel(s) to any location onscreen. (To undock a single panel in a group, position your cursor just over that panel s tab.) After you undock a panel, you can move it around the work area by clicking and dragging the panel s title bar. when it is docked below the Stage, in which case you have to resize both elements together. Tip: If you have resized or moved your panels and want to return to the default workspace layout, simply choose Window > Workspace > Default. Resize from border Resize from corner handle Expanding, Collapsing, Hiding, and Closing Panels To redock a panel or add it to another panel group, position your cursor over the panel s title bar. Click and drag the panel onto another panel until you see a dark outline over the panel. When you release the mouse, Flash CS3 adds the panel to the panel group. Resizing Panels You can resize panels by clicking and dragging the panel s border or by dragging the size box in the lower-right corner, as shown in the resizing illustration to the right. Note: You cannot resize some of the panels, such as the Property inspector and the Tools panel. In the case of the Property inspector, the cursor will turn into the resize arrows when you move it over the border, but you cannot resize it as a floating panel. You can resize the Property inspector only Panel expanded Panel collapsed To expand and collapse the contents of a panel, double-click the panel name. To show or hide all the panels in your document, press F4; to close all the panels, choose Window > Hide Panels. To close a panel, click the X by the panel name or in the upper-right corner of the panel. 16 Adobe Flash CS3 Professional : H O T

6 Click once here to expand or collapse the panel dock. A new feature in Flash CS3 is the ability to collapse the entire dock by clicking the Collapse to Icons double-arrow icon above the dock. Once you are familiar with the different panels and their icons, you may want to use this feature to save screen real estate. You can display individual panels from the collapsed view by clicking the panel s icon once. You can reduce the dock even further by dragging the left border so that only the icon (not the panel name) appears in the dock. Using the Panel Options Menu Panel dock expanded Panel dock collapsed to icons Many panels have an Options menu in the upperright corner, as shown in the illustration above. To display the contents of the menu, simply click it. Note: If a panel is collapsed, you can still open this menu. Displaying a single panel in Icon view Drag to reduce the panels to icons only. Icon view collapsed to just panel icons Chapter 2 : Understanding the Interface 17

7 Creating and Saving Workspace Layouts With Flash CS3, you can create custom workspace layouts, which you can save and use at any time. This feature lets you quickly organize your workspace for specific tasks. For example, you can create different workspace layouts for drawing, animating, or working with ActionScript. The following steps walk you through the process of saving a custom workspace layout: 1 Click the Workspace button in the edit bar, and choose Save Current (this option is new in Flash CS3). Or, choose Window > Workspace > Save Current to open the Save Workspace Layout dialog box. 2 Type a name in the Name field, and click OK. That s all there is to it! Switching Workspace Layouts To switch between different workspace layouts, click the Workspace button in the edit bar, and choose a workspace layout; alternatively, choose Window > Workspace, and choose a workspace layout. Note: To return the panels to their default locations, click the Workspace button in the edit bar, and choose Default (or choose Window > Workspace > Default). Renaming and Deleting Workspace Layouts You can rename or delete workspace layouts from the Manage Workspace Layouts dialog box: 1 Click the Workspace button in the edit bar and choose Manage (or choose Window > Workspace > Manage) to open the Manage Workspace Layouts dialog box. 2 To delete a workspace layout, select it, and then click Delete. Click Yes to accept the change, and then click OK to close the Manage Workspace Layouts dialog box. 3 To rename a workspace layout, select it, and then click Rename. This opens the Rename Workspace Layout dialog box. Type a new name in the Name field, and click OK to close the dialog box. Click OK again to close the Manage Workspace Layouts dialog box. 18 Adobe Flash CS3 Professional : H O T

8 EXERCISE 1 Creating a New Custom Keyboard Shortcut Set If you re a keyboard shortcut junkie, you ll want to learn the shortcuts to using the tools in the various panels. For a listing of the keyboard shortcuts for each of the tools in the Tools panel, refer to Chapter 3, Using the Drawing and Color Tools. To further streamline your workflow, you can create, modify, duplicate, and delete sets of custom keyboard shortcuts. Flash CS3 has an entire interface dedicated to making this process easier. One of its niftiest features lets you assign keyboard shortcuts in Flash CS3 that match those used in other programs, including Adobe Fireworks, Adobe Freehand, Adobe Photoshop, and even earlier versions of Flash! You may be thinking, Hey, this is only for power users, but you ll be a power user in no time, right? This exercise outlines the process of creating, modifying, and deleting custom keyboard shortcuts. This isn t an exercise you have to complete now; if you d like, just make a mental note of it for later use. 1 Choose Edit > Keyboard Shortcuts (Windows) or Flash > Keyboard Shortcuts (Mac) to open the Keyboard Shortcuts dialog box. 2 In the upper-right corner of the dialog box, click the Duplicate Set button to open the Duplicate dialog box. From here, you can create a copy of the current keyboard shortcut set, ensuring you don t make permanent changes to the original keyboard shortcut set. Chapter 2 : Understanding the Interface 19

9 3 Type a name for new the keyboard shortcut set in the Duplicate name field. Try to stick to a meaningful name you can recall later. Click OK. 4 Back in the Keyboard Shortcuts dialog box, choose an option (such as Drawing Menu Commands) from the Commands pop-up menu. A view of the first-level commands will appear. Click the plus sign (Windows) or the arrow (Mac) next to a command to drill down and display additional commands. Click to select the command for which you want to change the keyboard shortcut. 5 Click the + (Add Shortcut) or (Remove Shortcut) button to add or delete the currently selected keyboard shortcut. 20 Adobe Flash CS3 Professional : H O T

10 6 Press the keys you want to use as the keyboard shortcut to assign the shortcut to the option. Notice the shortcut key appears in the Press key text box. Click Change to confirm your selection and assign it to the menu item. Click OK to close the Keyboard Shortcuts menu. Note: If the key combination you selected is already in use, you will get an error message at the bottom of the dialog box. You must select another key combination or find and replace the key combination that s in use for the other command before reassigning it. Well, that s a quick run-through of the Flash CS3 interface. Now that you are more familiar with the big picture, let s narrow the focus to specific interface elements. In the next chapter, you ll work with the drawing and coloring tools in the Tools panel. Flash CS3 has a powerful set of graphics tools for creating any kind of artwork and animation imaginable. So go ahead turn to the next page to get started. Chapter 2 : Understanding the Interface 21