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 (see Figure 20). 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 in Figure 20 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.

Figure 20. Using code to tween a bee horizontally across the Stage

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, as shown in Figure 21.

   Figure 21. Fading the bee movie clip

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 (see Figure 22).

   Figure 22. Loading an image into a SWF file and then animating it across the Stage using ActionScript instead of a motion tween