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

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

This component is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
You may obtain a copy of the License at:

Here is it in action:

The asdoc is available here:

Get it!
You can download ImageNavigator here:

  • Nice example…

  • Arancione

    This is great. Good job!

  • Great example, thanks! I tried to use the useImageXY=”true” option like this:

    doc:ImageNavigator image=”{image1}” width=”154″ height=”150″ useImageXY=”true”

    But it worked the same as your top example. Could you provide the code you used to do the bottom example?

  • Hi JJ! You could see the code by right clicking on the Flex app (anyway this is the source:

    In order to use image X and Y you must implement the drag logic by yourself (using startDrag() and stopDrag()), then the component will update the navigator thumb according to image position

  • I can use this as mapping development. I have an old bad-ended project. This would definitely help me to zoom in and out by plugin the TweenMax section. Come visit my web by the way.

  • Dan

    Is there anyway to use this with a UIComponent rather than an image?

  • Unfortunately is not possible, it will need an heavy code refactoring :P

  • toni lopez


    nice comp. How can i implement the showZoomSlider ?

    Thanks in advanced.

  • toni lopez

    Sorry, i see. tx

  • csh

    Navigator doesn’t work in flash builder 4 properly :(
    I can’t navigate around my Image by dragging this red rectangle…

  • csh


    Navigator doesn’t work in flash builder 4 properly :(
    I can’t navigate around my Image by dragging this red rectangle…

    Solution i’ve found: in -> createThumbPointer() you need to add at least
    this._thumbPointer.setStyle(“backgroundAlpha”, “0”);
    or to add some backgroundColor…

  • suchand

    thank u its very usefull. shall i get the coding for second image with the slider for zoom same as in first example? also when i used second example its not gragging while trying to drag the rectangular box.

  • raj

    its really usefull. pls help me to get the code for adding more then one image in this same engine

  • This is a nice component. But it is not working for image with swf content. Do u have any updated version of this comp?