Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex

Adobe Flex: Article

Flash Animation Learning Guide (Part II)

Creating Tweened Animations

Editing a Timeline Effect
You edit Timeline effects using the Effect Settings dialog box:

1  Select the object associated with the effect on the Stage.

2  To open the Effect Settings dialog box, do one of the following:

  • In the Property inspector, click Edit.
  • Right-click (Windows) or Control-click (Macintosh) the object and select Timeline Effects > Edit Effect from the context menu.
3  In the Effect Settings dialog box, edit the settings you want to edit, and click OK to apply your settings.

Deleting a Timeline Effect
You use the context menu to delete Timeline effects. Right-click (Windows) or Control-click (Macintosh) the object on the Stage that has the Timeline effect you want to remove, and select Timeline Effects > Remove Effect from the context menu.

About Scripting Animation
You can use ActionScript 2.0 to add animation to your Flash applications instead of using motion or shape tweens on a timeline. The following sections show you how to use code to animate instances, such as changing the transparency and appearance of the instance, and moving the instance around the Stage.

For information on using the Tween and TransitionManager classes to further automate code-based animations, see the following section, Using the Tween and TransitionManager Classes. These classes help you add advanced easing equations and transition animations to movie clip instances in your application. Many of these effects are difficult to recreate using ActionScript without these prebuilt classes because the code involves writing complex mathematical equations to achieve the effect.

The animation uses code to tween the bee horizontally across the Stage. Notice the easing that has been applied to the motion as well. This animation uses very few lines of code to achieve this effect.

Note: Issues regarding frame rate discussed in the earlier section, About Frame Rate and Animation, also apply to scripted animation.

Fading a Movie Clip
When you work with movie clips on the Stage, you might want to fade the movie clip in or out instead of toggling its _visible property. The following examples, taken from the Flash documentation, show you a variety of simple ways to use ActionScript to create animation.

The following procedure demonstrates how to use an onEnterFrame event handler to animate a movie clip. To fade a movie clip by using code:

  1. Create a new Flash document called fade1.fla.
  2. Draw some graphics on the Stage using the drawing tools, or import an image to the Stage (File > Import > Import to Stage).
  3. Select the content on the Stage and select Modify > Convert to Symbol.
  4. Select the Movie Clip option and click OK to create the symbol.
  5. Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.
  6. Select Frame 1 of the Timeline and add the following code to the Actions panel:

    img1_mc.onEnterFrame = function() {
    img1_mc._alpha -= 5;
    if (img1_mc._alpha <= 0) {
    mg1_mc._visible = false;
    delete img1_mc.onEnterFrame;
    }
    };
    This code uses an onEnterFrame event handler, which is invoked repeatedly at the frame rate of the SWF file. The number of times per second that the event handler is called depends on the frame rate at which the Flash document is set. If the frame rate is 12 fps, the onEnterFrame event handler is invoked 12 times per second. Likewise, if the Flash document's frame rate is 30 fps, the event handler is invoked 30 times per second.
  7. Select Control > Test Movie to test the document. The movie clip you added to the Stage slowly fades out.
You can modify the _alpha property by using the setInterval() function instead of an onEnterFrame event handler, as the next procedure shows. To fade an object by using the setInterval() function:
  1. Create a new Flash document called fade2.fla.
  2. Draw some graphics on the Stage, or import an image to the Stage (File > Import > Import to Stage).
  3. Select the content on the Stage and select Modify > Convert to Symbol.
  4. Select the Movie Clip option and click OK to create the symbol.
  5. Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.
  6. Select Frame 1 of the Timeline and add the following code to the Actions panel:

    var alpha_interval:Number = setInterval(fadeImage, 50, img1_mc);
    function fadeImage(target_mc:MovieClip):Void {
    target_mc._alpha -= 5;
    if (target_mc._alpha <= 0) {
    target_mc._visible = false;
    clearInterval(alpha_interval);
    }
    }
    The setInterval() function behaves slightly differently than the onEnterFrame event handler because the setInterval() function tells Flash precisely how frequently the code should call a particular function. In this code example, the user-defined fadeImage() function is called every 50 milliseconds (20 times per second). The fadeImage() function decrements the value of the current movie clip's _alpha property. When the _alpha value is equal to or less than 0, the interval is cleared and the fadeImage() function stops executing.
  7. Select Control > Test Movie to test the document. The movie clip you added to the Stage slowly fades out.
To move an instance on the Stage by using code:
  1. Create a new Flash document called moveClip.fla.
  2. Change the frame rate of the document to 24 fps in the Property inspector. The animation is much smoother if you use a higher frame rate such as 24 fps.
  3. Select Frame 1 of the Timeline and add the following code to the Actions panel:

    // Create a movie clip instance.
    this.createEmptyMovieClip("img1_mc", 10);
    var mcl_obj:Object = new Object();
    mcl_obj.onLoadInit = function (target_mc:MovieClip):Void {
    target_mc._x = Stage.width;
    target_mc.onEnterFrame = function() {
    target_mc._x -= 3; // decrease current _x position by 3 pixels
    if (target_mc._x <= 0) {
    target_mc._x = 0;
    delete target_mc.onEnterFrame;
    }
    };
    };
    var img_mcl:MovieClipLoader = new MovieClipLoader();
    img_mcl.addListener(mcl_obj);
    // Load an image into the movie clip
    img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
    img1_mc);
    This code example loads an external image from a remote web server and, when the image is fully loaded, animates it horizontally across the Stage. Instead of using an onEnterFrame event handler, you could use the setInterval() function to animate the image.
  4. Select Control > Test Movie to test the document. The image loads and then animates from the right side of the Stage to the upper-left corner of the Stage.

More Stories By Jen deHaan

Jen deHaan, a rather awkward and uncool Canadian, likes robots and pirates (as well as robotic pirates). Jen works on documentation at Macromedia in San Francisco. She also maintains a blog at weblogs.macromedia.com/dehaan and believes that _root and low-carb diets are unusually evil.

More Stories By Chris Georgenes

Chris Georgenes is a full-time freelance artist, animator, and all-around designer for the web, CD-ROM, and television. His clients include Pileated Pictures, LucasArts, Universal Records, Plot Developers, and AOL, among others. He maintains www.mudbubble.com as his online portfolio and www.keyframer.com as his Flash tutorial website. Chris is also a member of Team Macromedia.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
SYS-CON Italy News Desk 01/15/06 01:52:28 PM EST

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, color, and opacity of shapes.