ptg Animating with Motion Tweening 8 8 What You’ll Do Understand Motion Tweening Apply Motion Tween Presets Create a Motion Tween Adjust Motion Tween Properties Edit Motion Tween Properties with the Motion Editor Add Color Effects and Filters Work with Property Keyframes Edit the Path of a Motion Tween Copy Motion as ActionScript 237 Introduction In Flash, it’s not necessary to draw every frame of an anima- tion. You can set the position and attributes of your art in the beginning and ending frames, and Flash will create all of the frames in between. This is called tweening . A motion tween connects two keyframes, each with different effects or charac- teristics applied to them and then gradually "morphs" one into the other. Tweening allows you to quickly animate objects, apply fades, and gradually alter color, alpha, scale, and any other effect that can be applied to a symbol, group, or text object. The span between the starting frame and ending frame of a motion tween is called the tween span . The tween span consists of a group of frames in a single layer with a blue background in the Timeline in which an object changes over time. Only one object, known as the target object , on the Stage can be animated in each tween span. Once an animation is tweened, you can continue to edit it by adding or removing frames to make it move slower or faster, adjust effects, or control the inertia with ease-in and ease-out properties, adding further complexity. Motion tweening produces smaller files than frame-by-frame anima- tion because Flash describes the motion mathematically, incrementally transforming the object in between the two keyframes. From the Library of Wow! eBook ptg 238 Chapter 8 Motion tweening allows you to apply smooth motion and transform effects, such as scale, position, rotation, and skew, to symbol instances (movie clip, graphic, and button) and text fields. Additionally, you can utilize Flash's advanced color effects to apply changes to color, alpha, and brightness. Because these effects are applied to instances, they only affect the instance placed on the Stage. Its parent (original) symbol in the Library is not affected. Motion tweening produces the smallest file sizes of any of Flash's animation methods. Flash use two different types of motion tweens: classic tween and motion tween . A classic tween uses several instances in keyframes of an object along with property keyframes to create a tween, while a motion tween uses one object instance over the entire span along with property keyframes to create a tween. A property keyframe is a frame within the motion tween where you define a value for a property. A motion tween is known as object based animation. Motion tweens are easy to create and provide precise control, while classic tweens are more complex to cre- ate and provide more advanced control. All motion tweens from Flash CS3 are classic tweens. Tween Differences There are several differences between classic and motion tweens. Classic Tweens ◆ Use Keyframes and property keyframes to create tweens. ◆ Allow frame scripts. Understanding Motion Tweening ◆ Allow only symbols (movie clip, graphic, and button) as a tweenable type. It converts all others (editable shapes, groups, and text objects) to a graphic symbol. ◆ Consist of groups of individually selectable frames in the Timeline. ◆ Apply eases to groups of frames between keyframes within the tween. ◆ Allow animation between two different color effects, such as tint and alpha transparency. ◆ Don’t allow animation of 3D objects. ◆ Allow symbol swaps and setting the frame number of a graphic symbol to display in a property keyframe. Motion Tweens ◆ Use one object instance and property keyframes instead of keyframes to create tweens. ◆ Don’t allow frame scripts. ◆ Allow text as a tweenable type. It doesn’t convert it to a symbol. ◆ Treat tween spans as a single object that you can stretch and resize in the Timeline. ◆ Apply eases across the entire length of a motion tween span. ◆ Apply only one color effect per tween. ◆ Allow animation of 3D objects. ◆ Don’t allow symbol swaps and setting the frame number of a graphic symbol to display in a property keyframe. ◆ Convert all non-allowed object types (editable shapes and groups) to a movie clip symbol. From the Library of Wow! eBook ptg Chapter 8 Animating with Motion Tweening 239 Motion tweening when viewed in Onion Skin/Multiple Frames mode Motion tweening when viewed in Onion Skin/Multiple Frames mode Motion Tweening of Scale and Alpha Changes Motion Tweening of Scale, Alpha, and Rotation Changes From the Library of Wow! eBook ptg 240 Chapter 8 Motion Presets are ready-made motion tweens that you can apply to an object on the Stage. After you preview a motion tween in the Motion Presets panel, you can quickly apply it to a selected object. You can apply only one motion preset per object on the Stage. If you apply another preset to an object, it replaces the previous one. You can only apply a 3D motion preset to a movie clip instance, which is the only object type for 3D effects. Each motion preset contains a specific number of frames, which you can adjust later. In the Motion Presets panel, you can also create and save your own custom motion presets as well as import and export them (stored as XML files) to share with others. Applying Motion Tween Presets Apply a Motion Tween Preset Select a tweenable object (symbol instance or text field) on the Stage. Click the Window menu, and then click Motion Presets to open the panel. Select a preset in the Motion Presets panel. A preview of the preset plays in the Preview pane at the top of the Motion Presets panel. ◆ To stop th e pre view, cli ck outside the Motion Presets panel. Click Apply. ◆ If you apply a motion tween to a non-tweenable object, a dialog box appears, asking you to convert it to a symbol. The motion is set to start at the current position of the object on the Stage. ◆ To appl y the pr eset so tha t the motion ends at the current position of the object on the Stage, hold down Shift, and then click Apply. 4 3 2 1 4 1 3 2 Preview pane From the Library of Wow! eBook ptg Chapter 8 Animating with Motion Tweening 241 Save a Tween as a Custom Motion Preset Select the tween span, object on the Stage, or the motion path on the Stage with the custom tween that you want to save as a preset. Click the Window menu, and then click Motion Presets to open the panel. Click the Save Selection As Preset button. Type a name for the preset. Click OK. The new preset appears in the Motion Presets panel under Custom Presets. The preset is saved as an XML file in the Motion Presets folder, which you can locate by performing a search using Instant Search (Win) or Spotlight (Mac). ◆ To crea te a pre view for the new preset, publish a SWF of the motion tween with the same name in the Motion Presets folder. 5 4 3 2 1 Did You Know? You can import and export a motion preset. To im port a mot ion pr eset, clic k the Options button on the Motion Presets panel, click Import, select the XML file, and then click Open. To export a motion preset, select the pre- set in the Motion Presets panel, click the Options button, click Export, spec- ify a name and location, and then click Save. You can delete a motion preset. Select the motion preset in the Motion Presets panel that you want to delete, and then click the Remove Item button. 3 2 4 1 5 From the Library of Wow! eBook ptg 242 Chapter 8 You can tween position, scale, rotation and other transform effects applied to symbols instances and text fields. A motion tween uses one instance over the entire span along with property keyframes, which you define with property values to modify the tween. You can change prop- erty keyframes on Stage, in the Property Inspector, or in the Motion Editor. You should have only one object when you apply the tween or the results will be unpredictable. Tweened frames must reside on the same layer in the Timeline. After you add a tween to a layer, Flash changes it to a tween layer, which you can no longer draw on. A tween layer can contain tween spans, static frames, and actions. Creating a Motion Tween Create a Motion Tween Select one or more objects to tween on the Stage. ◆ To crea te mu ltiple tw eens at once, place objects on multiple layers, and then select them all. Click the Insert menu, and then click Motion Tween. ◆ If you apply a motion tween to a non-tweenable object, a dialog box appears, asking you to convert it to a symbol. Flash converts the layer containing the tweened object to a tween layer and creates a tween span in the layer. To chan ge th e le ng th of th e twe en span, drag either end of the tween span in the Timeline. To add mot io n to the tw ee n, cl ick a frame within the tween span, and then drag the object on the Stage. To twee n 3D rot ation or pos ition, use the 3D Rotation tool or 3D Translation tool. To remo ve a mot ion tween, se le ct the tweened object, click the Insert menu, and then click Remove Tween. To add ano th er tween to an existing layer, drag a tween span from a different layer. 7 6 5 4 3 2 1 Motion tween appears with a blue background. A black dot indicates a target object in the first frame. Black diamonds indicate property keyframes and the last frame. 4 2 3 5 7 1 From the Library of Wow! eBook ptg Chapter 8 Animating with Motion Tweening 243 Motion tweens can be fine-tuned in the Property Inspector or the Motion Editor. When a tweened object is selected, a number of options are enabled that you use to add complexity to your motion path. You can set motion tween properties to deal with position and size, set rota- tion direction and frequency, apply color and display blending effects, or control the easing in or out of the motion. The options you set in the Property Inspector are applied to the entire tween span. Adjusting Motion Tween Properties Set Motion Tween Properties in the Property Inspector Click the Window menu, and then click Properties to open the Property Inspector. Select an object on the Stage with a tween applied. Choose from the available settings; options vary depending on the selected tweened object: ◆ Ease. Sets the motion speed in and out. ◆ Position and Size. Sets the X and Y position, and the selection width and height. ◆ 3D Position and View. Sets the 3D X, Y, and Z position, 3D perspective selection width and height, perspective angle, and vanishing point. ◆ Rotation. Sets the direction and frequency your object rotates. Select the Orient To Path check box to keep your object parallel to the guide relative to its center point. ◆ Path. Sets the X and Y position, and the selection width and height. ◆ Color Effect. Sets the color style effect: Brightness, Tint, Alpha, or Advanced. ◆ Display. Sets the display blending effect, which includes Darken, Overlay, and Invert. 3 2 1 2 3 1 From the Library of Wow! eBook . in Onion Skin/Multiple Frames mode Motion tweening when viewed in Onion Skin/Multiple Frames mode Motion Tweening of Scale and Alpha Changes Motion Tweening of Scale, Alpha, and Rotation Changes . Keyframes Edit the Path of a Motion Tween Copy Motion as ActionScript 237 Introduction In Flash, it’s not necessary to draw every frame of an anima- tion. You can set the position and attributes of your. Motion Tweening 8 8 What You’ll Do Understand Motion Tweening Apply Motion Tween Presets Create a Motion Tween Adjust Motion Tween Properties Edit Motion Tween Properties with the Motion Editor Add