Flex Image Zoom Drag Component
I finally managed to create a good Image Zoom Component with zooming, dragging, navigator and keyboard functionality. It’s build in Flex / ActionScript 3 and I think it’s a nice example of using the MVC (model view controller) pattern to prevent spaghetti code. The model doesn’t know anything about the size of the viewport and the image because that’s something only the view and the controller need to know. The model only knows the aspect ratio of the image and the viewport. When you want to zoom or move, you change the model and after that you update the view based on the values in the model. The model stores the position and size of the viewport in values between 0 and 1. This makes it very easy for the controller / view to scale it to the real size.
I also used the new ScrollRect feature and I like that thing a lot! Tip: Don’t use scaleX and scaleY to resize the large image because than you need to compensate the scale of the viewport. Resizing the image is done by changing its width and height.
I think there are still some things to be done. Depending on the shape of the viewport and image you might want to have the full image visible by adding empty space on the sides. But that’s some which should be easy to implement because of the clear MVC separation. Good luck if you try it and let me know! [rick /at/ companje /dot/ nl]
Hi Rick,
Fantastic..! Image Zoom Component is really a interesting and useful component.
I tried using the Image Zoom Component code with an AIR application., but for some reason it just doesn’t initialize. The AIR app stops with “Initializing”. Have you been successful in using the Image Zoom Component with an AIR app instead of Flex?
finally its really good work, thanx for the code, and sharing knowledge.
Thanks,
-Anish
Comment by Anish — 24 July 2007 @ 17:51
Hi Anish,
Thank you!
There shouldn’t be a difference between using it in a AIR environment or just Flex/Flash player. Only thing I can think of which can be a problem is the timing for the initialization. Thumb and Image have to be loaded both before the init of the zoom component. So try to test it by removing the complete event on the image and initialize the zoomcomponent by clicking manually on a button for example.
Good luck! Show me your results when you’ve got everything working :-)
Cheers,
Rick
Comment by Rick Companje — 25 July 2007 @ 10:19
Hi Rick,
Removing the “Complete” event handler for Image and thumbnail did the trick. It works now as expected.
Thanks a lot,
-Anish
Comment by Anish — 25 July 2007 @ 15:35
is there any modification required for using this with SWFLoader ?
I managed to get it working by changing a few Image types to SWFLoader but I get wierd results on the navigator and zoom doesn’t work….it’s just repositioning everything.
Comment by Emil — 25 July 2007 @ 22:19
Nope, should work the same. Image extends SWFLoader.
Are you sure it’s not the same problem as Anish had. If the init function is executed to early or not at all things won’t work. So please check if that’s the case in your approach.
Good luck dude.
Comment by Rick Companje — 25 July 2007 @ 22:36
The problem is that I’m trying to use the same SWF (with a different ID though) for the thumbnail…for that, I tried to force a specific width for the ‘thumbnail’.
Zoom works now, but the navigator is still acting strange…
Comment by Emil — 25 July 2007 @ 22:44
Cool.
However, one question:
Can we have it the other way around like for example:
- there is a somewhat smaller image wherein we have there a draggable shape like circle or square. When this shape is being moved, it shows the a larger portion of the image on another container or box.
- this is to work like a magnifier but instead of showing the magnified portion on the same coordinates of the magnifying object, it shows the magnified portion on another container.
Hope you could share something like this.
Thanks!
Comment by jeruel — 19 October 2007 @ 07:01
I was trying to remove the navigator from this component and I am encountering some problems that I cant seem to solve. I removed the navigator, thumb and dragger properties and removed all references of that from the mxml and the class. now the image loads but its full size and only part of it appears and the hotspots are all misplaced.
Could you please direct me towards modifying this component to not have a navigator?
Thanks
Prem
Comment by Prem — 10 November 2007 @ 21:31
HI Rick,
The demo and source files are missing please ckeck it …
Comment by Saravanan — 2 January 2008 @ 14:12