Animation Learning Guide for Flash: Motion tween manipulations

There are numerous ways you can select frames of an animation and move them around on a timeline. There are also a lot of different ways you can modify your animation so it plays exactly the way you want it to when you publish your files. The following sections demonstrate many of the different ways you can manipulate your motion tweens in Adobe Flash Professional CS5.

Tween layers can contain tween spans, static frames, and blank keyframes. The static and blank frames behave like others in that you can draw on the frame, paste graphics there, import a bitmap to the selected frame, and so on. These spans and frames can be moved within the same layer, or to most other layers.

A tween layer cannot contain IK spans or classic tweens. Although tween spans cannot contain ActionScript (either on the frame or attached to a tweened object), a frame outside of a tween span on a tween layer can contain ActionScript. However, it is a best practice to put all of your code on its own layer called actions (typically the topmost layer on the main Timeline).

Tween layers have a special context menu that contains many ways to manipulate tweens. The following list provides an overview of the context menu, and the following sections describe how to use these commands as necessary. To access this menu, right/Control–click a frame in a tween layer (see Figure 22).

• Remove tween: Removes the motion tween from the selected tween span.
• 3D tween: Adds or removes the 3D properties of a tween (you can see them in the Motion Editor). 3D is automatically activated if you use a 3D tool with the instance before or after you add the motion tween. If this option is dimmed, check that you are targeting Flash Player 10 and ActionScript 3 in Publish Settings and that your instance is a movie clip. For more information on creating 3D tweens, see Working with 3D art on Adobe TV.
• Convert to Frame by Frame Animation: Just like the name says, this option converts the currently selected span into a frame-by-frame animation. For information on what frame-by-frame animation is, see "Creating frame-by-frame animations."
• Save as Motion Preset: Saves the currently selected span as a Motion Preset. To learn about motion presets, read Animation Learning Guide for Flash: Motion presets.
• Insert Frame: Inserts the number of selected frames into the tween span (if you select five frames of the span, five frames are added to the span at the first selected frame).
• Remove Frames: Removes the selected frames from the tween span or static frames. If an entire span is selected, it removes the entire span.
• Insert Keyframe: Lets you choose what type of property keyframe to insert from a submenu. For example, you can insert a rotation property keyframe using this menu. For information on property keyframes, read "Keyframes and property keyframes."
• Insert Blank Keyframe: You can use this option to insert a blank keyframe on an empty frame. This option is dimmed if your selection is within a tween span.
• Clear Keyframe: If used within a tween span, you can select from a submenu to remove a type of property keyframe from the the currently selected frame(s). The option will not remove the keyframe at frame 1, which is needed. Outside of a tween span, you use this option to remove the selected keyframe(s).
• View Keyframes: Use this option to choose which kinds of property keyframes you would like to see on the selected tween span. The default setting is All, but you can choose to one or more types of property keyframes.
• Cut/Copy/Paste Frames: Use this option to cut or copy some or all frames from a tween span, and paste them to a new location. For an overview on copying and pasting animation, read "Copying and pasting animation and properties."
• Clear Frames: You can use Clear Frames to turn the selected frames into blank frames. If your selection is in the middle of a tween span, it will create two individual tween spans around the blank frames.
• Select All Frames: Use this option to select all frames on a timeline.
• Copy/Paste Motion: Use these options to copy all of the properties of the selected motion, and paste it to another instance. For an overview on copying and pasting animation, read "Copying and pasting animation and properties."
• Copy Motion as ActionScript 3: Use this option to copy all of the properties of the selected motion as ActionScript, and then assign the code to an instance in your document. For an overview on copying and pasting animation, read Copy ActionScript 3 from timeline animation.
• Copy/Paste Properties: Use these options to copy the property keyframes from a individual frame and paste property keyframes at a different frame. You need to have one frame selected to use this option. For an overview on copying and pasting animation, read "Copying and pasting animation and properties."
• Paste Properties Special: Use this option after you have copied the properties of a selected frame and want to paste only some of the properties onto a different frame. For an overview on copying and pasting animation, read "Copying and pasting animation and properties."
• Split Motion: Use Split Motion to turn a single tween span into two tween spans. This option is available when you select a single frame. To learn about Split and Join motion, read "Splitting and joining tween spans."
• Join Motions: Use Join Motions to turn contiguous tween spans into a single tween span. This option is available when you select two or more contiguous tween spans. To learn about Split and Join motion, read "Splitting and joining tween spans."
• Reverse Keyframes: Use this option to reverse the keyframes for all of the properties of a selected tween span. To learn about reversing animation, read "Reversing motion and keyframes."
• Motion Path > Switch keyframes to roving/non-roving: Use this option to switch the keyframes of a selected span between roving and non-roving. For information on roving keyframes, see "Using roving keyframes."
• Motion Path > Reverse Path: The Reverse Path option reverses the keyframes for the motion path, which affects how the instance tweens along it. For more information on reversing animation, read "Reversing motion and keyframes."

Note: If an option in the tween context menu is not active (dimmed) in this menu, it may mean that you need a different kind of selection—such as a single frame selected, two adjoining spans, and so on. If you're not sure what you need to do, continue reading in the next section.

Tween spans use a special way of selection called span-based selection. This means that when you click a span of frames, all the frames of that span are selected. You can choose to use this way of selecting frames on other parts of a timeline as well if you choose span-based selection in Flash Preferences, or you can use frame-based selection (where each frame is selected individually when you click them). It doesn't matter which mode you choose to use in Flash Preferences; tween spans are still selected the same way.

To select a span, you click the span in the Timeline. You can select multiple tween spans if you hold Shift and then click the tween spans (see Figure 23). The tween spans do not need to be contiguous, nor on the same layer.

To select a frame within a tween span, hold the Control or Command key, and then click the frame you wish to select (see Figure 24). To select multiple contiguous frames within a tween span, hold the Control or Command key then click and drag across the frames. You can also use this technique to select frames on multiple layers (hold the Control or Command key and drag vertically across the frames on multiple layers).

Note: For a list of key modifiers that you can use in a Tween layer, see "Using key modifiers with tween spans."

You can select spans and static, empty, or blank frames as well when you're working with tween spans in frame-based selection mode. You can click and hold an empty, blank, or static frame on a timeline, and then drag across the frames you want to select (all of the frames you drag over, including tween frames within a span, are included in the selection). You can also select a single frame within a tween span and then drag across the frames you wish to select (see Figure 25).

Tip: To select all frames on a timeline, right-click any frame and choose Select All Frames. This can be useful when you need to paste all of your current work into a new document, or inside of a movie clip to nest an animation.

After you have made a selection of frames, you typically want to copy or move the frames. For more information on these techniques, see the following sections:

• "Moving tween spans, keyframes, and frames"
• "Copying and pasting animation and properties"

Tween spans and even frames or keyframes are easy to move around timelines. In fact, it's so easy to move a tween around the timeline that all you have to do is select it and drag it somewhere new.

Tip: If you select multiple tween spans that are not contiguous or the same length and try to move them, the last selected tween span becomes selected and will move. In this case, you should cut and paste the frames to move multiple non-contiguous tween spans to a new location instead.

Note: Some things cannot share a layer; for example, IK spans and tween spans, and classic tweens and motion tweens. If a layer does not support tweens, it will alert you and not allow the tween span to be dropped at that location.

You can move a property keyframe within a tween span; simply hold Control/Command and select the property keyframe(s) in the tween span, then drag it to a new position on the same span. All of the properties presently at that frame move to the new location on the span. You cannot drag property keyframes to a different span; if you do so, the frame will copy and paste to the new location.

Tip: If all of your tween spans are on adjoining layers, and you have keyframes that you need to move at that time, you can Control/Command-select them across multiple layers and then drag them to the new location. If the layers are not contiguous (say, you select static frames, too), the frames copy and paste instead of drag. You can also move multiple frames to a new location, which can include spans or sections of a tween span. Use the selection methods noted above to select one or more frames. You can then drag the frames to a new location on the timeline. The frames will move and now empty areas fill with blank frames.

To move selected frames to a new timeline, such as to insert frames inside of a movie clip or into a new FLA file, read "Copying and pasting animation and properties." You can also move frames around using copy, cut, and paste commands and key modifiers, covered there as well.

It's also easy to move the position of a motion tween on the Stage.

It's easy to adjust the length of a tween span, which is useful when you need to slow down or speed up a given tween. A shorter tween span means the same animation occurs over the same number of frames, which means it will appear faster when you publish the SWF file. Therefore, making a tween span longer means the animation would then appear to play slower.

Tip: If you want all of your animation in a SWF file to play slower or faster, you may want to adjust the FPS setting (in Document Properties) instead, assuming your frame rate isn't dictated by your final media type.

To change the length of a tween span, you drag the beginning or the end of the span. When you mouse over the end of the tween span, a double-headed arrow appears (see Figure 25), which you can drag to the left or right.

If you drag the end of a tween span to the right, and there are existing static or tween spans where you drag, the frames you drag over are overwritten.

Other ways to adjust the span's length include:

• Select frames within the tween span, right-click, and choose Insert Frames. Flash adds the number of frames you selected to the span wherever you made the selection. Property keyframes that come after your selection are pushed out to the right.
• If two tween spans are adjacent, you can adjust the length by dragging the divider between the two spans.
• If two tween spans are adjacent, you can hold down Alt/Option while dragging the divider between the two spans to insert blank frames between them and make the second tween span shorter.

There are more ways to adjust the length of a tween span. If you want to make the span longer, without stretching the animation, you can do one of the following:

• Select an empty frame later on the timeline, and press F5.
• Hold the Shift key and drag the end of the tween span to the right. The position of property keyframes does not change and the tween span length is extended.
• Hold the Shift key and drag the end of the tween span to the left. Any property keyframes you drag over are removed.

Tip: You cannot drag the end of multiple tween spans at the same time. If you want to extend the length of all tween spans at the same time, find the frame where you want them to end, click and drag across all layers at that frame, and press F5. If all of your tween spans are on adjoining layers, and you have keyframes you need to move at that time, you can Control/Command-select them across multiple layers and then drag them to the new location. For more information on dragging keyframes, see "Moving tween spans, keyframes, and frames."

In several of the previous sections, you may have noticed references to key modifiers, such as Shift-click, for certain functionality. The following list contains the key modifiers that you can use with tween spans.

• Select a single frame in a tween span: Control-click (Windows) or Command-click (Mac) a frame in the tween span.
• Select multiple frames in a tween span: Control-drag (Windows) or Command-drag (Mac) frames in the tween span.
• Extend the length of a tween span without stretching the animation: Shift-drag the end of the tween span to the right.
• Make the tween span shorter without stretching the animation: Shift-drag the end of the tween span to the left (removes keyframes you drag over).
• Duplicate a span: Alt-drag (Windows) or Option-drag (Mac) the span to a new location on a timeline.
• Duplicate tween frames: Select frame(s) within a span (Control/Command-click or drag) and then Alt-drag (Windows) or Option-drag (Mac) the frames to a new location on a timeline.
• Insert empty frames between two adjacent tween spans: Hold Alt (Windows) or Option (Mac) while dragging the breakline between the spans.

The Motion Editor also has a bunch of key modifiers you can use to perform special functionality. Find a list of those modifiers in Additional motion editor control using key modifiers.

If you need to duplicate or move frames around timelines in your FLA file, copy and paste is sometimes the best way of doing so. You can copy and paste parts of your file in different ways; for instance, you might want to copy and paste just the tweened instance but not the frames, or you might want to copy and paste both the tween frames and their target in a new location. You can also copy and paste the properties from a frame of your tween and paste them on another frame.

To copy and paste or duplicate frames to a new location:

1. After you select the frames you want to copy, right-click the frames and choose Copy Frames.
2. Select the frame where you want to insert the copied frames, which could be on a new timeline (inside a movie clip, new document or scene, and so on).
3. Right/Control-click the frame and choose Paste Frames. The frames paste on new layers below the selected frame, and retain the instances and tween properties of the original frames that you copied.
4. Select a tween span on the Timeline.
5. Hold the Alt/Option key and drag the tween span to a new location.

To copy and paste a tweened instance to a new location without copying the motion:

1. Create or open a new document that has a tween span in it.
2. Select the instance on the Stage, or a frame within the tween span.

   Note: Selecting a frame or tween span causes the target to be selected on the Stage.

3. Choose Edit > Copy.
4. Select the frame immediately after the tween span, right/Control-click the frame and choose Insert Blank Keyframe.
5. Choose Edit > Paste in Center or Edit > Paste in Place.

The instance pastes on the same layer as the tween span, and you can even place the instance in exactly the same location if you use the Paste in Place command. You can then opt to tween this instance. Also, the alpha or color effects applied to the instance are retained so it will have the same appearance and tweenable properties as the instance you copied. This is useful for copying and pasting properties from a tween, or joining motion, when the instance properties need to match.

To copy and paste motion to a selected instance:

1. Use the previous file you created, or open a document that has a tween span and a static frame(s).
2. Right-click the tween span and choose Copy Motion.
3. Right-click a keyframe on the timeline that contains an instance you want to apply motion to, and choose Paste Motion.
4. Scrub the timeline to view the resulting animation.

The motion is now applied to both instances in your document.

You can also copy a property keyframe and paste it to a new location on a tween span. The property keyframes that you select must be on the same span; however, you can paste those properties to a different tween span.

1. Use the previous file you created, or open a document that has a tween span.
2. If your tween span doesn't have a property keyframe, create one by moving the playhead to a frame on the span and then move or transform the object.
3. Control/Command-click the property keyframe, and choose Copy Properties from the context menu (see Figure 26).

4. Move the playhead to a new location on the tween span, Control/Command-click the frame and then select Paste Properties from the context menu.
5. Scrub the timeline to view the resulting animation.

You can also save all of the properties of a tween as a Motion Preset. To learn how, read Animation Learning Guide for Flash: Motion presets. You might want to copy a tween span as ActionScript 3 code, and you can learn about that in "Copy ActionScript 3 from timeline animation."

You can select a tween span and split it into multiple spans, or select spans and join them into a single tween. You may want to split a span for a couple different reasons. Eases are applied across an entire span, so if your last keyframe is before the end of a tween, or you need to ease between a specific section of the animation, you may want to split your spans instead of creating a custom ease (for information on easing, read "Adding preset and custom eases to motion tweens").

You may have an animation where you need to swap a symbol within what looks like a single tween. In this case, you might animate the symbol how you want it to tween, and then split the tween span where you want to swap the symbol out.

Note: Splitting a tween span does not split eases applied to the properties of that tween span. The eases in the span are then applied to the properties of each split tween span. In order to "split" and ease, you would need to create each portion of the original ease manually using custom eases.

The following example shows you how to split and join tween spans:

1. Create a motion tween in a new document, or open a document that has one already.
2. Use Control/Command-click to select a single frame of the tween span.
3. Right/Control-click the frame and choose Split Motion.
4. Scrub the timeline to view the resulting animation. It should look the same, except there are now two tween spans instead of one. The selected frame becomes the first frame of the new tween span.
5. Hold Shift and click each tween span so they're both selected.
6. Right/Control-click a frame and choose Join Motions.

The two tween spans then combine into a single span.

Note: The tween spans must have the same filters and color effects, if applicable. After being joined, the target object of the first tween span is used for the new tween span.

Because a tween span acts like an object, you can no longer break tweens by moving keyframes around, deleting them, and so on. Imagine you're using classic tweens or Flash CS3, and it's around 2 AM because you're trying to meet a deadline. You're moving keyframes around the timeline and maybe removing ones unintentionally with bleary monitor-ravaged eyes. It's pretty easy to ruin your tweens with the old way of motion tweening in Flash.

You've already discovered how easy it is to move animation around the timeline, but in this section you will see how you can delete a tweened instance and keep the tween span intact. You also learn how to swap the target object of a tween.

To understand what a tween's target object is, see "Working with the target object of a tween."

To change a tween's target object:

1. Create a motion tween in a new document, or open a document that has one already.
2. Create a second movie clip instance on the Stage, select it, and then choose Edit > Copy.
3. Select the tween span and then select Edit > Paste.
4. Click OK in the dialog box that appears. The tweened instance is replaced with the one you just drew on the Stage.
5. Select the instance and delete it. Notice that the keyframe at the beginning of the span changes to look like a blank keyframe (see Figure 27). This means that the tween does not have a target object.

6. Drag an instance from the Library to the tween span. A dialog box prompts you, so confirm that you do indeed want to swap the target object with the one you dragged to the Stage; and then the tween updates again.
7. Now right/Control-click either the tweened instance on the Stage and choose Swap Symbol.
8. Select another symbol in the dialog that opens and click OK to change the target object of the tween span. The tween span updates on the Stage (again).

You can use commands in the tween span context menu to reverse the motion path, or reverse the keyframes of your animation. Changing the order of the property keyframes of a tween means that the instance will animate differently, either on the motion path or what it looks like (or both). When you reverse an animation, the keyframes are flipped so the keyframe at the end of the frame is then at the first frame of the span and so on.

Note: The following examples show how graphs in the Motion Editor update. The Motion Editor is covered in exhaustive detail starting with the section Animation Learning Guide for Flash: Motion Editor.

To reverse all keyframes of a tween span:

1. Open the sample file called reverse-motion.fla. Select Control > Test Movie to view the animation.
2. Right/Control-click the tween span on the Timeline and choose Reverse Keyframes. The animation updates on the Stage and all of the keyframes are reversed (see the SWFs and screenshots in Figures 28 and 29).
3. Select Control > Test Movie to compare the animation.

To reverse the motion path:

1. Open the sample file called reverse-path.fla. Scrub the timeline or select Control > Test Movie to view the animation.
2. Right/Control-click the tween span on the layer called reverse me and choose Motion Path > Reverse Path. The animation updates on the Stage, and all of the keyframes are reversed in the X and Y property graphs (see the SWFs and screenshots in Figures 30 and 31).
3. Scrub the animation again to see the change.

The instance is tweened from the opposite end of the motion path after you reverse it. If you want to actually flip the path itself, you can transform the actual motion path however you like. Select the path on the Stage, and then choose Modify > Transform > Flip Horizontal. Also, remember that you can use the Free Transform Tool to change the path using skew, scale, or rotate. To learn about motion paths, read "Editing motion paths".

Read other sections of the Animation Learning Guide to learn more about working with motion tweens:

• Exploring motion tweens
• Using motion paths in animations
• Using the Motion Editor
• Animating with preset and custom eases
• Animating with motion presets