In this tutorial you will learn how to create a lens which follows the mouse and enlarges part of an image.
Here the final result (move the mouse around):
Flash 8, Flash CS3 or Flash CS4.
1 images (in this case 550×400, image available in the tutorial zip file)
Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same in Flash 8 or Flash CS4. This tutorial is ActionScript 2 (although no ActionScript is required).
Step 1 – Install the effect component
Step 2 – Create image Movieclip
Import an image [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”. On this image you’ll later apply the effect.
Select this image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image” (Name here it’s up to you).
Step 3 – Setup effect
Name the layer of the image Movieclip “image”.
Give the Movieclip the instance name “my_image” (you can choose a different name if you want. Make sure that the instance name is unique). Without an instance name, the component is unable to detect the Movieclip.
Create a new layer and name them “effect” (The naming of the layers is only to keep things in order, you can leave the layer names default, choose other names or even work on one layer).
Click the first frame of the “effect” layer and drag the Lens Effect from your library onto the stage. The component should snap automatically to the upper left corner of the image Movieclip.
Select the Lens effect on stage and open the component inspector panel [press SHIFT-F7] or “Window” -> “Component Inspector”.
In the “Target Movieclip” select list, “my_image” should be selected. All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you have only one Movieclip the component assumes that you want to apply the effect on the Movieclip “my_image”. Set “Cursor sensitive” to “Yes”. That makes sure the component follows the mouse.
Export your flash movie. Move around the mouse and you see that the lens follows the mouse.
Play around with the setting inside the component inspector panel and find your favorite setup. More about the component inspector setting here.
Click here to download the .fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.
You can also download the Lens Effect here.
Here you can find a video tutorial of how to implement a different effect.