Magnifying Glass Effect

We show how to easily create a magnifying glass effect in Flash and AS3. The applet below is easy to customize and the instructions are provided in the corresponding 'fla' file that you can download from the link under the image. We also show how to load images at runtime and easily display load progress.

Click on the image to open the live appplet in a separete window.

Download

  • A the 'zip' file with the 'fla' and 'jpg' files corresponding to the applet mag_glass.zip

How to customize?

  • To use your own picture, simply change the name of the picture on line 76 of mag_glass.fla in the package. Make sure your picture is in the same directory as your html page (or give an address to your file.) For good magnifying effect, the picture should be of rather high resolution while the displayed picture should be its scaled-down version. All variables will automatically adjust to the dimensions of your image.
  • To change the scale-down factor, change the value of 'shrinkFactor' variable on line 62.
  • To change the size of the rectangular magnifying glass, change the values of the variables 'glassWidth' and 'glassHeight' on lines 42 and 43.
  • To create a circular magnifying glass, set 'glassHeight' and 'glassWidth' to the same value and change line 179 to:
       glass.graphics.drawCircle(glassWidth/2,glassWidth/2,glassWidth/2);

Displaying Load progress

It is very easy. You simply attach an event listener to your instance of the Loader class that listens to the PROGRESS event and displays the result in a dynamic TextField. In our case, we have 'loader' and 'infoBox'. The code looks as follows.

startApp();

 

function startApp():void {

loader=new Loader();

...........................

...........................

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,updateInfo);

}

 

function updateInfo(e:ProgressEvent):void {

infoBox.text="Loading: "+String(Math.floor(e.bytesLoaded/1024))+

" KB of "+String(Math.floor(e.bytesTotal/1024))+" KB.";

}

 

After loading is complete, we remove 'updateInfo' listener as well as other listeners attached to 'loader'.

Back to Intermediate              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.