Create a Magnifying Glass Effect in ActionScript 3.0

In this tutorial I’ll explain how to create a magnifying glass effect in AS 3. All you need is a proper height resolution picture (I used a 1200px x 800px image) for a good magnifying effect and a few minutes to read the following guide lines. The picture is loaded from code so you can easily change it. Check the example below for the final effect.

1. Open Flash and create a new ActionScript 3.0 file. Give the width and height of the Stage 3 times lower than your image (if you want to magnify the image by 3 times, e.g: my image is 1200×800 so the Stage must be 400×267)

2. Create 4 layers as you can see in the image below. The stack order is important so the layer for the small image must be under the big image layer.

3. Create 2 empty movie clips for the small and big image and drag them on the Stage. Put them in the corresponding layer, give an instance name for each one (smallImg and bigImg) then position them at x=0 and y=0.

4. Select the Oval Tool(O) and draw a circle. This will be our mask. Convert it to a movie clip and give it an instance name of circle.

5. Select the scripts layer and open up Actions tab. In the code below we’ll add some variables that we’ll use, make a request for the image to be loaded and hide the mask.

import flash.display.BitmapData;

var loader:Loader;

var loading:TextField = new TextField();

var image:Bitmap;

init();

function init():void {

	circle.visible = false;

	loader=new Loader();
	loader.load(new URLRequest("street.jpg"));

	loader.contentLoaderInfo.addEventListener("progress",progressLoad);
	loader.contentLoaderInfo.addEventListener("complete",completeLoad);

}

6. Until the image is loaded we’ll display a text saying “Loading…”.

function progressLoad(e:Event):void {

	loading.x=100;
	loading.y=100;
	stage.addChild(loading);
	loading.text="Loading: ";

	var tFormat:TextFormat=new TextFormat();

	tFormat.size = 20;
	tFormat.color = 0xFF0000;
	loading.setTextFormat(tFormat);

}

7. After the loading is complete, we’ll add the image to the bigImg movie clip. Then duplicate, scale it down 3 times and put it in the smallImg movie clip. After that will mask the bigImg with the circle movie clip.

function completeLoad(e:Event):void {

	image=Bitmap(loader.content);

	bigImg.addChild(image);

	//create the small image from the big image
	var bmp:BitmapData = new BitmapData(bigImg.width, bigImg.height);
	bmp.draw(bigImg);

	var bitmap2:Bitmap = new Bitmap(bmp);

	bitmap2.scaleX /=3;
	bitmap2.scaleY /=3;

	smallImg.addChild(bitmap2);

	loader.contentLoaderInfo.removeEventListener("progress",progressLoad);
	loader.contentLoaderInfo.removeEventListener("complete",completeLoad);

	loader=null;

	loading.text="";
	loading.visible=false;

	circle.visible = true;
	bigImg.mask = circle;//add the circle mask to the big image
	stage.addEventListener("enterFrame",mGlass);

}

8. Move the big image according to the position of the mask and hide the mouse.

function mGlass(e:Event) {

	bigImg.x = (mouseX * -2);
	bigImg.y = (mouseY * -2);

	circle.x = (mouseX);
	circle.y = (mouseY);

	Mouse.hide();
}

flashuser

Hi, there! I'm Alin the founder of Flashuser.net. My passions are related to web and graphic design, photography and climbing. You can find me at Twitter and Facebook