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.

Specifications

Size: (size of smaller image; see below)

Frame Rate: 12 fps (default)

Length: na

Due Date: week 7 (11/20)

Deliverables: both the FLA and exported SWF files.

Part 1: Preparation

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 and size it to a easy-to-divide whole number (like 900 pixels).

Save it as a jpeg.

Divide it by two-thirds or one-half or one-third: (for example, one-third would be 300 pixels).

Save this as a jpeg also.

Here are a ready-made large and small image you can use for this exercise.

Part 2: Flash Layout

Open a new file in Flash. Save your file as magGlass.fla in a folder called magGlassExercise.

Import the two images (large & small) to the library.

Change the size of the stage to match the size of the smaller image.

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.

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.

Convert the big image to a movie clip symbol. Call the movie clip bigImage_mc.

Important: the registration for this movie clip should be top-left (not centered). Give the movie clip on the stage an instance name of bigImage.

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

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.

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.

Add one more layer under the big image called background. This layer needs to be affected 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).

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

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

onClipEvent (enterFrame) {
this._x = (_root._xmouse);
this._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:

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

onClipEvent (enterFrame) {
this._x = (_root._xmouse * -1);
this._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. As long as your smaller image is half as big as your larger image (2:1), the above code will work fine. If your smaller image is one-third the size of the larger one (3:1), change the –1 in the code to –2. If your smaller image is one-quarter (4:1), use –3. If it is two-thirds (3:2), use –.5. The number you use is actually the difference in the ratio between big and small image; thus a 2:1 ratio yields a 1, a 3:1 ratio yields a 2, etc. A 3:2 ratio has to be converted to 1.5:1, which yields .5. If your larger image were ten times the size of the smaller (10:1) the number to use would be 9 (10–1). Get it? Don't you just love math?

Export a .swf file. Turn-in both .fla and .swf file.

Go Above and Beyond

Some possibilities:

Use your own images.

Here's a challenge: add a frame (stroke) to your magnifying glass like I use here.

Another challenge: Add a button that turns the effect on and off like I use here (hint: use two or more frames).

Find a clever use for this technique.

Point Breakdown

10 pts	Went above & beyond and made something special
9 pts	Above and beyond the basics.
8 pts	Did the basics; it works, but it's nothing fancy.
7 pts	Something's not working right.
0-6 pts	Poor showing; mostly incomplete or full of errors.

VCA224 Multimedia 2