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:
- 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 ]
- 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.
- 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 ]
- 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.
- 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 ]
- 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 ]
- 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!
|
Interactive Image Panning
