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

28 thoughts on “Flex – Image Navigator Example

  1. Tushar,

    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,

  2. 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;


  3. 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…

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

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

  6. 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?

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

  8. Tushar,

    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 .

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

  10. Hi Tushar,

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


  11. Hi,
    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.

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