Flash CS4 Professional in 24 Hours- P10

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

Thêm vào BST

Báo xấu

92
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash CS4 Professional in 24 Hours- P10: The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Flash CS4 Professional in 24 Hours- P10

Subtleties of Movie Clips 261 FIGURE 14.4 When set to Movie Clip, the Proper- ties panel gives you a way to name a particular instance on the Stage. Effects on Download Order All this trash talk about Graphic symbols shouldn’t scare you off. Besides being appropriate for scrubbing, they also have a nice effect on downloads. Specifically, Graphic symbols only need to download one frame at a time, and therefore, exhibit a better streaming effect than Movie Clip symbols. A movie that uses Graphic symbols, or even no symbols, can begin to play be- fore it’s entirely downloaded; in other words, it streams. In the case of a frame containing a Movie Clip, all nested frames need to download before Flash proceeds to the next frame. If Flash reaches a frame that contains a ton of Movie Clip instances, which in turn include lots of nested frames, your user might experience a pause. Even though the later frames in nested clips might not be needed right away, Flash needs to be prepared for a script that immediately jumps to the last frame. This isn’t a critical point be- cause Flash files tend to be small, and there are other ways to optimize a movie (many of which are discussed in Hour 22, “Minimizing File Size”). So, keep in mind that Graphic symbols stream better.
262 HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols Summary You already knew two big concepts: how nesting of symbols works and how symbols can be used for both motion tweens and efficiency. This hour put them together. When doing motion tweens, you might have tried to make a symbol a multiframe symbol. Now, you know you can do that and there are options that control whether the multiframe symbol you’re tween- ing is behaving like a Movie Clip or a Graphic. You can’t see Movie Clips animate on the stage by scrubbing. To test them, you must run Test Movie. When you really need the capability to scrub the main Timeline, such as for lip synching, avoid using Movie Clips. Finally, the fact that only Movie Clips can be given an instance name proves to be the most significant attribute of Movie Clips. Q&A Q. I did the Car with Rotating Wheel task, but when I first made the Rotat- ing Wheel symbol, I forgot to specify the default symbol behavior as Movie Clip. I went back to the Library to rectify this error, but it still doesn’t work; the wheels don’t rotate. Why? A. Changing the symbol properties of the item in the Library affects only any new instances you drag from the Library, which have the properties of the master in the Library. However, instances already in a movie have the same behavior they started with. Your instances of the Rotating Wheel symbol are behaving like graphics. Go to where they’re used in- side the Car symbol, and with the Properties panel open, select each in- stance. Then, change the Symbol Behavior setting from Graphic to Movie Clip. Q. I can’t find the Loop Once option on the Properties panel when I have a Movie Clip selected. I swear I’ve seen it before. Where is it? A. You could have seen Loop Once in the Properties panel, but not when a Movie Clip was selected. Only instances behaving as graphics have this option, which is a good reason to use a Graphic symbol. Of course, when you become accomplished with ActionScript, you learn ways to achieve the same effect when using a Movie Clip—although it still might take more work than simply using the option available to instances of graphics.
Workshop 263 Q. You said use Movie Clips unless you need one of the features of a Graphic symbol. Are there any other benefits to Graphic symbols? A. There is one nice trick we didn’t mention this hour. A Graphic symbol is a great way to store multiple similar images on separate frames within that symbol. For example, say you have a bunch of thumbnails that you import into separate keyframes of a Graphic symbol. When you drag a Graphic symbol on stage, you can use the Properties panel to single frame and enter the frame number you want to use. It’s a nice way to or- ganize your content. Q. In this book, I keep reading the phrase “instances behaving as graph- ics.” Why don’t you just say Graphic symbols? A. There’s a difference. The master symbol has one default symbol behav- ior, which you can change by clicking the Library’s options menu and se- lecting Properties. However, each instance on the Stage can be changed to something different from the master that spawned it. An in- stance always starts the same as its master. Not only can each in- stance be changed to behave like any type, but changing the master has no effect on instances already on the Stage. Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers. Quiz 1. How many frames can you use inside a Graphic symbol? How many in- side a Movie Clip symbol? A. You can use one frame for a Graphic symbol and as many as you want for a Movie Clip symbol. B. You can use as many as you want for either. C. It doesn’t matter how many frames you use in the master symbol; it only matters whether the instance behaves like a Graphic, which can have one frame, or a Movie Clip, which can have as many frames as you want.
264 HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols 2. What happens if you name two symbols in the Library the same? What about naming two Movie Clip instances the same? A. You can’t do either. B. You can’t name two symbols the same unless you separate them by using Library folders, but there’s no problem naming two in- stances the same. C. You can name two symbols or two instances the same, but it’s a bad idea because Flash might lose one. 3. Although Movie Clips are recommended over graphics, when should you use Graphic symbols? A. You should always avoid them. B. Graphic symbols enable you to synchronize Graphics to the Time- line and sometimes even make the file download faster. C. Graphic symbols are easier on the eyes because they’re antialiased (the sharp edges are slightly smoothed). Quiz Answers 1. B. You can use as many frames as you want in the creation of Movie Clips or Graphics. Depending on where you use Graphics, you might need to concern yourself with the number of frames the instances are given to live. 2. B. Although there’s no problem naming multiple instances the same, it might become a problem when you try addressing just one, such as when George Foreman addresses one of his many sons named George, Jr. There’s certainly no rule against it. 3. B. Some people agree with Answer A, that graphic instances should be avoided, but for truly varied applications, using Movie Clips to simulate Graphic symbols can be problematic. Plus, who cares how big the file becomes if you’re not delivering it to the web? If some- thing saves you a ton of time in production, it could be worth the cost of slightly larger file sizes, especially if the cost doesn’t turn out to be terribly significant.
Workshop 265 Exercises The following exercises are tricky, but worth going through. To make things a bit easier, we’ve uploaded source files to the publisher’s website. 1. Despite all the dismissive talk about Graphic symbols, this activity practically requires them. Create an animation of a steam engine train. First, make a Graphic symbol of just the stack. Then, go inside the stack symbol to animate the smoke stack, possibly by using a shape that starts out as a rec- tangle. Use shape tweens to Frame 5, where the stack is bulging, Frame 6 where it’s extra tall and expels smoke, and Frames 7 through 10, where it’s normal again. Use the stack symbol in the creation of the train itself. Be sure to give the train exactly the same number of frames as the stack. Bring the train into the main Timeline, and motion tween it across the screen. By scrubbing, you can to judge where the clouds of smoke appear. In another layer, add symbol instances of clouds, which appear and stay in the same location as they motion tween to 0% alpha. Try this by using Graphic symbols for everything. 2. Create an animation of a Ferris wheel. First, make the passenger car a Movie Clip so you can animate it. Make a Graphic symbol called One Rotation, and inside it create circular motion guide to motion tween the passenger car one full rotation in about 28 frames. Now place 10 instances of One Rotation inside a 36-frame Movie Clip named Ferris Wheel. For each instance of One Rotation, access the Properties panel, and specify the first frame for each. Start one on Frame 1, the next on Frame 4, the third on Frame 7, and so on. In the end, you have 10 cars rotating in the same manner but starting at dif- ferent locations.
This page intentionally left blank
HOUR 15 Creating Special Effects During this hour, you get a chance to take the knowledge gathered over the WHAT YOU’LL LEARN IN last few hours and apply it to practical exercises. This hour is comparable to THIS HOUR: Hour 6, “Applied Layout Techniques,” where you combined the graphics cre- . How to paint with ation skills acquired in the first part. Here, you create animations using frame- bitmaps and splatter by-frame animation, tweens, sounds, and layers. This hour should be fun and movie clips serve as an affirmation of how far you’ve come in the first half of the book. . Special effects you can Few new details about Flash come up this hour. Instead, the exercises con- apply to text that’s con- centrate on specific effects you need to communicate to the audience. Ar- verted to shapes guably, some of the tasks this hour border on cliché or gratuitous; that’s . Practical uses for filters okay. It’s fine to study and even copy what others have done while you’re . Advanced masking spe- learning. It’s not likely you’ll use these exact effects on a real project, but cial effects you’ll certainly apply the techniques. Effects with Shapes We start with a few relatively simple features of shapes and Drawing Ob- jects, and then work toward more advanced techniques. Keep in mind you can’t do the following tricks with text blocks, grouped objects, primitives, or symbol instances. You can, however, go inside a symbol and use these techniques on any of the shapes that make up the symbol. Painting with Bitmaps You’ve seen how to create and modify gradients. You can also use a gradi- ent as the fill or stroke color. You can even use an imported bitmap or raster graphic as a fill or stroke. The way you create and modify a color with a bitmap fill is comparable to using a gradient. You use the Color panel to se- lect the image, and you use the Gradient Transform tool to modify it. It’s easy and pretty cool, even if it’s not terribly practical.
268 HOUR 15: Creating Special Effects ▼ TRY IT YOURSELF After you start painting with a bitmap, you experiment with some special Use an Imported effects. Bitmap as a Fill Color 1. In a new file, open the Color panel, and click the Fill Color swatch to in a Hall of Mirrors select it. From the Type drop-down menu, select Bitmap. Because this is a new file, you are faced with the standard Import dialog. Select any raster graphic you have on your computer. If you already have a bitmap in your Library, selecting Bitmap from the Type drop-down menu dis- plays a set of swatches, each with a preview of the imported bitmap. 2. Select the Rectangle tool, and set the stroke to No Stroke (the diago- nal red line). Draw a square on Stage. The fill should contain your im- ported, raster graphic. 3. Select the Gradient Transform tool, which might only be accessible when you click and hold the Free Transform tool button in the Tools panel. Click the fill of your square. You can modify the size and loca- tion of the bitmap fill. If you import a large bitmap, you must zoom out to see all the handles to modify the fill. The bitmap repeats when it’s smaller than the rectangle. Interestingly, the Gradient Transform has additional handles to change just the width or height as well as the ro- tation and skew of the fill, options that don’t apply to Linear Gradi- ents. Let the cursor change help you figure out the modification type for each handle. 4. The bitmap fill is pretty cool, but what about something more practi- cal? Try an easy hall of mirrors. Use the Gradient Transform to set the contained image as big or bigger than the square—that is, make sure the image doesn’t repeat. 5. Use the Selection tool to select the rectangle and open the Transform panel. Type 80 into both the width and height fields, and then repeat- edly click the Duplicate Selection and Transform button near the bot- tom right of the Transform panel. The result should look like Figure FIGURE 15.1 15.1. Multiple copies of a shape filled with a bitmap makes the hall-of- 6. Often, it’s best to use the Gradient Transform tool to make some final mirrors effect. tweaks on the location of the fill of the smallest rectangle. For example, we centered the head of the puppy in the photo so that it is visible. Using a bitmap as your fill or stroke color can be a bit garish. With that in mind, it’s possible to tween a shape whose bitmap fill changes over time. That is, you can make one keyframe containing a shape with a bitmap fill, and then in a second keyframe use the Gradient Transform to tweak the bitmap fill. Finally, do a Shape tween from the first frame to the second. The thing to remember in this case is you need to use Shape tween, not Motion.
Effects with Shapes 269 Breaking Apart Text Text is much like a Drawing Object in that it doesn’t eat away other shapes in the same location the way shapes drawn in merge mode does. If you select a text block and choose Modify, Break Apart, the first time it breaks the text into a separate block for each character. The second time, or if the text block is only one character, Modify, Break Apart turns the text into shapes. Why is this use- ful? If you want to animate each character of the text independently, you need to make symbols out of each character. Plus, if you want to change the shape or fill with a gradient, then the text must be a shape. You can experience both ef- fects in the next task and in “Convert Text to a Shape for Special Effects.” In this task, you will break apart a word and make each letter animate TRY IT YOURSELF ▼ separately. Animate a Block of 1. In a new file, select the Text tool, pick a large font size, (like 60), click Text, One Character the Stage, and type DROP. at a Time 2. Choose the Selection tool, and click the entire block of text. Position the text where you want the animation to begin—for example, at the top of the stage. Choose Modify, Break Apart (or press Ctrl+B). Each letter is a separate block of text now. TIP 3. With all the letters selected, choose Modify, Timeline, Distribute to Repeating Symbols Layers. Delete the layer with nothing in it by clicking Layer 1, and then If you repeat this task with a clicking the Trashcan icon in the Timeline. word containing duplicate 4. Before we animate these letters, they each need to be a Movie Clip in- characters (like the two Os in stance because we’re going to do Motion tweens. Click once to select ZOOM), you shouldn’t need to the D, and select Modify, Convert to Symbol (or press F8). Name it D, create two symbols based on and make sure it’s a Movie Clip. Do the same for the other letters, the letter O. As a way to en- naming them appropriately. sure the second O lines up perfectly, do this: When you 5. Because the letter instances are perfectly in place the way we want get to the second O, make an- them to begin, let’s not mess them up. In the D layer, click Frame 10, other symbol—call it and insert a frame (press F5). In the R layer, insert a frame in Frame Temporary O. Then, select the 15. In the O layer, insert a frame in Frame 20. In the P layer, insert a instance on Stage for your frame in Frame 25. Temporary O symbol, and click the Swap button in the Proper- 6. Return to Frame 1 by clicking above the 1 in the Timeline. Insert a mo- ties panel. Swap it with the tion tween for each of the four layers. Now, click on the D at Frame first O symbol. Then, delete 10. Press and hold the Shift key, and then drag down so the letter is the Temporary O in the library. at the bottom of the Stage. Do the same for the other letters on their Everything lines up, and you last frames. Finally, add a frame at Frame 50 for each of the layers. didn’t need to drag or eyeball 7. Test the movie. You might need to choose View, Grid to help you line anything. up the letters. Have fun modifying the timing and making other tweaks.
270 HOUR 15: Creating Special Effects Turning Text into a Shape Text blocks are similar to Drawing Objects, symbol instances, and groups. You can put text in any of the preceding object types, but it’s not necessary because text doesn’t get eaten away the way a plain shape does when two shapes overlap. However, there are several reasons why you might want to turn text into a shape. As a shape, you can distort the text in any manner you want. You can fill it with gradient or mixed colors. You can add a stroke to the text if it’s a shape. Unfortunately, once you convert text to a shape, you can never edit the characters as text again. In this section, you learn special effects for text converted to a graphic shape. The way you convert text to a shape is easy. Select Modify, Break Apart twice. The first time you select Break Apart, it breaks a text block into indi- vidual text blocks that are one character each. Once the text is a shape, you can do any sort of shape maneuver. Use the Free Transform tool’s Distort and Envelop options; apply a stroke and remove the fill; change the stroke or fill to a gradient or bitmap; or stretch and reshape using the Selection or Subselection tools. The next task enables you to play with all these options. ▼ TRY IT YOURSELF 1. In a new file, select the Text tool, pick a large and bold graphic font, Convert Text to a and type a word on the Stage. Use the Selection tool to select the Shape for Special block, and then select Modify, Break Apart. Without clicking (which Effects would deselect), select Modify, Break Apart again. Now, all the letters are shapes. 2. Use the Selection and the Subselection tools to stretch and bend the characters. Try not to distort things so much that you can’t read the word. In Figure 15.2, we add spike shapes to our word. FIGURE 15.2 You can go wild reshaping text once it has been converted to editable shapes. 3. Let’s add a dramatic shadow. Select all the shapes, and choose Modify, Group. This makes the shapes safe from erasing the shadow. Copy the group, and paste it. Position the duplicate out of the way of the original. With the duplicate selected, choose Modify, Transform, Flip Vertical. Then, select Modify, Ungroup.
Effects with Shapes 271 4. Use the Free Transform tool, and select all shadow characters. Use TRY IT YOURSELF ▼ the Distort option, located at the bottom of the toolbar, and press and Convert Text to a hold the Shift key while you drag out the bottom-right corner to make Shape for Special the shadow bigger, like the way it might appear when the sun is low. Effects See Figure 15.3. FIGURE 15.3 A dramatic shadow only takes a little bit of tweaking with the Free Transform tool. 5. Select all the shadow letters, and set the color to something a lighter than the primary letters. An easy way to do this is to change the Al- pha of the fill color to about 50%. With all the shadow selected, choose Modify, Convert to Symbol (or press F8), and select Movie Clip. 6. Select the shadow clip, and use the Filters section of the Property panel to apply a Blur effect. 7. Now, change the fill color on the letters. Double-click to enter the pri- mary letters’ group. Open the Color panel, and for the fill color, select the default white-to-black radial gradient or create your own gradient. Select the Paint Bucket tool, and make sure the Lock Fill is not se- lected. Click in the top-left corner of the leftmost letter. Then, turn on Lock Fill, and click once in each of the other letters. Finally, use the Gradient Transform tool to control the position and fall off of the gra- dient. You might have to scroll to the right or left of the stage to grab the gradient handle. It should spread across all the letters. 8. To push this over the edge, we can animate. First, do a Shape tween with the main letters. Go back up to the main Timeline, and select the main letters. Choose Edit, Cut (or press Ctrl+X), and then select Modify, Timeline, Insert Layer (or click the Insert Layer button at the base of the Timeline). Make sure the new layer is active, and select Edit, Paste in Place (or press Ctlr+Shift+V). Select the letters again, and choose Modify, Break Apart. Finally, go to Frame 20, and insert a keyframe. Use the Gradient Transform tool to move the highlight of the gradient to the rightmost letter. Select the keyframe in Frame 1, and use the Properties panel to set a Shape tween.
272 HOUR 15: Creating Special Effects ▼ TRY IT YOURSELF 9. The shadow is a bit easier. Click on the cell in the shadow’s layer un- Convert Text to a der Frame 20, insert a frame, and insert a Motion tween. Use the Shape for Special Free Transform tool, and skew the bottom of the shadow to the left at Effects Frame 20. You might need to nudge it a bit so it lines up with the main letters. Don’t worry too much about how the shadow looks during the tween—it’s only necessary that it looks good in the last frame. In the “Masking Effects” section later this hour, you see an alternative to converting text to shapes when you only need to modify the fill. The color or gradient gets revealed by a block of text where the text is the mask. Splatter Movie Clips with the Spray Brush Tool One interesting effect we haven’t explored yet is using the Spray Brush tool to “spray” movie clips. You can create some unusual effects by creating a small movie clip and spraying random instances of it on the stage, as demonstrated in the following Try It Yourself. ▼ TRY IT YOURSELF Now that you can create animated movie clips, you can spray them, which Splatter Animated creates a very unusual effect, as you’ll see in this exercise. Movie Clips 1. Open a new file, and begin by creating a small, animated movie clip. This can be like the Rotating Wheel you created in Hour 14, “Nesting Animations in Movie Clip and Graphic Symbols.” To save time, you can copy Rotating Wheel from the Library of that Flash file, and paste it into the Library of your current file. 2. Make sure you’re on Scene 1, and select the Spray Brush tool. Use the Properties panel to change the Symbol Spray value to Rotating Wheel (or your movie clip), as shown in Figure 15.4. Click on all three of the lower checkboxes, Random Scaling, Rotate Symbol, and Ran- dom Rotation. These do exactly what they sound like, which you see in a moment. 3. Click on the Stage with the Spray Brush. This should create a cluster of randomly scaled, randomly rotated copies of the Movie Clip.
Splatter Movie Clips with the Spray Brush Tool 273 4. Finally, you can see them animate by choosing Control, Test Movie. A TRY IT YOURSELF ▼ cool feature of this tool is that it really is splattering copies of your Splatter Animated movie clip. If you edit them, those changes are reflected on the Stage. Movie Clips For example, we add an orange fill color to the Wheel symbol after we create the spray, and the change shows up on the Stage. FIGURE 15.4 The Spray Brush tool lets you “spray” copies of movie clips, even animated ones. You can edit the original symbol after the fact, and your changes show up in the spray. As you probably noticed in the previous task, the Properties panel has op- tions you haven’t seen before. Let’s take a quick look at them: . Spray—This setting has a button next to it that allows you to pick the movie clip you want to splatter on the Stage. If you don’t select a clip, you can use the default shape, a small black square. Notice that if you click on the black box next to Default Shape, you can change the color or use a gradient fill. . Scale—Change the scale to make your movie clips or default shape larger or smaller than the parent. . Random Scaling—This checkbox ignores the Scale setting and ran- domly resizes your splattered movie clips. . Brush Width and Height—These control the splattering area. Larger numbers mean the clips will be more spread out. . Brush Angle—This controls the direction of your splatter if one di- mension, say Width, is wider than the other. Spend a few minutes playing with these settings and the Spray Brush until you understand how they control your results.
274 HOUR 15: Creating Special Effects Using Filters for Special Effects In the task, “Convert Text to a Shape for Special Effects,” you used the Blur filter to soften the shadow, but you didn’t use the Drop Shadow filter. In fact, you can’t distort the shadow when using that filter. Before you jump into the following examples using filters, remember that sometimes you have to draw or animate by hand what you want to show. You’ve seen Filters pop up in other parts of this book, and they appear again. We’ve included two general effects that can be enhanced by filters: depth and motion. Showing Depth with Shadows You don’t need a degree in optical physics to know some basics about shad- ows. Figure 15.5 shows two simple principles: The closer an object is to a light source the bigger the shadow; and, the farther away from where the shadow is cast, the bigger and blurrier that shadow becomes. For example, in the preceding task, the wider you made the shadow, the closer the light source seemed to be. Using these two simple relationships in your anima- tions adds depth and communicates a sense of scale to the user. The following task proves that adding a subtle shadow can go a long way toward adding depth to your animations. FIGURE 15.5 Understanding how light is cast helps you simulate depth.
Using Filters for Special Effects 275 In this task, you will create a shadow for a bouncing ball that will change TRY IT YOURSELF ▼ as the ball animates. Add a Shadow to 1. In a new file, draw a circle near the top of the stage, select it, and Show Depth and convert it to a Movie Clip by pressing F8. Distance 2. Click Frame 20, insert a frame, and create a Motion tween. To make sure Frames 1 and 20 are the same, go to Frame 20, and choose Insert, Timeline, Keyframe. 3. Now, we make the circle bounce. Go to Frame 10, and press and hold the Shift key while you drag the instance of the circle down toward to the bottom of the stage. Test the movie to see the basic bouncing ball. 4. Select the circle instance, and copy it. Name the sole layer Circle, lock the layer, and then insert a new layer for the shadow. Name that layer Shadow. You can click and drag to move the stacking order of the layers, so the Circle layer is above the Shadow layer where we’re about to animate the shadow. 5. In the Shadow layer, select Edit, Paste in Place (or press Ctrl+Shift+V), and the circle instance you just copied appears. Move the red current-frame marker to Frame 10. The shadow must move to the floor, and that must be below the circle when it hits the bottom. Press and hold the Shift key, and drag the circle down, so it’s below the circle. Move the red current-frame marker back to Frame 1 to edit the way the shadow appears at the start. 6. Back in Frame 1, select the shadow, and use the Free Transform tool to squash it and widen it just a tad. Use the Properties panel to set the Color Effect to Tint, 100%, and pick the Black swatch. Keep the shadow selected, and use the Filters section of the Properties panel to set a Blur. Set both the X and Y direction to 50. 7. Add a Motion tween to the Shadow layer. Click the cell in Frame 20 of the Shadow layer, and insert a keyframe by pressing F6. Move to Frame 10, and select the shadow. Use the Filters section of the Prop- erties panel to set the Blur X and Y to a value near 40. You can use the Free Transform tool to make the shadow a little smaller. 8. Test the movie. It’s okay, but it might look better if the shadow also has an alpha effect. To add both, select the shadow in Frame 20, and use the Properties panel to change the Color Style to Advanced. Change the alpha percentage from 100 down to 30 or whatever looks right to you. Change the alpha to the same for the instance in Frame 1. You’re welcome to change the alpha similarly for the instance in Frame 10, but it looks best with its alpha set higher. Note: You have to start with Frame 20 and work back to Frame 1 when you change the alpha. If you try beginning with 1, Flash assumes you want to animate the change in alpha, so the middle frame gets an interpolated alpha value. If you work backwards, the middle frame doesn’t change.
276 HOUR 15: Creating Special Effects Adding a Motion Blur The Blur filter is great for making an out-of-focus version of an instance, but it’s not so great for showing motion with direction. While you can set the X- and Y-Blur factors independently, the blur appears on both sides (left and right or top and bottom) in equal amounts. To show that something is both moving fast and going in a particular direction, the blur should only appear on one side, like the trailing side of a comet. You already know that animation is a series of still images, so any motion blur you add is added to a single frame at a time. You can tween filters so Flash does the interpolation between keyframes. There are three general ways to add a trailing blur: . Have two objects—One with the Blur filter and another on top with no blur. The blurred object can even be a different shape. Figure 15.6 shows an example. FIGURE 15.6 The Blur is applied to the object un- derneath while the object on top is left unchanged. . Use the Drop Shadow filter—Set the shadow color to match the ob- ject, and set the direction to the position from which the object is sup- posed to be leaving(that is, behind the object). . Draw lines or some other custom graphic—You can make the lines long to make the object look like it’s moving faster or short to make it look slower. Figure 15.7 shows an example. FIGURE 15.7 You might think a few simple lines to depict motion doesn’t work, but Applying Filters with the Motion Editor simply watch an old cartoon frame- New in this version of Flash is the Motion Editor panel. This new panel by-frame, and you see it really does. grants you more precise control of your animation paths, as well as more customized easing options. With the Motion Editor, you can also apply fil- ters to your animations, as you’ll see in the next short task.
Masking Effects 277 In this exercise, you will create a simple animation and apply a Filter to it TRY IT YOURSELF ▼ using the Motion Editor panel. Add a Filter with the 1. In a new file, draw a circle near the top of the stage, select it, and Motion Editor convert it to a Movie Clip by pressing F8. 2. Scroll to the right of your Timeline and click Frame 150, insert a frame, and create a Motion tween. We’re making this a long animation so you can see the changes that happen to the filter we’re about to add. Move the circle somewhere else on the stage. You should see a green Motion Path. 3. If the Motion Editor isn’t open, choose Window, Motion Editor to ac- cess it. 4. Look for the Filters section. You might have to drag the scrollbar on the right or drag the panel larger to see it. 5. Click on the plus sign to the right of the Filters title. This will open a list of options you are already familiar with: Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color. These are nothing new. Choose Drop Shadow from the list. A new heading, Drop Shadow, will appear in the Motion Editor under the Filters section. 6. The big advantage that the Motion Editor gives you is the capability to change the appearance of the filter as the animation occurs. In this example, we’ll make the drop shadow change, so it appears that the circle is getting closer to the stage. Under the Drop Shadow heading, locate the Strength setting. Click on Frame 150 on the timeline and set Strength to 0. 7. When you watch your animation, you will see the drop shadow disap- pear by the time the animation reaches the last frame. Masking Effects So far, we’ve mainly used layers to enable us to tween multiple movie clips. Another important reason that Flash provides you with the capability to create multiple layers is masking. The shapes you draw into a layer with its Layer Properties set to Mask shows through to the objects in any layer or layers directly underneath with their Layer Properties set to Masked. This sounds more confusing than it is. Basically, the Mask layer defines what is visible in the Masked layers, as you see in the next task.
278 HOUR 15: Creating Special Effects For masking, you first specify one layer’s Type property as Mask. Then, you find the Masked setting available when you access the Layer properties for a layer directly below the Mask layer. However, you don’t actually see the masking effect unless you test the movie or lock all the layers involved. It all makes more sense when you create a spotlight mask in the next task. ▼ TRY IT YOURSELF In this task, you create a spotlight effect that appears to light up a skyline Use Masking to of buildings. Follow these steps: Create a Spotlight 1. Create the spotlight and its motion. To do so, in a new file, draw a Effect filled circle, and convert it into a Movie Clip symbol called Spot. 2. Name the layer in which the Spot instance resides Spot Motion by double-clicking on the layer name and typing a new name. 3. Insert a frame at Frame 20, and add a Motion tween by choosing In- sert, Motion Tween. 4. Insert a keyframe at Frame 20 (Insert, Timeline, Keyframe). In Frame 10, move Spot to a new location. Frame 30 should match Frame 1. 5. Change the Spot Motion layer’s Type property to Mask by double-click- ing on the small icon to the left of the Layer name. Select Modify, Timeline, Layer Properties to access the Layer Properties dialog box. Select Mask, and click OK. 6. Notice the Page Curl icon (the icon to the left of the layer name) changes to the Mask icon. Lock the Spot Motion layer, so you don’t accidentally change it by clicking underneath the padlock symbol on the layer’s title bar. 7. Insert a layer below the Spot Motion layer (Insert, Timeline, Layer), and change its type to Masked. Click the Add Layer button at the bot- tom left of the Timeline. The new layer might appear above the Spot Motion layer, and that’s fine. Name the new layer Skyline. 8. 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 automatically changes to Masked. 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. This is available only if the next layer above it is already set to Mask. 9. In the Skyline layer, draw lots of boxes in different colors to resemble a city skyline. You see the mask effect only if you test the movie or lock all the layers.
Masking Effects 279 10. Change the background color of the movie to Black by selecting TRY IT YOURSELF ▼ Modify, Document or by clicking the Stage and using the Properties Use Masking to panel. Create a Spotlight As interesting as this looks, something is missing. This is the way a Effect 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. 11. 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 the Skyline layer. With every- thing selected, convert the shapes into a Movie Clip symbol by press- ing F8, and name it Building Graphic. 12. Make a new layer for the second instance of Building Graphic by click- ing the Add Layer button, and name the layer Dim Skyline. 13. Analyze the Type property of each layer, which is easy to see by look- ing at each icon. Chances are the Dim Skyline layer is also a Masked layer. One Mask layer can have several Masked layers. Set Dim Sky- line to Normal, but only after you move it down below Skyline. If Sky- line is no longer directly under the shadow of Spot Motion, it also reverts to Normal. Drag the Dim Skyline layer down below Skyline, and then set the Type property for Dim Skyline to Normal. 14. Copy the instance of Building Graphic, and paste it into the Dim Sky- line layer by pressing Ctrl+Shift+V. Hide all layers except Dim Skyline, so you’re sure which one you’re working on. Then, with the instance of Building Graphic in the Dim Skyline layer selected, access the Proper- ties panel. Set the Color Style to Brightness and set the slider to –40%. Looks great, right? 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 shows through only where something is 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 doesn’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.
280 HOUR 15: Creating Special Effects The preceding task was a case of moving the mask. Quite often, you 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 pass- ing by the window. If you had a wide picture of mountains and clouds, you could easily do a motion tween to make it pass. 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 needed. 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. 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. Next you get to play with a pretty cool masking trick that’s very effective. It’s a way to reveal an image using a hand-drawn effect. Basically, the mask is going to build one frame at a time, but it looks like someone is changing an image by painting one line at a time. ▼ TRY IT YOURSELF In this task, you’ll use an animated mask to obscure one image while re- Create a Hand-Drawn vealing another. Masking Transition 1. In a new file, import two photos that are the same size. Place each one at 0,0 on the X- and y-axes in its own layer. Name the layer on top End and the layer underneath Start. You initially see the image in the Start layer, and then it transitions to the image in the End layer. Make both layers last 60 frames by clicking in Frame 60 of each layer, and pressing F5. 2. Insert a third layer above the other two layers, and name the layer Transition. You do the rest of this task in this layer, so you’re welcome to lock the other layers. The Transition layer should last 60 frames by default. Click Frame 20, and insert a blank keyframe by pressing F6. Make sure the Brush size option is large. Paint one blob in the top-left corner of the stage, as shown in Figure 15.8. Now, hold the Brush tool using the mouse, and press F6, which duplicates the blob you have in Frame 20. Then, draw a little more to cover up the photo. You can go pretty fast because you have another 40 or so frames until you cover the photo entirely. 3. When you’re done with your frame-by-frame animation that covers the photo, set the Transition layer to Mask and the End layer to Masked, and make sure the Start layer stays as Normal. Test the movie.