August 27, 1999 — updated March 30, 2003

Mimicking a Magnifying Glass in Flash

There was a request on the FreeHand newsgroup asking how to make the Magnifying lens effects from FreeHand come into Flash. Well they don't, but I came up with a quick solution to how to create them directly in Flash below. Enjoy!

Version: listed with type below
 

 
 


Regular Flash animation (Flash 3 and above)

This was my first attempt at getting the magnify effect to work. Very nice if you don't want to drag it around (see below).

Download the Flash (.FLA) file below.

Flash file download

Macintosh Stuffit File lens.sit
Windows Zip File lens.zip

Dragging a Magnifying Glass in Flash (Flash 4 and above)

Below is a basic explanation on how I was able to accomplish this effect. It's a bit complicated and is more geared towards experienced users. This new and improved version is much more simplified from the first version. Read more below.

In this version of the Draggable Magnifying Lens, everything happens in the draggable lens movie clip. The mask, the larger image, the button and even all of the ActionScript is contained in this one clip.

This makes it very easy to copy and paste this Lens from one movie to another and only have to change a few things to fit your needs.

I still used ActionScript to make the "larger" image move, but much more efficiently. The code looks like this:

Set Property ("largeobject", X Position) = (GetProperty ( "/original", _x ) -_x) * 2
Set Property ("largeobject", Y Position) = (GetProperty ( "/original", _y ) -_y) * 2

Now the script gets the X and Y properties of the main object on the movie ("original"). Then it subtracts the X and Y values of the current clip which is the Lens. The larger object called "largeobject" is the only thing that gets moved, and is calculated based on where the original object falls on the movie scene.

The larger object called "largeobject" is the only thing that gets moved, and is calculated based on where the original object falls on the movie scene.

Flash 4 file download

Macintosh Stuffit File draglens4.sit
Windows Zip File draglens4.zip

 

Flash 5 and above file download

Macintosh Stuffit File draglens5.sit
Windows Zip File draglens5.zip

Multiple Magnification Choices (Flash 4 and above)

In the example above, I've finally implemented the ability to set different magnification levels with those buttons. Try to track the bugs! Ant artwork provided by Mike McGill.

This is fairly easy to add and edit in the movie, and doesn't require a tremendous amount of scripting knowledge. Just follow the instructions in the downloadable file below.

Flash 4 file download

Macintosh Stuffit File draglens_variable.sit
Windows Zip File draglens_variable.zip

 

You are free to use this technique in your Flash movies on one condition. Just send me an email letting me know how you used it so I can see what the world is coming up with using this very cool effect.

See what others have done with this effect:

If you have any further questions on how it was done, just drop me a note. See my other techniques in Flash:

Ian Kelleigh
Ian@FreeHandSource.com

Visit my site all about FreeHand and see other tips with Flash.