Flash 8: Blueprint Magnifying Glass Demo

...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.