Chapter 4. Complex Graphics on a Single Layer

I l @ ve RuBoard

Chapter 4. Complex Graphics on a Single Layer

In chapters 2 and 3, you learned to make simple individual shapes from lines (strokes) and fills by using Macromedia Flash MX's drawing tools. You learned to make a single oval and a lone rectangle, for example. 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 ovals and rectangles to create a robot character, for example. To work effectively with complex graphics, you need to understand how Flash shapes interact when they are on the same layer or on different layers . In this chapter, you learn how to work with multiple shapes on one layer. To learn more about the concept of layers, see Chapter 5.

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 are 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).

I l @ ve RuBoard

When Lines Intersect Lines

If you draw several lines on the same layer, they interact. Draw a new line across an existing one, and the new line cutsor, in Flash terminology, segments the old. Segmentation happens whether the lines are the same color or different colors, but it's easiest to see with contrasting colors.

To see how one line segments another:

In the Toolbox, choose the pencil tool.
In the Pencil Tool Property Inspector, do the following:
- Set the stroke style to Solid.
- Set the stroke height to 4 points.
- Set the color to blue.
On the Stage, draw a line.
Click the stroke-color box (in the Toolbox or in the Property Inspector), and from the pop-up swatch set, choose a new color, such as red.
On the Stage, draw a second line; make it intersect your first line at least once. Flash segments the line. To see the segments, select various parts of the line with the arrow tool (Figure 4.1).

Figure 4.1. When you draw one line across another, every intersection creates a separate segment.

The Mystery of the Stacking Order for Strokes

When drawing one line on top of another, you might expect that the last line drawn would wind up on top, but sometimes, that's not the case. In this exercise about intersecting lines, for example, if you start with a red line and then draw a blue line across it, you'll see that the blue line jumps behind the red one when you release the mouse button.

Flash creates a stacking order for lines based on the hex-color value of the line's stroke-color setting. The higher the hex value of the stroke color, the higher the line sits in a stack of lines drawn on the Stage. A line whose stroke color is set to a hex value of 663399 always winds up on top of a stroke whose color is set to 333399.

I l @ ve RuBoard

When Lines and Fills Interact

Even the invisible outlines that describe painted brush-stroke fills can cut other lines. This means that when you draw lines over fills, you can wind up with lots of little segments.

To see how a fill segments a line:

In the Toolbox, choose the pencil tool.
In the Pencil Tool Property Inspector, do the following:
- Set the stroke style to Solid.
- Set the stroke height to 4 points.
- Set the color to blue.
On the Stage, draw a line.
Return to the Toolbox, and choose the brush tool.
Click the fill-color box (in the Toolbox or in the Brush Tool Property Inspector), and from the pop-up swatch set, choose red.
On the Stage, paint a brush stroke that intersects your line twice.

The brush stroke remains one solid object, but the line turns into three separate segments (Figure 4.2).

Figure 4.2. When a fill overlays a line, the fill segments the line. As the selection highlighting shows, the fill remains one solid object.

To see how a line segments a fill:

In the Toolbox, choose the brush tool.
Click the fill-color box (in the Toolbox or the Brush Tool Property Inspector), and from the pop-up swatch set, choose red.
On the Stage, paint a brush stroke.
Return to the Toolbox, and choose the pencil tool.
In the Pencil Tool Property Inspector, do the following:
- Set the stroke style to Solid.
- Set the stroke height to 4 points.
- Set the color to blue.
On the Stage, draw a line that intersects your brush stroke twice.

The line cuts the brush stroke into three segments; the invisible outline of the brush stroke cuts the line into five separate segments (Figure 4.3).

Figure 4.3. When a line overlays a fill, the line cuts the fill, and the fill's invisible outline cuts the line.

How Do Flash's Editable Objects Interact?

You can think of each frame in a Flash movie as being a stack of transparent acetate sheets. In Flash terms, each "sheet" is a layer. Objects on different layers have a depth relationship: Objects on higher layers block your view of those on lower layers , just as a drawing on the top sheet of acetate would obscure drawings on lower sheets.

Imagine that you have two layers in your movie. If you draw a little yellow square on the bottom layer and then switch to the top layer and draw a big red square directly over the yellow one, the little square remains intact. You simply can't see it while the big red square on the top layer is in the way.

On a single layer, however, objects actually interact with one another, almost as though you were painting with wet finger paint. When fills of different colors interact, the newer fill replaces the older one. Take the preceding example: First draw a little yellow square; then switch colors and draw a big red square right on top of the little one in the same layer. The little square disappears for good. The red fill replaces the yellow wherever it overlaps the latter.

If the new fill only intersects the old, it still replaces the part where the two overlap. Imagine, for example, using the brush tool to paint the first stroke of the letter X . Now pick up a different color to paint the second stroke of the X . Where the second brush stroke overlaps the first, it eats up that first fill color. You wind up with separate segments of the first stroke on either side of the second stroke where the two intersect.

When fills are the same color, the newer fill simply adds to the shape. If you lay down two brush strokes in the same color, the second slightly overlapping the first, the edges of the two brush strokes run together, and you wind up with one wide shape. If you paint both halves of the letter X with the same color, you wind up with a single X -shape object.

I l @ ve RuBoard