As I introduced in Chapter 7, "Applying Color," the dropper icon that appears when you use the Selection tool to select colors from any of the popup Swatches menus is similar to the Eyedropper tool available in the Tools panel. However, when pulled out of the Tools panel directly, the Eyedropper tool (I) has slightly different behavior. Although you cannot use the Eyedropper tool to sample colors from elements outside the Document window, you can use it to sample line and fill styles or to simultaneously change the stroke and the fill color chips to the same sampled color.

The Eyedropper tool doesn't have any options in the Tools panel because they are all built in. As you hover over an item, the Eyedropper tool displays a small icon to indicate whether it is over a line or a fill that can be sampled by clicking. When a line is sampled, the Eyedropper tool automatically converts to the Ink Bottle tool, and when a fill is sampled, the Eyedropper tool converts to the Paint Bucket tool.

The composite image shown in Figure 9.1 shows the icons that appear when you use the Eyedropper tool to sample a fill (A) and apply it to another shape with the Paint Bucket tool (B), and sample a stroke (C) and apply it to another shape with the Ink Bottle tool (D).

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)

Any items already selected when the Eyedropper tool samples a stroke or fill immediately acquire the applicable stroke or fill style. This is the quickest way to transfer the fill or line styles of one element to a whole group of elements. Figure 9.2 shows the Eyedropper tool used to sample a fill with one (A) or more (B) elements already selected.

Figure 9.2. The Eyedropper tool also instantly converts selected elements to the sampled fill or stroke style.

You use the Ink Bottle tool (S) — refer to Figure 9.1 (D) — to change the color, style, and thickness of existing outlines. It is most often used in conjunction with the Eyedropper tool. When the Ink Bottle tool is in use, pay attention to the following three options:

The Ink Bottle applies the current stroke color and line style, either sampled with the Eyedropper tool or chosen from the popup in the Tools panel or the controls in the Properties panel.

The Ink Bottle tool is especially useful for applying custom line styles to multiple lines. You can build a collection of custom line styles either off Stage or in a special custom line palette saved as a single-frame Flash movie. You can then acquire these line styles whenever you want to reuse them.

Tip

You can add Flash files with graphics libraries that you plan to reuse to the application's Libraries folder so that they can be easily accessed from the Window

You use the Paint Bucket tool to fill enclosed areas with color, gradients, or bitmap fills. Although the Paint Bucket tool is a more robust tool than the Ink Bottle tool, and it can be used independently, it's most often used in conjunction with the Eyedropper tool. As discussed earlier in this chapter, when the Eyedropper tool picks up a fill, it first acquires the attributes of that fill and then automatically changes itself to the Paint Bucket tool. When the Paint Bucket tool is active, shown in Figure 9.3, two options are available from the Tools panel: Lock Fill and Gap size. The Gap size drop-down menu offers four settings to control how Flash handles gaps or open spaces in lines when filling with the Paint Bucket tool.

Figure 9.3. The Paint Bucket tool and Gap size options

When you use the Eyedropper tool to acquire a bitmap fill, the Eyedropper tool is automatically swapped for the Paint Bucket tool and a thumbnail of the bitmap image appears in place of the fill color chip. This procedure also automatically engages the Paint Bucket Lock Fill option.

Another helpful behavior of the Paint Bucket tool is that the exact location where you click to apply the Paint Bucket tool defines the highlight point for the fill. This has no visible effect when filling with solid colors or bitmap fills, but when filling with gradients it affects how the fill is rendered within the boundaries of the shape. Figure 9.4 illustrates how the highlight of a gradient fill varies based on where it was "dumped" with the Paint Bucket.

Figure 9.4. 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.

As with the Ink Bottle tool, the Paint Bucket tool can be especially useful for applying custom fill styles to multiple items. You can build a collection of custom fill styles either off-screen (on the Pasteboard) or in a special, saved, custom-fills-palette, single-frame Flash movie. You can then acquire these fills whenever necessary.

As shown in Figure 9.3, the Gap size option drop-down offers four settings that control how the Paint Bucket treats gaps when filling. These settings are Don't Close Gaps, Close Small Gaps, Close Medium Gaps, and Close Large Gaps. These tolerance settings enable Flash to fill an outline if the endpoints of the outline aren't completely joined, leaving an open shape. If the gaps are too large, you may have to close them manually with another drawing tool. Figure 9.5 illustrates how the Gap size option settings affect the Paint Bucket fill behavior.

Figure 9.5. 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

The Paint Bucket's Lock Fill option is the same as the Brush Lock Fill option — it controls how Flash handles areas filled with gradient color or bitmaps. When this button is turned on, all areas (or shapes) painted with the same gradient or bitmap appear to be part of a single, continuous, filled shape. The Lock Fill option locks the angle, size, and point of origin of the current fill to remain constant throughout any number of selected shapes. Modifications made to the fill in one of the shapes are applied to the other shapes filled by using the same Lock Fill option.

To demonstrate the distinction between fills applied with or without the Lock Fill option, I created five shapes and filled them with a bitmap with Lock Fill off. As shown in Figure 9.6, on the left, the image was rendered individually from one shape to the next. On the right, those same shapes were filled with the same bitmap, but with Lock Fill on. Note how the image is now continuous from one shape to the next. Bitmap fills are automatically tiled to fill a shape, so the bitmap fill on the right was also scaled with the Gradient Transform tool to make it easier to see the continuation of the image between the various shapes.

Figure 9.6. Fill applied with Lock Fill turned off (left), compared with fill applied with Lock Fill turned on and then scaled by using the Gradient Transform tool (right)

If the fill is not aligned in the shape as you would like it to be, you can easily move the center point to adjust how the shape outline frames the fill. To adjust the center point, follow these steps:

Figure 9.8 shows a radial gradient (left) repositioned with the Gradient Transform tool (right).

Figure 9.8. Adjusting the center point of a gradient fill with the Gradient Transform tool

The Gradient Transform option enables you to adjust the highlight of a radial gradient without moving the center point of the fill. As shown in Figure 9.9, you can drag the extra pointer above the center point circle to move the highlight of the gradient along the horizontal axis. If you want to move the highlight along a vertical axis, use the rotate handle to change the orientation of the fill.

Figure 9.9. The Gradient Transform handle enables you to adjust the highlight of a radial gradient without moving the center point of the fill.

To rotate a gradient or bitmap fill, find the small circular handle that's at the corner of the fill. (In a radial gradient, choose the lower circular handle.) This circular handle is used for rotating a fill around the center point. Simply click the circular handle with the Rotate cursor and drag clockwise or counterclockwise to rotate the fill. Figure 9.10 shows a bitmap fill (left) as it appears when rotated clockwise (right).

Tip

Activate the Snap to Objects toggle in the Tools panel if you want to use snapping behaviors to help guide rotating or scaling of a fill. (Turn behaviors on or off in the application menu under View

Figure 9.10. Rotating a bitmap fill with the Gradient Transform tool

To resize a bitmap fill symmetrically (to maintain the aspect ratio), find the round corner handle with an arrow icon, which is usually located at the lower-left corner of the fill. On rollover, the diagonal arrow icon appears, indicating the direction(s) in which the handle resizes the fill. Click and drag to scale the fill symmetrically. On radial gradients, you use the round-corner handle with the longer arrow icon to scale with the gradient aspect ratio constrained. Linear gradients have only one handle for scaling, and this handle always scales in the direction of the gradient banding.

To resize a fill asymmetrically, find a small square handle on either a vertical or a horizontal edge, depending on whether you want to affect the width or height of the fill. On rollover, arrows appear perpendicular to the edge of the shape, indicating the direction in which this handle resizes the fill. Click and drag a handle to reshape the fill.

Figure 9.11 shows the three fill types with their respective scale options. Linear gradient fills (left) can be scaled only in the direction of the gradient banding, but they can be rotated to scale vertically (lower) rather than horizontally (upper). Radial gradient fills (center) can be expanded symmetrically (upper) with the circular handle, or asymmetrically (lower) with the square handle. As with linear gradients, they can be rotated to scale vertically rather than horizontally. Bitmap fills (right) can be scaled by the corner handle to maintain the aspect ratio (upper), or dragged from any side handle to scale asymmetrically (lower).

As you work with scaled gradient fills, you will quickly notice that your shape is always filled from edge to edge but that the fill area may not appear quite how you'd like it to. In early versions of Flash, you were stuck with the solid color fill around the edges when a gradient was scaled smaller inside of a shape. This default behavior is now part of the Overflow menu in the Color panel that gives you some other options for how a gradient renders when it is scaled down. As shown in Figure 9.12, there are three different overflow styles:

Figure 9.11. Scaling fills symmetrically (top) and asymmetrically (bottom)

Figure 9.12. Different overflow styles applied to a linear gradient (top right) and a radial gradient (bottom right) using the Overflow menu in the Color panel (left). Overflow styles applied to the fills from left to right: Extend, Reflect, Repeat

To skew a bitmap fill horizontally, click the diamond-shaped handle at the top of the image; arrows appear, parallel to the edge of the fill, indicating the directions in which this handle skews the fill. Drag to skew the image in either direction. Figure 9.13 shows a bitmap skewed horizontally (left) and vertically (right). Note that the skew procedure is still active after it has been applied, meaning that the skew may be further modified — this behavior is common to all functions of the Gradient Transform tool.

Figure 9.13. Skewing a bitmap fill with the Gradient Transform tool

Lines to Fills does exactly what its name implies: It converts lines defined by single points into shapes defined by an outline of editable points. To apply the Lines to Fills command, simply select any lines that you want to convert before choosing Modify

The Lines to Fills command is especially important because it provides the one solution for maintaining line-to-fill ratios when scaling raw graphics that would require lines to appear at smaller than 1 point size. Fills do not have the same display limitation as lines, and they maintain visual consistency as they are scaled larger or smaller. In Figure 9.16, the image on the left was drawn with the Pencil tool to make lines around the eyes and on the whiskers of the cat cartoon. When it was scaled, the lines were not visually consistent with the fills. The image on the right was modified by using the Lines to Fills command before scaling it down to 25 percent size. In this case, the ratio between the outlines around the eyes and the whiskers was consistent with the other filled shapes in the cartoon.

Figure 9.16. Use the Lines to Fills command to ensure consistency when scaling raw graphics.

The Expand Fill command has two options you can use to size fills up or down evenly on all sides of a shape. To apply the command, select the fill(s) that you want to modify, and then choose Modify

Figure 9.17 includes a rectangle, a cartoon cat, and a sketch of some grapes. The original shapes are shown on the left, the expanded fills in the center, and the inset fills on the right. As you can see, expanding fills often obscures the strokes surrounding a shape, whereas choosing to inset a fill leaves space between the fill and any surrounding stroke.

Figure 9.17. Modifying an original shape (A) with the Expand Fill command, using the Expand option (B) or the Inset option (C), respectively, bloats or shrinks a fill by a specified pixel amount.

You can also use the Expand Fill command to create custom text forms. Figure 9.18 shows how the original text shape (left) can be modified by using either the Expand or Inset option. To create bloated balloon-like text (center), or shrunken, eroded text (right), you first have to apply the Modify

Figure 9.18. Text broken apart into letter shapes (A) can be expanded (B) or inset (C) to create custom text effects.

The Soften Fill Edges command was the closest thing to a static blur available before Flash 8. Fortunately, Flash 8 and newer versions support a much more sophisticated Blur filter that renders smoother softened edges and enables you to change the color of the item even after the blur is applied. The only advantages that the Soften Fill Edges command has over the Blur filter are that you can use it to modify raw shapes or drawing objects and choose whether to render it inside or outside the item's original fill boundary. This command, as with the Expand Fill command, can be applied only to fills and gives you the option to expand or inset the shape by a specific number of pixels.

Warning

Flash enables you to select a line and choose the Soften Edges command from the Modify

The blurry effect of Soften Fill Edges is created by a series of banded fills around the original fill that decrease in opacity toward the outermost band. You can control the number and width of these bands by entering values in the Soften Fill Edges dialog box (shown in Figure 9.19) to create a variety of effects, from a very subtle blurred effect to a dramatic stepped appearance around the edges of the fill.

Figure 9.19. The Soften Fill Edges dialog box with settings for controlling the edge effect

The Soften Fill Edges dialog box controls the following features of the fill modification:

Figure 9.20 shows how the original fill (left) appears after Soften Fill Edges is applied with the Expand option (center), or with the Inset option (right).

Figure 9.20. Applying Soften Fill Edges with the Expand option and with the Inset option

The width of the individual bands equals the total number of pixels set in Distance divided by the Number of steps. When the edge of the shape is magnified, the individual bands can clearly be seen. Figure 9.21 compares a series of eight bands, each 1 pixel wide, created by using a Distance setting of 8 and a Number of steps setting of 8, compared with the smooth softened edge that results from applying a Blur filter with an X and Y setting of 8.

Figure 9.21. 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 Flash Blur filter (right)

As with the Expand Fill command, Soften Fill Edges can create interesting text effects when applied to broken-apart letter shapes. Figure 9.22 shows an effect created by combining the original white text with a "shadow" made by applying the Soften Fill Edges command to a broken-apart copy of the text that was filled with dark gray.

Figure 9.22. A glow effect created by layering the original text over a copy that was broken apart, filled with dark gray, and modified by using Soften Fill Edges

The Transform panel (Ctrl+T/

The commands found in the application menu under Modify

The Free Transform tool (Q), available directly from the Tools panel, enables you to apply transform commands dynamically with various arrow icons. These icons appear as you position the pointer over the control points or handles of the selected item. You can also invoke various transform states from the contextual menu. Although the position of these arrow icons can vary with the position of the pointer, they provide a consistent indication of what transformation will be applied from the closest available handle. To finish any transformation, simply deselect the item by clicking outside of the current selection area.

Figure 9.24 shows how a symbol (or drawing object) and a shape appear differently after they have been modified, deselected, and then reselected with the Free Transform tool. The symbol (left) displays transform handles that are aligned with the originally modified item, and the values of the transformation settings are preserved in the Transform panel. The shape (right), however, displays transform handles aligned to default values unrelated to the original modifications, and the values in the Transform panel are reset to their defaults.

Figure 9.24. The Free Transform handles and Transform panel settings that appear for a symbol or drawing object (left) and for a simple shape (right) that have been reselected after an initial modification

Free Transform limit options

The first two options in the Tools panel for the Free Transform tool (shown in Figure 9.23) are toggles to limit the modifications that can be applied to a selected item. It can sometimes be easier to use the Free Transform tool with more specific behavior. When the Rotate and Skew button or the Scale button is toggled on, all other modifications are excluded.

The Rotate and Skew toggle protects the selected item from being scaled accidentally while you're rotating or skewing it. This Tools panel option is equivalent to choosing Modify

The Scale toggle protects the selected item from all other transformations while it is being sized larger or smaller. This Tools panel option is equivalent to choosing Modify

Free Transform special shape options

The last two options in the Tools panel for the Free Transform tool — Distort and Envelope — are not available for symbols, groups, or text fields. However, when you're transforming drawing objects or primitive shapes, you can use these two options to create complex modifications not easily achieved with other Flash tools.

Note

Remember that you can access the raw shapes in a group or symbol by entering Edit mode. You can also convert text fields into shapes by applying the Break Apart command (twice).

Distort works by widening or narrowing the sides of the item, or stretching out the corners. This transform option does not bend or warp the shape; it allows sides of the shape to be scaled individually. To apply Distort, first select a shape with the Free Transform tool in the Tools panel, and turn on the Distort toggle in the Options area of the Tools panel. You can then click and drag handles on the sides or corners of the item to stretch or compress individual sides. This is equivalent to selecting a shape with the Selection tool and choosing Modify

Tip

You can also apply the Distort option to a shape that has been selected with the Free Transform tool by pressing Control (

Figure 9.25 shows an original shape being modified with the Distort option (left), and the final shape with distort handles, as they appear when the shape is reselected (right).

The Envelope option enables you to work with control points and handles much the same way you would when editing lines or shapes with the Subselection tool. The powerful difference is that the Envelope can wrap around the outside of multiple items so that the control points and handles curve, scale, stretch, or warp all the lines and shapes contained within the Envelope selection.

Figure 9.25. Free Transform applied to a shape, using the Distort option

To apply the Envelope, first select a shape or multiple shapes with the Free Transform tool and then toggle on the Envelope option in the Tools panel. The Envelope offers a series of control points and tangent handles. The square points are used to scale and skew the shape(s), whereas the round points are actually handles used to control the curve and warp of the shape(s). You can also access the Envelope option by selecting the shapes you want to transform and choosing Modify

Figure 9.26 shows an original shape being modified with the Envelope option (left), and the final shape with Envelope handles, as they appear when the shape is reselected (right).

Figure 9.26. Free Transform applied to a shape, using the Envelope option

There is only one camera view in the authoring environment for your Flash movie. The camera view consists of a perspective angle and a vanishing point: These global settings are available in the 3D Position and View section of the Properties panel when a symbol with 3-D translation or rotation is selected on the Stage. Changing the settings affects all 3-D symbols in your Flash movie but does not affect other elements.

The perspective angle sets the viewing "lens" for all of your 3D elements. The range of settings for perspective angle is from 1 degree to 180 degrees. The default perspective angle is 55 degrees to approximate a standard camera lens view. Think of the perspective angle setting as the zoom factor of your viewing lens. Smaller numbers move the view farther away and make 3D transformations less dramatic — they flatten the view. Larger numbers move the view closer and make 3D transformations more extreme — they emphasize any changes in the angle or rotation of an element. Figure 9.27 shows the same 3D Movie Clip (a rectangle with a 45-degree y-axis rotation), viewed with three different perspective angle settings.

Figure 9.27. Increasing the perspective angle setting "zooms" the view closer, making 3D transformations look more extreme. The same Movie Clip viewed with three different perspective angle settings (from L-R): 10 degrees, 50 degrees (the default setting), 120 degrees.

Another way to understand this feature is to compare it to our normal perception of objects in real space. If you are looking at a sculpture from a distance of 30 feet and you walk 10 steps to the left or right, your view does not change very much — you still see more or less the same side of the sculpture. However, if you are standing closer to a sculpture, say, 3 feet away, and you walk the same 10 steps to the right or left, your view changes dramatically.

The Vanishing point setting determines the endpoint of the z-axis and controls the direction that 3-D symbols travel if they are moved along their z-axis. Imagine it as an invisible anchor point in deep space that has a magnetic pull that makes all of your 3-D translations extend in its direction. In real space, the vanishing point is that place in your field of vision where parallel lines seem to come together. If you were looking down a road on a perfectly flat plain, it would be the spot where the road appeared narrower and narrower until finally it ended in a dot on the horizon — that dot is the location of the vanishing point.

By default, the vanishing point is set in the center of the Stage, but you can modify the setting at any time to a different x, y location — on or off the Stage. To view or set the vanishing point in the Properties panel, a 3-D symbol must be selected on the Stage. Figure 9.28 illustrates the result of a 45-degree x-axis rotation with vanishing points in different locations. Figure 9.29 illustrates how the vanishing point affects the direction that a 3-D symbol travels as it moves along the z-axis.

Figure 9.28. The location of the vanishing point determines the endpoint for the z-axis and the direction that objects recede into space. The same Movie Clip with a 3-D rotation viewed with three different vanishing point locations (from L-R): top-left corner of the Stage, center of the Stage (the default setting), and bottom right corner of the Stage.

The 3D Rotation tool enables you to spin objects around the x, y, or z-axis and creates the illusion of depth by skewing and scaling your graphics based on the degree of rotation and the vanishing point and perspective angle settings. Figure 9.30 shows a simple rectangle with a drop shadow added (top) and the result of a 45-degree rotation applied along the x, y, and z-axis, respectively.

Figure 9.29. The location of the vanishing point determines the direction that 3-D objects travel when they move along the z-axis. The original symbol (top left) looks smaller but remains centered when a 200-pixel translation along the z-axis is applied with the vanishing point in the middle of the Stage (top right). The same translation along the z-axis has a different result when the vanishing point is located in the top-left corner of the Stage (bottom left) or in the bottom-right corner of the Stage (bottom right).

To apply the 3D Rotation tool (W), activate it in the Tools panel, then select a symbol on the Stage. When you select a symbol with the 3D Rotation tool, a target overlay (shown in Figure 9.30) appears, guiding you in moving the symbol in 3-D space. The red vertical crosshair enables x-axis rotation, the green horizontal crosshair enables y-axis rotation, the inner blue circle enables z-axis transformation, and the outer orange circle enables free transformation (around the x- and z-axis at the same time). To rotate an object, click and drag from the guide that represents the axis you want to use — dragging clockwise adds a positive transformation, and dragging counterclockwise adds a negative transformation. An object can be rotated around any axis from 0 degrees to 360 degrees in a positive or negative direction. When you release the mouse, you will notice that the 3D Position in the Properties panel updates, and if you have the Transform panel open (Window

Figure 9.30. The same degree of rotation (here 45 degrees) has different visual results when applied to the three different axes of a 3-D Movie Clip (x, y, z). You can rotate an object around just one axis or you can combine two (or even all three) to position a symbol exactly where you want it in the faux 3-D space of the Flash Stage.

The final result of 3-D rotation is affected by the location of the 3-D center point. The 3-D center point is indicated by the white dot at the center of the 3-D target overlay when the 3D Rotation tool is active and a 3-D symbol is selected. The default location for the 3-D center point is at the center of the selected symbol. Click and drag to reposition the center point (or transformation center point) to another location on your current symbol or even outside of the symbol. Moving the 3-D center point away from the center of the symbol increases the arc of any 3-D rotations — this can be helpful for specific effects but it can also make it more likely that your symbol will move dramatically and end up outside the viewable Stage area. Double-click the 3-D center point dot to reset it to the center of the symbol. If you prefer to set rotation values in the Transform panel, select the symbol you want to modify and use the hot text fields for x-, y-, and z-axis in the 3D Rotation section of the panel. You can also modify the location of the 3-D center point by using the hot text fields for x-, y-, and z-axis in the 3D Center point section of the Transform panel. Figure 9.31 shows the difference in result when the same rectangle is rotated around the y-axis with three different 3-D center point locations.

Figure 9.31. The 3-D center point determines the origin point for 3-D transformations. Here you can see how a y-axis rotation applies differently when the 3-D center point is located in the center of the symbol (A), compared to the top-left corner of the symbol (B) or the bottom-right corner (C).

Symbols can be rotated in global space (relative to the main Stage drawing area), or if they are nested Movie Clips, they can be rotated in local space (relative to the container Movie Clip's drawing area). The toggle for global or local rotation is at the bottom of the Tools panel when the 3D Rotation tool is selected — the default setting is for global rotation.

To rotate multiple objects simultaneously, activate the 3D Rotation tool (W) in the Tools panel, and then select multiple symbols on the Stage (Shift+click or drag a selection field around multiple items). The Rotation guides/target will be centered on the most recently selected item. All the selected symbols rotate around the 3-D center point, which appears in the center of the guide. To change the position of the 3-D center point, you can do any of the following while you have a selection active on the Stage:

The 3D Translation tool enables you to move objects forward and backward in space along the z-axis, left and right in space along the x-axis, and/or up and down in space along the y-axis. For nested Movie Clips, 3D Translations can be global (relative to the main Stage) or local (relative to the parent Movie Clip's drawing area). To apply the 3D Translation tool (G), activate it in the Tools panel, then select a Movie Clip on the Stage. As shown in Figure 9.32, the 3D Translation tool consists of two arrow guides for moving along the x- and y-axis and a center blue dot for moving along the z-axis. Click the head of the red horizontal arrow and drag your object left or right along the x-axis. Click the head of the green vertical arrow and drag your object up or down along the y-axis. Click the blue dot and drag your object forward or back along the z-axis. To reposition the guides for the 3D Translation tool, press and hold Alt/Option and then click and drag the blue dot to a new location. Double-clicking the center blue dot auto-positions the guides back at the center of your symbol.

Changes to the location of your 3-D symbol updates the x, y, and z values in the Position and View section of the Properties panel. These values are also hot text fields, so you can position your 3-D symbol by changing the values directly in the Properties panel. Moving an object along the z-axis changes its apparent size relative to the Stage. The apparent width and height also appear in the 3D Position and View section of the Properties panel, but these are read-only values, unlike the original width and height values in the Position and Size section of the Properties panel, which are editable hot text fields. You can also move multiple items simultaneously with the 3D Translation tool; Refer to the instructions for the 3D Rotation tool in the previous section.

Figure 9.32. The 3D Translation tool provides controls for moving symbols along the x-, y-, and z-axis.

Within a single layer, Flash stacks items of the same type in the same order they are placed or created, with the most recent item on top, subject to the kind of item. The rules that control the stacking order of various kinds of items are simple:

To change the stacking order within a layer, first select the item that you want to move. Then, do one of the following:

Remember the stacking-order rules: You won't be able to bring an ungrouped drawing above a group or symbol. If you need that drawing on top, group it and then move it, or place it on a separate layer.

Note

I detail the Align panel (Ctrl+K/

To stack an item in a lower layer above an item in a higher layer, you simply change the order of the layer among the other layers: First, activate the layer, and then drag the Layer bar to the desired position in the layer stack of the timeline.

As discussed in Chapter 5, grouping shapes or lines makes them easier to handle. Instead of manipulating a single item, group several items to work with them as a single unit. Grouping also prevents shapes from being merged with or cropped by other shapes. In addition, it's easier to control the stacking order of groups than it is to control ungrouped drawings. Here's how to create groups:

To edit a group:

The Modify

Breaking apart text

Text reduced to shapes by using Break apart can be filled with gradients and bitmaps and also modified with the shape Transform options. I show specific examples of using the Break apart command in Chapter 8, "Working with Text," and in Chapter 15, "Importing Artwork." Figure 9.33 illustrates how text is broken apart in two stages so that the original block (left) is first separated into individual letters (center), and then when broken apart a second time, it is reduced to shapes (right).

Figure 9.33. A text field (left) broken apart once (center) and then once again (right)

Warning

Breaking apart complex symbols or large text blocks can add to the file size of your final movie.

Creating Metallic Type

To demonstrate how text characters can be modified after they've been converted to shapes, I have applied some gradient fills to create the illusion of shiny metal letters. The file for this effect is titled metalType.fla and is included in the ch09 folder of the CD-ROM. Start with a document that has a dark gray background.

1. First type a word or words on the Stage to create a text block. This effect works best if applied to a bold, sans serif font at a fairly large point size. I used Verdana bold set at 50 pt.

2. Select the text block and apply the Break apart command (Ctrl+B/

   

3. With the letter shapes still selected, load a default grayscale linear gradient into the Color panel and then adjust it so the gradient is dark at each end with a highlight in the center. Set the left and far right Color pointers to black (#000000) and then add a new Color pointer in the center of the Edit bar and set it to white (#FFFFFF), as shown in Figure 9.34.

   

   Figure 9.34. Text shapes selected and filled with a custom linear gradient created in the Mixer panel

4. Use the Gradient Transform tool to rotate the gradient fill clockwise to a 45-degree angle in each letter shape. You may also scale each fill slightly or adjust individual center points to align the highlight on each letter, as shown in Figure 9.35.

   

   Figure 9.35. Linear gradients aligned in each letter shape with the Gradient Transform tool

5. To create a more three-dimensional look, make a copy of all the letter shapes in a new layer below the current layer. Use the Copy (Ctrl+C/

   

6. Select all the copied letter shapes, and using the Color panel, reverse the gradient fill colors. Set the center Color pointer to black and both end Color pointers to white, as shown in Figure 9.36.

   

   Figure 9.36. Copied letter shapes on a new layer with reversed gradient fill applied

7. Use the Modify

   

8. If you turn the visibility of both layers back on, you should see that you now have two opposing gradient fills, and the copied letter shapes are slightly larger than the original letter shapes. Figure 9.37 compares the letters with the original gradient and the letters with the modified gradient.

   

   Figure 9.37. Original letter shapes with gradient fill (top) and copied letter shapes with reversed and expanded gradient fill (bottom)

9. Lock the original layer, and then select all the copied letter shapes on the lower layer and drag them behind the original letter shapes so that they're aligned just slightly above and to the right of the original shapes. This creates the illusion of a metallic beveled edge on the original letter shapes, as shown in Figure 9.38.

   

   Figure 9.38. Copied letter shapes aligned behind the original letter shapes to create the illusion of a beveled metallic edge

Breaking apart bitmaps

When applied to bitmaps placed in the Document window, Break apart enables you to select the bitmap image with the Eyedropper tool to apply as a fill to other shapes. This is not the same as tracing a bitmap, which reduces the vast number of colors in a bitmap to areas of solid color and converts it to vector format, as described in the section that follows. Figure 9.39 shows an imported bitmap placed on the Stage and sampled with the Eyedropper tool to create a colored fill in the rectangle below (left) compared to the same bitmap broken apart and sampled with the Eyedropper tool to create an image fill in the rectangle below (right).

Figure 9.39. 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)

It isn't necessary to break apart bitmaps to use as fills because they can be specified with the Mixer panel, as described in Chapter 7. But breaking apart bitmaps enables you to selectively edit them and modify the visible area of the bitmap with the shape Transform options.

Warning

Although you can apply the Distort and Envelope modifiers of the Free Transform tool to a bitmap after it has been broken apart, they may not give you the result you expect. Instead of distorting or warping the actual bitmap image, you'll find that these modifiers reveal how Flash "sees" bitmap fills. The visible area of the bitmap is not really treated as a shape but rather as a mask, or shaped window, that enables a certain part of the bitmap to be visible. You can distort or warp the viewable area, but the bitmap itself is not modified, as it is when you apply the Rotate or Skew modifiers.

Figure 9.40 illustrates a bitmap that has been broken apart (left) so that colored areas in the background of the image can be selected with the Magic Wand option of the Lasso tool (center) and then deleted to leave the flower floating on the white Stage (right). You can clean up any stray areas of unwanted color by using the Lasso tool or the Eraser tool.

Figure 9.40. A bitmap broken apart and selectively deleted, using the Magic Wand option of the Lasso tool

You use the Magic Wand option of the Lasso tool (shown at the bottom of the Tools panel in Figure 9.40) to select ranges of a similar color in either a bitmap fill or a bitmap that's been broken apart. After you select areas of the bitmap, you can change their fill color or delete them, without affecting the Bitmap Swatch in the Color panel. You can adjust what pixels the Magic Wand picks up by modifying the Threshold and Smoothing settings in the dialog box opened by clicking the Magic Wand settings button in the Options area of the Tools panel.

You use the Trace bitmap command to convert an imported image from a bitmap to a native Flash vector graphic with discrete, editable areas of color. This unlinks the image from the original symbol in the library (and also from the Bitmap Swatch in the Color panel). You can create interesting bitmap-based art with this command. However, if your intention is to preserve the look of the original bitmap with maximum fidelity, you must work with the settings — and you will most likely find that the original bitmap is actually smaller in file size than the traced vector image. Figure 9.41 includes a selected bitmap image on the left and the final vector image that resulted from the settings shown in the Trace Bitmap dialog box on the right.

Figure 9.41. Select a bitmap (left) and choose settings in the Trace Bitmap dialog box to define the final vector image (right).

To trace a bitmap, follow these steps:

As shown in Figure 9.42, the traced bitmap can vary in how closely it resembles the original bitmap. The image in the center was traced with lower settings to achieve a more detailed image: Color threshold of 25, Minimum area of 2 pixels, Curve fit of Pixels, and Corner threshold of Many Corners. The image on the right was traced with higher settings to create a more abstract graphic image: Color threshold of 300, Minimum area of 25 pixels, Curve fit of Very Smooth, and Corner threshold of Few Corners.

Figure 9.42. Bitmap images can be traced to create different styles of vector graphics by using low settings (center) or high settings (right).

The Replay Steps control repeat or reapply a series of sequential or nonsequential steps in your current History list:

All currently selected steps are applied (in order) to the item, and a new step labeled "Replay Steps" is listed in the History panel. You can use the Replay Steps item in the History list to apply the same steps again without having to select the original steps individually.

This command enables you to move steps from one document to another. Here's how it works:

The editing steps copied from your original file are applied to the item in your current file and a new item is added to the History panel, labeled Paste Steps.

This is a helpful command to use if you want to start from a clean slate before performing a series of editing steps that you plan to save. Clear History deletes all the listings in the History panel of your current document. You can't undo this choice, but you will see a Warning dialog box that gives you the chance to change your mind before it's too late. (Closing a Flash document also clears the History list.) The number of steps listed in the History panel can be limited by the Undo levels set in the General Flash Preferences dialog box. The default setting is 100, but it can be set as high as 300 or as low as 2. Every item recorded in the History panel eats up some memory and disk space, so choose the lowest setting that suits your authoring style.

You should leave this setting on Default unless you plan to use the History panel as a tool for helping you write new JavaScript commands. This is a very exciting potential use of the History panel, but it is beyond the scope of this book. If you are familiar with JavaScript, you can try different View settings to get more information that helps you deconstruct the steps in an editing workflow.

If you're not quite ready to start writing your own JavaScript from scratch, this is a terrific shortcut that makes it easy to save and reuse custom editing workflows:

The options at the top of the application Command menu give you some controls for managing your custom commands and for using commands from other sources. The Get More Commands menu item loads a link to the online Flash Exchange, where you can find new commands contributed by other Flash developers (look for JavaScript Flash or .jsfl files). If you download a custom command script, you can use the Run Command menu option to browse to the .jsfl file and apply it to an item in your current project. The possibilities are wide open.