15 August 2011
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).
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:
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:
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:
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.
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:
To copy and paste a tweened instance to a new location without copying the motion:
Note: Selecting a frame or tween span causes the target to be selected on the Stage.
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:
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.
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:
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:
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:
To reverse the motion path:
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".
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.