g
Printer Friendly Version

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




Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

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.



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


BellaOnline Editor