Flash 8: Magnifying Glass Demo

I’ve been prepping for my Macromedia MAX talk, building demos and polishing slides. One of the demos needed a magnifying glass, and rather than just build out a boring square one I decided to go all out with the new expressiveness features and build a nice visual one incorporating a photographed frame, realistic lens shading, lens distortion (with DisplacementMapFilter), alpha masking, and a drop shadow.

I’m still thrilled by how easy it is to do these kinds of advanced effects in Flash 8 (<40 lines of code). This is a quick hack together, but I think I'll polish, componentize, and release the magnifying glass after the Flash 8 release. The latest version of the Flash 8 player is required.

If you’re interested in seeing the details of how it was built, I’ll be tearing it all apart at my upcoming Toronto workshop.

I’ve posted a slightly better demo here.

Grant Skinner

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

@gskinner

5 Comments

  1. Very cool Grant. Only comment that I’d make is that the distortion isn’t quite realistic – unless you’ve got a pretty poorly made magnifying class, there isn’t too much noticeable distortion. And if there is, it’s pincushion or barrel distortion, which is pretty difficult to mimic with the Flash 8 displacement filter.

    Still, pretty sweet. 🙂

  2. You can do some pretty good stuff with the DisplacementMapFilter. I wrote a quick viewer for panoramic VRs. Check out http://www.bitwerks.ca/flashvr/index.html

  3. Very interesting article! Wonderful baterfly!

  4. i want test Flash Magnifying Glass

    bat i ned *.fla fiel

  5. Hi: First of all – congratullations, it looks very cool.

    Maybe you will be willing to answer:

    Is there a way to have animated and ACTIVE buttons only inside the glass?

    I’ve been trying to build a map with points of interest, but the map is to small to show them all, s I thought of a magnifying glass, with small image without the points (buttons) and WITH them on the larger image. The problem is that the magnifying glass is a mask… SO, you can see, but buttons? They have to work, be animated and be linked. One solution is two separate windows: small, with let’s say a rectangle, and the magnified section next to it. The buttons ofcourse work. But that requires 3 windows: small, magnified and the one to display info. Maybe you know?

Comments are closed.