In Flash, it’s not necessary to draw every frame of an animation. 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 characteristics 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 animation because Flash describes the motion mathematically, incrementally transforming the object in between the two keyframes.
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 (New!). 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 (New!) 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 create and provide more advanced control. All motion tweens from previous versions of Flash are classic tweens.
There are several differences between classic and motion tweens.
• Use Keyframes and property keyframes to create tweens.
• Allow frame scripts.
• 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.
• 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.
FL 3.3
Motion Presets (New!) 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.
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.
a. 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.
a. 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.
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).
a. To create a preview for the new preset, publish a SWF of the motion tween with the same name in the Motion Presets folder.
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 preset in the Motion Presets panel, click the Options button, click Export, specify 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.
FL 3.1
You can tween position, scale, rotation and other transform effects applied to symbols instances and text fields (New!). 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 property 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.
Select one or more objects to tween on the Stage.
a. 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.
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 rotation 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.
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.
The Motion Editor panel (New!) 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.
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.
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.
FL 3.2, 3.5
Wondering where Timeline Effects have gone in Flash CS4. They are now a part of the Motion Editor. You can add many Timeline Effects by using filters in the Motion Editor. You can add filter effects (New!), such as Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color, to a motion tween. You can also add color effects, such as Alpha, Brightness, Tint and Advanced Color, to a motion tween. You can apply more than one effect or filter to an object to create a different effect. If an applied color effect or filter doesn’t work for you, you can remove it.
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 the Color Effect or Filters category.
Use any of the following:
• Color Effect. Click the Add button on the Color Effect category, and then select an option.
The options include Alpha, Brightness, Tint, and Advanced Color.
• Filters. Click the Add button on the Filters category, and then select an option.
The options include Drop Shadow, Blue, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color.
Specify the options you want for the category; options vary depending on the color effect or filter that you choose.
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 the Color Effect or Filters category.
Specify the options you want for the category; options vary depending on the color effect or filter that you choose.
To remove a color effect or filter, click the Remove button on the Color Effect or Filter category, and then select the effect or filter that you want to remove.
To reset values back to the default, click the Reset Values button for the effect or filter.
FL 3.2
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. Each keyframe property (New!) for a specific property appears as a control point on the graph. You can add or remove a property keyframe at any time. Control points can be either smooth or corner points. When a point is smooth, Bezier handles appear, which you can adjust. Some properties in the Motion Editor are associated with each other, such as Scale X and Scale Y. You can use the Link icon to constrain values to match to each other.
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.
To work with property keyframes, do any of the following:
• View. Click the Go To Previous Keyframe or Go To Next Keyframe arrows.
• Add. Place the playhead where you want to property keyframe, and then click the Add or Remove Keyframe button.
• Remove. Right-click (Win) or Control-click (Mac) the control point in the graph, and then click the Remove Keyframe.
• Smooth or Corner. Alt-click (Win) or Command-click (Mac) the control point to toggle between smooth and corner.
• Link. Click the Link icon to constrain values to match for associated pairs. Click the icon again to unlink a pair.
FL 3.2
If you want to change the x-, y-, or z-axes, it’s easier to make bigger adjustments in the motion path of a tween on the Stage and minor ones in the Motion Editor (New!). You can move the entire motion path to another location on the Stage or edit individual points on the path. If segments within the path become to fast or slow, you can use the roving property for the x-, y-, and z- axes to make the speed consistent throughout the tween.
Select an object on the Stage with a tween applied.
To make changes directly on the Stage, do any of the following:
• Object Position. Place the playhead in the frame you want to move, click the Selection tool, and then drag the target object to a new location.
• Motion Path Position. Click the Selection tool, click the motion path, and then drag the path.
• Motion Path Size. Click the Free Transform tool, click the motion path, and then drag a resize handle.
• Motion Path Shape. Click the Selection tool, click away from the motion path, and then drag any line segment on the path.
Click the Subselection tool, click the path, and then drag a control point to move it, or click a control point, and then drag the Bezier handles of the control point to reshape it.
• Delete Motion Path. Click the Selection tool, double-click the motion path, and then press Delete.
• Roving. Right-click (Win) or Control-click (Mac) the tween span or an individual control point in a Motion Editor graph, and then click Roving to toggle on and off.
If you have a complex animation in the timeline that you want to convert into ActionScript 3.0 code, you can use the Copy Motion as ActionScript 3.0 command to get the job done. When you use the command, Flash copies the properties that define the motion tween on the timeline and writes the ActionScript 3.0 code for you to apply to a symbol. You can apply the code as timeline code or in class files for the Flash document file.
Create the animation using a symbol on the timeline in a layer that you want to copy as ActionScript 3.0 code.
Create a new layer.
Create a new symbol or drag another instance of your existing symbol on the Stage.
Select the entire animation that you want to copy on the animation layer of the timeline. Click the first frame, press Shift, and then click click the last frame.
Right-click (Win) or Control-click (Mac) the animation, and then click Copy Motion as ActionScript 3.0.
Type an instance name to use in the ActionScript code. Enter the instance name of the instance that you want to apply the ActionScript code to.
Select your second instance that you added to layer 2 (from Step 2), and type the instance name you entered into the Properties panel.
Create a new layer (for the ActionScript), and select the first frame of that layer.
Open the Actions panel and paste the code into the Script pane.
Before you test the animation, make sure layer 2 has the same number of frames as the animation layer.