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

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Flash Classic Motion Guide


Our FlashR sparkle effect will be a star moving along a guide path. If you haven't read the first part of this tutorial, use the Back link at the bottom of the page.

Begin back at the first frame and add a new layer and name it "starAni1". It's easy to draw a star on the stage with the PolyStar tool. In the Properties panel you will want to set the Style to Star, the Number of Sides to 5 or 6 (depending on how many points you want for your star) and the Point Size to .10. Click and drag to draw the star on the stage. Convert the star shape to a Symbol named "starAni".

When we created the masked scroll animation, it ended on Frame 100. Still on the same starAni1 layer, add a Keyframe on Frame 100. This will extend the starAni1 layer to end with the mask scroll animation. Go back to Frame 1 and move the movie clip to the top of the stage. Right-click on the starAni1 layer in the Timeline and choose Create Classic Tween. We should now see a horizontal line across the 100 frames to indicate that we have a Classic Tween.

Now we will draw the Guide path for our star with the Pen tool. Of course, the guide path will follow along the shape of the red scroll. But we can't see the scroll because it is masked. To turn off the mask, we need to unlock the mask layer. Go back to the starAni1 layer and right-click on the layer's name (not on the layer itself). Choose Add Classic Motion Guide from the menu. Flash will add a another layer, named Guide:starAni1, above the Star layer. You will also see that the starAni1 layer is indented under this new Guide layer, indicating it is controlled by the Guide layer. Starting on Frame 1 of the Guide layer, use the Pen tool to draw the path line along the curve of the red scroll. Note that we are only working on one scroll at a time. We will repeat these steps for the other red scroll and another guide layer.

Click on Frame 1 of the starAni1 layer. In the Properties panel, choose Snap. Drag the movie clip to the beginning of the guide path and it will snap into place. Next, go to the last frame of the animation (it should already have a Keyframe) and drag the star movie clip to the end of the path. Again, it should snap into place. Move the Timeline slider to watch the star move along the guide path.

Because our graphic has two scrolls, we need to repeat this process for another instance of the star movie clip. Add another layer to the Timeline (named starAni2) and copy/paste our star movie clip on to Frame 1. Create a Guide layer and draw the guide path with the Pen tool along the second scroll. Repeat the rest of the process for the second star. Now, we can test the movie and see that as the scroll image is revealed on the stage, the stars follow along the path. Both animations begin and end together.

The effect is enhanced if we use a small animated star movie clip instead of a static star. Let's build an animation for our star.

View Ecard at Pamela Gladding Ecards

← Back | Next →

Join us in the Flash forum.





Add Flash+Classic+Motion+Guide to Twitter Add Flash+Classic+Motion+Guide to Facebook Add Flash+Classic+Motion+Guide to MySpace Add Flash+Classic+Motion+Guide to Del.icio.us Digg Flash+Classic+Motion+Guide Add Flash+Classic+Motion+Guide to Yahoo My Web Add Flash+Classic+Motion+Guide to Google Bookmarks Add Flash+Classic+Motion+Guide to Stumbleupon Add Flash+Classic+Motion+Guide 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
Animation Behaviors in Motion Project

Importing Photoshop Images into Motion

Motion 3D Animation - The Graphics

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