Section 1.3. Merging and Stacking Shapes

1.3. Merging and Stacking Shapes

So far, you've been using Flash's default Merge Drawing mode. In this mode shapes can interact with one another, merging together when they overlap. For example, if the corners of two squares overlap, the frontmost shape will "knock out" the underlying shape, effectively deleting it, as seen in the top of Figure 1-10. This behavior contrasts with that of the newly introduced Object Drawing mode, which will be discussed shortly.

Figure 1-10. Merge Drawing mode (top) and Object Drawing mode (bottom) compared

What are the implications of shapes merging? If you didn't save your work at the end of the last sequence, do so now, and then try this with your current file:

  1. Activate the Selection tool, select the black fill you just applied to the silhouette, and then delete it. Everything inside the fill area is removed, including the gradient previously behind the silhouette's fill!

  2. Undo the last step. You'll need the silhouette fill for something else in a minute.

At first you may think this is a problem, but it can be very useful, and you can prevent it from happening, if you wish. First, however, look at a few simple examples of how Merge Drawing mode can be advantageous. If you recently saved your work, feel free to experiment.

Select the Line tool and draw a line all the way through your artwork, from outside left to outside right. (This is arbitrary, but ensures that the line goes completely through the box and protrudes on either side.) Now choose the Selection tool and click once in various regions of your art. You'll see that the line has effectively segmented your art, allowing easy selection of smaller pieces.

Next, select the Brush tool. This will show you a good example of how unprotected shapes can be altered in creative ways. In the tool's Options area, experiment with the different Paint modes. Paint Normal will behave the way you likely expect. Paint Fills, however, will paint only fills, leaving strokes unaffected. Try Paint Behind and Paint Inside to see how they work, too.

Finally, try one last thing. Select the Lasso tool, and freely select any combination of fill and stroke. With a selection active, you can move it, or delete it, as before. The Merge Drawing mode and the Lasso tool make selecting partial fills and strokes very easy and natural.

1.3.1. Groups

When you don't want shapes to merge together, there are a few ways to prevent this from happening. In just a few minutes, you'll learn how to convert shapes into another type of Flash asset. Also, in Chapter 3 you'll learn how to add new layers to prevent shapes from ever touching each other. However, you still need to know how to protect existing shapes in the same layer. The first approach you'll practice is making a group from a shape:

  1. Select the fill and outline (stroke) of the Hendrix silhouette. Press Ctrl-G (Win) or Cmd-G (Mac). This creates a group of the fill and stroke so they can easily be moved together (i.e., they cannot be edited separately). A light blue bounding rectangle appears around the silhouette when it's selected, indicating that this is no longer a shape. In this case, it is now a group.

  2. Drag the group to the right. You'll see that the area under the silhouette is still empty, but if you deselect the silhouette and then move it again, you will find that this time the move does not affect the gradient beneath it.

  3. Save your work. If you wish, compare your file to box_06.fla.

Traditionally, you probably think of a group as two or more items treated as a single entity, and the same is certainly true in Flash. However, as you've just seen, a group in Flash has another important purpose. By grouping the parts of a shape, you ensure that the shape can no longer be altered by another shape. Thus, grouping single items is an attractive solution to unwanted shape merging.

1.3.2. Editing groups

What if you want to edit a shape that has been grouped? Although the shapes no longer seem editable, there are two ways to satisfy this need.

First, if you double-click a group, the surrounding assets will appear to dim, and the group will become editable. This is because you are effectively "inside" the group and can edit it as if it were a shape. When you are finished editing, you can double-click elsewhere on the Stage to go back "outside" the group. This is useful when you want the shape to continue to be protected from interaction with other shapes.

Note: When inside a group, if you look at the very top of the main document window (to the right of the word "Timeline"), you will see a series of icons from left to right that represent a nested hierarchy of objects that you are editing. The last one will likely say "Group," indicating where you are. You will read about this in greater detail later in this book, but for now bear in mind that if you ever get stuck and don't know what you're editing, you can look to this area and click icons to the left until you've walked your way back to where you want to be.

Second, if you break apart a group, it will return to behaving like a shape. To do this, first select the group and then access the Modify Break Apart menu command (Ctrl/Cmd-B). Be sure you want to do this, though, because it means that other overlapping shapes will again affect the shape.

Both of these techniques are very useful and can be applied to many different types of Flash assets. You'll see them again when you look at other types of native Flash assets, such as buttons, but they apply to other editable items as well. For example, if you break apart a block of text, the selection will turn into a group of individual letters. If you again use the Break Apart command, those letters will turn into shapesthey will not be editable as text, but can be fully manipulated as shapes.

Think of breaking apart assets as "going down to the next smallest editable item." This will become clearer with more practice.

1.3.3. Gradients Transformed

Now that you know about groups, you can prevent existing shapes from being deformed by other shapes. But you still have a big hole in your gradient background that needs repair. Here's how to fix it:

  1. In the Color Mixer panel, change the Fill Type from Solid to Radial. Your previous gradient should appear again. If not, use the eyedropper to pick it up from your saved color swatch or the remaining background.

  2. Next, use the Selection tool to select the remaining gradient and delete it.

  3. Switch to the Paint Bucket tool so you can fill the border with an intact gradient, but first check again to make sure the Paint Bucket tool's Lock Fill option is still disabled. This time, click in the upper-left corner of the background box to apply the gradient. The effect you're looking for is a bright, vibrant sun radiating rays of color. Deselect the gradient to see how it looks.

  4. With the gradient deselected, activate the Gradient Transform tool (F). Click the gradient fill to position and scale the gradient the way you want it. The Gradient Transform tool will display a circle with five control points on it, as seen in Figure 1-11.

    Figure 1-11. The Gradient Transform tool in action

  5. Use the Center Point control point (the circle in the upper-left corner of Figure 1-11) to position the sun where it appears in the figure. (The triangle is the Focal Point control, which is not used in this exercise.)

  6. Use the Scale control point (the second icon down on the right side of the circle) to scale your gradient until it resembles the gradient in Figure 1-11. As you can see, the last color in the gradient (purple) extends to fill the rest of the box. This is more like a traditional sun. Save your work so you can revert to this design if you prefer it.

  7. See if you can make your sun a bit more psychedelic. Switch to the Selection tool and select the gradient. In the Color Mixer, change the Gradient Overflow setting to Reflect. Your file should now look like Figure 1-12.

    Figure 1-12. Your poster with the gradient applied

  8. The Gradient Overflow option dictates what the gradient will do when it extends beyond the size you set with the Gradient Transform tool. You've seen two of the overflow options in action: Extend continues the last color, and Reflect reflects the gradient, reversing the order of its colors until the area is filled. A third option is Repeat, which starts over at the first color in each cycle until the area is filled. Pick the look you prefer and save your work.

1.3.4. Object Drawing Mode

You've already learned how to protect a shape from merging with other shapes by grouping it, but there's a faster way to achieve this result as you are drawing. The Object Drawing mode, introduced in Flash 8, essentially draws shapes that are "pre-grouped." (The results are actually called drawing objects, but the effect is the same.)

Add a couple of stars to your illustration to practice:

  1. Click and hold the Rectangle tool, and select PolyStar Tool from the pop-up menu. You can use this tool to create polygons or stars with your preferred number of sides or points, respectively.

  2. In the Properties panel, choose no stroke color and a white fill color. Then look in the context-sensitive Options section of the Tools panel, and enable Object Drawing mode.

  3. Back in the Properties panel, select the Options button in the lower-right corner. Change to the Star style and click OK.

  4. Draw stars of different sizes in the lower-left and upper-right corners. Feel free to move them aroundyour background gradient will be unaffected, just like when you moved your grouped shapes around.

  5. Save your work. If desired, compare your file to box_07.fla.

1.3.5. Stacking Graphics

The image's composition is good, but not great. The silhouette looks a bit odd on top of the stroke for the box. If you fix that, the stroke will appear as a frame for the entire image:

  1. Double-click, or Shift-select, the entire border. Press Ctrl/Cmd-G to create a group from the stroke.

  2. If the gradient border doesn't also now appear in front of the silhouette, choose the Modify Arrange Bring to Front menu option while the border is still selected.

  3. Warning: It is possible to draw a shape only to watch it disappear behind a grouped item or drawing object. If this happens, or if you are having trouble achieving the desired results with the Modify Arrange menu options, remember that drawing objects are always drawn on top of shapes, and groups are always stacked on top of both shapes and drawing objects.

    Flash 8(c) Projects for Learning Animation and Interactivity
    Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)
    ISBN: 0596102232
    EAN: 2147483647
    Year: 2006
    Pages: 117

    Similar book on Amazon © 2008-2017.
    If you may any questions please contact us: