Andrew Trice

Wednesday March 14, 2007

Free ImageZoomer Flex Component!

Last week I created this component just for fun, and now I'm offering it to anyone who stumbles across it. It's a control that will allow you to load an image and interact with it. You can zoom in, zoom out, pan, etc... I had the idea to create it based on a Flash 8 project that I worked on last year. It also shows how you can use Flex effects to create a higher level of interactivity with your components, and how to use component masking. It's really pretty easy to use:

<cynergy:ImageZoom id="zoomComponent"
   source="{ list.selectedItem._content.@url }"
   bottom="0" left="0" top="0" right="0" />

The image loads centered initially at 100% scale. While it's loading, you get a progress update (percentage as a text string), which can easily be updated to be a graphic, or something more dynamic. Once the image is loaded, you can zoom in/out by using the mouse wheel or by using the zoom functions (examples in demo below). You can also zoom in by double-clicking on the image. All of the scaling is done based on the scale of the image, not the actual dimensions, so smaller images may not appear to scale at the same rate as large images. In reality, they do: this is because the scale is incremented by a percentage of the original size. To correct this, I also implemented a "zoomIncrement" parameter. The "zoomIncrement" defines the increment to change the scale each time you zoom in/out. To pan the image, you just click & drag.

I also added another feature that I think is pretty handy: I call it "MouseFollow". When this option is turned on, any zoom in/out by mouse wheel or double-click will use the MouseFollow logic. The mouseFollow logic uses the mouse position to be the point of origin for the zoom. This means that if you hold the mouse over the top left corner, the zoom will zoom in/out based on that top left corner. IF the mouse is in the center of the image, it will zoom into the center. If the mouse is in the bottom right, it will zoom in/out based on the bottom right corner.

Here's a demo application... It is "yet another" flickr viewer. There are so many of these around, and here I go adding another one. :) It uses the flickr rss feeds for the image search (based on image tags), rather than the flickr api. I did this purely to keep the example simple. The rss feeds limit you to 20 results per search, so you can't really drill into the results coming back. It also uses the SuperImage component by Ely Greenfield for the list images, and a customized preloader based off of the version by Ted Patrick. Full source code is available below:


...and yes, I'd rather be fishing :)

• Launch Demo Application
• View Source
• Download Source

Known issues:

• Mouse Wheel does not work on some Macs. I think this is a mac issue or mac/flash player issue b/c I have seen the same behavior on other applications.
• Zooming in REALLY far on an image eventually causes it to disappear from the screen. I'm just using the mx:Zoom effect for the zooming. I'm not sure where the bug is... I haven't had the time to track it down.

This code is free, and does not have any warranty, it is offered as-is. Feel free to contact me via email with any questions/comments at andrew.trice[ at ]cynergysystems.com.