Week 12 - Creating a Magnifying Glass Option


Learning Objectives for this Section:


Creating a Magnifying glass for your website.


Lecture:


This is an assignment that can work well for websites that may need to offer another option for those that are visual impaired. In this assignment you will create an actual magnifying glass that can be used in a variety of ways.I used this to be able to look at an electrical drawing of my V-Star. As you can see it worked well. I am sure you can even think of some that are creative too.

If I think the image is too big I need to do is make sure the window is bigger if I want to see the whole drawing or I can make the drawing smaller too. Either way it will work well for this type of image. If you feel the magnifying glass is too small you can enlarge it as well.

We will be using an image like the one below as well as designing a magnifying glass. By adding the code to the first layer we are able to use this glass anywhere on the screen/image. You can change the image too, when you do make sure that you know what size it is, or what size the website screen is and replace that information in the code.

For this assignment I want you to use an image of your own. Follow the instructions and if you have any problems let me know. I have also added th SWF file so you can see this in action.


Lecture


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

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:

loadMovie("image.gif", imgHolder);

this.createEmptyMovieClip("zoomImg", 33);

zoomImg.setMask(imgMask);

var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);
zoomImg.attachBitmap(zoomBitmap, 5);
var magPower = 2;
var zoomMtx = new flash.geom.Matrix();
zoomMtx.scale(magPower, magPower);
magGlass.swapDepths(_root.getNextHighestDepth());

_root.onEnterFrame = function()
{

Mouse.hide();
magGlass._x = _xmouse - 70;
magGlass._y = _ymouse - 70;
zoomImg._x = magGlass._x;
zoomImg._y = magGlass._y;
imgMask._x = magGlass._x;
imgMask._y = magGlass._y;

zoomMtx.tx = -_xmouse * magPower;
zoomMtx.ty = -_ymouse * magPower;

zoomBitmap.draw(imgHolder, zoomMtx);
}


Code Explanation

Load "image.gif" to the "imgHolder" Movie Clip. If you use a jpeg then make sure to name it with the file.jpeg name.

    loadMovie('image.gif', imgHolder);

Create empty Movie Clip for the zoomed image.

     this.createEmptyMovieClip("zoomImg", 33);

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 doesnt overlap the magnifying glass. The parameters for the function used are:

     setMask(Mask_MC);

     var 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".

     new BitmapData(width, height, transparency, color);

Transparency and color are optional parameters.

     zoomImg.attachBitmap(zoomBitmap, 5);

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

     attachBitmap(bitmapData, depth); var magPower = 2;

Zoom power.

     var zoomMtx = new flash.geom.Matrix();

A Matrix object to scale and draw the zoomed image.

     zoomMtx.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.

     scale(_x scale, _y scale); magGlass.swapDepths(_root.getNextHighestDepth());

Bring the magnifying glass to the top.

     _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.

     zoomImg._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.

     zoomMtx.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.

     zoomBitmap.draw(imgHolder, zoomMtx); }

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

     draw(source, matrix)

This will work with any picture or graphic just make sure to name it "image1.jpg" to test.


Example SWF          Image