Create a Flex / AIR scroller with an "HGroup" binding "to each element at the end of scrolling

Question

I am developing an application for ANDROID devices using Flash Builder Burrito, and it is difficult for me to understand how to execute one aspect of my application.

I have an HGroup inside a Scroller. HGroup has 400 pixels wide images and each HGroup column is 400 pixels wide. Although the number of elements is dynamic, suppose I have 10 images in an HGroup. Scroller and Viewport are 400px wide.

So far so good - the user can see one image in the scroller. The user can then scroll left or right with a touch or mouse and see each image. But here where I am stuck. I want to make it so that when the STOPS user scrolls the scroller, then "binds" the image to the view. In other words, I do not want half of one image and half of another image in the viewport.

It seems pretty simple, but I can't figure it out. Part of the problem is that there is no event for this purpose. I know that I can connect to PropertyChangeEvent.PROPERTY_CHANGE or MouseEvent.MOUSE_UP / TouchEvent.TOUCH_END (this is what I am doing now), but this event does not really give me what I need.

I really need an event that fires when the user releases the mouse as part of a scroll or removes a finger from the device as part of a scroll. And then I need to wait for the scroll to stop . For example, if I am doing a very quick swipe, I need to wait for the scroller to stop or almost stop before I click. The event fires as soon as I release the mouse or pull my finger from the tablet, so if I change the horizontal scroll, then it will be overwritten by "slowing down the scroller."

By the way, I know that I can use the module logic to show each image as a whole. This is not the place where I was stuck - I was stuck in which event to use in order to know WHEN to execute this mod logic.

Please note that what I have already developed works fine if I scroll slowly and then release the mouse. This only happens when you are weakening faster than you stop working.

Here is 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!

Answer 1

Multitouch.inputMode = MultitouchInputMode.GESTURE;

Then listen for the gesturePan and / or gestureSwipe events.

Answer 2

The touchInteractionEnd event will be dispatched after the user releases his finger and the scroll animation stops. I ran into this problem when the pagination was broken randomly and you need to manually bind to a page.