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
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Moving an Object with Flash Motion Tween Animation


Flash makes it easy to move an object across the Stage with the built-in Motion Tween animation feature. In this tutorial, we will make a Motion Tween animation for a simple oval shape. However, the same process can be applied to other objects that have been converted to symbols in Flash.

1. Open Flash and choose Create New, Flash Document from the Start Page. We will keep the default settings for the Document properties.

2. We will only need one layer in the Timeline for this simple demonstration. Click on the default Layer 1 in the Timeline and rename this layer to Graphics.

3. adobe Oval Tool. Click on Frame 1 in the Timeline. We will draw an oval shape on the Stage. Click on the Oval Tool in the Tools Panel. Now, click and drag on the Stage to draw an oval in the place where you want the animation to begin.

Before we can add any animation to our oval, we must first convert it to a Flash symbol. This tells Flash that this is not just an inanimate object and it will be doing something that Flash needs to pay attention to.

4. adobe Selection Tool. Double click on the oval with the Selection Tool. From the Menu bar, click Modify, Convert to Symbol. In the Covert to Symbol dialog box, name the symbol "Oval" and set the Type to Movie Clip. Finally, set the Registration to center by clicking on the center square in the little grid. You should notice that a unfilled blue box appeared around the oval.

5. Instance Name. Now that we have converted the oval to a symbol, we need to give it a name. This will help Flash to identify this symbol from other symbols that we might add to our movie. Go to the Property Inspector and find Instance Name in the box just under the Instance Behavior drop-down list. Change the Instance Name to Oval.

6. You have already drawn the oval at the beginning position in Frame 1 in the Timeline. Let's make our animation ten frames long. On the Timeline, click on Frame 10 on the Graphics layer. Now, right click with your mouse and choose Insert Keyframe from the pop-up menu. By adding this keyframe, we are telling Flash to use the postion of the oval on Frame 10 for the end of our animation. We have one more thing to do before we move the oval in Frame 10 to the end position.

7. Motion Tween. Now we are ready to convert these ten frames into a Motion Tween. Right click on Frame 5 (or anywhere between Frame 1 and 10) and choose Create Motion Tween from the pop-up menu. You will notice an arrow has appear in the Timeline indicating the Motion Tween has been created. But if we tested our movie now, the oval will not move. We must tell Flash the ending position of the Motion Tween in Frame 10.

8. End Position. Click on Frame 10 in the Graphics layer of the Timeline. Using the Selection Tool, click and drag the oval to a new position on the stage.

9. Test the Movie. Click on Frame 1 to move the Timeline back to the beginning. From the Menu bar, click Control, Test Movie. When your Flash movie displays, you should see the oval move across the Stage.




Add Moving+an+Object+with+Flash+Motion+Tween+Animation to Twitter Add Moving+an+Object+with+Flash+Motion+Tween+Animation to Facebook Add Moving+an+Object+with+Flash+Motion+Tween+Animation to MySpace Add Moving+an+Object+with+Flash+Motion+Tween+Animation to Del.icio.us Digg Moving+an+Object+with+Flash+Motion+Tween+Animation Add Moving+an+Object+with+Flash+Motion+Tween+Animation to Yahoo My Web Add Moving+an+Object+with+Flash+Motion+Tween+Animation to Google Bookmarks Add Moving+an+Object+with+Flash+Motion+Tween+Animation to Stumbleupon Add Moving+an+Object+with+Flash+Motion+Tween+Animation 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 © 2013 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
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor