List of Figures | Macromedia Flash8 Bible

Chapter 1: Understanding the Flash 8 Framework

Figure 1-1: Elements of a Flash document (.fla) in the authoring environment
Figure 1-2: Overview of the Flash movie (.swf) format

Chapter 3: Planning Flash Projects

Figure 3-1: Two of the most common phases when generating Web content are preproduction and the actual production phase.
Figure 3-2: A sample organizational chart for a portfolio site
Figure 3-3: The user watches an intro animation and is led through several short subsequent animations detailing each area of the portfolio. The user can then go to an area of his choice after this animation is complete.
Figure 3-4: This functional spec displays the six components of a Flash-based navigation bar, which will appear on the main menu of our portfolio content site.
Figure 3-5: The layout of folders for a site named robertreinhardt.com
Figure 3-6: The Project panel
Figure 3-7: The New Project dialog box
Figure 3-8: The Version Control menu
Figure 3-9: The Edit Sites dialog box
Figure 3-10: The Site Definition dialog box
Figure 3-11: The Project Settings dialog box
Figure 3-12: The folder structure of the site within the project file
Figure 3-13: The folder and document structure of the site within the project file
Figure 3-14: A file that is checked in displays a lock icon.
Figure 3-15: You can publish files with relative paths in the Formats tab.

Chapter 4: Interface Fundamentals

Figure 4-1: The Start Page provides quick access to file lists, templates, and resource links.
Figure 4-2: The streamlined Flash 8 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.
Figure 4-3: The default layout for Flash Professional 8 as it appears on Macintosh OS X
Figure 4-4: The default layout for Flash Professional 8 as it appears on Windows XP
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)
Figure 4-6: The controls we note here on the tabbed Mac Color panel group are consistent with the control icons you will see on other panels for both Mac and Windows.
Figure 4-7: Tabbed panel groups are more space efficient than stacked or individual floating panels.
Figure 4-8: Ungrouped panels can be stacked (left) or floated individually (right).
Figure 4-9: The new Flash 8 dialog box for managing saved Workspace Layouts makes it easy to delete or rename your custom layouts.
Figure 4-10: 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.
Figure 4-11: The Mac Tools panel is shown here 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.
Figure 4-12: Use the Customize Tools Panel dialog box to add or rearrange the tools available in the Tools panel.
Figure 4-13: 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.
Figure 4-14: After they have been added to the Tools panel, custom tools and options can be used as easily as other standard Flash tools.
Figure 4-15: Use the New Document dialog box in Flash Professional 8 to create new documents or open template files.
Figure 4-16: The Document window as it appears with the Document Properties dialog box open
Figure 4-17: The Scene panel showing document scenes in the order they will play back by default
Figure 4-18: The prebuilt templates that ship with Flash provide a good starting point for authoring many common Flash presentations.
Figure 4-19: The Controller showing callouts for the buttons as they are used to control movement of the Playhead
Figure 4-20: The floating Timeline window with callouts showing the principal features and control elements
Figure 4-21: Flash Timeline conventions for naming and display of various frame and layer types
Figure 4-22: Editing on the Timeline
Figure 4-23: In this composite screenshot, the Timeline is displayed with the two preview options — Preview (top) and Preview in Context (middle) — for the same frame-by-frame animation sequence (bottom).

Chapter 5: Drawing in Flash

Figure 5-1: Line tool preview (top) and the final line (bottom), displayed when the mouse button is released and line style is rendered
Figure 5-2: A 10 pt line rendered with different cap styles. These styles can be applied to any line using the new Cap style menu in the Properties panel— None (top), Round (center), Square (bottom).
Figure 5-3: Shapes created with the Oval tool, using different stroke and fill settings
Figure 5-4: The new Oval Tool Settings dialog box can be used to generate shapes with precise width and height settings, rather than estimating size as you draw them manually.
Figure 5-5: The new Rectangle Tool Settings dialog box can be used to generate shapes with precise width and height settings, in addition to specific radius settings — which are also available in the radius-only Rectangle Settings dialog box.
Figure 5-6: Rectangles drawn with different radius settings create different degrees of roundness on the corners.
Figure 5-7: The three join styles available in the new Join menu create corners with different types of line intersection.
Figure 5-8: The sharpness of Miter joins can be adjusted by entering a setting between 1 and 60 in the Miter field.
Figure 5-9: The PolyStar tool is grouped with the Rectangle tool in the Tools panel.
Figure 5-10: A composite figure showing the Options button in the Property inspector (bottom) that launches the Tool Settings dialog box, used to create different shape styles (top)
Figure 5-11: Star point size decimal settings between 0 and 1 create various star shapes.
Figure 5-12: Similar sketches made using the three different Pencil modes to show how line processing affects various shapes— Straighten (left), Smooth (center), and Ink (right).
Figure 5-13: The Brush tool and options (left); the Brush mode settings menu (right)
Figure 5-14: In Paint Normal mode, a dark-gray brush mark covers all elements— background, outline, fill, and drawn lines.
Figure 5-15: In Paint Fills mode, a dark-gray brush mark covers the white background and fill without painting over any of the lines.
Figure 5-16: In Paint Behind mode, the gray brush mark is only visible on the background outside the frame because it has gone behind the white fill and the lines.
Figure 5-17: With Paint Selection mode, only the selected white fills have been covered by the brush marks.
Figure 5-18: With Paint Inside mode, the brush marks only cover the area where the stroke is first started. Lines separate the white fills inside the sail and the boat shape from the background where the stroke was initiated, so those areas are not painted.
Figure 5-19: Marks made using the same brush size applied with the Document View at different percentages of Zoom
Figure 5-20: Drawing with the Brush tool on a pressure-sensitive tablet (with the Pressure option turned on in the Tools panel) creates tapered, calligraphic marks.
Figure 5-21: The Eraser tool has three basic options— Eraser mode, Eraser Shape, and Faucet.
Figure 5-22: In addition to the choice between the cursor icon and crosshair, the Pen tool displays seven Pen states that indicate the Pen's function under various circumstances.
Figure 5-23: The current Swatches pop-up invoked by clicking the Stroke or Fill color chip in the Tools panel (left), or by clicking a color chip on the Property inspector (top right)
Figure 5-24: The default Color Swatches palette as displayed in the main Color panel group — which also enables tabbed access to the Color Mixer panel
Figure 5-25: The Properties panel gives you all the controls you need to select the stroke height, color, and style, as well as a new option to control how strokes will scale in the Flash Player.
Figure 5-26: The Stroke Style dialog box is invoked with the Custom button on the Property inspector. The properties displayed vary depending on the style of line you select for adjustment.
Figure 5-27: Hairline strokes always display at 1-point, even if they are scaled in the authoring environment or in the Player.
Figure 5-28: Strokes with Scale set to None will always display with the original stroke height.
Figure 5-29: Strokes with Scale set to Horizontal will only scale in proportion to horizontal transformations.
Figure 5-30: Strokes with Scale set to Vertical will only scale in proportion to vertical transformations.
Figure 5-31: Strokes with Scale set to Normal will scale in proportion with the greatest transformation in any direction.
Figure 5-32: Before (left) and after (right) Optimize Curves is used to reduce the complexity of a drawing made with the Brush tool with default smoothing. The reduction in points translates directly into a smaller file size.
Figure 5-33: Selection tool selection Highlights (L-R) for a shape, a Drawing Object, a group, and a symbol.
Figure 5-34: To change the default nonselection result of partial selections in Flash (top), you can turn on the new Contact-sensitive selection behavior to select even partially enclosed items (below).
Figure 5-35: Selection tool arrow states used to reshape and reposition an element— Move Selected Item arrow, Reshape Corner arrow (B), and Reshape Curve arrow (C).
Figure 5-36: Using Selection tool arrow states to reshape and reposition a line. (Left to right) Move Selected Item, Reshape Corner, Reshape Curve, Add Corner Point.
Figure 5-37: The Selection tool options available on the Tools panel
Figure 5-38: A drawing made with the Pencil tool (left), can be selected with the Selection tool and simplified with the Smooth or Straighten options.
Figure 5-39: The Lasso tool and options
Figure 5-40: Use the Magic Wand Settings dialog box to adjust the selection range and level of smoothing
Figure 5-41: Using the Subselection tool to modify lines and curves
Figure 5-42: You can control Snapping settings in the new Edit Snapping dialog box.
Figure 5-43: Snap Align guides give visual feedback for various alignment settings.
Figure 5-44: Snap to Objects indicated by a change in the size of the center point (or corner point) "o" icon as an item is moved to overlap with another item
Figure 5-45: The snap icon as it appears when an element is dragged onto a grid line with Snap to Grid turned on (snapping works regardless of whether the grid is visible or not)
Figure 5-46: The snap icon as it appears when an element is dragged onto a guide with Snap to Guides turned on
Figure 5-47: The pixel grid visible when View scale is at 400 percent or higher with Snap to Pixels turned on
Figure 5-48: Use the Align panel to both size and arrange items with ease.
Figure 5-49: Use the Info panel options to change the location and appearance of an item.
Figure 5-50: Use the Transform panel to scale, rotate, and skew items.

Chapter 6: Symbols, Instances, and The Library

Figure 6-1: The main Library panel provides access to assets for open .fla files (top-left). Common Libraries (bottom) and other saved .fla files (top-right) can be opened as External Libraries and used as asset source files.
Figure 6-2: You can organize Common Libraries and External Libraries into panel stacks (left) or tabbed groups (right).
Figure 6-3: The Flash 8 document Library panel includes a new project menu, Pin toggle, and New Library button. As shown, you can use the New library panel button to launch a clone panel (right) for the current project view in the main document Library (left).
Figure 6-4: The Document Library in Narrow view
Figure 6-5: The Library panel and the options pop-up menu
Figure 6-6: The Symbol Properties dialog box. Note the button for Advanced options — this expands the dialog box to include Linkage and Source information for the selected element.
Figure 6-7: The location label in the Document window Edit bar is used to identify the current edit space and to return to the Main Timeline of the current scene.
Figure 6-8: The warning box triggered by trying to open a Graphic symbol in Edit mode from the Document window after a Timeline Effect is applied
Figure 6-9: The Color menu has basic options to choose from (top). After a color effect is selected, the settings for that effect are available in the Property inspector (bottom).
Figure 6-10: You can change the behavior of any selected symbol instance with the drop-down menu in the Properties tab of the Property inspector.
Figure 6-11: Use the Swap Symbol dialog box to choose a replacement for a symbol instance without losing any transformations that have already been applied.
Figure 6-12: The Edit mode view of the basicButton symbol Timeline, with Up, Over, Down, and Hit states defined with instances of the plainCircle Graphic symbol
Figure 6-13: The symbol Timeline of the Movie Clip "overAnim" showing a Motion tween of the Graphic symbol "outline," from frame 1 to frame 10
Figure 6-14: The Timeline of Button symbol basicButton with the Movie Clip overAnim placed on the Over keyframe of the outlineAnim layer
Figure 6-15: The basicButton Timeline with an instance of the overAnim Movie Clip placed on the Down keyframe and modified with a Color Tint
Figure 6-16: The finished animated button as it appears in the Up, Over, and Down states Up state Over state Down state
Figure 6-17: The animation as it appears in the three visible button states, Up, Over, and Down (left), with a diagram of the basic nested elements visible in each state (right)
Figure 6-18: Enable guides for 9-slice scaling is a new option in Advanced symbol properties.
Figure 6-19: You can drag the four slice guides to isolate the outside edges of a graphic that should be protected when the center area is stretched to scale.
Figure 6-20: In the authoring environment, a symbol instance with 9-slice scaling enabled (right) will show the same distortion on the corners as a symbol instance without 9-slice scaling (left) when the instances are scaled.
Figure 6-21: The symbol with 9-slice scaling enabled is rendered consistently in the .swf without any distortion. The rounded corners at the original size (top-right) match the rounded corners at the scaled size (lower-right).
Figure 6-22: The Movie Explorer displaying the file structure for the button example we created in the previous section
Figure 6-23: The Movie Explorer for the surpriseButton example that is included on the CD-ROM, with the Text filter button chosen to view text and font information inside the file
Figure 6-24: The Movie Explorer's contextual menu
Figure 6-25: Browsing for a source file in the Symbol Properties dialog box
Figure 6-26: The Select Source Symbol dialog box, where you specify a linked symbol
Figure 6-27: The source path shown in the Symbol Properties dialog box with the Always update before publishing check box selected
Figure 6-28: Use the Update Library Items dialog box to manually update the content of symbols in your project file.

Chapter 7: Applying Color

Figure 7-1: Two Web-safe colors mixed to create a custom-dithered color. The dithered GIF file was imported to the Flash Library and the solid Web-safe colors used in the GIF were added to the Color Swatches panel.
Figure 7-2: The same gray circle displayed on different background values will appear to be darker or lighter by comparison.
Figure 7-3: Varying levels of color contrast determine legibility and emphasis.
Figure 7-4: Variety in the size and shape of elements will also add visual contrast.
Figure 7-5: Adding contrast to a weak design (left) makes for a stronger visual hierarchy (right) and orients readers in your layout.
Figure 7-6: The default color palette as it displays in the Tools panel pop-up (A), Property inspector pop-up (B), and on the Color Swatches panel (C)
Figure 7-7: The default Web 216 palette as it appears sorted by number (left), and how it appears after being sorted by hue with the Sort by Color command (right)
Figure 7-8: The simple logo GIF file that we specified as the source for a custom Swatches palette. The resulting swatches match the colors in the logo.
Figure 7-9: Use the Save for Web command and the Color Table settings in Adobe Photoshop to create a custom color set from a photograph.
Figure 7-10: A photo used to generate a Color Table (.act), and the resulting color set loaded into the Flash Color Swatches panel
Figure 7-11: Use the Optimize panel in Fireworks to create a custom color set from a photograph.
Figure 7-12: The Flash 8 Color Mixer panel
Figure 7-13: Colors modified in the Mixer panel can be added to the Color Swatches panel.
Figure 7-14: The Color Mixer panel preview swatch splits to compare colors as you use the color picker or the Tint slider to make adjustments.
Figure 7-15: New levels of Alpha can be applied to Fills and Strokes and the modified swatches can be added to the Swatches panel for reuse.
Figure 7-16: The Color Mixer panel displaying edit controls and preview for a linear gradient (top) and for a radial gradient (bottom)
Figure 7-17: You can select default gradient styles (and saved custom gradients) from any of the fill Swatches pop-ups, or set one of the basic grayscale gradient styles with the Color style menu in the Color Mixer.
Figure 7-18: A two-point radial gradient from white to black (on the left), modified by setting the left pointer to gray and adding a central color pointer set to white (on the right)
Figure 7-19: An imported bitmap placed on the Stage with a new layer above it for the gradient
Figure 7-20: Finished rectangle with a radial gradient fill and a black stroke of 2. The rectangle is dragged out to match the size of the photograph on the layer below.
Figure 7-21: Both color pointers assigned a color of black for the selected gradient fill
Figure 7-22: The final gradient can be previewed as the color pointer is moved to adjust the edges of the alpha blend.
Figure 7-23: A bitmap fill applied to a selected shape. The bitmap is chosen from images stored in the library, which are displayed as thumbnails in the Mixer panel Preview area.

Chapter 8: Working with Text

Figure 8-1: The basic text options that appear in the (collapsed) Property inspector when the Text tool is active or a Static text box is selected on the Stage
Figure 8-2: The handle icons for expanding (left) and fixed-width (right) horizontal Static text boxes
Figure 8-3: Vertical text box orientations— (A) vertical expanding, (B) vertical fixed-height left to right, (C) vertical fixed-height left to right with rotate option, (D) vertical fixed-height right to left, and (E) vertical fixed-height with rotate option
Figure 8-4: Changing the default Vertical text settings in the Preferences dialog box
Figure 8-5: An unselected Dynamic or Input text field is indicated in the authoring environment by a dashed outline (A); when selected, you can adjust the size of the field by dragging any of the handles on the blue outline (B); when double-clicked for editing, the field displays either an expanding handle icon (C), or a fixed-width handle icon (D); and if the text field is set to be scrollable, the square handle changes from white/empty to black/filled (E).
Figure 8-6: The Text tool is used to create text boxes and text fields in Flash.
Figure 8-7: The Spelling Setup dialog box gives you a range of settings to control how the Check Spelling command is applied to your documents.
Figure 8-8: Check spelling with ease in Flash
Figure 8-9: The main options available for Static text in the (expanded) Property inspector
Figure 8-10: The paragraph Format Options dialog box for horizontal text invoked with the Edit format options button in the Property inspector
Figure 8-11: The paragraph Format Options dialog box for Vertical text invoked with the Edit format options button in the Property inspector
Figure 8-12: The additional options available in the Property inspector when Dynamic text behavior is selected
Figure 8-13: The Character Embedding dialog box for specifying embedded font information to be exported with your final .swf
Figure 8-14: The new Flash 8 Font rendering menu makes it easier to choose a setting that will suit your design style and file size requirements.
Figure 8-15: The two default settings for anti-aliasing in Flash 8 (readability and animation) render more smoothly than Bitmap text. Anti-alias for animation (right) results in a slightly smaller file size than Anti-alias for readability (left).
Figure 8-16: Custom anti-alias controls in Flash 8 make it easier to find a setting that smoothes text just how you like it.
Figure 8-17: The combination of thickness and sharpness set in the Custom Anti-Aliasing dialog box will determine the look of your rendered anti-aliased text.
Figure 8-18: The Missing Fonts alert box appears when fonts used in a Flash file (.fla) are not found on the local machine.
Figure 8-19: The Font Mapping dialog box used to view missing fonts and to modify mapping of substitute fonts
Figure 8-20: The missing font name is displayed in the font menu, even when text is displayed in a substitute font in the authoring environment.
Figure 8-21: Crisp aliased text (top) compared to blurry anti-aliased text (lower)
Figure 8-22: To keep text crisp (aliased), use Snap to Pixels or the Info panel to set X,Y values to whole pixels (top). If text boxes are not aligned to whole X,Y values, then the font will be anti-aliased (bottom).
Figure 8-23: Choosing to insert a new Font symbol from the Library panel options menu
Figure 8-24: Selecting a font to store in the new Font symbol and giving it a reference name
Figure 8-25: Font symbol names are followed by an asterisk in the Property inspector font menu (or in the application Text menu). Font symbols are also added to the Library list.
Figure 8-26: Setting up Linkage Properties for a Font symbol in the Flash source document (.fla)
Figure 8-27: The published source movie (.swf) with embedded font information for the Font symbol to be used in other destination movies as a runtime shared asset
Figure 8-28: Linkage settings for a Font symbol in a destination movie refer to the font information stored in the runtime Shared library
Figure 8-29: The published .swf file from a document using linked font information from a runtime shared asset
Figure 8-30: The published .swf file from a document using embedded font information
Figure 8-31: Text boxes can be modified with Free Transform options (top). To create individual characters, apply Break apart once (middle), and apply it again to create graphic text (bottom). Graphic text can be modified like any other shape in Flash.
Figure 8-32: Using the Eraser tool to delete parts of a graphic letter shape
Figure 8-33: Settings and preview window for the Blur Timeline effect
Figure 8-34: A few of the effects that can be added to text using Flash 8 Filters while preserving the editability of the text field
Figure 8-35: Adding and combining Filters on text fields is easy with the Filter tab in the Property inspector.

Chapter 9: Modifying Graphics

Figure 9-1: The Eyedropper tool used to sample a fill and apply it with the Paint Bucket tool (A, B) and to sample a stroke and apply it with the Ink Bottle tool (C, D)
Figure 9-2: The Eyedropper tool also instantly converts selected elements to the sampled fill or stroke style.
Figure 9-3: The Paint Bucket tool and Gap size options
Figure 9-4: (A) A shape filled with the Paint Bucket using a bitmap fill sampled with the Eyedropper or selected in the Mixer panel; (B) a shape drawn with the Rectangle tool using a bitmap fill selected in the Mixer panel or applied after the shape was drawn using the Selection tool and Mixer panel fill style menu; (C) a broken apart bitmap sampled with the Eyedropper tool and then applied to the finished shape using the Paint Bucket tool; (D) a shape filled with the Paint Bucket tool, using a color sampled from the bitmap with the Swatches color dropper tool
Figure 9-5: The highlight location of gradient fills can be defined by the position of the Paint Bucket tool when the fill is applied to a shape.
Figure 9-6: Paint Bucket fill applied with various Gap size settings— (A) original oval outline with decreasing gap sizes, left to right, with no fill; (B) gray fill applied with Don't Close Gaps; (C) gray fill applied with Close Small Gaps; (D) gray fill applied with Close Medium Gaps; (E) gray fill applied with Close Large Gaps
Figure 9-7: Fill applied with Lock Fill turned off (left), compared with fill applied with Lock Fill turned on and then scaled using the Gradient Transform tool (right)
Figure 9-8: The Gradient Transform tool applied to a Radial gradient (A), a Linear gradient (B), a tiled Bitmap fill (C), and a scaled Bitmap fill (D). Each handle type has an icon to indicate its function.
Figure 9-9: Adjusting the center point of a gradient fill with the Gradient Transform tool
Figure 9-10: A new Flash 8 Gradient Transform handle makes it possible to adjust the highlight of a radial gradient without moving the center point of the fill.
Figure 9-11: Rotating a bitmap fill with the Gradient Transform tool
Figure 9-12: Scaling fills symmetrically (top) and asymmetrically (bottom)
Figure 9-13: Different overflow styles applied to a Linear gradient (top right) and a Radial gradient (bottom right) using the Overflow menu in the Color Mixer panel (left). Overflow styles applied to the fills from left to right— Extend, Reflect, Repeat.
Figure 9-14: Skewing a bitmap fill with the Gradient Transform tool
Figure 9-15: Applying Gradient Transform to create different illumination effects
Figure 9-16: The Fill Transform tool used to modify default radial gradient fills (left) to create the illusion of 3D lighting effects (right)
Figure 9-17: Use the Lines to Fills command to ensure consistency when scaling raw graphics
Figure 9-18: Modifying an original shape (left) with the Expand Fill command using the Expand option (center) or the Inset option (right) will respectively bloat or shrink a fill by a specified pixel amount.
Figure 9-19: Text broken apart into letter shapes (A) can be expanded (B) or inset (C) to create custom text effects.
Figure 9-20: The Soften Fill Edges dialog box with settings for controlling the edge effect
Figure 9-21: Applying Soften Fill Edges with the Expand option and with the Inset option
Figure 9-22: A magnified view of the banded edge of a fill created by applying Soften Fill Edges (left) compared to the smooth softened edge created by applying the new Flash 8 Blur filter (right)
Figure 9-23: A shadow effect created by layering the original text over a copy that was broken apart, filled with dark gray and modified using Soften Fill Edges
Figure 9-24: The various ways to access transform commands in Flash — the Transform panel (lower-left), the Modify Transform submenu (center), and the Free Transform tool (right).
Figure 9-25: The Free Transform handles and Transform panel settings displayed for a symbol (left) and for a shape (right) that have been reselected after an initial modification
Figure 9-26: Free Transform applied to a shape using the Distort option
Figure 9-27: Free Transform applied to a shape using the Envelope option
Figure 9-28: A text field (left) broken apart once (center) and then once again (right)
Figure 9-29: Text shapes selected and filled with a custom linear gradient created in the Mixer panel
Figure 9-30: Linear gradients aligned in each letter shape with the Fill Transform tool
Figure 9-31: Copied letter shapes on a new layer with reversed gradient fill applied
Figure 9-32: Original letter shapes with gradient fill (top) and copied letter shapes with reversed and expanded gradient fill (bottom)
Figure 9-33: Copied letter shapes aligned behind the original letter shapes to create the illusion of a beveled metallic edge
Figure 9-34: A bitmap and the fill that results from sampling it with the Eyedropper tool when it is intact (left) and when it has been broken apart (right)
Figure 9-35: A bitmap broken apart and selectively deleted using the Magic Wand option of the Lasso tool
Figure 9-36: Select a bitmap (left) and choose settings in the Trace Bitmap dialog box to define the final vector image (right).
Figure 9-37: Bitmap images can be traced to create different styles of vector graphics by using low settings (center) or high settings (right).
Figure 9-38: Drawing Objects cannot contain animation, symbols, or other Drawing Objects — they are intended as holders for raw shapes only.
Figure 9-39: Two Drawing Objects (far left) combined using various Combine Objects commands to get different final results (from left to right)— Union, Intersect, Punch, Crop.
Figure 9-40: A gray oval fill with a gray stroke may not appear to have a discrete outline, but Flash allows these two elements to be selected separately.
Figure 9-41: A fill split by an overlapping line drawn on the same layer (top). Two fills of the same color merge into a compound shape when they intersect on the same layer (bottom).
Figure 9-42: A shape moved across another shape while being continuously selected (top) compared to a shape that is deselected while on top of another shape, and then reselected and moved (bottom)
Figure 9-43: The Find and Replace panel makes revisions so easy, they're almost fun.
Figure 9-44: The History panel lists steps taken as a file is authored or edited.
Figure 9-45: The Warning dialog box that appears before the History list is cleared

Chapter 10: Animation Strategies

Figure 10-1: Blurred lines in an animation effectively communicate the idea of wind or fast-moving elements rushing by.
Figure 10-2: Overlapping should be planned (as shown in the example on the right) to avoid tangents that may flatten out the depth of the composition (as shown on the left).
Figure 10-3: By using a clever but logical framing device, Richard Bazley has added a great deal of depth to this animated scene.
Figure 10-4: By using an extreme viewpoint, an otherwise simple Motion tween can add drama and humor to a scene.
Figure 10-5: By winding up before taking off in a run, a character communicates the urgency and force behind his movement.
Figure 10-6: Subtle bounces add anticipation and follow-through to head turns and other movements.
Figure 10-7: Overlapping action and secondary motion add life and personality to animation.
Figure 10-8: Acceleration is determined by mass, and objects with more mass take longer to reach terminal velocity.
Figure 10-9: The force of pulling on a rope causes the character to fly backward when the rope breaks.
Figure 10-10: A starting pattern for a bounce can be plotted using a consistent multiple to calculate the height of each bounce.

Chapter 11: Timeline Animation

Figure 11-1: When you use keyframes to gradually add to the artwork, the text appears to be written out letter by letter in the final animation.
Figure 11-2: A loosely sketched sequence can be paced by adding more "repeater" frames between the unique keyframe images.
Figure 11-3: You can insert blank keyframes to clear artwork from the Stage. Remember that the Playhead will continue along the Timeline if there are frames on any one of the layers, even if the artwork on other layers is no longer present.
Figure 11-4: Onion Skin will show grayed-out or ghosted artwork on multiple frames, while Onion Skin Outlines will show colored outlines of the artwork on multiple frames. It's hard to see the "color" here, but notice that the lines are thinner with Onion Skin Outlines (right).
Figure 11-5: You can control the number of frames visible when Onion skinning is turned on with the Modify Onion Markers menu, or by dragging the Onion skin markers to a new position on the Timeline.
Figure 11-6: With Edit Multiple Frames toggled on, you can select elements on individual keyframes in a sequence (left) to be modified simultaneously (right).
Figure 11-7: When you specify a tween type in the Property inspector, the relevant options for controlling the tween appear.
Figure 11-8: After a dot is drawn on keyframe 1 and an arc is drawn on keyframe 5, a Shape tween is applied to render the shapes on the frames in the span between — creating an animation.
Figure 11-9: The contents of the first keyframe in your span will define the starting point for the Shape tween.
Figure 11-10: The contents of the final keyframe after your span will define the ending point for the Shape tween.
Figure 11-11: On the first keyframe, specify Shape as the tween type with the Property inspector Tween menu.
Figure 11-12: When a Shape tween is added to create an animation from one keyframe to another, the transition artwork that Flash generates may not look how you expect it to.
Figure 11-13: Placing shapes on individual layers and adding Shape Hints to control the way that Flash renders inbetween shapes improves the precision of Shape tweens.
Figure 11-14: Shape Hints positioned on a shape in the starting keyframe for a Shape tween
Figure 11-15: Shape Hints aligned to points on a shape in the ending keyframe of the tween
Figure 11-16: The contextual menu offers some options for working with Shape Hints.
Figure 11-17: The artwork on the first keyframe of the span you want to Motion tween should be a text box, a group, an Object, or a symbol on its own layer — anything except a raw shape will work.
Figure 11-18: Modify the features of the symbol on the end keyframe that you want to interpolate with a Motion tween.
Figure 11-19: Several options for Motion tweens are available in the Property inspector.
Figure 11-20: Multiple items can be animated simultaneously by creating tweens on individual layers.
Figure 11-21: Custom Easing enables curve-based control of Motion tweened elements. The default diagonal line creates an even transformation across the span of a tween by mapping the percentage of change consistently to the number of elapsed frames.
Figure 11-22: An Ease value of -100 (In) set in the Property inspector translates to a gently sloped or concave line in the Custom Easing curve (top). An Ease value of 100 (Out) translates as a gently rounded or convex line (bottom).
Figure 11-23: An Ease In curve with the start anchor handle extended along the 0% axis
Figure 11-24: You can drag the edit handles on the start and end anchor points of the curve to change the direction and the height of the curve.
Figure 11-25: You can select frame spans on multiple layers to move at one time. Be sure to use Copy Frames rather than simply Copy to move all the frames to the Clipboard.
Figure 11-26: In the Create New Symbol dialog box, select a symbol behavior and enter a meaningful name for your new symbol.
Figure 11-27: Select the first frame in your new symbol timeline and use Paste Frames to insert the frames and layers from the Clipboard.
Figure 11-28: When you use Paste Frames to place the content from the Clipboard into your symbol, layers and keyframes are preserved.
Figure 11-29: The original animation layers can help you to sequence and visually align the new symbol instances as you rebuild your project.
Figure 11-30: The Main Timeline becomes easier to manage as you replace the tweened and frame-by-frame sequences with nested symbol instances.
Figure 11-31: Movie Clips make it easy to place multiple instances of an animated element with different effects applied.
Figure 11-32: ActionScript can be added to symbol timelines (top) or used to target symbol instances (bottom) to control the playback of animated elements, independent of the Main Timeline.
Figure 11-33: By transforming symbol instances, you can add almost endless variation to the appearance of your animated sequences without having to modify any keyframe artwork.
Figure 11-34: Place the copied tween sequence immediately following the final keyframe of the original tween on the symbol Timeline.
Figure 11-35: After the sequence is reversed, you can make adjustments to polish the loop.

Chapter 12: Applying Filters and Effects

Figure 12-1: The new Flash 8 Filters panel makes it easy to add live effects.
Figure 12-2: Individual settings for applied filters can be adjusted at any time by selecting a filter in the Filters panel live list.
Figure 12-3: Some Flash 8 filter effects have unique controls, but most are created with different combinations of a series of basic settings.
Figure 12-4: Use the Transform panel to modify the duplicate symbol instance so it will create a more realistic offset shadow.
Figure 12-5: A Drop shadow filter applied to the skewed symbol instance with the Hide object option enabled, and a few adjustments to the default settings, result in a realistic, dimensional shadow.
Figure 12-6: The Presets submenu in the Filters panel enables you to manage and apply any custom filter settings or filter combinations that you want to save for reuse.
Figure 12-7: You can name and save custom settings for a specific filter or a combination of filters for reuse.
Figure 12-8: Saved filter presets appear alphabetically in the Presets menu — the Presets are saved on an application level for reuse in any active document.
Figure 12-9: The interpolation of filters in a tween can be controlled separately from the interpolation of other characteristics by adjusting a custom easing curve.
Figure 12-10: The options for adjusting color in Flash 8 include the Color Mixer panel (A), the Properties Color menu (B), and the new Adjust Color filter (C) — which enables instance-level color transformations similar to the raw color edits supported in the Color Mixer panel.
Figure 12-11: The color controls loaded in the Filters panel when the Adjust Color filter is applied enable subtle color transformations of symbol instances and text fields.
Figure 12-12: Numeric settings applied with the Adjust Color filter Brightness result in less extreme value changes than Percentage settings applied with the Color property Brightness.
Figure 12-13: The Advanced Effect dialog box shown with the symbol instance testStar, with no effect applied
Figure 12-14: Using a combination of relative and absolute Alpha values, the transparency levels in the original testStar instance can be inverted.
Figure 12-15: The Blend mode menu is available in the Property inspector when you select a Movie Clip or Button instance in Flash 8 Professional.
Figure 12-16: A base image (left) and a blend image (center) overlapped with blend mode set to Normal or Layer create a standard layered graphic with no mixing of pixel values (right).
Figure 12-17: The twelve different effects that can be created by applying Flash 8 Blend modes to layered images — the results will vary depending on the images that are combined, but the formula used for each blend type is consistent. Unlike other blend modes, the Alpha and Erase blend modes require a nested structure with a Layer blend applied to the parent symbol instance.
Figure 12-18: Settings and preview for the Copy to Grid Timeline effect
Figure 12-19: Settings and preview for the Distributed Duplicate Timeline effect
Figure 12-20: The various Timeline effects that ship with Flash are organized in categories in the Timeline effects menu.
Figure 12-21: The default settings for a Transition Timeline effect (top) can be adjusted and previewed to achieve the final result that you like (bottom).
Figure 12-22: After a Timeline effect is rendered, you will see a newly named layer for the animated frame span and you will find symbols in the Library that were generated by Flash to create the effect from your original item.
Figure 12-23: After you save the .xml and .jsfl files for a custom Timeline effect in the Effects folder, and you restart Flash, the custom effect is added to the Timeline Effects menu.
Figure 12-24: The Settings dialog box for custom Timeline effects may have a more generic appearance than the Settings dialog box for built-in Timeline effects.
Figure 12-25: The applied Jitter effect adds new symbols to the Library and renders a span of frames on the Timeline to hold the animated Graphic symbol.

Chapter 13: Applying Layer Types

Figure 13-1: A unique icon in the layer stack identifies each of the layer types. You can quickly assign or change the behavior of a layer using the contextual menu.
Figure 13-2: Use the Layer Properties dialog box to convert a standard layer into a Guide layer, Mask layer, or even a layer folder.
Figure 13-3: Use snapping to align the center point of elements on your art layers with a reference shape or line on your Guide layer (in vector format).
Figure 13-4: The content of the Guide layer is not visible when the movie is published or viewed in the test movie environment.
Figure 13-5: One or more art layers can be nested below a Motion guide layer.
Figure 13-6: Snapping the registration point of the animated item to the Motion guide on the beginning (left) and end (right) keyframes of the tween
Figure 13-7: Guided tween previewed with Onion skinning turned on
Figure 13-8: By default, a tweened item maintains the same orientation as it tweens along a curved path (as shown on the left). Selecting Orient to path keeps an animated item headed along the curves or loops in a Motion guide (as shown on the right).
Figure 13-9: When Free Transform is active, you can modify the registration point of a symbol without changing the alignment of the artwork in relation to the center point.
Figure 13-10: The content on the upper layer defines what is visible in the lower layer(s).
Figure 13-11: Convert the upper layer into a Mask layer by selecting Mask from the contextual menu.
Figure 13-12: When the mask is active, the content on the Mask layer is no longer visible, but it will define the visible area of the content on the masked layer underneath.
Figure 13-13: With the Mask layer unlocked, the contents are visible and editable.
Figure 13-14: Grouped filled shapes make it easier to position complex masks.
Figure 13-15: Instances of one oval symbol combined to create a graphic and a mask effect
Figure 13-16: Masking a text block with a tweened shape (shown on top) and the final reveal effect (shown on the bottom)
Figure 13-17: A bitmap pattern (left) placed on the art layer and masked with text (right)
Figure 13-18: Apply a Drop Shadow Filter with the Knockout option to the copy of your text to add more visual definition to the letter shapes.
Figure 13-19: Insert a Movie Clip symbol that will contain the Motion guide to control the animated mask content.
Figure 13-20: A Motion guide and a Motion tween layer added to the Movie Clip timeline
Figure 13-21: The first frame of the Movie Clip animation visible on the Mask layer in the Main Timeline
Figure 13-22: Use Edit-in-place mode to align the Motion guide on the Movie Clip timeline with the content on the masked layer of the Main Timeline.
Figure 13-23: The final .swf previewed in the test movie environment
Figure 13-24: A Flash document with the original layer structure for some bitmaps, symbols, shapes, and a broken-apart text block to be distributed to layers
Figure 13-25: The same Flash document after Distribute to Layers has been applied. All selected items have been moved to newly created, auto-named layers, leaving the original layers empty.

Chapter 14: Character Animation Techniques

Figure 14-1: Anticipation is used to accentuate Weber's take-off.
Figure 14-2: Overlapping actions can accentuate movement in any direction.
Figure 14-3: Blur lines simulate the effect of motion that is "faster than the eye can see."
Figure 14-4: Shooting on a plain background makes it easier to isolate the movement of the figure in the animation.
Figure 14-5: Although the pacing and key outlines are sequenced to follow the video template exactly, the sketched lines introduce some looseness.
Figure 14-6: Working with line art gives you the freedom to add other graphic elements or text that interact with the animated figure seamlessly.
Figure 14-7: A traced sequence from a basic walk cycle that was created in Poser
Figure 14-8: A series of angled poses in a walk cycle work well to create the illusion that the figure is walking toward the viewer if the final Movie Clip is scaled as it is Motion tweened from the far corner to the near corner of the Stage.
Figure 14-9: A stylized walk cycle created by flipping and reusing the same three drawings for both legs of an outlined character
Figure 14-10: By designing the character in reusable pieces, you can simplify your workflow while increasing the options for how the character can be animated.
Figure 14-11: With small modifications, the same artwork can be used for the front and back of the character.
Figure 14-12: When a character is designed strategically, you can reuse your animation as well as your artwork to quickly create other characters.
Figure 14-13: Lip-syncing tricks include economy of effort, such as having a character begin to speak and then turn away naturally (left). Appropriate props and even moustaches can also be used to hide mouths (right).
Figure 14-14: A mouthless head in both of the basic orientations— face forward and profile with sound and animation layers for adding lip-sync
Figure 14-15: You can combine a few basic phonemes to create lip-synced speech.
Figure 14-16: A few shots from the bedroom scene in The Journal of Edwin Carp
Figure 14-17: The chase scene from the Weber cartoon is created with a looping pan.
Figure 14-18: The opening pier scene from the Weber cartoon has a feeling of depth created by using increasing levels of blur on the background layers.
Figure 14-19: Flash artwork that looks too "clean" for broadcast (top) can be modified with filters in AfterEffects to look more organic (below).

Chapter 15: Adding Sound

Figure 15-1: This is a stereo sound in the Flash document's library.
Figure 15-2: The timeline for your button should resemble this one.
Figure 15-3: The Property inspector controls the options for sound usage on a given frame.
Figure 15-4: The Play and Stop buttons on the Stage
Figure 15-5: This sound will play when the Play button is clicked.
Figure 15-6: Any sound that's currently playing stops when the movie reaches a keyframe with a stopAllSounds() action.
Figure 15-7: The Sound behaviors in the Behaviors panel
Figure 15-8: The Linkage Properties dialog box
Figure 15-9: The Load Sound from Library parameters
Figure 15-10: The Load streaming MP3 file behavior parameters
Figure 15-11: The Play Sound behavior parameters
Figure 15-12: The event options available for behaviors attached to buttons
Figure 15-13: The Stop All Sounds behavior dialog box
Figure 15-14: The sound-editing tools and options of the Edit Envelope dialog box, which is accessed from the Property inspector
Figure 15-15: The Flash tab of the Publish Settings dialog box has several options to control audio quality.
Figure 15-16: The various options in the Sound
Figure 15-17: The Sound Properties dialog box enables you to control the compression settings and to precisely balance all other related settings for each individual sound in the Library.

Chapter 16: Importing Artwork

Figure 16-1: A vector image drawn in Flash (left) and the same image imported as a bitmapped GIF graphic (right)
Figure 16-2: The same vector (left) and bitmap (right) image scaled to 200 percent in Flash to illustrate the difference in image quality
Figure 16-3: File size comparison of an imported bitmap image (left), and a traced vector image of equivalent complexity (right)
Figure 16-4: The Import dialog box as it appears on Mac OS X. You can import multiple files in the same batch by selecting them from the file list before clicking Import.
Figure 16-5: You can import images in a numbered sequence and place them on successive keyframes automatically using the Import to Stage option.
Figure 16-6: The Bitmap Properties dialog box controls the compression settings applied to bitmaps imported into Flash.
Figure 16-7: Top— A GIF image imported to Flash using PNG/GIF (Lossless) compression (left) and imported with forced JPEG (Lossy) compression (right). Bottom — A JPEG image imported to Flash using JPEG (Lossy) compression (left) and imported with forced PNG/GIF (Lossless) compression (right).
Figure 16-8: The same bitmap image as it displays in the published Flash movie (.swf) using imported JPEG data (left) and using a reduced Quality setting of 10 (right)
Figure 16-9: Compare the images with Flash smoothing (right) to the images with no smoothing (left).
Figure 16-10: The Swap Bitmap dialog box lists all the bitmap symbols available in your current project Library.
Figure 16-11: Compare the raster version (left) of the sketch to its traced vector version (right).
Figure 16-12: Use the Trace Bitmap dialog box to select settings for converting a raster image into vector shapes.
Figure 16-13: Images with simple shapes and limited colors will be more scalable when converted from bitmap (left) to vector art (right) using the Trace bitmap command.
Figure 16-14: A reduced-color GIF image (left) can be traced and then simplified using the Optimize command and Eraser tool in Flash (right).
Figure 16-15: The Import Options dialog box used for setting conversion options for most imported graphics files
Figure 16-16: Use this special import dialog box to choose conversion settings for Fireworks PNG files.
Figure 16-17: The FreeHand Import dialog box is used to specify how the vector file will be handled when placed into Flash.
Figure 16-18: You can edit FreeHand and Fireworks files directly in Flash, but you still need to convert shapes and text elements into symbols to store in the Library for reuse.
Figure 16-19: Layered vector graphic imported as grouped artwork in Flash layers on the Main Timeline
Figure 16-20: Imported artwork converted to Flash symbols and tweened to create an animated logo
Figure 16-21: Compare the original imported vector artwork of the light bulb (left) with the stylized version drawn in Flash (right).
Figure 16-22: Make sure that you have finished editing your text before converting it into outlines. The text at the top can be edited, whereas the text at the bottom can only be modified as individual shapes.
Figure 16-23: A complex vector graphic simplified with maximum smoothing
Figure 16-24: Bitmap caching can be enabled in the Property inspector when a Movie Clip or Button symbol is selected in the authoring environment.

Chapter 17: Displaying Video

Figure 17-1: The Select Video screen
Figure 17-2: The Deployment screen
Figure 17-3: The Embedding screen
Figure 17-4: The Editing screen of the video import process
Figure 17-5: The Encoding screen of the video import process
Figure 17-6: The Crop and Trim tab of the Encoding screen
Figure 17-7: The Finish Video Import screen
Figure 17-8: The Flash Video Encoding Progress dialog box
Figure 17-9: The Embedding screen options
Figure 17-10: The Encoding screen options
Figure 17-11: The Select Video screen in Flash Pro 8
Figure 17-12: The Skinning screen of Flash Pro 8
Figure 17-13: The Finish Video Import screen
Figure 17-14: The FLVPlayback component
Figure 17-15: The remote video clip playing in the FLVPlayback component
Figure 17-16: The Deployment screen options in Flash Pro 8
Figure 17-17: The Encoding screen options in Flash Pro 8
Figure 17-18: The Skinning screen options
Figure 17-19: The final Flash Video clip playing in the FLVPlayback component
Figure 17-20: The Flash Video Cue Points dialog box
Figure 17-21: The Select Skin dialog box
Figure 17-22: The PlayPauseButton component
Figure 17-23: The SeekBar component displaying the current position of the video
Figure 17-24: The Flash Video Encoding Settings dialog box
Figure 17-25: The new plant_001 cue point
Figure 17-26: The exit_001 cue point
Figure 17-27: The complete cue list
Figure 17-28: The Encoding tab options
Figure 17-29: The encoding progress in the Flash 8 Video Encoder application
Figure 17-30: The Character Embedding dialog box
Figure 17-31: A dynamic text label on top of the video area
Figure 17-32: The text below the FLVPlayback component
Figure 17-33: The .flv file streaming from the Influxis server
Figure 17-34: Choosing a connection speed
Figure 17-35: The Flash Video 8 Encoder application
Figure 17-36: The Export menu option in QuickTime Player Pro, shown in the Windows version
Figure 17-37: The encoding settings
Figure 17-38: You can choose from several output formats in Sorenson Squeeze 4.2 Compression Suite.
Figure 17-39: The two presets added to the lizard.mpg clip
Figure 17-40: The new Filter Settings dialog box
Figure 17-41: The Audio/Video Compression Settings dialog box
Figure 17-42: The Video Properties dialog box
Figure 17-43: The vWin instance
Figure 17-44: The alpha video footage playing on top of the forest background
Figure 17-45: The Crop and Trim tab settings
Figure 17-46: The finished Flash movie

Chapter 18: Understanding Actions and Event Handlers

Figure 18-1: The Behaviors panel showing a Button component with a behavior applied
Figure 18-2: The categories in the Add Behavior menu
Figure 18-3: The settings for the Button component
Figure 18-4: The Go to URL settings
Figure 18-5: The Actions panel enables you to instantly add, delete, or change Flash movie commands.
Figure 18-6: The Script Assist mode displays a more user-friendly interface for controlling action parameters.
Figure 18-7: The Stop button on the Stage
Figure 18-8: Adding a release event to the on handler
Figure 18-9: Adding a stop action to the on handler.
Figure 18-10: The artwork of the Flash movie designed for a Pocket PC screen
Figure 18-11: The square will act as the active area of the Button symbol.
Figure 18-12: The aqua blue tint of the Button instance indicates the presence of a button that has only a Hit state.
Figure 18-13: The thumbprint graphic now has an invisible button on top of it.

Chapter 19: Building Timelines and Interactions

Figure 19-1: This figure shows one method of diagramming Flash timelines.
Figure 19-2: Flash movies can be flow-charted in this fashion. This diagram is similar to the Movie Explorer's method of displaying Flash movie information.
Figure 19-3: Among other things, the Property inspector enables you to name each Movie Clip instance that appears on the Stage.
Figure 19-4: You can name Movie Clip instances in the Property inspector.
Figure 19-5: You can use frame comments to describe the actions on a keyframe.
Figure 19-6: The Insert Target Path dialog box can help you build the path to a Movie Clip instance.
Figure 19-7: The Goto and Stop at frame or label behavior settings
Figure 19-8: The Goto and Play at frame or label behavior settings
Figure 19-9: The Timeline window showing the frames of the keysClip Movie Clip symbol
Figure 19-10: The Linkage Properties settings for the key_1.wav (or key_1.aif) file in the Library panel
Figure 19-11: The Library panel's Linkage column displays the identifier values for all linked assets.
Figure 19-12: Each sound requires a unique instance name (the lower field name).
Figure 19-13: Don't be afraid to keep information separated on actions, labels, and behaviors layers. Separating the information will make it much easier for you to access the appropriate sections of your timelines.
Figure 19-14: The Play Sound behavior can play a sound set up by the Load Sound from Library behavior.
Figure 19-15: The //play sound comment lets you know what the behavior on this keyframe does.
Figure 19-16: This Play Sound behavior targets the sndKey_2 instance.

Chapter 20: Making Your First Flash 8 Project

Figure 20-1: The completed presentation
Figure 20-2: Our organizational chart will help us plan our Flash movie architecture.
Figure 20-3: The Flash document properties
Figure 20-4: You use frame labels to differentiate each section of the site.
Figure 20-5: The content in the heading, background, and frame layers will be present throughout the entire movie.
Figure 20-6: Unlike labels, you cannot use frame comments in ActionScript. Comments can provide quick visual references for ActionScript code.
Figure 20-7: Use the Text tool to add the Introduction text to the Stage.
Figure 20-8: Add text that describes each section of the presentation.
Figure 20-9: This marker designates the active section.
Figure 20-10: When the user goes to the Video Equipment section, the marker will appear next to the Video Equipment text.
Figure 20-11: You should have six filled keyframes on the item layers of the videoEquip timeline.
Figure 20-12: The mcEquip instance will only be present in the video section of the timeline.
Figure 20-13: The introButton symbol settings
Figure 20-14: Onion skinning enables you to align the contents of several keyframes accurately.
Figure 20-15: The Hit state defines the "active" area of the Button instance in the movie. When the user's mouse pointer enters this area, the Over frame of the button is displayed.
Figure 20-16: Add text to the buttons to describe their functionality.
Figure 20-17: This text field will display the text associated with the first video item.
Figure 20-18: The Actions panel displaying the code to assign text to the TextArea component
Figure 20-19: The BlurFader component snaps to the top-left corner of the Movie Clip instance.
Figure 20-20: The TextArea component can show a live preview of formatted text in the authoring environment. The screen reader can read aloud this text field's contents.
Figure 20-21: The Accessibility panel controls options for the Flash movie and its elements.
Figure 20-22: Window-Eyes can read the Name and Description contents for buttons.

Chapter 21: Publishing Flash Movies

Figure 21-1: The Streaming Graph indicates how a movie will download over a given modem connection. Shown here is our bandwidth.swf as it would download over a 56 Kbps modem.
Figure 21-2: The Frame By Frame Graph shows you the byte demand of each frame in the Flash movie.
Figure 21-3: The Formats tab of the Publish Settings dialog box enables you to select the published file formats and use default or custom names for these published files.
Figure 21-4: The Flash tab of the Publish Settings dialog box controls the settings for a movie published in the Flash format.
Figure 21-5: The Test Device menu, prepopulated with supported devices for the Flash Lite 1.1 Symbian Series 60 device template.
Figure 21-6: The SWF information area when the dimensions of the movie loaded are inconsistent with the selected device's screen.
Figure 21-7: The Device Settings dialog box can be launched from the main document editing window's document pane.
Figure 21-8: The HTML tab controls flexible Flash movie options — you can change these options without permanently affecting the Flash movie.
Figure 21-9: You can finesse every subtle aspect of a GIF animation or still image with these settings of the GIF tab of the Publish Settings dialog box.
Figure 21-10: The settings of the JPEG tab are limited because JPEGs are still images with relatively few variables to address.
Figure 21-11: The settings found on the PNG tab closely resemble those on the GIF tab. The PNG was engineered to have many of the advantages of both the GIF and JPEG formats.
Figure 21-12: The Profile features in the Publish Settings dialog box

Chapter 22: Integrating Flash Content with Web Pages

Figure 22-1: The Flash Player menu with control options disabled
Figure 22-2: The Flash Player menu with control options enabled
Figure 22-3: The Create New Profile dialog box, showing the new profile name
Figure 22-4: The Flash Player 6 r65 settings in the Flash tab
Figure 22-5: The Publish Settings dialog box
Figure 22-6: The Optimize for Flash Player 6 r65 alert box
Figure 22-7: A sample Flash Players folder structure for use with Mozilla FireFox on Windows
Figure 22-8: A sample Flash Players folder structure for use with Mozilla FireFox or Apple Safari on Mac OS X

Chapter 23: Using the Flash Player and Projector

Figure 23-1: A movie playing as a projector
Figure 23-2: Select the projector formats in the Publish Settings dialog box.
Figure 23-3: Choose File ð Create Projector from the stand-alone player menu.
Figure 23-4: If you turn on Script Assist for an fscommand() action, you can choose from a list of commands.
Figure 23-5: The settings for the pill button instance
Figure 23-6: The Toggle Full Screen mode behavior dialog box
Figure 23-7: The Publish Settings dialog box
Figure 23-8: The Privacy tab
Figure 23-9: The Local Storage tab
Figure 23-10: The Microphone tab
Figure 23-11: The default view of the Camera tab
Figure 23-12: An active preview of a camera's output in the Camera tab

Chapter 24: Knowing the Nuts and Bolts of Code

Figure 24-1: The Actions panel with a loadMovie() action in the Script pane
Figure 24-2: The Help panel with the definition for loadMovie
Figure 24-3: A variable declaration in the Actions panel
Figure 24-4: The Property inspector settings for the Input Text field
Figure 24-5: The tPasswordEnter instance will be an input text field with the password option enabled and a restricted character length of eight characters.
Figure 24-6: Here you have four text areas— two Static text blocks on the left, and two Input text fields on the right. The Static text cannot be altered and/or "read" by ActionScript.
Figure 24-7: The errorMessageClip symbol contains an empty first frame and an animation that begins on the start label. This animation will play only if the user enters an incorrect login.
Figure 24-8: Your Main Timeline should have three key elements — a login frame, an error message Movie Clip, and a success frame.

Chapter 25: Controlling Movie Clips

Figure 25-1: An overview of the MovieClip object
Figure 25-2: Properties of the MovieClip object
Figure 25-3: Common methods of the MovieClip object
Figure 25-4: The mcCircle instance
Figure 25-5: The mcCircleBig instance
Figure 25-6: The statusClip symbol timeline with a Blur filter tween
Figure 25-7: The mcDog_1 instance will be used as your reference MovieClip object. The scale and transparency of this dog instance will not be changed.
Figure 25-8: The mcSign instance will be used to remove duplicates of the mcDog_1 Movie Clip instance.
Figure 25-9: The duplicateMovieClip() method creates a new instance of a MovieClip object. Unless you alter the new instance's X and Y positions, it will appear directly above the parent instance.
Figure 25-10: The sliderRule's starting point (just to the right of the first left-hand circle) needs to be at the slider Movie Clip's zero X coordinate.
Figure 25-11: The starting X coordinate for the mcPos Movie Clip instance is set to 100. When the Flash movie starts, this value will be applied to the scale and alpha properties of the mcDog_2 instance on the Main Timeline.
Figure 25-12: At this point, your Flash document's Stage should contain the dogClip and parkSignClip artwork, as well as two instances of the sliderClip symbol.
Figure 25-13: The new BlurFilter effect applied to the mcDog_2 instance.

Chapter 26: Using Functions and Arrays

Figure 26-1: The completed Flash movie with the menu items
Figure 26-2: The Main Timeline has frame labels and artwork for each section of the presentation.
Figure 26-3: The itemClip symbol will be used to create each button in the dynamic menu. Using ActionScript, the tLabel field will be filled with the appropriate section name.
Figure 26-4: The Linkage Properties dialog box
Figure 26-5: The New Document dialog box

Chapter 27: Interacting with Movie Clips

Figure 27-1: The shape flag determines the boundary of the Movie Clip instance for the hitTest() method.
Figure 27-2: The circle symbol is now linked to the Flash movie.
Figure 27-3: The left image shows the mouse outside the large circle, whereas the right image shows the mouse inside the large circle with the small circle attached.
Figure 27-4: The parameters for this instance of the Button component
Figure 27-5: These settings will change the color of the mcDog_1 instance.
Figure 27-6: The imported sounds with their linkage identifiers displayed
Figure 27-7: Screenshot of the box lid animation
Figure 27-8: Screenshot of the linkage identifier
Figure 27-9: Part of the Publish Settings dialog box
Figure 27-10: The frame artwork
Figure 27-11: The siteLogo artwork
Figure 27-12: The cbtPrint instance

Chapter 28: Sharing and Loading Assets

Figure 28-1: The content of this movie starts on the main label.
Figure 28-2: The rectangle artwork will be part of the loader symbol.
Figure 28-3: The barClip symbol settings
Figure 28-4: Decrease the X scale of the bar_mc instance to 1.0% in the Transform panel.
Figure 28-5: The percent field will display the current percent loaded of the movie.
Figure 28-6: The progress bar grows as the movie loads into the Flash Player.
Figure 28-7: A timeline structure for preloading a movie with components
Figure 28-8: The start label with the Flash components
Figure 28-9: The Bandwidth Profiler showcasing the distribution of bytes
Figure 28-10: The Linkage Properties for the FLVPlayback component
Figure 28-11: The settings for the linkedAssets symbol
Figure 28-12: The timeline of the Flash movie
Figure 28-13: The ActionScript 2.0 Settings dialog box
Figure 28-14: The Bandwidth Profiler showcasing the optimized layout
Figure 28-15: The diagram on the left illustrates a Web site that uses multiple HTML pages, each with an individual .swf file. The diagram on the right shows a Web site that uses one HTML page (or frameset, or iframe) that has one primary .swf file, which loads other .swf files as needed.
Figure 28-16: The cbtLoad instance
Figure 28-17: The bandwidth.swf file loads into the top-left corner of the Stage.
Figure 28-18: An instance of the holderClip symbol will hold the loaded .swf file.
Figure 28-19: The tImg field will specify the path to the JPEG image.
Figure 28-20: The vWin instance will display the video from external .flv files.
Figure 28-21: The video as it plays in the vWin instance
Figure 28-22: The newly resized video clip
Figure 28-23: The mcLoader instance appears when you click the Load Asset button.
Figure 28-24: The parameters of the Loader component
Figure 28-25: The ProgressBar component in action
Figure 28-26: Add runtime-sharing information directly in the Convert to Symbol dialog box.
Figure 28-27: Give each embedded font face a descriptive name that indicates its functionality within the Flash movie.
Figure 28-28: Each asset in the Library of the Shared library document needs a unique name.
Figure 28-29: If a Shared library asset is used in another movie, the Linkage Properties indicate the name (and path) of the Shared library .swf file.
Figure 28-30: The Library panel enables you to quickly view the Linkage settings for each item.
Figure 28-31: You can update shared assets in other Flash documents that use them.

Chapter 29: Sending Data In and Out of Flash

Figure 29-1: The Property inspector controls the settings for text fields.
Figure 29-2: The Dynamic text field settings in the Property inspector
Figure 29-3: These text fields accept input from your site visitors.
Figure 29-4: The Receipt field will display the time that the server received the Flash form data.

Chapter 30: Applying HTML and Text Field Formatting

Figure 30-1: You can selectively change text within one text block or field.
Figure 30-2: URL-linked text appears with dashed underlines. You will not see this dashed underline in the actual Flash movie file (.swf).
Figure 30-3: The formatted text
Figure 30-4: The JPEG image with wrapping text
Figure 30-5: The settings for the tDisplay1 field
Figure 30-6: The Character Embedding options
Figure 30-7: The settings for the tDisplay2 field
Figure 30-8: The two primary settings for anti-aliasing in Flash Player 8 movies.
Figure 30-9: The settings for the tEmbed1 field
Figure 30-10: The abc text with styles applied to the b and c characters.
Figure 30-11: The two text fields with "normal" anti-aliasing (left) and "advanced" anti-aliasing (right).
Figure 30-12: The Convert to Symbol dialog box
Figure 30-13: The scrollRect property masks the lower half of the TextField instance.
Figure 30-14: The scroll bar attached to the right of the text display
Figure 30-15: A text field with a starting selection index of 3
Figure 30-16: A text field with a starting selection index of 5 and an ending index of 9
Figure 30-17: A text field with a caret index of 5

Chapter 31: Creating a Game in Flash

Figure 31-1: Our version of the hangman is a tribute to aliens and old computer games.
Figure 31-2: The headClip symbol uses the head symbol and displays it with different color schemes. This timeline is shown with the Preview in Context option enabled in the Timeline window.
Figure 31-3: The Linkage Properties dialog box
Figure 31-4: The tStatus field displays status messages initiated from the GameModel class throughout the game. The tLost and the tWon instances display the score.

Chapter 32: Managing and Troubleshooting Flash Movies

Figure 32-1: The Code Hints menu
Figure 32-2: The Code Hints tooltip indicates the correct parameters for the attachMovie() method.
Figure 32-3: Code hints work for ActionScript 2.0 declared objects as well.
Figure 32-4: The default settings for the Actions panel
Figure 32-5: Accessing the Preferences from the Actions panel
Figure 32-6: Your Output panel should look similar to this figure once you have completed Step 6.
Figure 32-7: The Debugger panel, showing all buttons and element names
Figure 32-8: You can see the breakpoint icon residing in the gutter of the Actions panel.
Figure 32-9: The Remote Debug dialog box as it appears from the browser running the debugged Flash movie
Figure 32-10: You could use this matrix for Flash movies that will be viewed and used within a browser. It covers a wide range of available and commercially used browsers.

Chapter 33: Using Components

Figure 33-1: The ComboBox component in Flash 8
Figure 33-2: The Flash MX ComboBox component
Figure 33-3: The Components panel in Flash Basic 8 (left) and Flash Pro 8 (right)
Figure 33-4: The Property inspector enables you to quickly configure a component.
Figure 33-5: The Component Inspector as seen in Flash Basic 8
Figure 33-6: The Component Inspector panel as seen in Flash Professional 8
Figure 33-7: The Button component as it appears in a Flash movie at run time
Figure 33-8: A selected (true) check box, left, and a cleared (false) check box, right
Figure 33-9: A standard ComboBox instance, shown closed (left) and open (right)
Figure 33-10: An editable ComboBox instance, shown with default display (left) and entered text (right)
Figure 33-11: The List component at run time
Figure 33-12: A group of RadioButton instances
Figure 33-13: The ScrollPane component at run time
Figure 33-14: The TextArea component displaying HTML formatted text
Figure 33-15: The UIScrollBar component beside a TextField instance
Figure 33-16: A UIScrollBar instance with a horizontal value of true
Figure 33-17: The settings for the pictureClip symbol
Figure 33-18: The Character Options dialog box
Figure 33-19: The HaloTheme symbol
Figure 33-20: The CheckBox component's skin assets
Figure 33-21: The new check mark graphics

Chapter 34: Binding Data and Events to Components

Figure 34-1: The settings for the cxc instance
Figure 34-2: The Schema tab information for the cxc instance
Figure 34-3: The Add Binding dialog box
Figure 34-4: The Bound To dialog box
Figure 34-5: The XML data populating the List component
Figure 34-6: The FLVPlayback component settings
Figure 34-7: The updated Schema tab of the cli instance
Figure 34-8: The Add Binding dialog box
Figure 34-9: The Bound To dialog box
Figure 34-10: The updated Bindings tab for the List component
Figure 34-11: The selected clip playing in the FLVPlayback component
Figure 34-12: The cli instance to the left of the cfp instance
Figure 34-13: The empty DataGrid instance
Figure 34-14: The new data in the DataGrid component
Figure 34-15: The custom header text for each column

Chapter 35: Building an Image Gallery Component

Figure 35-1: The completed project
Figure 35-2: The GD library information as displayed by the info.php script.
Figure 35-3: The gallery.flp file from the starter files folder
Figure 35-4: The Create New Symbol dialog box
Figure 35-5: The paneHolder clip settings
Figure 35-6: The basic thumbnails loading into the Gallery component
Figure 35-7: The full-size JPEG image for the first thumbnail
Figure 35-8: The updated ScrollPane instance
Figure 35-9: The BevelFilter applied to the thumbnail image
Figure 35-10: The blurred copy of the thumbnail image
Figure 35-11: The caption text below the JPEG image
Figure 35-12: The new right-click menu item
Figure 35-13: The Component Definition dialog box
Figure 35-14: The updated Component Definition dialog box
Figure 35-15: The Parameters tab for the Gallery component

Chapter 36: Working with Raster Graphics

Figure 36-1: The panel-based interface for Fireworks 8 is similar to the UI you'll see in other Macromedia Studio 8 programs.
Figure 36-2: The Fireworks Quick Export button provides a shortcut to other core programs and common file options.
Figure 36-3: The Edit with option in the Flash contextual menu (A), enables you to choose an external image-editing application (B) to modify raster images that you've placed in Flash.
Figure 36-4: In Fireworks, you can easily add complex masks and editable text to layers with your bitmap images.
Figure 36-5: Import Settings for translating Fireworks PNG files to the Flash authoring environment
Figure 36-6: The masked bitmap and editable text block with Drop shadow filter settings from the Fireworks PNG file are preserved in the Flash authoring environment.
Figure 36-7: Preview tabs in the Fireworks Document window and the Optimize panel for choosing file formats and compression settings
Figure 36-8: The Fireworks Image Preview window provides all the options you need to decide on the settings to use for the final exported image.
Figure 36-9: The History panel records your editing steps in sequential order.
Figure 36-10: Custom commands are added in sequential order for a batch process.
Figure 36-11: When Flash detects that an image is part of a sequence, a dialog box gives you the option to bring in all the images.
Figure 36-12: Import the JPEG sequence to a Movie Clip timeline as a series to automatically place each image on a new keyframe.
Figure 36-13: You can separate a photograph with elements that recede from the camera into layers that represent different depths of the picture plane.
Figure 36-14: Each layer of the modified image is saved out as a separate file. The elements that will be layered and animated over the background landscape image are saved with transparent backgrounds.
Figure 36-15: In the first keyframe of the tweened animation sequence, Movie Clips for each image are layered on a Movie Clip timeline to re-create the composition of the original photo. The images are scaled to 50-percent size, and varying levels of Blur filter are added to set up the illusion of a cinematic zoom with changing focus.
Figure 36-16: In the final keyframe of the tween, the largest, closest element (the two figures) is scaled to 100 percent and the level of Blur is set very low. The other elements are zoomed less and left with more Blur to achieve the effect of multiplane motion — the further an item is from the viewer, the less change it will have from the first keyframe to the last.
Figure 36-17: The export options available for PNG format include options common to all raster formats, as well as some file-specific options.
Figure 36-18: The PICT format has a unique Objects option (in the Color depth drop-down menu) in addition to traditional raster-based options.
Figure 36-19: Export options that are specific to the GIF format

Chapter 37: Working with Vector Graphics

Figure 37-1: Even when the final image quality is similar, the file sizes that are achieved with different workflow options can vary widely.
Figure 37-2: The Pathfinder panel in Illustrator offers a variety of options for simplifying overlapping paths.
Figure 37-3: The Simplify dialog box in Adobe Illustrator for modifying the points in the paths that describe a vector shape
Figure 37-4: You can create curved text paths quickly with the right tools, and they are almost infinitely variable.
Figure 37-5: Text with special formatting imported to Flash in AI, EPS, or PDF format will be broken into character text boxes to preserve the layout while keeping the text editable.
Figure 37-6: Text with special formatting imported to Flash can be rasterized to preserve the layout, but the text is no longer editable and will have the same limitations as any bitmap.
Figure 37-7: Multicolumn text imported to Flash will be interpreted as outlines (top) or as multiple editable text fields (bottom).
Figure 37-8: Terms and controls for creating spacing between text and other items in a layout will differ in various programs. This space is referred to as Offset in Adobe Illustrator.
Figure 37-9: When you apply text wrap or runaround to an item, the amount of space you specify is placed between the item and the closest text characters.
Figure 37-10: Flash Format Options in Illustrator CS2
Figure 37-11: The Illustrator Save for Web window enables you to see a preview of the file size and quality as you choose settings for the exported file.
Figure 37-12: The Export Image dialog box enables you to select a file type that will preserve vector artwork.

Chapter 38: Working with Dreamweaver 8

Figure 38-1: Click the Flash icon in the Media submenu on the Insert bar to import a Flash .swf file to your Dreamweaver page.
Figure 38-2: A dialog box for entering Accessibility attributes for items imported to Dreamweaver 8 is a good reminder for developers to keep accessibility issues in mind when authoring Web content.
Figure 38-3: The Property inspector in Dreamweaver 8 (on Mac)
Figure 38-4: Specifying Window Mode in Dreamweaver
Figure 38-5: Editing a Flash file from Dreamweaver
Figure 38-6: The Insert Flash Button dialog box
Figure 38-7: These editing options become available in the Dreamweaver Property inspector when you select a Flash button.
Figure 38-8: The Insert Flash Text dialog box enables you to place anti-aliased Flash text within an HTML document. Dreamweaver creates the necessary .swf file and saves it with your HTML document.
Figure 38-9: The Insert Flash Video dialog box makes it easy to set display options for .flv content in Dreamweaver.
Figure 38-10: Flash Video doesn't play until it's previewed in a browser window, but the clip dimensions are outlined by a gray box in the Design view window and the settings are loaded in the Property inspector when it's selected.
Figure 38-11: Flash Video clip previewed in Safari with the "Clear Skin 2" playback component activated by rollOver
Figure 38-12: Import options for FlashPaper are limited because view options can be controlled at run time.
Figure 38-13: Image Viewer is the first Flash element available in Dreamweaver, but the menu system has been designed to support the addition of more custom components.
Figure 38-14: The Tag inspector provides a quick interface for modifying the parameters of the Image Viewer Flash element.
Figure 38-15: The Edit Array dialog box makes it possible to specify the display order for images you want to load in the presentation by typing the path to each image or by browsing to select them one by one from your file list.
Figure 38-16: The finished flowerViewer.html file with the Image Viewer Flash element file (FlowerGallery.swf) visible in a browser window
Figure 38-17: You can use the various transition styles available from the transitionsType drop-down menu in the Tag inspector to change the Flash animation in your Image Viewer presentation without ever touching a keyframe in Flash or typing a single line of code.
Figure 38-18: Select an event to associate with a behavior — the most common event for the Check Plugin behavior is onLoad.
Figure 38-19: Click the Add button (+) in the Behaviors panel to select from a list of common JavaScript and DHTML functions.
Figure 38-20: The Check Plugin behavior enables you to apply simple Flash detection easily.
Figure 38-21: The event associated with the behavior can be changed, but onLoad is generally used for the Check Plugin behavior.
Figure 38-22: The Control Shockwave or Flash dialog box is used to set playback options that will be applied to the Flash timeline when the behavior is triggered.
Figure 38-23: Use the drop-down menu in the Behavior panel as needed to change the event associated with the Control Shockwave or Flash behavior.
Figure 38-24: The FlashPlayer Settings Manager on Macromedia's site is used to set "trusted locations" on your system for testing purposes, which will enable JavaScript behaviors to control Flash content in your Dreamweaver pages without triggering a warning dialog box.
Figure 38-25: You can manually add an allowScriptAccess parameter in the Parameter dialog box to ensure JavaScript commands successfully target inserted Flash content.
Figure 38-26: By default, the Files panel is grouped with the Assets and Snippets panel, but with the Expand option, it is possible to ungroup the Files panel and load additional view options.
Figure 38-27: The Files panel Map and Files view enables you to see a hierarchical view of the pages and links in your site, including links from Flash movies — right-clicking in the Map view invokes a contextual menu with options for working with links.
Figure 38-28: You can select a Home page and choose Display dependent files in the Site Map Layout section of the Site Definition dialog box.
Figure 38-29: The Link Checker tab in the Results panel enables you to view and change the links within your site, even within Flash movie files (.swf).

Appendix C: Digital Audio Basics

Figure C-1: A waveform of a sound sampled at 44.100 kHz with a 16-bit resolution, as displayed in a high-end sound application
Figure C-2: The same sound that is shown in Figure C-1, but it's down-sampled to 11.025 kHz with an 8-bit resolution