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
SWFLoader
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
Nice example…
By: Sudarshan Apte on May 17, 2008
at 11:38 am
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,
Kishore
By: Kishore on May 21, 2008
at 11:43 am
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);
data.draw(drawingPane);
navigatorImg = new Bitmap(data);
navigatorImg.width = navigatorWidth;
navigatorImg.height = navigatorHeight;
~Tushar
By: Tushar on May 21, 2008
at 8:20 pm
Can i ask you one stupid question?
can i use flex to make a save file for a swf ?
By: Zumiman on June 3, 2008
at 10:40 pm
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…
By: Xavier on June 23, 2008
at 9:03 am
Excellent site!,
By: Sidney on November 27, 2008
at 11:18 am
Keep a good work man!,
By: Cass on November 27, 2008
at 3:02 pm
Excellent site!,
By: Chesley on November 27, 2008
at 8:11 pm
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
By: Taryel on January 14, 2009
at 3:35 pm
This is due to cross-domain policy. Instead of doing this, click ‘Load Image’ for default image.
By: Tushar on January 14, 2009
at 3:40 pm
That is the one that is not working
By: Taryel on January 14, 2009
at 3:42 pm
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.
By: Taryel on January 14, 2009
at 3:55 pm
I tested it just now and is working fine.
By: Tushar on January 14, 2009
at 5:40 pm
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?
By: Taryel on January 14, 2009
at 6:52 pm
Sure you can use it. I will be happy to see your application.
By: Tushar on January 14, 2009
at 7:27 pm
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.
By: kenneth on January 29, 2009
at 9:15 am
it’s working fine. image is around 1.5 mb…
By: Tushar on January 29, 2009
at 9:19 am
how can I change the picture?
By: edward on January 29, 2009
at 9:48 am
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 .
By: vijay on February 6, 2009
at 7:38 am
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
By: edward on February 6, 2009
at 10:26 am
Hi Tushar,
Nice example. But the Source link is broken.
Can you share us the source please.
Thanks.
By: Praveen on May 12, 2009
at 10:15 am
thanks, this came handy!
needed on a game map builder.
By: Rafael Belvederese on June 16, 2009
at 8:38 pm
I Cant acces to the source. please send it!!! thx
By: Slim on August 7, 2009
at 12:23 pm
Hi, your example has inspired my own solution: http://www.daveoncode.com/custom-flex-image-navigator-component-zoom-drag-photoshop/
By: Dave on August 27, 2009
at 7:47 am
That’s really cool Dave. Zoom part is missing in my example
By: Tushar on August 27, 2009
at 9:23 am
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.
By: kanti on September 22, 2009
at 9:14 am
Too bad your links are dead.
Could you send me the source code?
By: Joris on February 17, 2010
at 10:28 am
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
By: Rakesh.chaturvedi.mathura.u.p.reportar on February 11, 2011
at 9:00 am