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

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Motion Tweens in Flash CS6


In this tutorial, we will learn how to create a Motion Tween in FlashR CS6. You may remember that we created an animation in a previous tutorial that moved a circle across the Stage. In that lesson, we created a Classic Tween animation. The Classic Tween is the original type of animation for Flash.

Now we will take a look at a new type of tween animation. This time, we will create a Motion Tween animation that will move a square across the Stage. At first glance, these two animations may appear identical. But as we progress through future lessons, you will see why the Motion Tween is the favorite tween animation option. It's very flexible and can be used to create quite complex animations.

  1. Open Flash CS6 and choose ActionScript 3.0 from the Create New column of the Welcome screen.

    You will see that we have a blank stage and one layer in the Timeline.

  2. Double click on the layer name and rename Layer 1 to "Square".

  3. Set the Stroke color to null.

  4. Click on the Fill color box and choose any color from the Color Picker.

  5. With the Rectangle tool, draw a square on the stage.

    At this point, the square is a basic shape. To confirm this, let's take at look at the information in the Properties panel.

  6. With the Selection tool, select the square on the Stage.

    In the Properties panel, we see that this object is a Shape. We can also see the position, size and color of the object.

    The first step to creating a Motion Tween is to convert the Shape to a Symbol. We will discuss Flash Symbols in depth in a future tutorial.

  7. Select the square on the Stage and from the Menu Bar, click Modify - Convert to Symbol.

  8. In the Convert to Symbol dialog box, name the symbol "Square" and set the Type to Movie Clip. Next, set the Registration Point to the center by clicking the small center box in the group of small boxes. Click OK.

    You will see that a thin blue line appears around the square, indicating that the object is now a Symbol.

  9. Right-click on Frame 50 of the Timeline and choose Insert Frame to extend the Timeline 50 frames.

  10. Right-click on any frame on the Timeline and choose Create Motion Tween.

    You will see that Flash has turned all the frames a different color. These are called the Tween Span of the Motion Tween.

    Move the Playhead along the Timeline back to Frame 1. As in the last tutorial, the object doesn't move. This is because we haven't yet added a second Keyframe to indicate the end position for the animation.

  11. Right-click on Frame 50 and choose Insert Keyframe - All from the menu.

  12. While still on Frame 50, click on the square and drag it to the other side of the stage to tell Flash that this will be the end position for the Motion Tween.

Now, when you move the Playhead, the square moves incrementally across the Stage.

But with Motion Tweens we can easily modify the animation so that the square moves along a curved line instead of on a straight line.



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

|


Add Motion+Tweens+in+Flash+CS6 to Twitter Add Motion+Tweens+in+Flash+CS6 to Facebook Add Motion+Tweens+in+Flash+CS6 to MySpace Add Motion+Tweens+in+Flash+CS6 to Del.icio.us Digg Motion+Tweens+in+Flash+CS6 Add Motion+Tweens+in+Flash+CS6 to Yahoo My Web Add Motion+Tweens+in+Flash+CS6 to Google Bookmarks Add Motion+Tweens+in+Flash+CS6 to Stumbleupon Add Motion+Tweens+in+Flash+CS6 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
Duplicate Background Layers in Motion 5

Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

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