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

Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Flash ActionScript 3 Tween Class

Tweening is a fundamental of FlashR animation. If you break down a Flash animation into its individual parts, you will have a starting point, an ending point and several in-between points. The number of in-between points that you will have depends on the type of animation you are creating.

Most Flash designers use one of two methods to create a Flash animation. The first method that you learn to use is Timeline tweening, where you use the Flash Timeline to control the animation. This is an easy way to create a simple tween. But this tutorial is about the second, and more flexible, ActionScript method. You will use this method when you need a little more control over the tween than you have with the Timeline. The nice thing is that most of the ActionScript code is built-in. Basically, you only need to tell Flash where to start, where to end and how long you want the Tween to last. Let's take a look at how to setup your Flash project to use ActionScript and the Tween class to create a Tween.

Let's look at an example that will move a simple rectangle from one point on the stage to another. Start a new ActionScript 3 project in Flash CS3.

  1. Our first step is to draw the rectangle on the stage. We can do this by using ActionScript 3 and the Drawing API. But, for this tutorial, we will just use the drawing tools to draw a rectangle anywhere on the stage. Let's rename Layer 1 in the Timeline to "Rectangle". Then click on the Rectangle tool and draw our rectangle.

  2. Next, we need to convert the rectangle to a Movie Clip. Select the rectangle and click Modify Convert to Symbol from the Menubar to open the dialog box. Let's give our Movie Clip the name "recMC" and set the Type to Movie Clip.

  3. Let's also set up the Linkage for this Movie Clip. Click on the Advanced button to expand the Covert to Symbol dialog box. Checkmark the Export for ActionScript box to tell Flash to create a new recMC class. Close the dialog box.

    Now, we can remove the rectangle that we have drawn on the stage because we have it in the Library. Select the rectangle and click Edit Cut. Since we are going to use ActionScript to create our Tween animation, our next step is to add a new layer to the Timeline and name it "Actions". On Frame 1 of the Actions layer, open the Actions panel (Window Actions) and copy/paste the code below.

    import fl.transitions.Tween;
    import fl.transitions.TweenEvent;
    import fl.transitions.easing.*;

    These three lines of code tell Flash that we want to use the built-in code for the Tween, TweenEvent and easing classes. These classes help use to move, resize and fade our target Movie Clip (redMC).

Next →

Join us in the Flash forum.

Add Flash+ActionScript+3+Tween+Class to Twitter Add Flash+ActionScript+3+Tween+Class to Facebook Add Flash+ActionScript+3+Tween+Class to MySpace Add Flash+ActionScript+3+Tween+Class to Del.icio.us Digg Flash+ActionScript+3+Tween+Class Add Flash+ActionScript+3+Tween+Class to Yahoo My Web Add Flash+ActionScript+3+Tween+Class to Google Bookmarks Add Flash+ActionScript+3+Tween+Class to Stumbleupon Add Flash+ActionScript+3+Tween+Class 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 © 2015 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
Motion Shooting Star Animation - The Text

Bookry Drag and Match Jigsaw Puzzle

Bookry Drag & Match Widget Settings

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor