Make a Flex/AIR scroller with an HGroup "snap" to each item when scrolling completes

I'm developing an app for ANDROID devices using Flash Builder Burrito and am having trouble figuring out how to accomplish one aspect of my app.

I have an HGroup inside of a Scroller. The HGroup has images that are 400px in width and I have the width of each HGroup column set to 400px. Although the number of items is dynamic, assume I have 10 images in the HGroup. The width of the Scroller and Viewport is set to 400px.

So far so good -- the user can see a single image within the scroller. The user can then scroll left or right using touch or mouse and see each image. But here's where I'm stuck. I want to make it so that when the user STOPS scrolling the scroller then "snaps" an image into view. In other words, I don't want half of one image and half of another image in the viewport.

Seems pretty straightforward but I can't figure it out. Part of the issue开发者_高级运维 is that there doesn't seem to be an event to use for this purpose. I know I can hook in to PropertyChangeEvent.PROPERTY_CHANGE or MouseEvent.MOUSE_UP/TouchEvent.TOUCH_END (which is what I'm doing now) but that event doesn't really give me what I need.

I really need an event that fires when the user releases the mouse as part of the scroll or lifts their finger off the device as part of the scroll. And then I need to wait for the scroll to stop. For example, if I do a really fast swipe I need to wait for the scroller to stop or almost stop before I perform the snap. The event fires as soon as I let go of the mouse or take my finger off the tablet, so if I alter the horizontal scroll pos then it gets overwritten by the "slowing down of the scroller".

By the way, I know I can use modulus logic to show each image "whole". That's not where I'm stuck -- I'm stuck at which event to use to know WHEN to perform this mod logic.

Note that what I've already developed works just fine if I slowly scroll and then let off the mouse. It's only when you slide more rapidly that it ceases to work.

Here's my partially working code:

private function onVehicleScrollerMouseUp(event:Event):void
{
    snapScroller();
}

private function onVehicleScrollerTouchEnd(event:Event):void
{
    snapScroller();
}

private function snapScroller():void
{
    // If the user didn't stop at an interval of 400, snap to that interval now
    var newScrollPosition:uint = vehicleScroller.viewport.horizontalScrollPosition as uint; 
    var modScrollPosition:uint = newScrollPosition % 400;
    var snapScrollPosition:uint;
    if (modScrollPosition == 0)
        snapScrollPosition = newScrollPosition;
    else
    {
        if (modScrollPosition <= 200)
            snapScrollPosition = newScrollPosition - modScrollPosition;
        else
            snapScrollPosition = newScrollPosition - modScrollPosition + 400; 
    }
    vehicleScroller.viewport.horizontalScrollPosition = snapScrollPosition as Number;
}

Thanks in advance!

---

Multitouch.inputMode = MultitouchInputMode.GESTURE;

Then listen to gesturePan and/or gestureSwipe events.

---

The touchInteractionEnd event will dispatch after the user has released their finger and the scroll animation has stopped. I ran into this issue when my page snapping broke randomly and needed to manually snap to some page.