Flash CS6 Motion Paths - Flash and Animation

In the last Flash^R CS6 tutorial, we created a simple Motion Tween animation that moved an object along a straight line. Now, we will modify the animation to move the object along a curved line.

We already discussed the small change to the tween span for the Motion Tween but we didn't take a look at the Stage. As you can see, we have a dotted green straight line that spans from the beginning position on the left to the end position on the right of the animation. This is called the Motion Path of the animation.

When working with Motion Tweens, it easy to modify this Motion Path. Let's give it a try.

With the Selection tool, place your cursor next to the green line and at the center of the path.

You will see the cursor change to an arrow with a small curved line.
Let's make the path curve upward. Click on the center of the path and drag upward until the line curves.
Move the Playhead across the Timeline and you will see that the square moves along the curved path.

Now is a good time to test our animation.
From the Menu Bar, click Control - Test Movie - In Flash Professional.

This will open our animation in the Flash Player. You should see that the square moves along the curved path. The animation will loop (playing continuously) because we have not told it to stop at the end. Close the Flash Player and return to the workspace.

At this point the square moves along the curved path but the square does not rotate. It stays level with the bottom of the stage throughout the animation. We can add a little interest to the animation by rotating the square as it moves along the path.

We want the square to be level with the bottom of the Stage when the animation starts and rotate incrementally along the path. So we need to change the end position of the animation.
Select Frame 50 and then choose the Free Transform tool from the Tools panel.

You will see a black line with eight control points around the square.
From the Menu Bar, click Modify - Transform - Scale and Rotate.
In the Scale and Rotate dialog box, set the Rotate value to 120 degrees and click OK.
Move the Playhead slowly along the Timeline and you will see the square rotate along the path.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|

	Diane Cipollo BellaOnline's Flash and Animation Editor