Flash CS6 Motion Paths

Flash CS6 Motion Paths
In the last FlashR 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.

  1. 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.

  2. Let's make the path curve upward. Click on the center of the path and drag upward until the line curves.

  3. 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.

  4. 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.

  5. 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.

  6. From the Menu Bar, click Modify - Transform - Scale and Rotate.

  7. In the Scale and Rotate dialog box, set the Rotate value to 120 degrees and click OK.

  8. Move the Playhead slowly along the Timeline and you will see the square rotate along the path.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.