Current Classes | Syllabus | Class Schedule

VCB-331 Rich Media 1

Magnifying Glass Effect (Flash AS3)

Introduction

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.

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 and 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 images you can use for this exercise.

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. (Important! Make sure the registration is top-left). Call the movie clip "bigImage." Then, give the movie clip on the stage an instance name of "bigImage_mc".
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" (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_mc".
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).

Actions

1. Create a new actions layer.
2. Select the keyframe in the actions layer and open the Actions window. We'll start off by adding a handler:

   stage.addEventListener(MouseEvent.MOUSE_MOVE,moveGlass);  

   This code simply "listens" for the movement of the mouse by the user. As soon as the mouse is moved, the moveGlass function is called. We'll write that next.

3. Add the following code;

   function moveGlass(myEvent:MouseEvent) { 
       glass_mc.x = (mouseX); 
       glass_mc.y = (mouseY); 
       Mouse.hide();    
   }  

   This code does two things: it causes the "glass" movie clip to follow the cursor around the stage and hides the cursor. Since the movie 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 some code that will move the larger image when the mask moves, but in the opposite direction.

4. Add the new code in black:

   function moveGlass(myEvent:MouseEvent) { 
       bigImage_mc.x = (mouseX * -1); 
       bigImage_mc.y = (mouseY * -1); 
       glass_mc.x = (mouseX); 
       glass_mc.y = (mouseY); 
       Mouse.hide();    
   }  

   This addition 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. Essentially the number you use is the amount you would have to subtract from the denominator of the fraction in order to reduce it to 1/1. So If your ratio is 1/3, you subtract 2 from the denominator to get to 1/1; thus –2 is the amount you use. Following this, if your smaller image was 1/8 the size of the larger image, you'd use –7.

Your Turn.

1. Try it out, does it work?
2. Here's a challenge: add a frame (stroke) to your magnifying glass like I use above
3. Another challenge: Add a button that turns the effect on and off like I use here (hint: use two or more frames).
4. For a more elaborate treatment that loads the images dynamically, check out this tutorial.

 

Grading rubric

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