Flash Tutorial: Magnifying Glass	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

Flash - Creating a Magnifying Glass

Free Flash Tutorial

The aim of the tutorial is to learn how to create a Magnifying Glass using a very simple piece of code. You will also learn how to attach several Movie clips to the mouse, some move with the mouse and others move in the opposite direction to the mouse. You will also learn how to use masks in Flash MX.

Example: Download the Flash file Int 111a

Example of a very smooth running magnifying glass (Large file may take a moment to load).

Step One: Creating the Image you want to Magnify

Before you can start you will need something to magnify. This could be a bitmap image such as a Jpeg or Gif. It could also be a vector based image created with the typing or drawing tools in Flash (or in a Graphics program like Freehand, Illustrator, or CorelDraw). The vector based images are best because the file sizes are so small. Having said that they take more time to create as you have to draw every detail.

I have taken the easy root and scanned a map using PhotoShop and then saved it as a Jpeg. Quick and easy but the files size is big: nearly 200kb.

If I was concerned with the file size I could have imported the scanned picture into a Graphics program and re-created the file before I started to create my magnifying glass in Flash. I would expect the graphics file to be about 10 or 20kb (once imported to Flash) rather than 200kb. A major difference.

Of course you can do this with a map but if you are using the magnifying glass on a photo, you have to stick to the Jpeg.

The measurements of the image has to be quite large. Mine is 1200 pixels wide x 1000 pixels high. This is much taller and wider than most pictures that would be used on a web page (hence the 200KB). The reason for this is so that when magnified there is plenty of detail to look at.

Example: Download the Jpeg file Int 111b 1200 x 1000 pixels

Or: Create your own image. For the tutorial I recommend that you stick to the same size: 1200 x 1000 pixels

Step Two: Setting up the Flash File

1. Open a new Flash file.
   
2. Go to: Modify > Document
   Set the document size to: 480 x 400 pixels
   
3. Go to: File > Import
   Browse to the Jpeg/Gif file that you wish to use.
   Your Jpeg should now be on stage. If it is not on Stage it will be in your Library - Drag it onto stage.
   
   Note: If you are using an image from a graphics program you can copy and paste it into Flash.
   
   
4. The magnification on my example above is 2 1/2 times or 250%. So the picture that I need on stage needs to be 250% smaller.
   
   1200 / 2.5 = 480 pixels - new width
   1000 / 2.5 = 400 pixels - new height
   
   In the Property inspector resize the image to: 480 x 400 pixels.
   
   Important Note: This is the same as the document size (see point 2 above).
   
   
5. In the Property inspector place the image at: X = 0, Y = 0
   
   
   Your Property inspector should have these details.
   
   
6. Rename the layer: Small Map
   
   The map is now ready to be magnified.

Step Three: Preparing the Magnifying Glass

1. Create a new Layer and call it: Big Map
   
2. Go to: Insert > New Symbol
   Name: My Big Map
   Behavior: Movie Clip
   
3. Drag the Jpeg of the map into the new symbol.
   
4. As before place the image at: X = 0, Y = 0
   This time you do not reduce the size of the image. This is what we are going to see in the Property Inspector:
   
   
   Note the image is still 1200 x 1000px.
   
   
5. Go back to the main stage and drag the new movie clip from the library and place it on the main stage.
   
   This movie clip must be in the new layer: Big map
   
   Note: The large map does not need to be on top of the smaller map but can be shunted off to the side of the stage. This makes it easier to work with.
   
   
6. In the Property inspector give this movie clip an instance name: myMap
   
   
7. Attach the following ActionScript to the new movie clip:
   
      onClipEvent (enterFrame) {
         _root.myMap._x = (_root._xmouse * -1.5);
         _root.myMap._y = (_root._ymouse * -1.5);
      }
   
   This little bit of code is the key:
   
   Line 1: onClipEvent (enterFrame) {
   Do this every time the play head hits the frame. Normally 12 times per second.
   
   Line 2: _root.myMap._x = (_root._xmouse * -1.5);
   The x position of the map moves in the opposite direction to the mouse times 1.5
   
   Line 3: _root.myMap._y = (_root._ymouse * -1.5);
   Same as line 2 but for the Y axis.
   
   Remember that the large picture is bigger than the visible stage by 2.5 times. So it will stick to the mouse position but also move more that the mouse by 1.5 times. This at first seems odd but let me explain:
   
   If your mouse is on x position zero so is the picture (0 x -1.5 = 0).
   
   
                                                                     Both mouse and map on _x zero.
   
   If your mouse is on _x position 480 (on the far right of the movie) the mouse has moved 480 pixels to the right.
   
   The picture moves 720 pixels to the left (480 x -1.5 = -720).
   
   The total mouse + picture move 1200 pixels (480 + 720 = 1200)
   
   This is why we get a magnification of 2.5 times (480 x 2.5 = 1200).
   
   Think of it like this: The mouse moves 1 part, the picture moves 1.5 parts, total 1 +1.5 = 2.5 parts/magnification.
   
   
   
   This illustrates the _x (sideways) movement only.
   
   Note: Whatever the magnification, you multiply by one number less because the cursor always moves once across the screen.
   
   If I wanted a magnification of 3 times the code will be:
   
      _root.myMap._x = (_root._xmouse * -2);
      _root.myMap._y = (_root._ymouse * -2);
   
   Note: If the magnification was 3 times, the large map would also have to be bigger, or the small map (and the Flash document) smaller.

Step Four: The Glass

Now we will hide the big map, except for the glass area.

1. Create a new layer above the Big map layer called: Glass
   
2. Draw a circle in this layer with a diameter of about: 145 pixels
   
3. With your Arrow tool select the outside stroke of the circle.
   
   
   Stroke selected
   
   
4. Go to: Edit > Cut
   
   Note: You will paste the stroke later to create the glass rim.
   
   
5. Right click (Mac Ctrl Click) on the inside of the circle and convert it to a Symbol.
   Name: Circle
   Behavior: Movie Clip
   
   Note: The advantage of creating the movie clip this way is that the circle will be perfectly centered in the movie clip and we need this.
   
   
   Instance of circle on stage with a centered registration point.
   
   
6. Give the circle a Instance name: myCircle
   
7. Add the following code to the circle:
   
      onClipEvent (enterFrame) {
         _root.myCircle._x = (_root._xmouse);
         _root.myCircle._y = (_root._ymouse);
      }
   
   The ActionScript is almost identical but this time the circle will stick to the cursor and move with the mouse. There is no: *-1.5
   
   
8. Right click on the Layer name: Circle
   Select: Mask
   
   
   Your layers should look like this.
   
   Note: The layer stacking order is critical.
   
   It is probable a good time to save and test your movie, as all the main parts of the magnifying glass are done.
   

Step Five: The Glass Rim

1. Create a new Layer above your Circle Layer called: Glass Rim
   
   
   
   Note: It is important that the glass rim is in its own layer, otherwise the mask may fail to work correctly or the rim may not be visible.
   
   
2. If you cut the outside stroke from the circle above (step 4.3) it should still be in the computer memory.
   Go to: Edit > Paste
   
   
   If you do not have the rim of the circle in the memory you will need to draw one. Remember to delete the centre or you will not see the magnifying glass underneath!
   
   
3. Right click on the rim and convert it to a Symbol.
   Name: Rim
   Behavior: Movie Clip
   
4. Give the circle a Instance name: myRim
   
5. Attach the following code onto the movie clip:
   
      onClipEvent (enterFrame) {
         _root.myRim._x = (_root._xmouse);
         _root.myRim._y = (_root._ymouse);
      }
   
   Note: You cannot use the following code:
   
      onClipEvent (enterFrame) {
         startDrag("");
      }
   
   With startDrag you can only attach one object to the mouse, and as we need to attach the rim and the mask startDrag will not work.

Step Six: The Mouse Cursor - Removed

Your magnifying glass should be ready to roll. Having said that, there is just one addition that you may want:

To make the standard arrow cursor disappear so that you can see the magnification detail better, place this code in any of the key frames in the time line:

Mouse.hide();

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here