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
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Animating An Object Along A Path With A Motion Guide In Flash CS3


In previous tutorials, we learned how to animate an object across the FlashR stage using Motion Tween animation. This type of animation moves the object along a line from point A to point B. However, there will be many times when you will NOT want your animated object to just move along a straight line but you will want it to move in a loop, swirl or just fly around. You can do this with ActionScript or with a special type of Motion Tween which uses a Motion Guide to control the direction of the animated object.

A Motion Guide is a line that you will draw on the Flash stage. This line can go in any direction that you wish. Once you have drawn the Motion Guide and created the Guide layer, you will set up your object so that Flash can move it along the path.

  1. Start with a new Flash CS3 project.

  2. Set up the Oval Tool with no Stroke Color and a Fill Color of your choice. Now draw an oval on the stage. We will be using this as our animated object.

  3. Click on the oval with the Selection Tool. From the Menu Bar, click Modify, Convert to Symbol. In the Convert to Symbol dialog box, name the oval "my_dot" and keep the Movie Clip option. In the Properties Inspector, you will see that the oval is now a Movie Clip. Let's give the Movie Clip an Instance Name of "ani_dot".

  4. Rename the default Layer 1 to "my_dot_ani".

  5. Right-click on the my_dot_ani layer in the Layers list and choose Add Motion Guide. You will see a new layer named "Guide: my_dot_ani" has been added above our original layer. It already has a keyframe in Frame 1. This new layer is the special Motion Guide layer.

  6. We will use the Pencil Tool to draw the Motion Guide. Set up the Pencil Tool with a black Stroke Color and no Fill Color. In the Tools Panel, set the Pencil Mode to Smooth.

  7. Draw your Motion Guide path on the stage with the Pencil Tool.

  8. With the Selection Tool, drag the dot to the beginning of the path. When you drag the dot you will see the Transformation Point which looks like a small white dot. This should snap to the beginning tip of the path line.

  9. We need to determine the last frame on the Timeline for our animation. Let's use Frame 60. Add a keyframe to Frame 60 on the my_dot_ani layer and on the Guide layer.

  10. While still on Frame 60 of the my_dot_ani layer, drag the dot to the end of the path. The Transformation Point should snap to the end of the path line.

  11. Right-click on any frame between 1 and 60 on the my_dot_ani layer. Choose Create Motion Tween from the pop-up menu.

  12. In the Properties Inspector, place a checkmark in the box next to Orient to Path, Sync and Snap.

  13. To test the animation, click Control, Test Movie.




Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 to Twitter Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 to Facebook Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 to MySpace Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 to Del.icio.us Digg Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 to Yahoo My Web Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 to Google Bookmarks Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 to Stumbleupon Add Animating+An+Object+Along+A+Path+With+A+Motion+Guide+In+Flash+CS3 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 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

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