by Grant Skinner

Flash 8: Blueprint Magnifying Glass Demo

Someone pointed out that my previous magnifying glass demo wasn’t as clear as it could be. This one is a bit better than my previous demo because it uses a high resolution image (so the magnified view is full resolution), and the image has more straight lines so it’s a lot easier to see the lens distortion at work.

UPDATE: Just updated with a better displacement map. Thanks to Ralph Hauwert for prodding me into doing so.


Requires the latest Flash 8 player. 215kb.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

If you enjoyed this, you might like these articles…

Flash 8: Magnifying Glass Demo, The Coolest Flash 3D Demo Ever!, Simple Flash Player 10 3D Demo w/ Source, Flash Player 9 / AS3 Sound Crashing Bug

28 Comments

  1. Mark Holton September 6, 2005 at 4:03pm

    …that is so cool. Thanks for sharing this great demo. Any plans to release some of the code?

  2. Grant Skinner September 6, 2005 at 4:11pm

    Yes, I’ll definitely be releasing lots of code after the release (or at least after I get back from my honeymoon). 🙂

  3. John September 6, 2005 at 9:51pm

    Grant —

    – not that you don’t have enough to do.. but would be real slick is if you pressed the mouse button to raise the magnifying glass, bringing it closer to you, thereby increasing magnification.

  4. Bill Lane September 7, 2005 at 5:20pm

    The non-magnified image is really messed up when viewed in Firefox (1.0.5). I have posted a screen shot : http://www.geekglue.com/media/images/tmp/ss_mag.jpg

  5. Jed Wood September 9, 2005 at 9:19pm

    One final suggestion (since I know you’ve run out of other Flash projects to work on…) : exaggerate the displacement enough that it looks like a magnifying glass really would. You’ve gone so far in replicating the real thing- might as well go all the way.

    The key is to make it such that there is no “gap” between the inside and outside of the glass (except for the tiny metal rim). As it stands now (and is _really_ apparent when there’s no displacement at all), when you move the glass around, there is a section of the image that “disappears,” so to speak.

    Is this making an sense? Here’s a great sample done Flash 6 style:

    http://senocular.com/flash/source.php?id=0.1

    There’s a steady acceleration (or maybe it’s exponential) of magnification from background to middle of the lens.

    So keep the nice subtle shading and other effects you already have, add this bit, and I think you’ll have the perfect lens!

  6. Jon Bradley September 12, 2005 at 6:28am

    Jed said:

    There’s a steady acceleration (or maybe it’s exponential) of magnification from background to middle of the lens

    ——-

    If we talking realism…

    Nonlinear distortion actually – barrel distortion is usually what’s seen in a magnifying glass. The effect on a real mag. glass is also very slight and is not really noticeable unless you’re looking at a grid of aligned elements.

    See the following snapshot:

    http://www.ccrane.com/images/large/magnifying-glass.jpg

    What makes a magnifying glass really look like one is that specific situation where the focal point is so tight (front and back focus) that the the image is blurred from the center of the lens significantly – pretty easy to do with Flash 8 using the blur filter.

  8. en.. September 27, 2005 at 7:52pm

    what if you set the _quality = “best”; ?

  9. The Insaint November 25, 2005 at 5:11pm

    So, I would really like to see the code of this great piece of work.

    Any chance to get it?

  10. Denis December 8, 2005 at 8:37am

    Grant, I really like you work! Keep it up! When are you going to distribute a code for this magnifier? Tx

  11. Alex February 7, 2006 at 9:44am

    Wow, that’s one of the neatest effects I’ve seen, next to the webcam interactive ones

  12. kamal March 1, 2006 at 12:43am

    plz send the code to magnigy the image

  13. Aida Mack March 14, 2006 at 6:15am

    the effect is the best i have seen from 8 so far!

    truley awesome.

    Please please show us how its done!

  14. Frank May 14, 2006 at 11:34pm

    Great stuff man, i necer seen something like that, continue to make so cool stuffs…

  15. spound May 17, 2006 at 2:44pm

    POST the .fla

  16. olli October 16, 2006 at 4:41pm

    Check this out:

    http://www.digital-ist-besser.de/?cat=1&id=0

    (correct distortion). Found the same lens on Google image search 😉

    I’m using this map:

    http://www.digital-ist-besser.de/img/map.png

  17. Don November 1, 2006 at 1:45pm

    Any chance of releasing the source Grant?

  18. Andy November 7, 2006 at 8:51am

    Any chance of the code for this man it is a great effect.

  19. Myk May 4, 2007 at 12:10am

    This is about the best magnifying glass I’ve seen – no wonder we are all begging for the source!

    This would save me huge hours of work, any chance of posting the source?

    /\/\

  20. dabush May 23, 2007 at 6:36am

    Go you cheeky little tinker, stop teasing us and release the code

  21. Mike August 9, 2007 at 3:16am

    Wow amazing! Any chance of a tutorial on how to do this?

  22. Laura August 8, 2008 at 1:47pm

    Just where is this code you speak of? 🙂

  23. Jess Falon October 7, 2008 at 12:20am

    okay…. WHERE IS THE CODE?! GIMME!!!!!!!!!

    hi… :$

  24. Patrick William November 7, 2008 at 11:00am

    hey there I am new to flash, about a year and change. I figured out how to create this same effect. Its funny because I used the same magnifying glass image without knowing skinner used it, i guess it was the best source image available for free.

    Anyways! I got my glass working well, it needs finetuning and displacement. Contact me

  25. Ryan June 25, 2009 at 7:29am

    Can you please post the FLA file? Thanks~!

  26. James August 10, 2010 at 7:15am

    I have been trying to replicate this effect, but have come across two problems.

    1. The displacement map I am using is not very convincing – I am trying to create it using AS3 code rather than using a JPG/PNG. Any suggestions?

    2. When applying the filter to an image scaled to 0.25, the filter successfully magnifies, however the quality is very poor – how do you achieve the zoom effect without losing quality?

  27. James August 10, 2010 at 7:45am

    For those of you struggling as I was, I created a more convincing displacement map using the following code:

    var mat:Matrix = new Matrix();

    mat.createGradientBox(WIDTH,WIDTH,toRad(90),-(WIDTH / 2),- (WIDTH / 2));

    var redMap:Sprite = new Sprite();

    redMap.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x000000], [1,1], [0,255], mat);

    redMap.graphics.drawCircle(0,0,WIDTH / 2);

    redMap.graphics.endFill();

    mat.createGradientBox(WIDTH,WIDTH,0,- (WIDTH / 2),- (WIDTH / 2));

    var greenMap:Sprite = new Sprite();

    greenMap.graphics.beginGradientFill(GradientType.LINEAR, [0x00FF00, 0x000000], [1,1], [0,255], mat);

    greenMap.graphics.drawCircle(0,0,WIDTH / 2);

    greenMap.graphics.endFill();

    var greyMap:Sprite = new Sprite();

    greyMap.graphics.beginGradientFill(GradientType.RADIAL, [0x808080, 0x808080], [1,0], [127,255], mat);

    greyMap.graphics.drawCircle(0,0,WIDTH / 2);

    greyMap.graphics.endFill();

    var bd:BitmapData = new BitmapData(redMap.width, redMap.height, true, 0x00000000);

    var bdMat:Matrix = new Matrix();

    bdMat.tx = bd.width / 2;

    bdMat.ty = bd.height / 2;

    bd.draw(redMap, bdMat, null, null, null, true);

    bd.draw(greenMap, bdMat, null, “screen”, null, true);

    bd.draw(greyMap, bdMat, null, null, null, true);

    Regarding the quality issue, I created a bitmap version of the scaled image, at full resolution, and applied the filter to that. I then applied a mask to the bitmap in the shape of a circle.

    If anyone knows how to improve quality without drawing an additional version, I’d be keen to hear how you did it!

  28. Dan Zen April 13, 2011 at 9:59pm

    Thanks James for the Map! Worked well.

Leave a Reply

Your email address will not be published. Required fields are marked *