Aug 07 2009
ImageNavigator
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:
- put the folder “com” under src folder in your Flex project
- create a new XML namespace in your Application: xmlns:doc=”com.daveoncode.ui.*” (this is not necessary if you will use ImageNavigator with Actionscript)
- create a Canvas with an Image inside
- 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:
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
August 27th, 2009 2:24 am
Nice example…
September 18th, 2009 2:00 pm
This is great. Good job!
October 27th, 2009 9:10 am
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?
October 27th, 2009 9:21 am
Hi JJ! You could see the code by right clicking on the Flex app (anyway this is the source: http://www.daveoncode.com/_dave_stuff/flex_components/ImageNavigator.mxml).
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
February 11th, 2010 11:47 pm
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.
May 7th, 2010 3:53 am
Is there anyway to use this with a UIComponent rather than an image?
May 7th, 2010 5:21 am
Unfortunately is not possible, it will need an heavy code refactoring :P
May 27th, 2010 11:31 am
Hi,
nice comp. How can i implement the showZoomSlider ?
Thanks in advanced.
May 27th, 2010 11:41 am
Sorry, i see. tx
March 6th, 2011 9:31 am
Navigator doesn’t work in flash builder 4 properly :(
I can’t navigate around my Image by dragging this red rectangle…
April 6th, 2011 5:19 am
Solution i’ve found: in ImageNavigator.as -> createThumbPointer() you need to add at least
this._thumbPointer.setStyle(“backgroundAlpha”, “0″);
or to add some backgroundColor…
August 21st, 2011 10:29 pm
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.
October 3rd, 2011 11:44 pm
its really usefull. pls help me to get the code for adding more then one image in this same engine