Wednesday 9 July 2014

Magnifier lens on Mouse Movement

Here the final result (move the mouse around):
move mouse over swf

Requirements

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

Download the Lens Effect here. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.
Drag component into library

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.
Import image
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).
Convert image into Movieclip
Name the Movieclip

Step 3 – Setup effect

Name the layer of the image Movieclip “image”.
Rename the layer
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.
Set instance name
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).
Create and name new 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.
Drag component onto 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.
Settings inside the inspector component panel
Export your flash movie. Move around the mouse and you see that the lens follows the mouse.
Result
Play around with the setting inside the component inspector panel and find your favorite setup. More about the component inspector setting here.

Download

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.

No comments:

Post a Comment