Handling touch gestures in Flash Lite
With the release of many touch-enabled devices, as the latest Nokia 5800 XpressMusic and the forthcoming Nokia N97, applications can benefit from new ways of touch-based interactions. A typical example of these new patterns is represented by gestures: simple finger/stylus actions that allow the user to perform specific task, without the need of a precise interaction (e.g.: identify and press a specific button).
This article will explain how to implement basic touch gestures in Flash Lite. Specifically, we’ll see how to detect both horizontal (left-to-right and right-to-left) and vertical (up-to-down and down-to-up) gestures.
In the above video it’s possible to see a simple Flash Lite photo viewer, where the user can go from a photo to the next/previous just sliding finger or stylus.
The source code
Step 1. Detect touch events
First thing to do is to detect and handle touch-based events, and this can be done by implementing a MouseListener, and its onMouseDown() and onMouseUp() methods. We also define 4 Number variables to hold the x and y coordinates associated to the mouse up and down events: these will be used to detect if the touch interaction was actually a gesture or not.
So, take a new and empty FLA, and add this code on your first frame:
var startX:Number; var startY:Number; var endX:Number; var endY:Number; var gesturesListener:Object = new Object(); gesturesListener.onMouseDown = function() { startX = _root._xmouse; startY = _root._ymouse; } gesturesListener.onMouseUp = function() { endX = _root._xmouse; endY = _root._ymouse; checkGesture(); } Mouse.addListener(gesturesListener); |
The onMouseDown() function just sets the starting coordinates values, while the onMouseUp() also calls the checkGesture() function, defined below, that will check if the touch interaction was actually a gesture.
Step 2. Identify a gesture
Before trying to identify a gesture, let’s define some variables used to identify and define specific gesture types:
// minimum length of an horizontal gesture var MIN_H_GESTURE:Number = Stage.width / 3; // minimum length of a vertical gesture var MIN_V_GESTURE:Number = Stage.height / 3; // flags for each kind of gesture var UP_TO_DOWN:Number = 1; var DOWN_TO_UP:Number = 2; var LEFT_TO_RIGHT:Number = 4; var RIGHT_TO_LEFT:Number = 8; |
The MIN_H_GESTURE and MIN_V_GESTURE variables define the minimum horizontal and vertical distances that must exist between the onMouseDown() and the onMouseUp() event to have, respectively, a horizontal or a vertical gesture.
Now, we can easily implement the checkGesture() function, by getting the horizontal and vertical length of the touch interaction, and comparing them with the minimum distances defined above.
function checkGesture() { var xDelta:Number = endX - startX; var yDelta:Number = endY - startY; var gesture:Number = 0; if(xDelta > MIN_H_GESTURE) gesture |= LEFT_TO_RIGHT; else if(xDelta < - MIN_H_GESTURE) gesture |= RIGHT_TO_LEFT; if(yDelta > MIN_V_GESTURE) gesture |= UP_TO_DOWN; else if(yDelta < - MIN_V_GESTURE) gesture |= DOWN_TO_UP; if(gesture > 0) handleGesture(gesture); } |
Step 3. Handling the detected gesture
Once identified a gesture, we have to actually handle it in some way. To do it, we’ll implement the handleGesture() function, that will check the passed argument to find which is the specific identified gesture.
In this example, we’ll simply trace the kind of identified gesture(s).
function handleGesture(gestureFlags:Number) { if(gestureFlags & LEFT_TO_RIGHT) trace("left to right gesture"); if(gestureFlags & RIGHT_TO_LEFT) trace("right to left gesture"); if(gestureFlags & UP_TO_DOWN) trace("up to down gesture"); if(gestureFlags & DOWN_TO_UP) trace("down to up gesture"); } |
Further development
A lot of improvements can be done to the code presented in this article. Just some example:
- Detect diagonal gestures: by checking the appropriate gesture flags, it’s already possible to identify mixed diagonal gestures. So, basically you need to extend a bit the handleGesture() method
- Define a maximum time to perform a gesture: basically, accept a gesture only if the time elapsed to perform it is below a certain limit. This could be useful in some scenarios, to avoid detecting fake gestures.
Download source code
You can download the full source code used in this article here:
Rate this article!
If you like this article, please vote it on Forum Nokia Wiki. Thanks
Touch gestures in Flash Lite | Adobe Flash Lite 3:50 pm on February 24, 2009 Permalink
[...] Alessandro posted a new tutorial in here blog, the article will explain how to implement basic touch gestures in Flash Lite. The fllowing vedio you will see how to detect both horizontal (left-to-right and right-to-left) and vertical (up-to-down and down-to-up) gestures. [...]
Navegación gestual con Flash Lite | BlocketPc :: Flash Lite y Mobile Web 1:37 pm on March 1, 2009 Permalink
[...] ha parecido muy interesante este video de Alessandro de Jappit en el que muestra navegación gestual en Flash Lite, se nota que nuevos dispositivos como el Nokia 5800 o el Nokia N97 están en el objetivo de mucha [...]
joy 5:08 am on April 7, 2009 Permalink
this is a joss tutorial
Rich 3:10 pm on July 20, 2009 Permalink
Thanks for the tutorial. It’s great!
Aj 3:59 pm on August 18, 2009 Permalink
Hey,
This is an awesome tutorial and it’s much appreciated.
I was having some trouble assigning the gestures to soft keys.
In this tutorial, you are displaying the gestures, However for example could you please tell me how I would be able to assign the “right to left” gesture to the right key?
Thanks.
Supriya Tenany 11:18 am on December 21, 2010 Permalink
Hi,
A really good tutorial. I am only waiting for the practical implementation now. How can I check the touch functionalities on the device central? It provides me ‘Multitouch’ but I am unable to use it.