DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Posted by webzo

Magnifying glass is not just in the real world. In Flash, we can also create a magnifying glass. You can zoom a picture or even text. Maybe you can even use this for disability people that are using your computer.



Create a new Movie Clip and draw your magnifying glass; fill the glass part with any color you want.



Select the red and press F8, this will create a new Movie Clip that we will use as a mask.

After converting, delete it from the magnifying glass Movie Clip.

Drag both Movie Clip to the stage, one with the instance "imgMask" and the other "magGlass".

Now create a new Movie Clip just to hold our image, drag it to the stage and give the instance name "imgHolder".

Paste this on the first frame:

Code: Select all//load an image named "image.jpg" to the imgHolder Movie Clip
loadMovie('image.jpg', imgHolder);

//new Movie Clip just to hold the zoomed image
this.createEmptyMovieClip("zoomImg", 33);

//Set a mask inside the Movie Clip so the zoomed image is rounded
zoomImg.setMask(imgMask);

// bitmap object to zoom the image
var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);

//attach the bitmap to the" zoomImg" Movie Clip
zoomImg.attachBitmap(zoomBitmap, 5);

//zoom power, increase this to zoom more
var magPower = 2;

//matrix object to position the zoomed bitmap inside the magnifier
var zoomMtx = new flash.geom.Matrix();

//scale the image using the "magPower"
zoomMtx.scale(magPower, magPower);

//swap depths for the magnifier Movie Clip so it is on top
magGlass.swapDepths(_root.getNextHighestDepth());

_root.onEnterFrame = function()
{
//hide the mouse
Mouse.hide();

//set the magnifier Movie Clip to the position of the mouse
magGlass._x = _xmouse - 70;

//so the mouse is in the middle of the lens
magGlass._y = _ymouse - 70;

//zoomed image Movie Clip
zoomImg._x = magGlass._x;
zoomImg._y = magGlass._y;

//Mask Movie Clip
imgMask._x = magGlass._x;
imgMask._y = magGlass._y;

//where to draw the zoomed image
zoomMtx.tx = -_xmouse * magPower;
zoomMtx.ty = -_ymouse * magPower;

//draw zoomed image using the image in the
//holder and the position of the matrix.
zoomBitmap.draw(imgHolder, zoomMtx);
}

It works for any image, choose a different picture and name it  "image1.jpg" to test.

[st]Code Explanation[/st]

Code: Select allloadMovie('image.jpg', imgHolder);

Load "image.jpg" to the "imgHolder" Movie Clip.

Code: Select allthis.createEmptyMovieClip("zoomImg", 33);

Create empty Movie Clip for the zoomed image.

Code: Select all//Set a mask inside the Movie Clip so the zoomed image is rounded
zoomImg.setMask(imgMask);

Set a mask in the "zoomImg" using the Movie Clip "imgMask" so that the zoomed image doesn't overlap the magnifying glass.
The parameters for the function used are:

Code: Select allsetMask(Mask_MC);

Code: Select allvar zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);

Create a new BitmapData with height and width of 155px no transparency and background color "0xEAEAEA".

Code: Select allnew BitmapData(width, height, transparency, color);

Transparency and color are optional parameters.

Code: Select allzoomImg.attachBitmap(zoomBitmap, 5);

Attach "zoomBitmap" on the "zoomImg Movie Clip":

Code: Select allattachBitmap(bitmapData, depth);
var magPower = 2;

Zoom power.

Code: Select allvar zoomMtx = new flash.geom.Matrix();

A Matrix object to scale and draw the zoomed image.

Code: Select allzoomMtx.scale(magPower, magPower);

Set the scale parameters inside the matrix to "magPower"; the image will not be scaled yet, we still need to draw using this matrix.

Code: Select allscale(_x scale, _y scale);
magGlass.swapDepths(_root.getNextHighestDepth());

Bring the magnifying glass to the top.

Code: Select all_root.onEnterFrame = function()
{
Mouse.hide();
magGlass._x = _xmouse - 70;
magGlass._y = _ymouse - 70;

Hide the mouse and set the position of the magGlass to be equal to the mouse.

Code: Select allzoomImg._x = magGlass._x;
zoomImg._y = magGlass._y;
imgMask._x = magGlass._x;
imgMask._y = magGlass._y;

Set the position for the rest of the Movie Clips.

Code: Select allzoomMtx.tx = -_xmouse * magPower;
zoomMtx.ty = -_ymouse * magPower;

The variables "tx" and "ty" inside a matrix represent the drawing location of the image; we set these two variables to make the zoomed image centered in the magnifying glass.

Code: Select allzoomBitmap.draw(imgHolder, zoomMtx);
}

Draw the zoomed image into the zoomBitmap using the draw() function:

Code: Select alldraw(source, matrix)

That's the end of this tutorial. Check out other tutorials to get more knowledge about Flash!