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 :)

Be Sociable, Share!