ImageNavigator is a custom Flex component, composed by a set of classes, which offers navigation features similar to navigators you can find in image editing software like Photoshop.
It’s easy to use and does all the work for you, all you need to do (once you get the zip file available at the bottom of this page) is:

  1. put the folder “com” under src folder in your Flex project
  2. create a new XML namespace in your Application: xmlns:doc=”com.daveoncode.ui.*” (this is not necessary if you will use ImageNavigator with Actionscript)
  3. create a Canvas with an Image inside
  4. create a new ImageNavigator object specifying the “image” attribute by using a reference to the previously created image

By default ImageNavigator will use vertical and horizontal scroll position of the canvas to adjust thumb’s pointer position, however you may want to move your image by dragging it (code implementation is up to you), in this case is possible to set the attribute “useImageXY” to true in order to get the right behaviour from the component (anyway a look to the source code will help you understand what I’m talking about).

Important:
Due to security restrictions imposed by Flash player you can load images from any site but can’t access their BitmapData. Unfortunately ImageNavigator need it to create the proportioned image thumb and won’t works otherwise, unless to use crossdomain.xml files (read more here http://livedocs.adobe.com/flex/3/langref/mx/controls/Image.html ).

License:
This component is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
You may obtain a copy of the License at: http://creativecommons.org/licenses/by-sa/3.0/

Here is it in action:

The Flash plugin is required to view this object.


Documentation
The asdoc is available here:
http://www.daveoncode.com/_docs/image_navigator/com/daveoncode/ui/ImageNavigator.html

Get it!
You can download ImageNavigator here: http://www.daveoncode.com/_dave_stuff/flex_components/ImageNavigator.zip