Modifying Item Types

In previous chapters, we have focused on the features of the Timeline and how your Flash projects are ordered in time from left to right. Now we are going to look at the arrangement of items from the front to the back of the Stage, or the stacking order of elements in Flash. In this section, we'll explain how multiple items can be moved together, and how the Union, Break apart, and Trace bitmap commands are applied to change item types.

Stacking Order

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:

• Within a layer, ungrouped primitive shapes or lines are always at the bottom level, with the most recently drawn shape or line at the top of that layer's stack. Furthermore, unless you take precautions, drawn items either compound with, or cut into, the drawing beneath them.

• Groups, Drawing Objects, and symbols (including bitmaps) stack above lines and shapes in the overlay level. To change the stacking order of several items, it's often advisable to group them first, as we describe in the next section of this chapter.

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

• To move the item to the top of the stacking order, choose Modify ð Arrange ð Bring to Front (Alt+Shift+↑ or Option+Shift+↑).

• To move an item to the bottom of the stacking order, choose Modify ð Arrange ð Send to Back (Alt+Shift+↓ or Option+Shift+↓).

• To move the item up one position in the stacking order, choose Modify ð Arrange ð Bring Forward (Ctrl+↑or z+↑).

• To move the item down one position in the stacking order, choose Modify ð Arrange ð Send Backward (Ctrl+↓ or z+↓).

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.

Cross-Reference 

We detail the Align panel (Ctrl+K or z+K) used to distribute items in a layout in relation to each other or to the Stage in Chapter 5, "Drawing in Flash."

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, then drag the Layer bar to the desired position in the layer stack of the Timeline.

Tip 

Regardless of the number of layers in a Flash project (.fla), neither the file size nor the performance of the final .swf file will be adversely impacted because Flash flattens layers upon export.

Grouping

As we discussed in Chapter 5, "Drawing in Flash," grouping shapes or lines makes them easier to handle. Rather than 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 ungrouped drawings. Here's how to create groups:

1. Use Shift+click to select multiple items or drag a selection box around everything that you want to group. This can include any combination of items: shapes, lines, and symbols — even other groups.

2. Choose Modify ð Group (Ctrl+G or z+G). The selected elements are now grouped.

3. To ungroup everything, select the group and then use Modify ð Ungroup (Ctrl+Shift+G or z+Shift+G). Ungrouping will only separate grouped items; it will not break apart bitmaps, symbol instances, or text as the Break apart command does.

   Caution 

   Be careful when ungrouping. Your newly ungrouped drawings may alter or eliminate drawings below in the same layer.

To edit a group:

1. Select the group and then choose Edit ð Edit Selected, or double-click the group. Everything on Stage — except for items in the group — is dimmed, indicating that only the group is editable.

2. Make changes in the same way you would edit individual primitive shapes or symbols. If there are other groups or symbols included in a larger group, you'll have to click-in deeper to edit those items. You can keep double-clicking on compound groups to gradually move inside to the deepest level or primitive shape available for editing. You can use the location labels to move back out level by level (or double-click an empty area of the Stage), or go to Step 3 to return to the Main Timeline.

3. To stop editing the group, choose Edit ð Edit All, or use the location labels to return to the main scene. Other items on Stage return to normal color.

Applying Break Apart

The Modify ð Break apart command (Ctrl+B or z+B) is rather like an Undo command for groups, Drawing Objects, and symbols as well as a deconstruction tool for text and bitmaps. To use Break apart, simply select an item and then apply the command. Occasionally you will need to apply the Break apart command more than once to reduce a compound group to its core primitive shapes. When applied to a symbol instance, Break apart reduces the instance to primitive shapes that no longer are linked to the original symbol stored in the Library.

Caution 

Breaking apart is not entirely reversible; when applied to an animated symbol instance, it will discard all but the current frame of the symbol instance Timeline.

Breaking Apart Text

When text is reduced to shapes using Break apart, it can be filled with gradients and bitmaps and also modified with the shape Transform options. We show specific examples of using the Break apart command in Chapter 8, "Working with Text," and in Chapter 16, "Importing Artwork." Figure 9-28 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-28: A text field (left) broken apart once (center) and then once again (right)

Caution 

It is not recommended to break apart symbols or groups that are included in a tweened animation because the results may be unpredictable and not easy to undo. Breaking apart complex symbols or large text blocks can also 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, we 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. We used Verdana bold set at 50 pt.

2. Select the text block and apply the Break apart command (Ctrl+B or z+B) once to break the text block into individual letters, and then a second time to convert the letters into shapes.

3. With the letter shapes still selected, load a default grayscale linear gradient into the Color Mixer 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-29.

4. Next use the Fill 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-30.

5. Now 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 or z+C) and Paste (Ctrl+V or z+V) commands. Turn the visibility of the original layer off (click the Eye icon) for now, so you can see only the copied letter shapes.

6. Select all the copied letter shapes, and using the Color Mixer 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-31.

7. Next, use the Modify ð Shape ð Expand Fill command to expand the fill in all the selected letters by 2 pixels.

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-32 compares the letters with the original gradient and the letters with the modified gradient.

9. 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-33.

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

Breaking Apart Bitmaps

When applied to bitmaps placed in the Document window, Break apart will make it possible 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 we describe in the section that follows. Figure 9-34 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-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)

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

Caution 

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 will not be modified, as it is when you apply the Rotate or Skew modifiers.

Figure 9-35 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 using the Lasso tool or the Eraser tool.

Figure 9-35: A bitmap broken apart and selectively deleted using the Magic Wand option of the Lasso tool

About the Magic Wand Option

You use the Magic Wand option of the Lasso tool (shown at the bottom of the Tools panel in Figure 9-35) 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 Mixer panel. You can adjust what pixels the Magic wand picks up by modifying the Threshold and Smoothing settings in the dialog box invoked by clicking the Magic wand settings button in the Options area of the Tools panel.

Magic Wand Threshold Setting

The Threshold setting defines the breadth of adjacent color values that the Magic Wand includes in a selection. Values for the Threshold setting range from 0 to 200 — the higher the setting, the broader the selection of adjacent colors. Conversely, a smaller number results in the Magic Wand making a narrower selection of adjacent colors.

A value of zero results in a selection of contiguous pixels that are all the same color as the target pixel. With a value of 20, clicking a red target pixel with a value of 55 will select all contiguous pixels in a range of values extending from red 35 to red 75. (If you're familiar with Photoshop, it's important to note that the Flash Threshold is unlike Photoshop, in which a Threshold setting of 20 will select all contiguous pixels in a range of values extending from red 45 to red 65.)

Magic Wand Smoothing Setting

The Smoothing setting of the Magic Wand option determines to what degree the edge of the selection should be smoothed. This is similar to anti-aliasing. (Anti-aliasing dithers the edges of shapes and lines so that they look smoother onscreen.) The options are Pixels, Rough, Normal, and Smooth. Assuming that the Threshold setting remains constant, the Smoothing settings will differ as follows:

• Pixels: Clings to the rectangular edges of each pixel bordering similar colors.

• Rough: With this setting, the edges of the selection are even more angular than with Pixels.

• Normal: Results in a selection that's somewhere between Rough and Smooth.

• Smooth: Delivers a selection with more rounded edges.

Tracing Bitmaps

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 Mixer panel). It is possible to 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 will have to 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-36 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-36: 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:

1. Use the Selection tool to select the bitmap that you want to trace — it can be in Edit mode or directly on the Stage.

2. Choose Modify ð Bitmap ð Trace Bitmap to invoke the Trace Bitmap dialog box and set the options according to your needs:

   • Color threshold: This option controls the number of colors in your traced bitmap. It limits the number of colors by averaging the colors based on the criteria chosen in Color threshold and Minimum area. Color threshold compares RGB color values of adjacent pixels to the value entered. If the difference is lower than the value entered, then adjacent pixels are considered the same color. By making this computation for each pixel within the bitmap, Flash averages the colors. A lower Color threshold delivers more colors in the final vector graphic derived from the traced bitmap. The range is between 0 and 500, with a default setting of 100.

   • Minimum area: This value is the radius, measured in pixels, which Color threshold uses to describe adjacent pixels when comparing pixels to determine what color to assign to the center pixel. The range is between 1 and 1,000, with the default setting being 8.

   • Curve fit: This value determines how smoothly outlines are drawn. Select Very Tight if the shapes in the bitmap are complex and angular. If the curves are smooth, select Very Smooth.

   • Corner threshold: This setting determines how sharp edges are handled; choose Many Corners to retain edges and Few Corners to smooth the edges.

3. Click OK. Flash traces the bitmap, and the original pixel information is converted to vector shapes. If the bitmap is complex, this may take a while. Depending on the settings you have chosen, the final look of the traced graphic can vary between being very close to the original or very abstracted.

Tip 

If your objective is for your traced bitmap to closely resemble the original bitmap, then set a low Color threshold and a low Minimum area. You'll also want to set the Curve fit to Pixels and the Corner threshold to Many Corners. Be aware that using these settings may drastically slow the tracing process for complex bitmaps and result in larger file sizes. If animated, such bitmaps may also retard the frame rate dramatically.

As shown in Figure 9-37, 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-37: Bitmap images can be traced to create different styles of vector graphics by using low settings (center) or high settings (right).

Caution 

If you drag a bitmap from the Library panel onto the Stage and then attempt to acquire the bitmap fill by first tracing the bitmap and then clicking with the Eyedropper tool, be careful of how selection affects the results. If the traced bitmap is still selected, clicking with the Eyedropper tool acquires the nearest color and replaces the entire traced bitmap with a solid fill of the acquired color. If the traced bitmap is not selected, the Eyedropper tool simply acquires the nearest solid color and loads it into the fill color chip.