Prerequisites:

• Basic Flash Project Setup
• Drawing with Strokes and Fills

Begin

Let’s learn how to prevent Flash from doing the automatic cutting and melding that we saw in the Drawing with Strokes and Fills lesson.

There are three different ways to “protect” your shapes from interfering with each other. We’re going to look at two of them: groups and layers. The third method, encapsulating your shape as a MovieClip/Graphic/Button, we’ll save for another lesson.

It’s important to keep shapes separated in Flash. When you’re drawing the various shapes you’ll be working with, whether it’s for a diagram of o2 Broadband set-up or game graphics, interfering shapes can be a disaster. If you come from a background in Illustrator, the need to keep artwork separated may seem foreign, but due to the speed that Flash and Fireworks offer they are, in my opinion, superior to Illustrator for drawing vector artwork.

1. Any Shape Can Be Grouped

You can put a “wall” around any shape to prevent it from being sliced, diced or melded by grouping it.

1. Click and hold the mouse button on the Rectangle tool. The tool flyout will pop open.

   

2. Click on the Oval tool. You can also press the letter O key on your keyboard. The Oval tool works the same way as the Rectangle tool.
3. Choose a fill colour for your new oval using the colour swatches in the Tools palette. Choose “no colour” for the stroke.
4. Click and drag to draw an oval on the screen. Hold the SHIFT key to constrain it to a perfect circle (just as holding the SHIFT key constrains a rectangle to a perfect square).
5. Click the Selection tool.
6. Double-click the oval’s fill, or range-select the oval by click-dragging a box around the whole thing.
7. Press CTRL+G on your keyboard to group the shape (or Command+G if you’re on a Mac).
8. Press CTRL/Command+C to copy the grouped oval.
9. Press CTRL/Command+V to paste the grouped oval.
10. Click and drag one of the ovals over the other, then deselect.
11. Click and drag one oval away from the other oval.

These grouped ovals are protected. They don’t meld together like they did when they were “naked”.

BONUS DVD PROTIP: Toggle the Object Drawing button, and Flash will automatically group all of the shapes you draw. If you actually use this feature, i will come to your house and personally murder you in the face.

2. Go “Inside” a Group to Edit the Shape

Grouped shapes don’t behave like naked shapes. They’re essentially protected from tomfoolery. If you want to tomfool with them, you can go inside the group to mess around, and then pop back out of it.

1. Double-click one of the grouped ovals to go inside the group.
2. Notice that doing this starts a breadcrumb trail above the Stage. “Scene 1″ is at the beginning of the trail, and now you’re inside a group within that Scene.

   

3. Mess around with the shape all you like. For example, click to select the fill, and then change its colour using the fill colour swatch.
4. When you are finished tomfooling, click the “Scene 1″ tab in the breadcrumbs trail to jump back out to the Stage.

3. Groups Can be Nested

You can have grouped shapes within grouped shapes within grouped shapes. Try it:

1. Click to select one of the two ovals.
2. Press CTRL/Command+X to cut it. The deleted oval remains in memory.
3. Double-click the remaining grouped oval shape to go inside the group.
4. Press CTRL+V to paste the first grouped oval inside the second.
5. Double-click the grouped oval you just pasted to go inside it. Notice that the breadcrumb trail changes again: Scene 1 | Group | Group . This means you are within a group that is within a group that is sitting on the Stage.

   

6. Click the first “Group” tab in the breadcrumb trail to jump back out of the nested group. Then click the “Scene 1″ tab to jump back out to the Stage. Alternately, you can click the “Scene 1″ tab to jump straight back out to the Stage.

Grouped shapes can contain multiple grouped shapes, each of which can contain grouped shapes, and so on. Using groups is a down n’ dirty way to protect your shapes, but it’s a beginner’s way to work. When i work in a file where a lot of the artwork is nested and grouped, i know the file was created either by a lazy person, or someone brand new to Flash.

4. Groups Can Be Broken

To break up a group, call Yoko Ono. Or follow these steps:

1. Click on the grouped oval shape.
2. Press CTRL+B (PC) or Command+B (Mac) to break the group.
3. You wind up with one raw oval shape (this was the shape in the “parent” group), and one grouped oval (the “child” group).
4. Click on the second oval and break the group, because it’s fun to do. Now you have two naked, raw shapes ready for some fusion (if you knowhutimean).

The Break command is used to crack other Flash things out of their shells. You can use it to convert a Bitmap image into a shape, or to break a MovieClip/Graphic/Button out of its MovieClip/Graphic/Button enclosure.

5. Groups On Separate Layers Stay Separate

The Timeline window contains Flash’s layer system. If you can’t see the Timeline, either click Window > Timeline, or CTRL/Command + ALT + T. Any shapes you paste in their own separate layers won’t interfere with each other.

Here are some other facts about Layers:

• Fact: Layers can be created with the “New Layer” button at the bottom left corner of the timeline.

  

• Fact: Layers are mammals.
• Fact: Layers can be deleted with the “Delete Layer” button. It’s the trashcan icon near the “New Layer” button.
• Fact: The topmost Layer has a higher Z-depth than the lowest Layer. This means that items in higher Layers will appear in front of items in lower Layers.
• Fact: You can click and drag layers on top of or beneath each other to re-order them.
• Fact: Double-click a Layer label to type a name for it. Unnamed Layers in a complicated project are sure signed of a Flash n00b, a lazy person, or someone who was in an awful hurry.
• Fact: Layers can be locked/unlocked, hidden/unhidden, and outlined/unoutlinified by clicking the dots beneath the Show/Lock/Outlines buttons at the top left of the Timeline. (the eyeball/lock/square buttons)

  

  Layer 4 has been hidden. Layer 3 has been locked. Layer 2 has been outlined.

• Fact: All layers can be shown/locked/outlined by clicking the Show/Lock/Outlines buttons themselves.

  

  All five layers have been hidden, locked and outlined.

• Fact: You can click the New Folder button, between the “New Layer” and “Delete Layer” buttons, to create a Layer folder. Click and drag Layers in and out of Layer folders, then collapse the folders to save space using the little grey arrow. Layers that are inside folders appear slightly indented beneath the Layer folders.

Finish

Understanding Layers is a crucial part of working efficiently in Flash. Layers are preferable to groups, because they can be labeled, reordered, foldered, etc, while groups can only be nested inside each other in a somewhat invisible nightmarish structure. Groups are fine for fast drawing tasks, but they shouldn’t become a regular part of your repertoire – particularly because at a glance, they’re difficult to distinguish from MovieClips/Graphics/Buttons, which are a whole other ballgame.

Ryan Henson Creighton is a Toronto-based game developer, and founder of Untold Entertainment Inc., specializing in online games for kids, teens, tweens and preschoolers.

Ryan Henson Creighton

View all posts by Ryan Henson Creighton

Popularity: 2% [?]