g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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.

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


Add Flash+CS6+Motion+Paths to Twitter Add Flash+CS6+Motion+Paths to Facebook Add Flash+CS6+Motion+Paths to MySpace Add Flash+CS6+Motion+Paths to Digg Flash+CS6+Motion+Paths Add Flash+CS6+Motion+Paths to Yahoo My Web Add Flash+CS6+Motion+Paths to Google Bookmarks Add Flash+CS6+Motion+Paths to Stumbleupon Add Flash+CS6+Motion+Paths to Reddit


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

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor