287   Advanced Tweens with the Motion Editor T weens have always been a big tool in Flash’s animation toolbox, and, as explained in Chapter 3, these days you have more control over tweens than ever. Flash’s motion tween (page 98) can do more than just show a car moving down a street—it can make the car stretch out and turn blazing red when it’s going really fast and scrunch up when it stops. It can even make the car’s shadow change position as the car and sun move across the screen. You accomplish these sophisticated tweens by making multiple property changes at multiple points in time. Want precision control over every aspect of a tween? Turn to the Motion Editor. This chapter shows you in detail how to apply and fine-tune your motion tweens, focusing in particular on Motion Editor control. You’ll start with a refresher on motion presets, which are simply predesigned tweens that you can ap- ply to objects with a couple of mouse clicks. Then you’ll learn some of the different ways you can edit your tweens on the stage, in the timeline, and using the Motion Editor. Along the way, you’ll learn how to apply filters for special effects and how to create more realistic motion (easing). Note: If you need a primer on motion tween basics, or tweens in general, head back to page 98. Applying Motion Presets Designing a perfect tween can be a lot of work. It’s not so much that it’s difficult, but creating a complex motion tween where several properties change at different points in time can be time-consuming. Fortunately, right out of the box, Flash gives you a head start. Open the Motion Presets panel (Window➝Motion Presets), and you 288 F CS: T M M Applying Motion Presets see a handful of predesigned tweens, as shown in Figure 8-1. Initially, the Motion Presets panel comes with two folders: Default Presets, where the Adobe-designed presets live, and Custom Presets, where you can store tweens you’ve perfected as motion presets (see page 290). Just click a motion preset to see a minipreview at the top of the panel. Figure 8-1: Motion presets are saved tweens that you can attach to a symbol or text field with a couple of mouse clicks. Flash comes with several Adobe-designed motion presets, and you can save and reuse your own as you work. Preview window Open/close folder Remove item New folder Save selection as preset Apply preset Not only are motion presets useful design tools, but they’re also great learning tools. By dissecting some of the professionally designed presets that come with Flash, you can see how certain effects are created. After you’ve applied presets in your project, you can modify them, examine them, and steal some of their ideas for your own tweens. To get started, the following steps show how to apply and modify a motion preset called flyin-pause-flyout. As with most presets, the name gives you a pretty good hint at the action. First, the easiest part: applying a motion preset. Like any motion tween, a preset can be applied only to a symbol or a text field. For this exercise, you can draw your own simple circle, or you can use the Missing CD document 08-1_Flyin_Preset.fla from www.missingmanuals.com/cds. 1. Open the Motion Presets panel by choosing Window➝Motion Presets. The Motion Presets panel is small, so you can easily let it float over your work area while you’re making a selection, and then close it after you’ve applied a 289 C : A T   M E Applying Motion Presets preset. You won’t need it again until you need another preset. If you’re working in the Essentials workspace, the Motion Presets panel appears at the bottom of the collapsed panels to the right of the stage. 2. Select the symbol you want to tween; in this case, your circle or the car from the example file. The symbol or text field you tween has to be by itself in a layer in the timeline. If the layer holds more than one object, Flash creates a new layer for the object before it applies the tween. If the object can’t be tweened (perhaps it’s not a sym- bol), you see a warning like Figure 8-2. Figure 8-2: If you try to apply a motion tween to an object other than a symbol or a text field, you see this warning. 3. In the Motion Presents panel, click the flyin-pause-flyout preset, and then click Apply. A motion path appears attached to the object on the stage, and a blue tween ap- pears in the main timeline, as shown in Figure 8-3. 4. Press Enter to preview your tween in Flash. More often than not, you’ll make changes to a preset motion after you apply it. Start by taking a look at how the motion preset behaves. The flyin-pause-flyout preset blurs the symbol while it’s moving, giving it a sense of speed. It slows for a bit and then speeds on. As you’ll learn in this chapter, once you’ve applied the preset you can change the position of the tweened symbol, its size, and even its appearance. For example, you can increase or decrease the blurriness of the image. 5. Modify the tween just as you would any tween you created from scratch. For example, often the tween is working right, but you need to fine-tune the position of both the object and the motion path. With the Selection tool, drag a box around both the object and the motion path to select everything. Then you can drag the whole kit and kaboodle to a new position on the stage. Note: In different places, this book explains how to make changes to the tween using the motion path (page 292), the timeline (page 299), the Motion Editor (page 302), and the Properties panel (page 102). 290 F CS: T M M Applying Motion Presets Figure 8-3: After you apply a tween to a movie clip or text field, you see a motion path attached to the tweened object. A blue tween appears in your animation’s timeline, complete with preset property keyframes. Car symbol blurred Motion Path Property keyframe Tween in main timeline Default presets Once you’ve applied a tween using a motion preset, it’s no different from a tween you create from scratch. Also, there’s no connection between the tween and the pre- sets panel. If you make changes to the tween in your animation, it has no effect on the one stored in the Motion Presets panel. Vice versa is true, too. Unlike with symbols in the Library, making changes to or deleting the tween in the Motion Presets panel has absolutely no effect on animations to which you’ve applied the preset. Saving a Custom Motion Preset Setting up the perfect motion tween can take time. Perhaps you’ve got a text ban- ner with some 3-D effects. Or maybe you spent time getting a basketball to bounce just right. With all that time invested, you want to be able to reuse that work, and as usual, Flash helps you do just that. You can save your carefully crafted tween as a motion preset, and then, in the future, apply it to new symbols and text fields with a click or two. Furthermore, because you modify the tweens created by pre- sets, they’re very versatile and adaptable to different uses. For example, a badminton shuttlecock might not bounce like a basketball, but it’s probably faster to apply the 291 C : A T   M E Modifying a Motion Preset basketball-bounce preset to the shuttlecock and then tweak it a bit than to create a new motion tween from scratch. Saving a preset is easy, and you have couple of ways to do the job. Which one you use may depend on your own preferences or where your mouse happens to hover at the moment. You can choose one of these methods to save a motion preset: • Right-click the tween or motion path, and then choose Save as Motion Preset from the pop-up menu. • Select the tween or motion path, and then click the “Save selection as preset” button on the Motion Presets panel (Figure 8-1). In either case, a dialog box opens where you name the preset, and then click OK. Once that’s done, your newly named preset appears in the Custom Presets folder in the Motion Presets panel. (Your custom preset won’t have an animated preview like the ones that come with Flash, but you can create one as instructed in the box below.) FreqUenTly ASked qUeSTion DIY Preview Can I create a preview for my custom motion preset? If you’ve gone to the work of creating a custom motion preset, you may want it to have its own nifty preview ani- mation just like the presets Adobe designed. As it turns out, you can do that easily. First, publish your preset to create an SWF file that shows the animation. (The details for pub- lishing SWF files are on page 645.) Then place the SWF file in the folder that holds your motion presets. That last bit is the tricky part. The motion presets storage location is different for different computers, as shown in the following examples. (The words in brackets, like <hard disk> and <your name>, represent the disk drives and user names on your computer, while <locale> represents the locale or language for the computer; for example “en” is used for English.) • Mac OS X: <hard disk>/Users/<your name>/Library/ Application Support/Adobe/Flash CS5/Configuration/ <locale>/Motion Presets/ • Windows 7 and Vista: <hard disk>/Users\<your name>\AppData\Local\Adobe\Flash CS5\<locale>\ Configuration\Motion Presets • Windows XP: <hard disk>\Documents and Settings\ <your name>\Local Settings\Application Data\Adobe\ Flash CS5\<locale>\Configuration\Motion Presets\ Deleting motion presets If you decide that a particular motion preset isn’t worthy, you can delete it from the Motion Presets panel. In the Motion Presets panel, click to select the offending pre- set, and then click the trash can icon at the bottom of the panel. The stored preset disappears from the panel, but throwing it away has no effect on any tweens that were created using the preset. Modifying a Motion Preset As discussed earlier in this chapter, Adobe gives you a bunch of snazzy motion tweens with Flash. But one designer’s perfect tween is another designer’s, well… nearly perfect tween. Fortunately, you can customize presets after you apply them. 292 F CS: T M M Modifying a Motion Preset In fact, tweaking a motion preset is great learning ground for designing and perfect- ing your own tweens. Editing a motion preset is no different from editing a tween you created yourself, so the following sections on “Changing the Motion Path” (be- low) and “Editing a Tween Span” (page 299) apply to both motion presets and the tweens that you create from scratch. Changing the Motion Path Whether you use a motion preset or create your own tween, chances are you’ll want to tweak the motion path. Perhaps the ball doesn’t bounce in just the right places, or that car looks like it’s driving off the road. The motion path looks like a line trailing off from the tweened object. As you drag the playhead in the timeline, you’ll notice that the tweened object follows the motion path. If you need a practice file, down- load 08-2_Motion_Path.fla from the Missing CD (www.missingmanuals.com/cds). You can change this path on the stage using the same Selection tool that you use to modify any line: • Move the entire motion path. With the Selection tool, drag a box around any part of the path. Then drag everything to a new spot. • Move the starting point for the motion path. With the Selection tool, drag the diamond-shaped selection point at the beginning of the motion path to a new location. The end of the path remains anchored where it was, while the motion path stretches or shrinks to accommodate the move. • Move the ending point of the motion path. Select the diamond-shaped end point of the path and drag it to a new location. The starting point of the tween remains anchored in place, and the motion path adjusts to the move. • Create a curve in the motion path. First, make sure the motion path is not se- lected, by clicking some empty spot on the stage. Then with the Selection tool, point to the path; when you see a curve appear next to the cursor arrow, drag to create a curved path (Figure 8-4). You can reshape the path by dragging differ- ent points along the path. • Change the tweened object’s position at any point of the motion path. In the main timeline, move the playhead to the frame where you want to reposition the tweened object, and then drag the object to a new position. Flash creates a new property keyframe in the timeline and adjusts the motion path to the new position. To use this method to move the start or end point, make sure that the playhead is on the first or last frame of the tween. This action also creates a diamond-shaped control point in the motion path. You can use the point and the accompanying control handles to change the shape of the motion path. It’s similar to any line you draw using the Pen tool (page 65). 293 C : A T   M E Modifying a Motion Preset Figure 8-4: Use the Selection and Subselection tools to modify a motion path just as you would any other line. The example file 08-2_Motion_Path.fla includes a wheel with the bounce-smoosh tween applied. The animation would be much more interesting if the wheel rolled along the high step, dropped to the ground, and then bounced in a forward motion. Here’s how to change the path for that effect: 1. Move the playhead to Frame 1 and make sure nothing is selected. Then drag the wheel so it sits on the step, as shown in Figure 8-5. If the entire path moves with the wheel, you’ve selected both the path and the object. To deselect everything, click an empty spot or press Shift+Ctrl+A (Shift-c-A). 2. With the Selection tool, adjust the curve so that the wheel appears to roll along the top of the stairstep. When you move the cursor close to the path, it changes to show a curved line next to the arrow. Drag to adjust the curve in the motion path. The solid line shows the general arc of the motion, while the small dots show the actual posi- tion of the tweened object at different points in time. 3. Adjust the end of the motion path so the wheel moves to the right as it bounces. You can stretch the path to the right side of the stage, giving the wheel a feeling of increased forward motion as it bounces. 294 F CS: T M M Modifying a Motion Preset Figure 8-5: To move the starting point of a motion path, you can drag the square end point to a new position. 4. Preview the animation and fine-tune it as necessary. If you got it perfect the first time, great! If not, try zooming in a little and fine- tuning the motion path as described in step 2. Deleting a Motion Path You can delete a motion path from a tween by simply selecting it and then pressing Delete. The consequence, of course, is that your tween isn’t going anyplace. The tweened object remains stranded at its starting point until you provide further in- structions. For example, you can copy and paste in a new path, as described next. Copying and Pasting a Motion Path Flash gives you tools to create perfect shapes like circles, rectangles, polygons, and stars, not to mention the precise control that comes with the Pen tool. You can use any of these drawing tools to create a motion path. If you need a path that matches a perfect shape or is extremely complex, it’s faster and easier to use Flash’s drawing 295 C : A T   M E Modifying a Motion Preset tools, rather than dragging tween objects around the stage to modify a motion path. First you need to create the path with one of the tools that creates a stroke; that is, any of the shape tools, the Pen, the Pencil, or the Line tool. Then, you paste that stroke into an existing tween that doesn’t have a motion path. Note: A file with a completed version of this project, 08-3_Path_Orient.fla, is available at www.missingmanuals.com/cds. Here are the steps: 1. In a new Flash document, create two layers, each with 48 frames. After you create the second layer, Shift-click to select the 48th frame in both layers, and then press F5 to add new frames on both layers. 2. Create a text field with the words not oriented, and then rename the layer not oriented. Make the text nice and bold and about 32 points in size. Double-click the layer name so you can edit it. 3. Right-click a frame in the timeline of the “not oriented” layer, and then choose Create Motion Tween from the pop-up menu. You now have a motion tween with no motion and no tween, because you haven’t yet made any changes to the tweened object’s properties. 4. In the other layer, use the Oval tool to draw a circle, and then rename that layer circle. Set the oval fill color to none by clicking the swatch with the Paint Bucket, and then, in the upper-right corner of the panel with color swatches, click the square with a stroke through it. Make the circle about 200 pixels in diameter. If neces- sary, you can set the size in the Properties panel. 5. Use the Eraser tool, with a small eraser size, to erase a little bit of the circle. You can’t use a closed shape as a motion path, so you need to break the path at some point. When you’re done erasing, your stage should look something like Figure 8-6. 6. Using the Selection tool, drag a box around the circle to select the entire circle. Copy it (Ctrl+C or c-C), click the “not oriented” tween layer, and then paste it (Ctrl+V or c-V) into the tween. As soon as you paste the circle into the tween layer, the text field attaches it- self to the path. At this point, it’s easier to examine your tween if you hide the original circle by clicking the Show/Hide button in the “circle” layer (Figure 8-6). 296 F CS: T M M Modifying a Motion Preset Figure 8-6: If you want a motion path that’s a perfect circle, square, star, or polygon, it’s easiest to create the path with one of Flash’s shape tools, and then paste it into your tween. Show/hide button Circle, but not a closed path 7. Press Enter or Return to preview the animation. Your “not-oriented” text field moves in a circular motion, but the text isn’t ori- ented to the circle. It remains right-side up and oriented to the stage. That looks a little odd, but don’t fret. You’ll learn how to orient the text to the circle in the next section. You can use any stroke as a motion path, even complex strokes created using the Pen tool with multiple complex Bezier curves. Just make sure you’re not using a closed path. Even though the circle isn’t a closed path, the motion of the text looks like it’s making a complete circle. When the movie clip loops, no one in your audience will ever know there’s a break in the circle. Orienting Tweened Objects to a Motion Path Orienting text fields and symbols to a motion path is as simple as clicking a check- box. In this section, you’ll learn how to do that, as well as another handy technique— copying and pasting a motion from one layer to another in the same animation. When you’re done, you’ll have one Flash file with two examples of circular motion. In one, the text field is oriented to the circle; in the other, it’s not (Figure 8-7). 1. Click the Insert Layer button in the timeline’s lower-left corner. A new layer appears in the timeline. 2. Rename the new layer “oriented”. Double-click the layer, and then type the new name. [...]... in your Flash file Once you’ve created a preset, you apply it just as you would any other ease preset Flash names your preset for you, so you’ll have to remember what your 3-Custom and 5- Custom ease presets do Flash saves the presets in your Flash file, so you can use them with any property and they’ll be there the next time you open the file However, you can’t use your custom ease in other Flash documents;... padlock to a new position (Figure 9-4) The pose layer is similar to a motion tween layer (page 98) When you reposition the padlock in Frame 5, Flash creates a tween to animate the motion from 320 Flash CS5: The Missing Manual Linking Symbols with Bones Frame 1 to Frame 5 The frame where you create a new pose is marked with a small diamond, and it’s called a pose frame Figure 9-4:  Pose the chain by dragging... Your Motion Editor View Working with Flash, you fight a constant battle to get a good view of the stage, the timeline, and all the panels and windows It’s a balancing act where you’re constantly expanding this and shrinking that Adding the Motion Editor to the mix just makes the problem tougher It’s so packed with properties, graphs, and widgets that it 308 Flash CS5: The Missing Manual A Tour of the... whether you run it i ­ nside Flash (Enter) or you compile the animation and test it in the Flash Player (Ctrl+Enter or c-Return) Position, size, and alpha properties are all visible inside Flash, but that’s not always the case with some filters, components, timeline effects, and ActionScript code Chapter 8: Advanced Tweens with the Motion Editor 311 Easing Tweens Easing Tweens When Flash creates a tween,... www.missingmanuals.com/cds In either case, make sure the light emanating from your lamp is a movie clip on its own layer, and give yourself about 48 frames for the tween span 312 Flash CS5: The Missing Manual Easing Tweens Figure 8-21:  Flash gives you ease presets that you apply in the Motion Editor’s Eases panel 1 With the light’s tween selected, open the Motion Editor (Window➝Motion Editor), as shown in... you’ve added an ease to the Eases panel, you can apply it to any property, using the Ease drop-down menu 7 Test your animation The light flashes from on to off and then back again It changes six times, m ­ atching the value in the Square Wave subpanel 314 Flash CS5: The Missing Manual Easing Tweens After you’ve applied an ease to a property, the graph shows two lines, as shown in Figure 8-24 The solid... specific points in the timeline The details are on page 312 Within each of those categories you can do the following: • Add and remove property keyframes (page 3 05) • Move property keyframes to change values and timing (page 306) 304 Flash CS5: The Missing Manual A Tour of the Motion Editor • Fine-tune and smooth property changes using Bezier curves (page 306) • Add and remove color effects and filters... may be using in your document There’s a line in the graph ready for you to edit (Figure 8- 25) You use Flash s standard line and Bezier tools to change the shape of the line, and subsequently change the values of any property, once the ease is applied Page 30 explains how to edit a graph line Figure 8- 25:   Use Flash s Bezier tools to modify the graph line in a custom ease preset It may take some trial... values for the other two It’s Flash s way of keeping tweened objects pinned down in time and space The basic motion properties are also the only properties that you can’t fine-tune using Bezier line tools For any properties other than the basic motion properties, you can use Bezier controls in the Motion Editor graph to create smooth changes that increase or decrease 306 Flash CS5: The Missing Manual A Tour... you change the value 5 Click the Timeline tab, and then drag the playhead to the last frame By moving the playhead to a new location, you can enter a different alpha value to create the tween 6 Click the Motion Editor tab, and then change the Alpha amount to 100% Setting the Alpha amount to 100% makes the sign symbol completely opaque 7 Test your animation in Flash or using the Flash Player At this . name>/Library/ Application Support/Adobe /Flash CS5/ Configuration/ <locale>/Motion Presets/ • Windows 7 and Vista: <hard disk>/Users<your name>AppDataLocalAdobe Flash CS5 <locale> ConfigurationMotion. <hard disk>Documents and Settings <your name>Local SettingsApplication DataAdobe Flash CS5 <locale>ConfigurationMotion Presets Deleting motion presets If you decide that a. Editor T weens have always been a big tool in Flash s animation toolbox, and, as explained in Chapter 3, these days you have more control over tweens than ever. Flash s motion tween (page 98) can do