22 November 2010

Simple Gesture-Like Kinetic Scroller in Flex 4

KineticScroller

In learning the new features in Flex 4, I ported a kinetic scroll component from Flex 3 that adds a decaying motion to view ports when you apply a 'swipe' motion with the mouse or your finger, for touch screens.

I created a swc file that you can drop into the lib folder of a project. Then, simply create an instance of kineticScroller and assign the allowable directions (vertical, horizontal or both), and set the decay speed, to a group box contained within a skinnableContainer or whatever, like:
var ks:KineticScroller = new KineticScroller(myGroup, KineticScroller.BOTH, 7);
I'm eager to start in on the new gesturing interfaces in Flex, but this project has really been more of a learning tool for me, and anyway I'll need to maintain some backward compatibility if and when I port some of my existing touch panels.

View the example and download the swc here. Includes a quick ASDoc, but just look at the example code to see it in action.