Flash CS4 Professional in 24 Hours- P10 docx

ptg Subtleties of Movie Clips 261 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. FIGURE 14.4 When set to Movie Clip, the Proper- ties panel gives you a way to name a particular instance on the Stage. From the Library of Lee Bogdanoff ptg 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 Librar y 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 Proper ties 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. From the Library of Lee Bogdanoff ptg 263 Workshop 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. From the Library of Lee Bogdanoff ptg 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. From the Library of Lee Bogdanoff ptg 265 Workshop 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. From the Library of Lee Bogdanoff ptg This page intentionally left blank From the Library of Lee Bogdanoff ptg WHAT YOU’LL LEARN IN THIS HOUR: . How to paint with bitmaps and splatter movie clips . Special effects you can apply to text that’s con- verted to shapes . Practical uses for filters . Advanced masking spe- cial effects During this hour, you get a chance to take the knowledge gathered over the last few hours and apply it to practical exercises. This hour is comparable to Hour 6, “Applied Layout Techniques,” where you combined the graphics cre- ation skills acquired in the first part. Here, you create animations using frame- by-frame animation, tweens, sounds, and layers. This hour should be fun and serve as an affirmation of how far you’ve come in the first half of the book. Few new details about Flash come up this hour. Instead, the exercises con- centrate on specific effects you need to communicate to the audience. Ar- guably, some of the tasks this hour border on cliché or gratuitous; that’s okay. It’s fine to study and even copy what others have done while you’re learning. It’s not likely you’ll use these exact effects on a real project, but 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. HOUR 15 Creating Special Effects From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Use an Imported Bitmap as a Fill Color in a Hall of Mirrors After you start painting with a bitmap, you experiment with some special effects. 1. In a new file, open the Color panel, and click the Fill Color swatch to 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 15.1. 6. Often, it’s best to use the Gradient Transform tool to make some final 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. 268 HOUR 15: Creating Special Effects FIGURE 15.1 Multiple copies of a shape filled with a bitmap makes the hall-of- mirrors effect. 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. From the Library of Lee Bogdanoff ptg 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.” Animate a Block of Text, One Character at a Time TRY IT YOURSELF ▼ In this task, you will break apart a word and make each letter animate separately. 1. In a new file, select the Text tool, pick a large font size, (like 60), click the Stage, and type DROP. 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. 3. With all the letters selected, choose Modify, Timeline, Distribute to Layers. Delete the layer with nothing in it by clicking Layer 1, and then clicking the Trashcan icon in the Timeline. 4. Before we animate these letters, they each need to be a Movie Clip in- stance because we’re going to do Motion tweens. Click once to select the D, and select Modify, Convert to Symbol (or press F8). Name it D, and make sure it’s a Movie Clip. Do the same for the other letters, naming them appropriately. 5. Because the letter instances are perfectly in place the way we want them to begin, let’s not mess them up. In the D layer, click Frame 10, and insert a frame (press F5). In the R layer, insert a frame in Frame 15. In the O layer, insert a frame in Frame 20. In the P layer, insert a frame in Frame 25. 6. Return to Frame 1 by clicking above the 1 in the Timeline. Inser t a mo- tion tween for each of the four layers. Now, click on the D at Frame 10. Press and hold the Shift key, and then drag down so the letter is at the bottom of the Stage. Do the same for the other letters on their last frames. Finally, add a frame at Frame 50 for each of the layers. 7. Test the movie. You might need to choose View, Grid to help you line up the letters. Have fun modifying the timing and making other tweaks. TIP Repeating Symbols If you repeat this task with a word containing duplicate characters (like the two Os in ZOOM), you shouldn’t need to create two symbols based on the letter O. As a way to en- sure the second O lines up perfectly, do this: When you get to the second O, make an- other symbol—call it Temporary O. Then, select the instance on Stage for your Temporary O symbol, and click the Swap button in the Proper- ties panel. Swap it with the first O symbol. Then, delete the Temporary O in the library. Everything lines up, and you didn’t need to drag or eyeball anything. From the Library of Lee Bogdanoff ptg 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 ▼ Convert Text to a Shape for Special Effects 1. In a new file, select the Text tool, pick a large and bold graphic font, and type a word on the Stage. Use the Selection tool to select the block, and then select Modify, Break Apart. Without clicking (which 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. From the Library of Lee Bogdanoff [...]... 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 everything selected, convert the shapes into a Movie Clip symbol by pressing F8, and name it Building Graphic 12 Make a new layer for the second instance of Building Graphic by clicking the Add Layer button,... 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 Skyline 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 Properties panel... 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 Create a Hand-Drawn Masking Transition In this... new file, draw a 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 Insert, Motion Tween 4 Insert a keyframe at Frame 20 (Insert, Timeline, Keyframe) In Frame 10, move Spot to a new location Frame... 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 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 Without masking, you would have to... 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... scripting This way, you build a good foundation on which to grow at your own pace Basic ActionScript Scripting is nothing more than writing instructions Each instruction tells Flash to do something very specific For example, you could instruct Flash to “play,” “stop,” or “set that movie clip’s alpha to 50%.” By keeping each piece of ActionScript specific, you can easily piece together more advanced instructions... (or line of code) is a single instruction WHAT YOU’LL LEARN IN THIS HOUR: How to get started using ActionScript to make Flash do exactly what you want How to create simple buttons the user can click NOTE Skipping Ahead Despite the introduction, we realize many readers will still find this hour too technical for their liking You’re welcome to skip ahead to Hour 19, “Using Video,”; from that point through... auto-completion on form fields in some web browsers Debug Options—This button enables you to add and remove breakpoints, where you purposefully make Flash pause on a specified line of code so you can investigate what is playing at that line From the Library of Lee Bogdanoff 290 HOUR 16: Basic Interactivity You can also add and remove breakpoints by clicking in the gutter to the left of any line of code You see... 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 . F5). In the R layer, insert a frame in Frame 15. In the O layer, insert a frame in Frame 20. In the P layer, insert a frame in Frame 25. 6. Return to Frame 1 by clicking above the 1 in the Timeline with nothing in it by clicking Layer 1, and then clicking the Trashcan icon in the Timeline. 4. Before we animate these letters, they each need to be a Movie Clip in- stance because we’re going to. 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