Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Scripting animation with ActionScript 2.0 > Panning an image with code

Panning an image with code

Using ActionScript, you can easily pan large images within your Flash documents. This is useful when your image doesn't fit on the Stage, or you want to create an animation effect in which you pan a movie clip from one side of the Stage to the other. For example, if you have a large panoramic image that is larger than your Stage size, but you don't want to reduce the dimensions of your image or increase the dimensions of your Stage, you can create a movie clip that acts as a mask for the larger image.

The following procedure demonstrates how you can dynamically mask a movie clip and use an onEnterFrame event handler to animate an image behind the mask.

To pan an instance on the Stage using code:

1. Create a new Flash document called pan.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:

   System.security.allowDomain("http://www.helpexamples.com/");
   // initialize variables
   var direction:Number = -1;
   var speed:Number = 5;
   // create clip to load an image into
   this.createEmptyMovieClip("img_mc", 10);
   // create a clip to use as a mask
   this.createEmptyMovieClip("mask_mc", 20);
   // use the Drawing API to draw/create a mask
   with (mask_mc) {
       beginFill(0xFF0000, 0);
       moveTo(0, 0);
       lineTo(300, 0);
       lineTo(300, 100);
       lineTo(0, 100);
       lineTo(0, 0);
       endFill();
   }
   
   var mcl_obj:Object = new Object();
   mcl_obj.onLoadInit = function(target_mc:MovieClip) {
       // set the target movie clip's mask to mask_mc
       target_mc.setMask(mask_mc);
       target_mc.onEnterFrame = function() {
           target_mc._x += speed * direction;
           // if the target_mc is at an edge, reverse the animation direction
           if ((target_mc._x <= -(target_mc._width-mask_mc._width)) || (target_mc._x >= 0)) {
               direction *= -1;
           }
       };
   };
   
   var my_mcl:MovieClipLoader = new MovieClipLoader();
   my_mcl.addListener(mcl_obj);
   my_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);
   

   The first section of code in this code example defines two variables: direction and speed. The direction variable controls whether the masked image scrolls from left to right (1) or right to left (-1). The speed variable controls how many pixels are moved each time the onEnterFrame event handler is called. Larger numbers cause the animation to move more quickly, although the animation appears a bit less smooth.

   The next section of code creates two empty movie clips: img_mc and mask_mc. A 300 pixel by 100 pixel rectangle is drawn inside the mark_mc movie clip using the Drawing API. Next, a new object (mcl_obj) is created, which you use as a listener for a MovieClipLoader instance created in the final block of code. This object defines an event listener for the onLoadInit event, masks the dynamically loaded image, and sets up the scrolling animation. After the image reaches the left or right edge of the mask, the animation reverses.

   The final block of code defines a MovieClipLoader instance, specifies the listener object you created earlier, and begins loading the JPEG image into the img_mc movie clip.

4. Select Control > Test Movie to test the document.

   The image loads and then animates back and forth in a panning motion (side to side motion). The image is masked at runtime. To see the original image, you can view it online (http://www.helpexamples.com/flash/images/image1.jpg).

Flash CS3