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.

17 thoughts on “New Flex Component: ScrollImage”

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s