Learning Flash CS4 Professional phần 2 docx

Customizing Your Interface Chapter 1, Interface Essentials 13 layers as outlines by clicking the appropriate column in the layer (eye, lock, and box icons, respectively). Keyframes and interpolated frames It’s important for you as a director to control many aspects of your movie. Not only must you position your actors in the foreground and your sets in the background (using layers), you must also cue the appearances of your characters. This is accomplished with keyframes—special frames that you add to a layer to break it into segments and control its content. For example, keyframes appear in frames 1 and 15 of the logo layer, indicated by the circle icons found in these frames. A filled circle indicates there is con- tent in the frame, while an empty circle shows that the frame is empty. After you define keyframes, you can let Flash do all the work of calculating the appearance of the interim frames. This will be discussed at length in Chapter 5 when you read more about animation. The small vertical rectangles in frames 14 and 25 of the logo layer simply mark the end of a frame span. Customizing Your Interface Now that you’ve seen the high points of the Flash CS4 Professional interface, it’s time to make it your own. If you’ve used Flash before, you may be feeling a little disoriented due to the size and location changes of various panels. The good news is, the interface is highly customizable and it’s very easy to adjust to your liking. Selecting and Editing a Workspace When customizing the interface, a good place to start is viewing the available workspace presets. In the upper-right corner of the main application window, next to the Help search field, you will find a menu of presets (shown in Figure 1-7) that are optimized for a variety of user profiles. Start by looking at how each preset is configured and determine which is closest to your liking before editing. Users accustomed to prior versions of Flash, for example, may wish to start with the Classic workspace. This con- figuration places the Tools panel on the right, the Timeline at the top, and a default set of panels to the right of the stage, reproducing application layouts of prior Flash versions. If you wish to return to the original profile at any time during the custom- izing process, simply choose the Reset option from the menu of presets. After you customize your interface, you can use this menu to save your layout as a new preset. You can also use the Manage Workspaces option if you need to rename or delete presets. Select and manage Figure 1-7. workspaces with the Workspace menu Learning Flash CS4 Professional 14 Customizing Your Interface Minimizing Panels You can view all panels at full size or in one of two minimized states: icon- and-name view or icon-only view. The default minimized state is icon-and- name view. Figure 1-8 shows all three view options. Clicking the double-arrow icon in the upper right corner of each panel toggles between the panel’s full-size view and your choice of minimized states. When minimized, you can drag a panel from one or both vertical edges (depending on where the panel is docked) to reduce its appearance to an icon-only view. In either minimized state, clicking on the icon or name (when present) flies out the full-size panel for use, as shown in Figure 1-9. Based on your choice of preference setting, the panel can automatically minimize when you’re working with any other interface element, or remain open until you choose to close it. See the upcoming section “The Preferences Dialog” for more information. Grouping and Docking Panels Some panels will already be docked to the interface in each workspace preset, and others will open in a free-floating state. Regardless of its original position, any panel can be grouped, ungrouped, and docked (snapped to a set location such as the top, bottom, or sides of a window, rather than free-floating) by simply dragging the panel by its tab to the desired destination. To group panels, drag one panel to another. In Figure 1-10, the standalone Swatches panel is grouped into a panel set with the Color panel. The destina- tion panel group is highlighted with a blue outline that helps show where the panel is being dragged. You can remove a panel from a group by dragging it away from the set by its tab. Dragging a panel to an existing panel groupFigure 1-10. Panels shown in full-size, icon-Figure 1-8. and-name, and icon-only views Panels can fly out from name Figure 1-9. or icon view Customizing Your Interface Chapter 1, Interface Essentials 15 To dock a panel, drag it to one of the edges of the destination panel or panel group. Figure 1-11 shows the blue outline feedback that Flash provides when you dock or group panels. The blue line indicates where the panel will end up. As the figure shows, you can dock above, below, to the left, or to the right of a panel or set. You also add a panel to a group, even when the group is minimized. Dock or group? Choosing to dock a panel on its own or to group it with other panels is purely a matter of preference. Without a very large monitor, the interface would be too cluttered to use if every panel were free-floating. Docking panels helps you wrest control over your work area because you can easily minimize pan- els without losing track of them. Grouping panels together can also help you create a single place to find related panels that you will need on a regular basis. For example, it is com- mon to find the Color and Swatches panels grouped, as well as to find the Align, Transform, and Info panels collected into one group. NOTE Remember that most Flash interface elements are panels, so they can be free-floating or docked in just about any configuration of rows and columns. Panels can also be resized by dragging their edges. For example, Flash CS4 Professional is the first ver- sion of the application that can organize its Tools panel in a nonvertical layout. The Tools panel is approximately square in the Designer workspace preset, but is a single horizontal row in the Developer workspace preset. The Preferences Dialog Because of its complexity, Flash has a large number of preference settings— too many to discuss in depth here. Instead, I’ll show you some of the settings relevant to the discussions in this chapter. We’ll examine additional prefer- ence settings in later chapters when applicable. To access the Preferences dialog (Figure 1-12), select the Preferences option from the Flash Professional application menu (Mac) or the Edit menu (Windows). Docking panel vertically, below an existing panel group. Panels can also be docked above an existing group. Docking panel horizontally, to the left of an existing panel group. Docking to the right of a group is also possible. Adding panel to the bottom of an existing panel group. Panels can also be added to other positions within a group, such as between two panels, as shown here. Panel dragging feedbackFigure 1-11. Learning Flash CS4 Professional 16 Customizing Your Interface Application preferencesFigure 1-12. Within the Preferences dialog, preference settings are organized into several pages. In this chapter, we’ll look at the General options: On launch The On launch setting allows you to dictate what occurs when the application is first opened. You may elect to show no document, create a new document, open the most recently edited document, or display the Welcome screen. If you previously elected to dismiss the Welcome screen and wish to restore it, this is the setting for you. Undo Flash offers two systems of storing undo operations. You can specify a Document-level Undo history, in which one history list is maintained for each document, or an Object-level Undo history, in which a list of prior Customizing Your Interface Chapter 1, Interface Essentials 17 activity is recorded for each major object in the application. Although the latter provides a more granular degree of undo, it will also increase the size of your authoring files substantially (it has no effect on the size of runtime files). You are probably better off staying with the default Document-level Undo option to start, and then determining later if you need to switch to storing object-level histories. In both cases, you can set the number of undo levels maintained in each history list. Open test movie in tabs Once you start working with FLA files, you will need to check your work by compiling test SWF files. For expediency, you will likely want to pre- view the test files within the Flash interface, and only occasionally test them in a browser. When viewing a SWF in Flash, the Open test movie in tabs option allows you to specify whether the resulting test file opens in a new tab, grouped with all other open document tabs, or in a new window. The best choice here is a matter of taste, and relies heavily on the behav- ior of other elements of the Flash interface—specifically, which panels remain visible while a test file has focus and how that behavior differs when the SWF is in a tab or its own window. As such, I recommend that you try the setting both ways and determine which approach you prefer. Auto-Collapse Icon Panels The Auto-Collapse Icon Panels setting determines how active panels behave when activated from a minimized dock. When this option is enabled, the panel minimizes again the moment you interact with any other interface element. When the option is disabled, the panel remains open until you manually close it. Customizing the Tools Panel After you have spent some time with the Flash interface, you may find that you are itching to rearrange the tools in the Tools panel. For instance, you may want to make the Subselection tool a child of the Selection tool, or you may want to group tools of like functionality together. You may find that you want to move the Lasso tool immediately below the selection tools, or move the Text tool to the bottom of the drawing and text group. This is easily accomplished using the Customize Tools menu item in the Flash Professional menu (Mac) or Edit menu (Windows). As shown in Figure 1-13, the current Tools panel layout appears at the left of the dialog. To change this configuration, first select a slot in the Tools panel, and then choose which of the available tools will appear in that slot. The topmost tool will appear in the panel, and all additional tools will appear in a submenu. You can also remove tools from the selected slot. Finally, if you make a terrible mess of things, you can always restore the default configura- tion using the Restore Default button. NOTE Regardless of the orientation of your Tools panel, the tools still appear in sequence, corresponding to sequential rows in this dialog. For example, compare the order of the tools in the dialog shown in Figure 1-13 with the order of the vertical tool strip shown in Figure 1-2. Learning Flash CS4 Professional 18 Customizing Your Interface Customizing the Tools panelFigure 1-13. Keyboard Shortcuts The Keyboard Shortcuts feature (Figure 1-14) in the Flash Professional menu (Mac) or Edit menu (Windows) allows you to configure which keyboard shortcuts trigger which menu items. The Current Set field includes preset keyboard shortcut configurations mod- eled after other applications. If you are a frequent user of any of the featured applications, you may wish to mimic one of those keyboard configurations. You can duplicate, rename, export, and delete any of these presets. To prevent permanent loss to shortcut configurations, you must duplicate a present, or create a new preset, before you can modify its settings. If you wish to change the keyboard shortcut attributed to any menu, you must first select the appropriate menu category. Like many applications, the Flash interface is context-sensitive. Next, expand the menu name and select the desired menu item. Finally, select an existing shortcut to change or remove its value, assign a new shortcut, or even add a shortcut if more than one is helpful. When changing or adding selected values, type the new shortcut in the Press key field and click the Change button. Project Progress Chapter 1, Interface Essentials 19 Customizing keyboard shortcutsFigure 1-14. Project Progress Throughout this book, you will often use your creativity, experiment with specific features, and try to accomplish isolated tasks. However, Flash is a very big program, and it’s easy to wind up with a lot of basic skills and no way to use them. With this in mind, a book-wide project will wind its way through the chapters. This approach to learning not only allows you to review what you’ve read in a specific chapter, but also ties it all together to create a Flash website or application. The project chosen for this book is a designer’s portfolio. It will remain simple, helping to focus your attention on the content at hand, but the project goal is to cover as much of the material discussed as possible. In this chapter, you’ll create a template that will simplify the creation of other project assets in later chapters. Learning Flash CS4 Professional 20 Project Progress Creating Your First FLA Before you can save a template, you must create a new file and configure its document properties. Files that you create from this template will assume these properties, so the settings should match those you want to use in future files. Create a new ActionScript 3.0 file on the Welcome screen, or by selecting 1. File→N e w. Select Modify2. →Document to access the Document Properties dialog (Figure 1-15). You can also access this dialog by clicking Edit in the Properties section of the Properties panel, after clicking on the Stage. Set the width and height of the document to 3. 750 and 500, respectively. Disable the Adjust 3D Perspective Angle option. You will learn more 4. about this in Chapter 8, but, briefly, disabling this feature ensures that a 3D setting that affects perspective is based on the new document size, not the previous document size. Change the Background color to black. This setting will set the Stage 5. color of every file created from this template. Set the Frame rate to 6. 24 and set the Ruler units to Pixels. Figure 1-15. Setting document properties Importing Your First Asset You will learn more about creating new content in Chapter 2, and importing content in Chapter 3, but a quick venture into these areas now will improve the functionality and demonstrate a feature of your template. If you haven’t already done so, download the source files for this chapter 1. from the companion website, www.LearningFlashCS4.com. NOTE The project dimensions 750×500 were chosen so your project will display eas- ily for the largest number of users. This size will fit in a browser window, without scrolling, on a monitor with a resolution as low as 800×600. Project Progress Chapter 1, Interface Essentials 21 Select the first frame of the Timeline layer and import the provided 2. content_ui_guide.jpg graphic by selecting File→Import→Import to Stage. Select the bitmap on Stage and, using the Properties panel, set its x and y properties to 0. Double-click the layer name and rename it 3. guide. Lock the layer by click- ing the dot across from the layer name in the column under the padlock. Creating Your First Shape Next you will create a placeholder asset that you can use to quickly add con- tent to future files. You will learn more about drawing in Flash and creating native Flash asset types in the next few chapters. Just follow along carefully for now and be sure to test your progress through this exercise. When you’re done, compare your results with the provided sample files. Create a new layer in the timeline and name it 1. content. You should have two layers: the locked guide and empty content layers. Click the frame in the content layer so you will be ready to create your next asset. Select the Rectangle tool from the Tools panel and draw a rectangle any-2. where on the stage. You will adjust this shape in just a moment. Switch to the Selection tool and drag over the rectangle to select the shape. 3. Use the Fill color chip to select a bright color. Create a movie clip asset type by selecting 4. Modify→Convert to Symbol. When the Convert to Symbol dialog appears, name the asset content and choose Movie Clip from the Type menu. Finally, click the tiny box in the upper-left corner of the nine-box grid next to the Registration option (you will learn much more about these options in the chapters to come). Click OK to finish the process. The rectangle you created in step 2 has been converted to a Flash movie clip symbol. Using the Selection tool, click on the movie clip you just created and 5. look at the Properties panel. If the panel is not open, access it by select- ing Window→Properties. The top of the panel will show that you have selected your movie clip. Look in the Position and Size section of the Properties panel and click on the blue links next to the x and y properties. Set both of these to 0, as shown in Figure 1-16. Your movie clip has now been moved to the upper-left corner of the Stage. If you can easily see your placeholder asset against the guide graphic you imported, consider this part of the exercise finished. If not, you can double- click the placeholder to edit it. After double-clicking, use the Selection tool to drag over the entire rectangle to select all of it, and then drag it with the mouse to a more visible location. You can also experiment with other drawing tools to make the placeholder more visible. The sample file, for example, added text to the movie clip. You’ll learn a simple way to work with text in the next chapter. Figure 1-16. Movie clip instance properties in the Properties panel NOTE Text entry fields that look like web links, such as those pictured in Figure 1-16, are called hot text fields. They work like normal text fields when clicked, but you can also drag your mouse left and right to adjust their values interactively. Learning Flash CS4 Professional 22 Project Progress This loose approach to the placeholder asset is fine because you will delete this asset later when replacing it with project content. Testing Your File Now it’s time to test your file. You will do this many, many times throughout the book, so it’s a good idea to start now. Select Control→Test Movie, and Flash will compile your authoring-only FLA file into a final file with the extension .swf, suitable for distribution. Because of the extension, these docu- ments are usually called swiff files. You should see everything you added to your file, including the guide graphic that you imported and the movie clip that you created. Close the window or tab with your SWF in it, and return to your FLA. If you’re happy with your results, continue with the project. If not, open the template_01.fla file from the companion source files and continue on with that file. This template docu- ment is provided for your convenience. Creating a Guide Layer When creating a template, you will want to design it so that a minimum amount of fuss is required to create usable new files. The placeholder movie clip is useful because it has already been positioned and you can easily edit it to add new content. The guide graphic, however, should not appear in newly published files. To solve this problem you need to convert the normal layer in which the guide graphic resides into a special layer type called (appropriately enough) a guide layer. Double-click the icon to the left of the guide layer name and, in the Layer Properties dialog, choose the Guide type. Click OK to close the dialog and test your movie again. You should now see only the placeholder movie clip. The guide layer is visible in authoring mode to help you position assets and guide your design and development, but it is not included in the final published SWF file. Check your work against template_02.fla. Continue with the project if you’re satis- fied, or use the provided source file from this point forward. NOTE Although not required every time you test, it helps to save your file at least once before testing. By default, SWF files are compiled to the same directory, and given the same name, as your FLA. Knowing where the FLA is saved will help you find the SWF later, if needed. Saving your work also increases the likelihood of recovering from a potential crash. [...]... start creating content for your Portfolio 24 Learning Flash CS4 Professional Chapter 2 Creating Graphics Introduction One of the things about Flash that makes it a bit hard to define to new users is that it wears many hats Although it is known for its ability to compile and load assets created in other applications, it is not just an authoring tool That is, one of Flash s strengths is that it can be used... point, and name the symbol Star Figure 2- 22 Spray Brush results Now that you have a symbol in your Library, you can use it instead of the Spray Brush’s default shape Do so by clicking the Edit button at the top of the Symbol section of the Properties panel while the Spray Brush Tool is active Figure 2- 22 shows the result of spraying with the setting shown in Figure 2- 21 Project Progress In Chapter 1 you... using the Eyedropper, Flash will populate both stroke and fill colors for your subsequent use of the Paint Bucket or Ink Well tools For instance, this allows you to pull a color from a stroke and then apply it to a fill without an interim trip to the color tools 32 Learning Flash CS4 Professional Working with Color Working with Color There are several ways to create and apply colors in Flash You can use... vulnerable to your selecting and even editing specific areas without manipulating the underlining vector path directly Figure 2- 2 Selecting a square and line created with Merge Drawing mode (top) and selecting and moving a portion of the merged shapes (bottom) 26 Learning Flash CS4 Professional If you use the Line tool to draw a line all the way through the middle of the shape, the shapes interact and... at the bottom of the panel Figure 2- 12 shows the editing of the rightmost color (note the darker triangle at the top of the chip pointing to the color being edited) Because this color has a low alpha value (0, in this case) you can see a grid through the color This is a helpful indicator to show you how much transparency is applied to the color 34 Learning Flash CS4 Professional Using Context-Sensitive... that, when rotating, the object is rotated around the new transformation point rather than the center of the object as before Figure 2- 16 Changing the transformation point 36 Learning Flash CS4 Professional Transforming Assets Transform Panel The Transform panel (Figure 2- 17) offers options to scale horizontally and vertically (independently or proportionally), rotate, and skew an object If the object... fill is selected If you were to try to move this shape, you would leave behind, and possibly overwrite, its stroke (c) (d) Figure 2- 7 Selecting fill only (a), stroke segment only (b), complete stroke only (c), and fill and stroke (d) 30 Learning Flash CS4 Professional Figure 2- 7(b) shows the result of a single click on the shape’s stroke—the right side in this case A single click on a stroke selects only... shows a “breadcrumb trail” of buttons leading up to your current location in a chain of possible nested objects you are editing For example, if you edit a Drawing Object placed on the Stage, 28 Learning Flash CS4 Professional Drawing Modes the Edit Bar shows a button called Scene 1 (the default name for the main Timeline), followed by the text Drawing Object to mark your current location Clicking the... drawing applications Flash offers the same Pen and Subselection tools as Adobe Illustrator and allows you to create, add, subtract, and transform vertices To create the s-shaped Bézier curve shown in Figure 2- 5, for example, you use the Pen tool Starting at the upper-right corner of the S, you can drag a bit Figure 2- 5 Manipulating strokes by dragging Chapter 2, Creating Graphics 29 Using Fills and Strokes... fact, one of the distinctions between Flash and Flex (another Flash Platform technology) has always been that Flex authoring tools (like Flex Builder) don’t have Flash s graphics drawing environment and don’t allow you to draw custom assets while authoring Believe it or not, some designers use Flash as a primary illustration tool in specific cases, creating art in Flash and saving it to several image . stroke propertiesFigure 2- 8. NOTE The book’s companion website, http:// www.LearningFlashCS4.com, has exam- ples of line scaling in action. Learning Flash CS4 Professional 32 Using Fills and Strokes Hinting When. 1 -2. Learning Flash CS4 Professional 18 Customizing Your Interface Customizing the Tools panelFigure 1-13. Keyboard Shortcuts The Keyboard Shortcuts feature (Figure 1-14) in the Flash Professional. cumulative project until the end of the chapter.  CreatInggraPhICs Learning Flash CS4 Professional 26 Drawing Modes Drawing Modes Flash has two distinct drawing modes: Merge Drawing mode and Object