September 9, 2007 

New Flex Component: ScrollImage

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.

  • auzn

    There is a BUG when I use the wheel. :)

  • http://www.arpitonline.com arpit

    @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?

  • http://www.arpitonline.com arpit

    @Shan:
    How could I refuse ;) . Added zoom in/out as well as click+drag on the image. Check out the updated example and source.

  • http://www.hedberg.biz hedberg.biz

    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 ?

  • Shan

    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.

  • Shan

    Oh, and this is still sweet. Once the bugs are worked out, you should put it up on the Flex Exchange.

  • http://www.hedberg.biz hedberg.biz

    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.

  • http://www.arpitonline.com arpit

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

  • http://www.iotashan.com Shan

    @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 :)

  • http://www.hedberg.biz hedberg.biz

    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.

  • Pingback: Picture this! at Aral Balkan

  • Pingback: code zen » Blog Archive » My ScrollImage component on Aral’s GAE SWF project :)

  • Pingback: My experience with Git and why I think Open Source projects should be released on Git | code zen

  • ton

    That’s possible for drag text from text list and drop in image?

  • zyry

    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;

  • http://www.podlipsky.net/ Šimon Podlipský

    I don’t know…but in my opinion it’s better to use following code, isn’t it?

  • http://arpitonline.com/blog arpit

    @Šimon
    Like I mentioned in the post above, this way you are really just using one component, not two (not to mention the VBox is a Container which is event heavier than a UIComponent). Flex controls are pretty heavyweight so the fewer you use the better for the end user.