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.
Comments (24)
...that is so cool. Thanks for sharing this great demo. Any plans to release some of the code?
Posted by: Mark Holton at September 6, 2005 04:03 PMURL: http://holtsblog.blogspot.com/
Yes, I'll definitely be releasing lots of code after the release (or at least after I get back from my honeymoon). :)
Posted by: Grant Skinner at September 6, 2005 04:11 PMURL: http://gskinner.com/
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.
Posted by: John at September 6, 2005 09:51 PMURL:
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
Posted by: Bill Lane at September 7, 2005 05:20 PMURL: http://www.geekglue.com
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!
Posted by: Jed Wood at September 9, 2005 09:19 PMURL: http://silentrant.com
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.
Posted by: Jon Bradley at September 12, 2005 06:28 AMURL:
Very nice effect! Thank you.
Please, take a look to my flash 8 effects:
http://antonvolkov.com/flash/biotexture/
Posted by: Anton Volkov at September 20, 2005 01:53 AMhttp://antonvolkov.com/flash/electro1/
http://antonvolkov.com/flash/electro2/
http://antonvolkov.com/flash/eraser/
http://antonvolkov.com/flash/textburning/
URL: http://www.antonvolkov.com
what if you set the _quality = "best"; ?
Posted by: en.. at September 27, 2005 07:52 PMURL:
So, I would really like to see the code of this great piece of work.
Posted by: The Insaint at November 25, 2005 05:11 PMAny chance to get it?
URL:
Grant, I really like you work! Keep it up! When are you going to distribute a code for this magnifier? Tx
Posted by: Denis at December 8, 2005 08:37 AMURL:
Wow, that's one of the neatest effects I've seen, next to the webcam interactive ones
Posted by: Alex at February 7, 2006 09:44 AMURL: http://www.sheepeasy.net/
plz send the code to magnigy the image
Posted by: kamal at March 1, 2006 12:43 AMURL:
the effect is the best i have seen from 8 so far!
Posted by: Aida Mack at March 14, 2006 06:15 AMtruley awesome.
Please please show us how its done!
URL: http://www.aidanmack.co.uk
Great stuff man, i necer seen something like that, continue to make so cool stuffs...
Posted by: Frank at May 14, 2006 11:34 PMURL:
POST the .fla
Posted by: spound at May 17, 2006 02:44 PMURL:
Check this out:
Posted by: olli at October 16, 2006 04:41 PMhttp://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
URL:
Any chance of releasing the source Grant?
Posted by: Don at November 1, 2006 01:45 PMURL:
Any chance of the code for this man it is a great effect.
Posted by: Andy at November 7, 2006 08:51 AMURL:
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?
/\/\
Posted by: Myk at May 4, 2007 12:10 AMURL: http://www.remotelyyours.com
Go you cheeky little tinker, stop teasing us and release the code
Posted by: dabush at May 23, 2007 06:36 AMURL:
Wow amazing! Any chance of a tutorial on how to do this?
Posted by: Mike at August 9, 2007 03:16 AMURL:
Just where is this code you speak of? :)
Posted by: Laura at August 8, 2008 01:47 PMURL:
okay.... WHERE IS THE CODE?! GIMME!!!!!!!!!
hi... :$
Posted by: Jess Falon at October 7, 2008 12:20 AMURL:
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
Posted by: Patrick William at November 7, 2008 11:00 AMURL: