Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Magnifying Glass

VCB424 Advanced Interactive Design IV

Magnifying Glass

Here's a fun little Flash technique for creating a magnifying glass effect. With some minor modification, it can also be used to create an x-ray effect or CSI style black light effect, etc.

Part 1: Preparation

1. You will need two versions of an image, one larger than the other. I recommend you make the larger one a whole factor of the smaller one (so 2x as big or 3x as big, not 2.783 times as big). The easiest way to do this is to open an image an size it to a easy-to-divide whole number (like 900 pixels).
2. Save it as a jpeg.
3. Divide it by two-thirds or one-half or one-third: (for example, one-third would be 300 pixels).
4. Save this as a jpeg also.
5. Here are a ready-made large and small image you can use for this exercise.

Part 2: Flash Layout

1. Open a new file in Flash. Save your file as magGlass.fla in a folder called “yourName_magGlass."
2. Import the two images (large & small) to the library.
3. Change the size of the stage to match the size of the smaller image.
4. Place the smaller image on stage; make sure it is centered (change both the x & y coordinates to zero). Change the name of the layer to small image.
5. Add a new layer and call it big image. Put the larger image on this new layer, once again set the coordinates to 0, 0.
6. Convert the big image to a movie clip symbol. Call the movie clip bigImage_mc. Then, give the movie clip on the stage an instance name of bigImage.
7. Create a new layer called magnifying glass. On this new layer, create a solid (filled) circle (get rid of any stroke). Position it off-stage (in the gray area around the stage).
8. Convert this circle into a movie clip symbol called magnifyingGlass_mc.

Important: make sure that the registration for this clip is centered (not top-left). Give the instance of the movie clip the instance name glass.

9. Change the magnifying glass layer into a mask layer (right-click on the layer name and choose mask from the contextual menu). Make sure the big image layer is indented under the mask, but not the small image one.
10. Add one more layer under the big image called background. This layer needs to be effected by the mask as well (so if it is not indented yet, drag it up beneath the big image and drop it; it should indent).
11. On this layer draw a plain white rectangle that is the size of the stage or larger (if your stage background is a different color than white, change the color of the box to match the background of the stage).

Part 3 Flash: Actionscript

1. Select the glass movie clip instance. Open the Actionscript window and add the following code:

onClipEvent (enterFrame) {
_root.glass._x = (_root._xmouse);
_root.glass._y = (_root._ymouse);
Mouse.hide();
}

This code causes the movie clip (the circle) to follow the cursor around the stage. Since the clip is a mask, you see the a small portion of the larger image, revealed through the mask "window" as you drag across it. However, you can't see the entirety of the larger image yet because part of it extends beyond the edge of the stage. What we need to do next is add a script that will move the larger image when the mask moves, but in the opposite direction:

2. Select the bigImage movie clip instance. Add the following code;

onClipEvent (enterFrame) {
_root.bigImage._x = (_root._xmouse * -1);
_root.bigImage._y = (_root._ymouse * -1);
}

This code moves the big image in an inverse relation to the cursor. However, you must make an adjustment to the code depending on the ratio of your large image to small image. If your smaller image is half as big as your larger image, the above code will work fine. If your smaller image is one-third the size of the larger one, change the –1 in the code to –2. If your smaller image is one-quarter, use –3. If it is two-thirds, use –.5. There is a simple formula to calculate the proper factor based on the ratio, but I've forgotten it; I'll figure it out later.

Finishing Touches.

1. Try it out, does it work?
2. Here's a challenge: add a frame (stroke) to your magnifying glass like I use here.
3. Another challenge: Add a button that turns the effect on and off like I use here (hint: use two or more frames).
4. Export a .swf file.
5. Embed the .swf file into an html page (called magGlass.html for example).
6. FTP the magGlass folder to your server space
7. Make a link to the html file from your home page.

Point Breakdown

Course Outline

Syllabus

Student Resources