Sams Teach Yourself Macromedia Flash 8 in 24 Hours

The four remaining layer types (Guide, Motion Guide, Mask, and Masked) are very powerful. Unlike the layer properties covered so far this hour, these four will have a lasting visual impact on your user. That is, they affect the final .swf. Using these layer properties is more involved than simply clicking an icon in the Timeline. However, when you see what they can do, you'll understand why it's worth the additional effort.

Guide Layers

Guide layers become invisible when you export a movie. (I said we would be covering layer properties that have lasting effects, and the first one we look at is something that becomes invisible.) Guides are very useful and if you use them correctly, they can have a huge impact on what your audience sees, even though they won't be exported with the movie.

Why would you want something you draw to be excluded from export? There are two primary reasons. One reason to use Guide layers is for registration purposes. Into a Guide layer, you can draw lines or shapes to which other objects can snap for consistent positioning. Maybe you want a title to appear in several sections of a movie. If you draw a horizontal line into a Guide layer, all the titles can be snapped to that line. But when the movie is exported, no one will see that line.

Another reason to use Guide layers is that you might have lots of visual content that you keep on the Stage for personal reference or notes to others in your group. If it's all in a Guide layer, you'll see it only while authoring. Similarly, you might have a layer of an animation that you decide at the last minute to remove. Instead of actually removing the entire layer, you can just change it to a Guide layer. It will still be there as a backup if you change your mind later, but otherwise no one will see it. You'll create a guide layer just for alignment in the next task.

Try It Yourself: Use a Guide Layer to Define the Off-Limits Area

Suppose you're building a presentation that includes onscreen text and a graphic frame that provides borders. You would like to position the text onscreen without overlapping the borders. A shape in a Guide layer can serve to define the areas that are safe for text. Just follow these steps:

In the previous task, you created a Guide layer that defined a safe area onscreen for the Frame Shape symbol that hadn't arrived onscreen yet. You might have other shapes that don't appear unless certain conditions are met. For example, if you have buttons that in their Over state expand with large graphics or include a drop-down effect, you might not want other elements on the Stage to be placed where they will be covered up by the button. You could copy the shape of the button when fully expanded and paste it in the Registration layer. If you want to leave reminder notes to other team members or to yourself, you could enter them in a Guide layer as well. The idea is that you can put anything you want into a Guide layer, and it won't export with the movie.

Using a Guide layer for registration, as you just experimented with, is nice because you can use any shape, group, or symbol in the Guide layer. Another feature, called Guides (under the View menu), is confusingly similar: Vertical and horizontal lines are dragged from the rulers on any side of the Stage (View, Rulers must be selected from the menu) as you did in Hour 2, "Drawing and Painting Original Art in Flash." Using the Guides feature becomes almost identical to using lines in a Guide layer (provided that you've left the default Snap to Guides setting in the View, Snapping menu).

Motion Guide Layers

Guide Layers are pretty useful, but Motion Guide layers are much more exciting! A Motion Guide layer is actually a regular Guide layer that happens to have an adjacent layer (below it) set to Guided. The exciting part is that a motion tween in the Guided layer will follow any path drawn in the Motion Guide layer. That means you can draw an S-shaped line in a Motion Guide, and then the Guided layer can include a motion tween that follows the shape. Similar to a regular Guide layer, a Motion Guide layer will be invisible to the user. The thing to remember with Motion Guide layers is that two layers are involved: the Motion Guide layer and the Guided layer. In the next task you'll make a ball in a Guide layer bounce along a line drawn in the Motion Guide layer.

Try It Yourself: Create a Bouncing Ball Animation by Using a Motion Guide

In this task you'll use a Motion Guide layer to produce a classic bouncing ball animation:

What took all the time in the preceding task was learning about changing layer properties and learning some mechanics of how they need to be ordered. All you do is draw a path, make it a Guide layer, make a new layer that's a Guided layer, do a motion tween, and snap the instance in each keyframe to the drawn path. (Sounds pretty easy when I say it like that but, really, that's all you did.)

One little detail that people seem to forget: When you snap a symbol instance to the guide, you must snap the center of the symbol (which is editable by using the Free Transform tool). If you set the motion tween plus the layer types to Guide and Guided first, Flash won't let you snap any point other than the center.

Let's quickly explore one other option for motion guides. When you select a keyframe with a motion tween, the Properties panel shows the option Orient to Path. The effect of this option is that the instance being tweened will rotate toward the direction it's traveling. You can see the effect of this option best when the symbol isn't perfectly round. We can change Picture of Ball temporarily to see this effect. From the Library window, you can access the master version of Picture of Ball. In the master version, just draw another little circle next to the circle (don't let it touch because you want to be able to remove it later). Back in your main scene, you can look at the Properties panel for the first frame of the Ball layer; to do this, you make sure that you're in the scene, select the first keyframe, and then bring up the Properties panel. Select the option Orient to Path and then view the results by clicking Play. Turn off Orient to Path (in the first keyframe) to see the difference.

In the previous bouncing ball task, I purposely had you step in every possible pitfall so that you could learn how to recover. However, it happens to be much easier with the Add Guide Layer button. If you've already drawn a ball, you can click the Add Guide Layer button (see Figure 11.12) to automatically add a new layer, make that layer a Guide layer, and make the current layer a Guided layer. This button attempts to do several steps in one move, but it can be difficult to use.

Mask Layers

While Guide layers are useful and Motion Guide layers are exciting, Mask layers are both! Masking is really a different feature entirely. Mask Layers is similar to Guides and Motion Guides only in that it's a layer property, and you need at least two layers: one for the Mask layer and one for the Masked layer (similar to Guide and Guided). The graphical contents of the Mask layer determine which parts of the Masked layer will show through. It's as if you're drawing the holes to see through in the Mask layer.

The basic orientation of the Mask and Masked layers is similar to the Motion Guide/Guided layer arrangement. For masking, you first specify one layer's Type property as Mask. Then, you'll find the Masked setting available when you access the layer properties for a layer directly below the Mask layer. However, you won't actually see the masking effect unless you test the movie or lock all the layers involved. It will all make more sense when you create a spotlight mask in the next task.

Try It Yourself: Use Masking to Create a Spotlight Effect

In this task you'll create a spotlight effect that appears to light up a skyline of buildings:

You can do some sophisticated stuff with masking. For example, you could edit the master version of Spot and maybe cut out part of the fill (by using the Lasso tool). The Masked layer will show through only where there's something in the Mask layer. Unfortunately, this is an all-or-nothing situation. That is, the mask is either on or off. You can pull off the effect of a graduated mask by putting the graduation in the Masked layer (because it won't work in the Mask layer). Another idea is to make a duplicate of the Spot symbol but one with a transparency gradation fill. Then you can make a separate layer where this duplicate follows the same path as the spot.

The preceding task was a case of moving the mask. Quite often, however, you'll find situations in which the Mask layer should remain still and the Masked layer is the one to move. Suppose you're building an animation of someone sitting inside a train, and you want the effect of mountains and clouds passing by the window. If you had a wide picture of mountains and clouds, you could easily do a motion tween to make it pass by. Without masking, you would have to cover up the left side and the right side (surrounding each window) with graphics of the inside of the train. These carefully sliced covers would need to be in a higher layer (to cover up the picture), and it would be more work than it needed to be. With masking, all you need is a Mask layer with the exact shape of the windows and a Masked layer containing the tween of your wide picture. This is a case of the masked part moving and the mask staying still. Just realize that any time you want to cut out part of another image, you can do it without really cutting anything. Masking has amazing potential for visual effects.

While Masking is still very useful, Flash Professional 8 added a feature that can be used in a similar manner: the Blend feature (that you first saw in Hour 4). Where two layers are involved for masking, blends require at least two symbol instances (layered but not necessarily in separate layers). Compare the Erase blend to a traditional layer mask. It just so happens the Erase blend (and the Alpha blend) is more complex because you actually need three symbol instances. In fact, the instance on which you set the Erase blend must be nested inside another symbol. In Hour 4 I detailed each blend as well as introduced nesting (which comes up again next hour). For comparison to Mask layers, here's how you can do the previous spotlight effect using blends:

Place an instance of the bright buildings on stage. Create a new symbol inside of which you nest two clips: one instance of the buildings (dimmed via its brightness color effect) and on another layer an instance of the spotlight clip. Call this symbol "spot animation." Set the instance of the spotlight to the Erase blend. Use a Motion tween to animate the spotlight inside the "spot animation" clip. Then, place the "spot animation" in the main timeline on top of the bright buildings. Finally, set the "spot animation" instance to have the Layer blend. Figure 11.15 shows the layout of both how you did it in the preceding task (top) and how you can do it with blends (bottom)

On the surface, this is no easier or better than using mask layers. It should come out looking the same as the preceding task. However, what's really cool is how you can make the spotlight use the Alpha blend instead of Erase. Then, fill the spotlight with a gradient that goes from 0% alpha to 100%. This will produce a spotlight that has soft edges. If you're already comfortable with Photoshop blends, you can probably work out this sort of effect in your head. If not, try to learn masks first. In Hour 13, "Creating Special Effects," you'll see additional effects like these. In addition, you can find other practical examples using Blends in Hour 5, "Applied Layout Techniques."