Chapter 5. Complex Graphics on a Single Layer

In Chapters 2 and 4, you learned to make and modify simple individual shapes from strokes (lines) and fills by using Adobe Flash CS3 Professional’s drawing tools. In your movies, you’ll want to use many shapes together, and you’ll need to combine strokes and fills in complex ways. You might combine several shapes, such as ovals and rectangles, to create a robot character, for example. To work effectively with complex graphics, you must understand how multiple graphic elements—merge-shapes, drawing objects, and primitive-shapes—interact when they’re on the same layer or on different layers. In this chapter, you learn how to work with multiple graphic elements on one layer in a Flash document. (To learn more about the concept of layers, see Chapter 6.)

Two of Flash’s drawing tools—the brush tool and the eraser—offer special modes for use with multiple fills and strokes on a single layer. In this chapter, unless you’re specifically requested to do otherwise, leave both tools at their default settings of Paint Normal (for the brush tool) and Erase Normal (for the eraser).

Working with Groups

A group is a type of virtual container that holds graphic elements. Groups serve several functions. They prevent selected merge-shapes from interacting. They also lock down the attributes of shapes and preserve spatial relationships among graphic elements. Although you can also group drawing-objects and primitive-shapes, for the tasks in this section you want to see the interaction with merge-shapes; make sure the Object Drawing button in the Tools panel is deselected.

To create a group:

1. Select one or more items on the Stage using any of the methods discussed in Chapter 4 (Figure 5.6).
   

   Figure 5.6. The first step in grouping is selecting the shapes you want to use in the group.

   

2. Choose Modify > Group, or press -G (Mac) or Ctrl-G (Windows).
   

   Flash groups the items, placing them within a bounding box (Figure 5.7). The visible bounding box lets you know that the group is selected. When the group isn’t selected, the bounding box is hidden.

Figure 5.7. The Modify > Group command unites multiple selected shapes within a single bounding box.

To return objects to ungrouped status:

1. Select the group that you want to return to ungrouped status.
2. Choose Modify > Ungroup, or press Shift--G (Mac) or Ctrl-Shift-G (Windows).
   

   Flash removes the bounding box and selects all the items.

To prevent interaction between merge-shapes on one layer:

1. In the Tools panel, choose the oval tool in Merge Drawing mode.
2. Set the stroke color to No Color and the fill color to red.
3. On the Stage, draw a fairly large oval (Figure 5.8).
   

   Figure 5.8. The oval before grouping.

   

4. In the Tools panel, switch to the selection tool, and select the oval you just drew.
5. To make the oval a grouped element, Choose Modify > Group (Figure 5.9).
   

   Figure 5.9. The oval after grouping.

   

6. Back in the Tools panel, choose the oval tool and a different fill color.
7. On the Stage, draw a smaller oval in the middle of your first oval (Figure 5.10).
   

   Figure 5.10. Draw a second oval on top of the grouped oval.

   

   When you finish drawing the new oval, it immediately disappears behind the grouped oval (Figure 5.11). That’s because grouped objects always stack on top of ungrouped objects (see the sidebar “Understanding Stacking Order,” later in this chapter).

   Figure 5.11. The ungrouped oval stacks beneath the grouped oval.

   

8. Switch to the selection tool, and reposition the large oval so that you can see the small one (Figure 5.12).
   

   Figure 5.12. Drag the grouped oval to make the ungrouped oval visible.

   

9. Deselect the large oval, and select the small oval (Figure 5.13).
   

   Figure 5.13. Select the small oval.

   

10. To make the small oval a grouped element, Choose Modify > Group.
    

    Flash puts the small oval in a bounding box and brings it to the top of the stack (Figure 5.14). Flash always places the most recently created group on the top of the stack. Now you can reposition the two ovals however you like, and they won’t interact.

    Figure 5.14. After grouping, the small oval—the most recently created group—pops to the top of the stack.

    

Editing Groups

Although you can transform a group as a whole (scale, rotate, and skew it), you can’t directly edit the individual shapes within the group the way you can edit an ungrouped shape. To edit the shapes within a group, use the Edit Selected command.

To edit the contents of a group:

1. In the Tools panel, choose the selection tool.
2. On the Stage, select the group you want to edit.
3. Choose Edit > Edit Selected.
   

   Flash enters group-editing mode (Figure 5.15). The Edit bar just above the Stage changes to indicate that you’re in group-editing mode. The bounding box for the selected group disappears, and Flash dims all the items on the Stage that aren’t part of the selected group. These dimmed items aren’t editable; they merely provide context for editing the selected group.

   Figure 5.15. The eyes and eyebrows are a selected group (top). In group-editing mode (bottom), the selected shapes are ready to edit; the other items on the Stage are grayed out to indicate that you can’t edit them.

   

4. Make changes to the contents of the group.
5. To return to document-editing mode, do one of the following:
   

   • Choose Edit > Edit All.

   • Double-click an empty area of the Stage or the Pasteboard.

   • Click the current scene name in the Edit bar.

   • Click the Back button in the Edit bar.

Controlling Stacking Order

Within a single layer, text fields, grouped objects, drawing-objects, and primitives stack as if they were sitting on sublayers above any ungrouped merge-shapes. Stacking order exists even if objects don’t literally lie on top of one another. If you have a group on one side of the Stage and a drawing-object on the other, you can’t see which one stacks higher than the other; but if you drag the objects so they overlap, the order becomes apparent. (Symbols, which you’ll learn about in Chapter 7, are another type of graphic-object that stacks on top of ungrouped merge-shapes.)

You can change the stacking order of graphic-objects via the Modify > Arrange menu. You can move objects up or down in the stacking order one level at a time, or you can send an object to the top or bottom of the stack of sublayers.

To change position in a stack by one level:

1. On the Stage, create at least three graphic-objects.
   

   Use any combination of grouped shapes, drawing-objects, primitives, or text fields.

2. Select one of the graphic-objects.
3. From the Modify > Arrange menu, choose either of the following:
   

   • To move the selected item up one level, choose Bring Forward, or press –up arrow (Mac) or Ctrl–up arrow (Windows).

   • To move the selected item down one level, choose Send Backward, or press –down arrow (Mac) or Ctrl–down arrow (Windows).

   Flash moves the selected item up (or down) one sublayer in the stacking order (Figure 5.18).

   Figure 5.18. Each dumbbell-like shape here is a separate group (top). Choose Modify > Arrange > Bring Forward (middle) to move a selected group up one level in the stacking order (bottom).

   

To move an element to the top or bottom of the stack:

1. On the Stage, select one of the graphic-objects you created in the previous task.
2. From the Modify > Arrange menu, choose either of the following:
   

   • To bring the item to the top of the stack, choose Bring to Front, or press Option-Shift–up arrow (Mac) or Ctrl-Shift–up arrow (Windows).

   • To move the item to the bottom of the stack, choose Send to Back, or press Option-Shift–down arrow (Mac) or Ctrl-Shift–down arrow (Windows).

   Flash places the selected item at the top (or bottom) of the heap.

Combining Drawing-Objects and Primitives

Drawing-objects and primitive-shapes don’t interact with one another or with merge-shapes, even when they overlap. You can force them to interact by using the Modify > Combine Objects commands. Flash converts combined primitives to drawing-objects.

To unite multiple drawing-objects or primitives:

1. Use the drawing tools in Object Drawing mode, or the rectangle- or oval-primitive tools, to create overlapping shapes:
   

   • Make two or more overlapping fills with the same colors.

   • Make two or more overlapping shapes with fills and strokes; use different colors for the fills and strokes in each shape.

2. Select the overlapping fills that are the same color.
3. Choose Modify > Combine Objects > Union.
   

   The two fills become a single drawing-object shape (Figure 5.19).

   Figure 5.19. Applying the Modify > Combine Objects > Union command to drawing-object or primitive-shape fills of the same color (left) melds the fills and creates a single drawing-object (right).

   

4. Select the overlapping shapes of different colors.
5. Repeat step 3.
   

   The fills and strokes of the shapes segment one another, but you wind up with a single drawing-object containing all those segmented shapes (Figure 5.20).

   Figure 5.20. Applying the Modify > Combine Objects > Union command to drawing-objects (or primitive-shapes) of different colors (left) causes the selected fills and strokes to replace and segment one another as merge-shapes would. The resulting shapes unite in a single drawing-object (right).

   

To use one drawing-object to remove part of another:

1. Use the drawing tools in Object Drawing mode, or the rectangle- or oval-primitive tools, to create two or more overlapping shapes with a variety of fills and strokes.
2. From the Modify > Combine Objects menu, choose one of the following:
   

   Intersect retains fills and strokes only where all the selected shapes overlap, and deletes all other fills and strokes. The resulting shape(s) take stroke and fill attributes from the topmost shape.

   Punch uses the topmost shape like a cookie cutter to remove any shapes directly below it. (Imagine the shape left in the cookie dough after you’ve cut out a cookie; that’s what Punch creates.) The resulting shape(s) retain their original attributes.

   Crop uses the topmost shape like a cookie cutter to select a new shape from any shapes that lie below it. (Imagine the cookie cutter again, but this time you wind up with the cookie itself.) The resulting shape(s) retain their original attributes (Figure 5.22).

   Figure 5.22. The last three commands in the Modify > Combine Objects menu have different results depending on which object lies on top of the stack. Intersect creates a new shape from the intersection of all selected shapes, using the top shape’s attributes. With Punch, the top shape takes a bite out of the others and removes it; the remaining shapes keep their original attributes. With Crop, the top shape takes the same bite but this time removes everything else; the resulting shapes keep their original attributes.