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 sp ans as a sing le obje ct 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 the preview, click 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 apply the preset so that 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 create a preview 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 import a motion preset, click 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 create multiple tweens 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 change the length of the tween span, drag either end of the tween span in the Timeline. To add motion to the tween, click a frame within the tween span, and then drag the object on the Stage. To tween 3D rotation or position, use the 3D Rotation tool or 3D Translation tool. To remove a motion tween, select the tweened object, click the Insert menu, and then click Remove Tween. To add another 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 ptg 244 Chapter 8 The Motion Editor panel allows you to view and edit all tween properties and related keyframe properties. You can change the basic motion of the tween by changing the x-, y-, and z-axes, transform the skew and scale, apply color and filter effects, or add motion speed easing in or out. You can open the Motion Editor panel by using the Window menu. It appears next to the Timeline. When you select a tween space, a tweened object, or motion path, the Motion Editor panel displays tween property values in categories and a grid with a graph for each property. Editing Motion Tween Properties with the Motion Editor Change the Motion Editor Display Select an object on the Stage with a tween applied. Click the Window menu, and then click Motion Editor to open the panel. To change the display of the Motion Editor, do any of the following: ◆ Display Properties. Click the triangle next to a property category. ◆ Expand/Collapse Property View. Click the property name to toggle it. ◆ Viewable Frames. Sets the number of frame of a tween shown in the Motion Editor. ◆ Graph Size. Sets the size of the graph. ◆ Expanded Graph Size. Sets the expanded property view size of the graph. ◆ Add Eases Options. Adds an ease option to menus in the Motion Editor. Click the Add button on the Eases category, and then select an ease option. 3 2 1 3 2 Add Eases options Display properties Viewable Frames Expanded Graph size Graphic size From the Library of Wow! eBook ptg Chapter 8 Animating with Motion Tweening 245 Set Motion Tween Properties in the Motion Editor Select an object on the Stage with a tween applied. Click the Window menu, and then click Motion Editor to open the panel. Click the triangle to expand a category, and then specify any of the following: ◆ Basic Motion. Specify values for the x-, y-, and z-axes, and other related options. ◆ Transformation. Specify skew and scale values, and other related options. ◆ Color Effect. Click the Add or Remove button on the Color Effect category, and then select an option. Specify the color effect options you want. ◆ Filters. Click the Add or Remove button on the Filters category, and then select an option. Specify the filter options you want. Select or clear the Ease check box to enable or disable it for a property or category, and then set an ease value. Positive values increase the ease at the end of the curve, while negative values increase the ease at the beginning of the curve. To reset values for an option, click the Reset Values button. 5 4 3 2 1 2 4 Add and Remove buttons 3 5 From the Library of Wow! eBook . Motion tweening produces the smallest file sizes of any of Flash& apos;s animation methods. Flash use two different types of motion tweens: classic tween. 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