Flex – Image Navigator Example

Image Navigator

Here is a small example of creating an Image Navigator for big images in Flex.

The big image is loaded in Canvas and an Image navigator will have a small prototype of this image. A small rectangle in Navigator can be used to scroll image. Click and drag small rectangle to scroll image. This rectangle corresponds to visible area of image in Canvas.

This example demonstrates usage of:

Image control


Creating Sprite at runtime

Assigning Drag and drop functionality to sprite

Copying image using BitmapData

Controlling Scrollbar using ActionScript

Handling mouse events in Flex

Example: http://tushar.x10hosting.com/ImageNavigator/

Source: http://tushar.x10hosting.com/ImageNavigator/src/Navigator.mxml

About Tushar

Hi, I am Tushar Wadekar from Pune, India. I am an Adobe Certified Flash Developer. My Interests are: Flash, ActionScript, Flex, AIR, PHP, Ruby on Rails. You can reach me at: tusharwadekar[at]gmail[dot]com Thank you! Tushar
This entry was posted in ActionScript3, AS3, components, Flex and tagged , , . Bookmark the permalink.

28 Responses to Flex – Image Navigator Example

  1. Sudarshan Apte says:

    Nice example…

  2. Kishore says:


    I need some help.
    My problem is:

    I have a canvas where people draw/drag drop.
    I need a Navigator that reflects the contents in the canvas(drawingPane in your example) as it changes instead of the image.

    Instead of the image(in your example) how do I
    set the “drawing Canvas itself” in sync with the Navigator window that shows the smaller sized window of the large canvas with the drawing as is ?

    I am a 100% sure a geek like you would know the way out. Kindly Help !!

    With great expectations of a quick response,

  3. Tushar says:

    Use BitmapData.draw to change DisplayObject, MovieClip to BitmapData.

    On change of data in canvas you should execute following script (Considering canvas id is drawingPane):

    var data:BitmapData = new BitmapData(drawingPane.width, drawingPane.height);
    navigatorImg = new Bitmap(data);
    navigatorImg.width = navigatorWidth;
    navigatorImg.height = navigatorHeight;


  4. Zumiman says:

    Can i ask you one stupid question?

    can i use flex to make a save file for a swf ?

  5. Xavier says:

    Hello, just a question concerning the zoom the variable ‘maxZoom’ he’s not used si I don’t see how the zoom is made.

    Thank you for your answer.

    PS : sorry for my bad english…

  6. Sidney says:

    Excellent site!,

  7. Cass says:

    Keep a good work man!,

  8. Chesley says:

    Excellent site!,

  9. Taryel says:

    Its not working where do i put the image
    if i give it an image it keeps the busy cursor but not do anything else help please

  10. Tushar says:

    This is due to cross-domain policy. Instead of doing this, click ‘Load Image’ for default image.

  11. Taryel says:

    That is the one that is not working

  12. Taryel says:

    I even download the source and mount it on flex
    put and image on the apache on localhost and i try it and is the same the busy cursor keeps and nothing happen.

    thanks for the quick response.

  13. Tushar says:

    I tested it just now and is working fine.

  14. Taryel says:

    Sorry i dont now but still nothing ,the opera???, but if i want to run a test on my pc where i need to put the images. It realy is a grat example and if i made it work on my house it will be great the problem is that i am making a game and that function is very usefull for me to use so you dont mind if i use it?

  15. Tushar says:

    Sure you can use it. I will be happy to see your application.

  16. kenneth says:

    not working for me also bro. just busy cursor.

    where do we put the image, for example we want to use our local file. i’m using tomcat as my server.

    many thanks.

  17. Tushar says:

    it’s working fine. image is around 1.5 mb…

  18. edward says:

    how can I change the picture?

  19. vijay says:


    i have one problem, i am draging row of datagrid to tree , that time it showing all row values but Instead of showing entaire row i need to show image . is it possible if yes ,please can you help me in this

    Thanks .

  20. edward says:

    how can I put a flex application inside your navigator and navigate it using the minimap. hope you will reply immediately coz i really need this one

  21. Praveen says:

    Hi Tushar,

    Nice example. But the Source link is broken.
    Can you share us the source please.


  22. thanks, this came handy!
    needed on a game map builder.

  23. Slim says:

    I Cant acces to the source. please send it!!! thx

  24. Tushar says:

    That’s really cool Dave. Zoom part is missing in my example :)

  25. kanti says:

    i want to display sprite object in canvas f my mxml file. the sprite object is added in actionscript class this AS extends another AS which extends sprite.
    by doing so there is no error but no output as well.
    please help.

  26. Joris says:

    Too bad your links are dead.
    Could you send me the source code?

  27. Ek.badi.aagjani.mathura.ki.mandi.samiti.ke.plete.form.no.4.par.subah.ke.6.baje.hui.jisme.1.crore.ki.sampatti.jalkar.khaak

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s