Interactive Image Panning
       code by Krilnon, tutorial written by kirupa  |  2 July 2006

A really nice effect I saw recently on the forums is the ability to pan an image based on your mouse movement. The following animation is an example of what I am referring to:

[ move your mouse around the above animation to scroll the image ]

In the above example, notice that as you move your mouse cursor around the screen, the image scrolls based on the direction of your mouse movement. The scrolling, though, stops once you have reached the image's boundary.

In this tutorial you will learn how to re-create the above animation followed by an explanation of how the code, created by kF all-star Krilnon, works.

Let's Get Started:

  1. First, create a new animation in Flash. From the Properties panel, set the animation's width and height to 300 pixels by 200 pixels respectively. Finally, adjust the movie's frame rate to 25 fps:

[ set your animation's width/height to 300 by 200 and your frame rate to 25 ]

  1. Now that our stage is setup just the way we want it, let's add an image. Insert any image wider than 300 pixels on your stage. If you cannot find a good image, you can use the image I used in the above example by clicking here.

The background image used in the above animation and provided as a download link in Step ii is part of KoL's Strange World series. You can visit his website and checkout his other cool wallpapers by clicking here.

  1. Once you have your image placed into Flash, select your image and set its x and y position to 0, 0. The top-left corner of your image should be in sync with the top-left corner of your stage:

[ set your image's x and y position at 0,0 ]

  1. Select your image again and press F8 (Modify | Convert to Symbol) to bring up the Convert to Symbol window. Select the option for Movie Clip and press OK.
  2. Your newly created/converted movie clip should still be selected. From the Properties Panel, give your movie clip the instance name bg_mc:

[ set your image's x and y position at 0,0 ]

  1. It's time to add the code. Right click on the first frame of your timeline and select Actions. Copy and paste the following code:

[ copy and paste the above code into the first frame of your animation ]

  1. Ok, if you test out your animation, you should be able to see the above effect. Pretty nifty ehh?

Now that you have a working animation, I am sure you are curious to know how it works. In the next few pages I will explain what each line of code accomplishes so that you will know how to create a better, cooler effect for your self/clients!

Onwards to the next page!

1 | 2 | 3

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.