New Flex Component: ScrollImage
Posted
September 9, 2007 
Comments(15)
Comments(15)
ScrollImage is kind of like Flash ScrollPane component. The component takes any image url and loads the image putting scrollbars around it to allow the image to be scrolled. While the same effect can be created by using the Image inside a Canvas container, this implementation is much more efficient since its not creating a heavier container object.
I wrote the ScrollImage container as I was trying to understand the basic ScrollControlBase class that all controls that have scrollable content use. If you are a Flex developer, the source of the code should be very instructional. I have commented it out a bit and most of the code is self explanatory. Check the component out here and view the source here.
There is a BUG when I use the wheel.
@Shan:
).
That should be easy enough and I’ll add that (no promises though, especially on when
@auzn:
By bug you mean it doesnt work or you are getting some error message?
@Shan:
. Added zoom in/out as well as click+drag on the image. Check out the updated example and source.
How could I refuse
Cool, but the scrollbars do not look nice, could you possibly do it like I have done on this site in Flash: (choose some project from the menu to look at the effect) http://www.butter-briceno.com ?
The only problem is the click & drag goes in the opposite direction as it should. When I drag the mouse to the right, the image moves to the left. Also, it feels like when you use the click & drag method, that it doesn’t stop when you hit the edge of the image. While yes, the image stops, if you keep clicking and dragging in one direction, and then try to drag the image back in the opposite direction, you have to drag back as many times as you dragged out “past” the image.
That probably didn’t make much sense. Click & Drag from one edge to the other like 6 times, then try to drag once in the opposite direction. You’ll find you have to drag 6 times in the opposite direction to get the image to move again.
Oh, and this is still sweet. Once the bugs are worked out, you should put it up on the Flex Exchange.
The thing is that you shouldn’t click and drag at all. Just move your mouse slightly from the center of the image to either direction to start the scrolling. The more you move off center the faster it scrolls. Move towards the center to stop the scrolling. No clicking needed.
@hedberg
If you dont want the scrollbars and to create the effect similar to the link you pointed out, you dont need to use ScrollControlBase at all. Use that ONLY when you need scrollbars to manage scrolling. To create your effect, I would just use the Image inside a UIComponent and manage its positioning based on mouse position.
@hedberg
I’ve gotten feedback from users that the “click & hold” method of moving around, like your example shows, gives them the feeling that they can’t control it very well. I’m looking for precision, which is exactly what ScrollImage provides
I guess image scrolling by just moving your mouse over the image isn’t the world’s most user friendly way, partly because of precision problems, partly because we are not used to navigating that way. It also seems that slower computers do not handle it very well. There’s always the consideration of balance between user-friendliness and coolness, a fine line sometimes.
[...] component lets you upload photos, crop them, and rotate them. I started building it by expanding on Arpit Mathur’s ScrollImage component. It’s not complete yet but it is functional. Specifically, I don’t like how it zooms and a future [...]
[...] to scale and crop the image before he assigns it to his profile. The exciting part is Aral is using my ScrollImage component that he has extended, to handle the scroll, rotate and crop functionality. Aral has also released [...]
[...] the last couple of years I have released a bunch of libraries under Open Source licenses, usually on Google code. However the my last project, OpenPyro [...]
That’s possible for drag text from text list and drop in image?
This (in function onMouseMove):
var newHPos:Number = his.horizontalScrollPosition deltaX;
if (newHPos > 0 && newHPos 0 && newVPos <= this.img.height – this.height) {
this.verticalScrollPosition = newVPos;
}
instead of:
this.horizontalScrollPosition = deltaX;
this.verticalScrollPosition = deltaY;