g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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 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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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 features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor