This chapter is from the book
This chapter is from the book
This chapter is from the book
Editing property curves
The motion tween of the three blocks positions them on the Stage for the viewer to see, but the movement is sluggish and not very interesting. To create a more dynamic animation that gives some life and snappiness to the blocks, you’ll modify the curve for their Y-properties in the Motion Editor.
Double-click the motion tween in the US layer on the timeline, or right-click and choose Refine Motion Tween.
The motion tween expands to reveal the Motion Editor panel. The Motion Editor contains two straight red lines. One represents the change in the X-position, and the other represents the change in the Y-position. For both properties, the horizontal axis represents time; the vertical lines correspond to the selected property values (in this case, they are the X and Y position in pixels). Both the X- and Y-properties are grouped under the Location property group.
Click the disclosure triangle next to Location to reveal the properties it contains, then click the X-property to select it.
The horizontal red line becomes bold, and the downward diagonal line fades. The horizontal red line represents the value of the block’s X-position, which remains unchanged over the span of the motion tween. Note that the scale on the vertical axis of the graph is limited to a range from 238 to 240.
Now, select the Y-property.
The downward diagonal line becomes bold, and the horizontal line fades. The diagonal line represents the value of the block’s Y-position, which decreases over the course of the tween (the block moves upward on the Stage). Because of the change in Y-property values, the vertical scale now expands to encompass a wider range.
)
)
)
)
Understanding the Motion Editor values
The vertical axis of the Motion Editor represents the values of the selected property measured in pixels. For example, when you select the Y-property, Animate shows the value (in pixels) of the Y-position of the motion tween.
The initial value of the curve appears to be greater than 560, and the final value of the curve appears to be about 200. However, those values don’t seem to match the initial Y values when you look at the position of the US movie clip in the Properties panel. Why the discrepancy?
The Motion Editor measures from the transformation point of your object. Since the transformation point of your object is in the center, the Motion Editor vertical values show the Y-property values as the initial position plus half of the movie clip’s height.
Adding anchor points
You want to create a nonlinear property curve for the first block that moves on the Stage—that is, you want the block to move a different distance during each interval of time. An object on a linear property curve moves the same distance during each interval of time, which is represented by a straight line in the Motion Editor. A nonlinear path is curved.
To change the shape of the property curve, you add anchor points. At each anchor point you can change the curvature or direction of the curve.
Select Add Anchor Point On Graph at the bottom of the Motion Editor.
Make sure the Y-property curve is still selected, and move your mouse pointer over the property curve.
Your cursor changes to the Pen tool icon with a plus sign, indicating that you can add an anchor point to the curve.
Use your mouse to drag the curve downward at frame 21 and release the mouse button when the anchor point is at about the 200-pixel mark (the graph will scroll to follow your pointer).
This adds a new anchor point to the curve, and a new keyframe is added at frame 21.
The added anchor point allows you to change the motion of your animation. The new curve overshoots the final Y value of the motion tween just before the final keyframe. The resulting motion makes the movie clip move rapidly up, then fall back to its final Y-position value. You can see the motion by pressing the Return/Enter key.
Select Add Anchor Point On Graph again.
Add a new anchor point at frame 5 and drag it to the right to about frame 8.
Adding another anchor point to the graph also adds a new keyframe to the motion tween. The new curve looks like a broad, lazy “S” shape, with a smooth flattened slope at the beginning, a steep section in the middle, and the bump at the end.
Test your new motion by pressing Return/Enter.
Your playhead moves through the motion tween. Your new curve makes your movie clip slowly accelerate into its motion, rapidly shoot past its destination, and then fall back to its ending value.
)
)
)
)
Changing the curvature
Each new anchor point comes with direction handles on either side that allow you to change the curvature at that point. The anchor points and direction handles work just like the ones created by the Pen tool when drawing paths.
Click the anchor point on the Y-property curve at the keyframe at frame 21.
The direction handles at the selected anchor point appear.
Move the anchor point downward until the Y value reaches about 150. Drag the left handle downward so that the direction handles are horizontal.
The property curve flattens out at frame 21, which makes the movie clip remain at that Y-position for just a split second before moving again. That slight hang-time gives the movie clip a more realistic physics-based motion, just as a ball that you throw up in the air stays still for a moment before falling back to the ground.
Test your new motion by pressing Return/Enter.
Your playhead moves through the motion tween. Your new curve makes the motion of your movie clip more realistic.
)
Moving anchor points
You can move any anchor point, including the ones at the first and last keyframes, to new property values along the vertical axis. You can also move any of the anchor points (except the first one) to new times along the motion tween. In effect, when you move anchor points to new times, you move the keyframes within the tween span.
Select the anchor point at frame 8.
The handle bars at the selected anchor point appear.
Drag the anchor point slightly to the right.
The keyframe at frame 8 has now moved a few frames over, to frame 10. The property curve flattens out even more, creating a more extended ease-in effect.
Test your new motion by pressing Return/Enter.
The final motion is more interesting than a linear one, with your motion tween rising up and falling back down as If somebody had tossed it up in the air.
)
Deleting anchor points
If you’ve added too many anchor points, you can always remove them (except for the first and last anchor points). Removing an anchor point has the same effect as removing a keyframe of the motion tween.
Hold down the Command/Ctrl key.
Your cursor turns into the Pen icon with a minus sign when you hover over any anchor point. Click any anchor point (except the first or last).
Animate removes the anchor point from the property curve. Do not remove any anchor points from your project at this point in the lesson. If you do so inadvertently, press Command+Z (macOS)/Ctrl+Z (Windows) to undo the operation.
Deleting property curves
If you want to delete a curve, click Remove Tween For Selected Property (the trash can icon) at the bottom of the Motion Editor to delete a tween for a selected property curve.
)
At the moment, your animation has a tween for only one property—the Y-property—so deleting the curve would remove the property changes in your tween. Use the Remove Tween option if you want to delete the animation of a particular property when you have multiple properties changing.