Using Layer Properties for Visual Effect

 < Day Day Up > 

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.

By the Way: Perfect Registration

Registration refers to alignment. In commercial printing, registration is critical because each ink color is printed separately. Registration marks are used to line up all the plates precisely. In multimedia, registration serves much the same purpose. For example, if you're looking at several pages of text, if they're all registered the same, you won't see text jumping all over the screen between pages.

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 a new file, select the Rectangle tool and turn off Object Drawing. Draw a filled box the size of the Stage. (You can use the Info panel to make it the exact size.) Then use the Pencil tool (with the Pencil Mode set to Smooth) to draw an enclosed irregular box within the box you just drew. Select the center shape with the Selection tool and delete, as shown in Figure 11.7. (You can certainly do this maneuver with Object Drawing enabled. Draw the filled rectangle; draw the outline; fill the outline; then select both objects and choose Modify, Combine Objects, Punch.) Select the entire (now cutout) shape and convert it to a symbol (called Frame Shape). Name this layer Registration. This will become the Guide layer.

Figure 11.7. The Registration layer will become the Guide layer.


Select Insert, Timeline, Layer and name the new layer Interface. On this layer, a copy of the Frame Shape will tween into place late in the Timeline (which will better demonstrate the need for Guide layers). First, select the instance of Frame Shape on the Registration layer and copy. Then go to Frame 25 of the Interface layer and select Insert, Timeline, Keyframe (or press F6). Verify that the current layer is Interface (if it is not, click the layer name) and then select Edit, Paste in Place (or press Ctrl+Shift+V) on Frame 25.


Click Frame 35 of the Interface layer and select Insert, Timeline, Keyframe (or press F6). Move the current-frame marker to Frame 25 and scale the instance of Frame Shape much larger so that you can't actually see the borders onscreen (as in Figure 11.8). Finally, set motion tweening in the Properties panel when Frame 25 is selected. Scrub to see that the Frame Shape won't appear until Frame 25, when it tweens from outside the Stage.

Figure 11.8. The first place Frame Shape appears is in Frame 25. Here you scale it larger than the Stage so it will appear to tween from outside.


Click in Frame 35 of the Registration layer. Select Insert, Timeline, Frame (or press F5) to make this layer last as long as the Interface layer. Click the Layer Outline button for the Registration layer (so that only this layer shows as an outline). Scrub from the beginning of the movie to the end. Notice that the outlined Registration layer gives a clear idea where Frame Shape will eventually appear, so that you can avoid placing text in that area. However, if you select Control, Test Movie, you'll see that the Registration layer is visible the entire time. Until you change this layer to a Guide layer, it will export with the rest of the movie.


To make the Registration layer a Guide layer, access the Layer Properties dialog box by either double-clicking the Page Curl icon to the left of the layer name or (with the layer selected) selecting Modify, Timeline, Layer Properties. In the Layer Properties dialog box (refer to Figure 11.5), select the Guide radio button, the Lock check box, and the View Layer as Outlines check box; then click OK.


Insert a new layer (by selecting Insert, Timeline, Layer) and name this layer Text. Verify that all the layers are set to Normal except Registration, which should be set to Guide. (If they're not, access each layer's properties individually and set them appropriately.)


In Frame 1 of the Text layer, create a block of text with a large font size, such as 40. Type as much text as you can, being careful not to exceed the borders shown in the outline in the Registration layer (see Figure 11.9).

Figure 11.9. Using the outlined shape in the Guide layer, you can place the text precisely so that it doesn't interfere with the borders.


Test the movie. You might want to turn off Loop from the Control menu while it's playing.

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:


In a new file, draw a bouncing line (using the Pencil or Pen tool). This will become the path the ball will follow (see Figure 11.10). It might actually work best if you just draw straight lines and then bend them and snap them together. Regardless of how you draw it, just make sure it's one continuous line that doesn't overlap at all. It doesn't have to be perfect looking because this is only going to be a guide (and thus, invisible). Make sure the line is a Shape (by breaking it apart if it's a Drawing Object).

Figure 11.10. A pretty simple drawn line will be used as a motion guide (for a tween to follow).


Double-click the Page Curl icon to access the Layer Properties dialog box (or select Modify, Timeline, Layer).


Name the layer Path, lock it (so you don't mess it up), and change its type to Guide. (Notice that there's no Motion Guide option here.)


Insert a new layer by clicking the Insert Layer button at the bottom left of the Timeline or by selecting Insert, Layer. Name this new layer Ball.


Most likely the inserted Ball layer will appear above the Path layer. You're going to make this new layer a Guided layer (meaning that it can follow the drawing in the Path layer). Before you can make a layer a Guided layer, it must be directly below the layer that is set to Guide. You can change the layer stacking by dragging layers around. Go ahead and drag the Ball layer down (so it's just below Path).

Notice that not only does this change the layer order, but it also causes the Ball layer to be Guided. You can see this because Path now has a slightly different icon (the arch), Ball is indented, and a dashed line separates the two, as shown in Figure 11.11. This is what you want, but you might not be so lucky to have everything fall into place like this (depending on exactly how you drag around the layers). In addition, when moving layers around, you might not want Flash to change all the layer properties for you. If that's the case, perform an Undo so that you're back to where just the Path layer is a regular Guide layer (with the cross icon) and the Ball layer is above it. You're going to do the same thing again the hard way so that you know how it works.

Figure 11.11. The Motion Guide layer (Path) has a special icon, and the Guided layer (Ball) is indented. A dashed line separates the two layers, indicating that they're related.


Drag the Path layer above the Ball layer. Nothing changes except the layer order. You can't just change the Path Guide layer to a Motion Guide layer (which is what you want in the end). Instead, you can make the Ball layer a Guided layer (now that it's directly under a Guide layer). Access the layer properties for the Ball layer (by double-clicking the Page Curl icon or, with the layer selected, choosing Modify, Timeline, Layer Properties). Notice that the type Guided is available. Only when the layer just above this layer is a Guide layer do you see this option. Click Guided and then click OK.


Now you're going to create the animation and snap it to the guide. Into Frame 1 of the Ball layer, draw a circle and make it a symbol (called Picture of Ball). Now, in the Ball layer, click in Frame 50 and insert a keyframe (by pressing F6). Notice that the Path layer doesn't live this long. In the Path layer, click in Frame 50 and insert a frame (not a keyframe) by pressing F5. Go back to Frame 1 of the Ball layer and create a motion tween (by right-clicking the first keyframe in this layer or selecting the frame and picking Motion from the Tween drop-down list in the Properties panel).


Finally, you need to make the ball actually follow the path. This is easiest if you first lock the Guide layer because you're going to snap Picture of Ball to the path, but you don't want to edit the path. Lock the Guide layer by clicking the dot under the padlock in the Path layer. At this point you should find that the Picture of Ball can't be dragged anywhere but onto the line drawn in the Path layer (and you don't disturb the line as it's locked). In Frame 1, make sure Picture of Ball is at the start of the path. Go to Frame 50 and snap the center of the Picture of Ball instance to the end of the path drawn in the Path layer. Test the movie. The ball should follow the path.

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.

Figure 11.12. The Add Motion Guide button just to the right of the Insert Layer button does several things with one click.

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:


Create the spotlight and its motion. To do so, in a new file, draw a filled circle and convert it into a Movie Clip symbol called Spot.


Name the layer in which the Spot instance resides Spot Motion.


Insert keyframes in Frames 10, 20, and 30. In Frame 10, move Spot to a new location, and move it again for Frame 20. Frame 30 should match Frame 1.


Set up motion tweening in Frames 1 to 10, 10 to 20, and 20 to 30, either with the right-click method or from the Properties panel.


Change the Spot Motion layer's Type property to Mask. Double-click the Page Curl icon for this layer to access the Layer Properties dialog box.


Notice that the Page Curl icon changes to the Mask icon (see Figure 11.13). Lock the Spot Motion layer so that you don't accidentally change it.

Figure 11.13. The Mask layer (Spot Motion) no longer has the Page Curl icon; after you change its type to Mask, the icon looks different.


Insert a layer below the Spot Motion layer and change its type to Masked. Click the Add Layer button (at the bottom left of the Timeline). The new Layer might appear above the Spot Motion layer; that's fine. Name the new layer Skyline.


In order for Skyline to be a Masked layer, it must be below the other layer, so click and drag down the Skyline layer. If you get lucky, the Skyline layer will automatically change to Masked (and you'll see an icon like the one shown in Figure 11.14). However, it's easy to do by hand, too. If you must, access Skyline's Layer Properties dialog box and change the type to Masked (which will be available only if the next layer above it is already set to Mask). The result should resemble Figure 11.14.

Figure 11.14. The Masked layer Skyline has a special icon; it's indented, and a dashed line separates it from the Mask layer above.


In the Skyline layer, draw lots of boxes in different colors to resemble a city skyline. You will see the mask effect only if you test the movie or lock all the layers.


Change the background color of the movie to black (by selecting Modify, Document or clicking the Stage and using the Properties panel).

As interesting as this looks, there's something missing. This is the way a spotlight would look in space, where there's no atmosphere. The black background is too dark. You need to make another layer with a dim version of the skyline to make this more believable.


Select all the boxes you drew in Skyline (you need to make sure that just this layer is unlocked to select it). You can easily select everything in that layer by clicking the keyframe in Skyline layer. With everything selected, convert the shapes into a Movie Clip symbol called Building Graphic.


To put another instance of Building Graphic into a new layer, create a new layer (by clicking the Add Layer button) and name it Dim Skyline.


Analyze the Type property of each layer (which is easy to see by its icon). Chances are that the Dim Skyline layer is also a Masked layer. One Mask layer can have several Masked layers. Set Dim Skyline to Normal, but only after you move it down below Skyline. If Skyline is no longer directly under the shadow of Spot Motion, it will also revert to Normal. Drag the Dim Skyline layer down below Skyline, and then set the Type property for Dim Skyline to Normal.


Copy the instance of Building Graphic and paste it in place (by pressing Ctrl+Shift+V) into the Dim Skyline layer. Hide all layers except Dim Skyline (so you're sure which one you're affecting). Then, with the instance of Building Graphic in the Dim Skyline layer selected, access the Properties panel. Set the Color Style to Brightness and set the slider to 40%.

Looks great, eh? You didn't need to create this Dim Skyline layer to learn about masking, but it's a nice touch.

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)

Figure 11.15. You can create the same spotlight effect using either Mask layers (top) or using the Erase blend (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."

     < Day Day Up > 

    Sams Teach Yourself Macromedia Flash 8 in 24 Hours
    Sams Teach Yourself Macromedia Flash 8 in 24 Hours
    ISBN: 0672327546
    EAN: 2147483647
    Year: 2006
    Pages: 235

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