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.
…that is so cool. Thanks for sharing this great demo. Any plans to release some of the code?
Yes, I’ll definitely be releasing lots of code after the release (or at least after I get back from my honeymoon). 🙂
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.
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
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!
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.
Very nice effect! Thank you.
Please, take a look to my flash 8 effects:
http://antonvolkov.com/flash/biotexture/
http://antonvolkov.com/flash/electro1/
http://antonvolkov.com/flash/electro2/
http://antonvolkov.com/flash/eraser/
http://antonvolkov.com/flash/textburning/
what if you set the _quality = “best”; ?
So, I would really like to see the code of this great piece of work.
Any chance to get it?
Grant, I really like you work! Keep it up! When are you going to distribute a code for this magnifier? Tx
Wow, that’s one of the neatest effects I’ve seen, next to the webcam interactive ones
plz send the code to magnigy the image
the effect is the best i have seen from 8 so far!
truley awesome.
Please please show us how its done!
Great stuff man, i necer seen something like that, continue to make so cool stuffs…
POST the .fla
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
Any chance of releasing the source Grant?
Any chance of the code for this man it is a great effect.
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?
/\/\
Go you cheeky little tinker, stop teasing us and release the code
Wow amazing! Any chance of a tutorial on how to do this?
Just where is this code you speak of? 🙂
okay…. WHERE IS THE CODE?! GIMME!!!!!!!!!
hi… :$
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
Can you please post the FLA file? Thanks~!
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?
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!
Thanks James for the Map! Worked well.