logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Motion Workspace - Checkbox, Dials and More

Motion Workspace - Menu, Icons and Sliders

The Motion Toolbar Tools

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor