15 August 2011
In Adobe Flash Professional CS5 when you position-tween an instance across the Stage, you see a motion path for that animation appear on the Stage. The motion path is a line that represents the spatial movement of the tweened instance; its dots (sometimes called "tween dots" or "frame dots") represent the target objects position along the path at frames on the timeline—either single frames, or groups of frames if you have a long tween span selected. The tween dots not only signify frames, but can help you see the instance's position as affected by any applied easing or 3D.
When you select a tween span or a motion path on the Stage, the context-sensitive Property inspector displays motion properties (see Figure 32). This is called the Motion Property inspector, and it's where you can find useful information about the selected motion tween, such as the location and size of its motion path and its instance name (if one has been added for the tween). You can also rotate the tweened instance across the entire tween span, set the tween's orientation along its motion path, or apply a simple ease from the Motion Property inspector.
You need to use the Motion Property inspector's panel menu to access an option that lets you view all motion paths on the stage simultaneously. When you have multiple motion paths on the Stage, select one of the tweens and select Always Show Motion Paths from the Motion Property inspector panel menu (see Figure 33). If you do not have this option selected, you see only the motion path when the playhead is within the tween span.
If you changed the position of a tweened instance in earlier sections of this learning guide, you have already created a motion path. It is very easy to do in Flash Professional.
To create a motion path for a tweened instance:
There are some limitations to the motion path you can paste. It cannot be a closed shape, such as a closed circle. To use a circle shape, you would need to erase a bit of the circle so it has a slight gap. You also cannot use fills, like the Brush tool, to create motion paths. You also need to make sure that your path does not have segments that overlap for more than one pixel (you might need to zoom in to see them), although intersecting lines in a path, such as a loop, are okay. To successfully paste the path, you may need to optimize it or delete and rejoin the offending sections.
If you have a very short motion tween and paste a long path onto that tween, you may see a dialog box that prompts you to optimize or sample the motion path. This affects how many keyframes are added to the x and y property graphs. Optimizing will reduce the number of keyframes in the graphs, although this may affect the appearance of the motion path on the Stage. Sampling the motion path will maintain the Stage appearance, although you will have a lot of keyframes in the Motion Editor. This also means your path will be difficult to further modify on the Stage.
You can edit a motion path after you create or add them to the instance. Keep reading to learn how.
Editing motion paths works a lot like editing paths using the Subselection tool, so it may be familiar if you're used to the Pen. You can also modify your paths by bending them like you do with the Selection tool in Flash.
To edit a motion path using the Selection tool:
To edit a motion path using Bézier controls:
Tip: You can use the Remove Anchor Point tool to delete control points from the path (except for the first one). The other drawing tools cannot be used with the path.
Another way to edit a motion path is to draw a new one using the Pencil or Pen, and then paste it onto your tween. There are times when this can be the best and easiest solution for changing the tween path.
To adjust the position motion paths on the Stage:
Tip: You can select multiple motion tweens and adjust their positions on the Stage. (You might want to choose the Show All Motion Paths option from the Motion Property inspector panel menu first.) Make sure that you select the tweened instance and the motion path for all of your instances before dragging them, or you might end up with some inadvertent motion paths.
You might need your tweened instance to look like it's consistently rotated on the motion path. If you select Orient to Path in the Motion Property inspector, the baseline of the selected tweened instance orients to the motion path. You can see how this works in the following example.
To orient animation along a motion path:
Figure 39. Orient to path changes the way the instance animates in this SWF file.
If you look in the Motion Editor, you see that the rotation property is used to properly orient your tweened instance on each frame. For more information on how the Motion Editor works, see Animation Learning Guide for Flash: Motion Editor.
If you use the rotation tool to rotate the object at any point along the path, while orient to path is on, the tween is recalculated to use that new orientation over the entire tween—meaning that Flash maintains that new rotation in relation to the path for the rest of the tween. You can do this at any playhead position along the tween span.
Note: The tween span in the timeline now shows property keyframes on all frames of the tween span, because rotation has been updated on each frame. This might not be as useful to you, so you may want to change the settings for the tween span. Right/Control-click the tween span and choose View Keyframes > Rotation to deselect the Rotation property. The property keyframes are no longer shown for rotation.
Roving keyframes let you create smooth animation across a motion path. When you paste a motion path onto a tween span, roving keyframes create the animation along the motion path so it moves at the same rate across the path that you paste. The animation is smooth and consistent across the path, largely because the keyframes are not bound to frame boundaries. The keyframes will fall on or between frame boundaries as necessary to achieve this. This kind of keyframe is called a roving keyframe.
Note: You will only find roving keyframes on x, y, and z (spatial) properties. For more information on spatial properties, see "Spatial properties and the Motion Editor."
Roving keyframes are not the same as property keyframes. They display in the Motion Editor differently (as circles instead of squares), can exist between frame boundaries (for example, between frame 4 and 5), and you cannot edit them like you can edit property keyframes. As such, they do not show up as diamond icons in a timeline span. Roving keyframes are controlled by Flash to make correct time calculations so that your motion tween animates smoothly. Therefore, consider a roving keyframe to be controlled by Flash unless you convert it to a non-roving keyframe so you can edit it.
Note: If you adjust the property keyframes around a roving keyframe, the roving keyframes will update so the animation remains smooth between those adjacent property keyframes.
Non-roving keyframes are used when you need the object to be at a specific position (x, y, or z) at a specific time on the Timeline. If you want a point on the path to exist in order to help define the actual shape of the path, but you don't care if or when the target object ever hits that point in time, then set the keyframe to roving. Setting all keyframes in a tween span to roving is useful when you want to make the motion along the path constant, and then use easing to control its speed along that path.
You can use the tween layer's context menu to switch a tween span between roving and non-roving keyframes. This can be useful when you want to change an animation to move at the same rate of speed along the motion path. For example, you may have an animation that moves quickly between the first and second property keyframe, but then moves slowly along the path between the second and third keyframes. To see an example of how to make this animation move along the path at the same speed, follow this exercise:
For information about roving keyframes in the Motion Editor, see "Spatial properties and the Motion Editor."
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.