bjornson’s blog

this blog is very young, come again to watch it grow

A simple Magnifying Class for AS3

with 6 comments

It has been a while that I first programmed a magnifier glass in Actionscrtip 2. But since several friends asked over time how to do it I rewrote it in AS 3.

You can download the entire class for free here: magnify.as

There are no license attachments whatsoever. So you can modify it, reuse it, sell it, whatever you like. But of course I would like to receive some feedback. You can also place links in the comments here to your site if you used this class.

The main important part is the following calculation:

_mc_mask.x=mouseX;
_mc_mask.y=mouseY;
_loaderMc.x=(-_loaderMc2.mouseX)+_loaderMc2.mouseX/_scaleRatio;
_loaderMc.y=(-_loaderMc2.mouseY)+_loaderMc2.mouseY/_scaleRatio;

First the image is loaded twice and then it positions the image that is only partially visible in the right spot over the smaller image so that it seems to be the same image.

This movie requires Flash Player 9

To include the class in your own project all you need to is:

  1. unzip bjornson.zip into the same directory your FLA-file is in
  2. write code similar to this in your actions dialogue of your FLA (this is the very minimum you need):
  3. import bjornson.Magnify.Magnify;
    var m:Magnify = new Magnify(“a.jpg”); //this should be a relative path to a .jpg or .png
    addChild(m);
  4. Publish the file, done!
You can also specify more to customise the magnifier:
the variables are
  1. scr:String – this is the relative path to your image
  2. w:Number – this is the maximum width of the preview image
  3. h:Number – this is the maximum height of the preview image (it will be adjusted automatically to fit while keeping the correct aspect ratio)
  4. s:Boolean – this is to switch from a rectangular magnifier to a round magnifier
  5. r:Number – this is the radius of a round magnifier or the height of a rectangular magnifier
  6. rw:Number – this is the width of a┬árectangular magnifier
  7. m:Boolean – this defines if the Mouse-Pointer is visible when it moves over the image or not
So you could use it with the maximum amount of customisation like this:
var m:Magnify = new Magnify(“a.jpg”,600,400,false,50,50,false);
and it would create a preview picture from a.jpg with the maximum dimensions of 600×400 with a rectangular magnifying glass of 50×50 pixels and the mouse would not be visible when it moves over the image.
before adding it to the stage or any MovieClip on the stage you can position it more like this:
m.x=50;
m.y=100;
//and then add it:
addChild(m);
This would add the magnifier to the stage at x:y 50:100.

Written by bjornson

September 11th, 2008 at 6:05 pm

6 Responses to 'A simple Magnifying Class for AS3'

Subscribe to comments with RSS or TrackBack to 'A simple Magnifying Class for AS3'.

  1. Hi,

    I’m trying to use your class, I have an image, its file path relative to my fla is ‘images/painting2.jpg’ but I pass this into Magnify and it gives a syntax error…please help!

    Rohan

    10 Apr 09 at 4:49 am

  2. @Rohan: In your case you should test it with:

    import bjornson.Magnify.Magnify;
    var m:Magnify = new Magnify(“images/painting2.jpg”);
    addChild(m);

    And make sure that it is an ActionScript 3 Project. It will not work with AS2.

    bjornson

    14 Apr 09 at 1:15 pm

  3. Hi, Vincent and I are programmers for the medicine faculty of our university (Quebec City). We had too use a magnifying lens to zoom in radiographies that are used in exercises for students.

    The class you provided was really useful, we had to modify it a little bit to meet our needs. It works great!!

    The only problem we discovered is that it needs to load 3 images (including the one already on the scene, so 2 more images) to magnify it.

    When we have to use a couple of images, it begins to be really long. Otherwise, the class is really useful. Thanks a lot.

    We would like to send you a link to see our project, but it is private for the faculty students.

    Anyway, thanks a lot!!

    Martin and Vincent

    25 Jun 09 at 9:58 pm

  4. Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

    sandra742

    9 Sep 09 at 3:22 pm

  5. Hi Bjornson,
    Just a quick thank you for saving me a bunch of time.
    I used your class on a clients website (JoleenRizzo.com) and it took all of 20min to get it integrated and working.

    Thanks a bunch!

    desertWind

    6 Jun 11 at 11:27 pm

  6. Hi,
    I used in my project it will work well. but when i am trying to increase image height and width then this will not magnify image.

    ketan

    7 Oct 11 at 3:04 pm

Leave a Reply