Tagged: touchscreen Toggle Comment Threads | Keyboard Shortcuts

  • pit 4:24 pm on February 23, 2009 Permalink | Reply
    Tags: , , , gestures, , touchscreen   

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

     

    • 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.

  • pit 12:16 am on October 4, 2008 Permalink | Reply
    Tags: amms, , , , jsr234, touchscreen   

    Nokia S60 5th edition and Java: pointerPressed() to the rescue? 

    Let’s be honest: how many of you usually implement pointer handlers when writing Java ME applications?

    It’s a matter of fact: touch-based devices are mostly Windows Mobile based, and there’s never been deep love between Microsoft smartphones and MIDlets. SonyEricsson and Motorola tried the way with some similar devices too, but without great success, cause also an audience (and a technology) not yet mature enough for the mobile touch revolution, officially started by the loved/hated (choose the one you prefer) iPhone.

    Now that Nokia finally introduces touchscreen on its top devices, things should finally start to change. Some Java ME frameworks (e.g.: TWUIK) already offer powerful touch-based interfaces (just check out their video gallery), but I’ll bet my 2 cents that we’ll see a whole lot more iPhone-style Java ME apps in the next few weeks.

    Touch apart, for those of you wondering about the long awaited and ever wanted OverlayControl and brothers from AMMS, no luck: 5th edition still lacks them all and, as S60 3rd edition FP2, only supports music and audio3d capabilities.

    Generally speaking, S60 5th edition introduced really (really!) few news for Java developers (apart from the touch interface, of course): Is this a symptom of Java maturity, or of its approaching deadline? And, above all, isn’t this question a bit old..?

     

    • tiger79 9:11 am on October 6, 2008 Permalink

      well its nice to see nokia taking over some succesfull formulas.. it’s always better to steal a good idea than create a bad one urself :D
      and i’m one of those who actually believe j2me is approaching its deadline.. too many (better) options are available or are coming (iphone/android)… if j2me was a platform/language that is evolving it would be otherwise, but we have been waiting 4 years now for midp 3.0 and still its only a draft.. guess it might come out in a year or two (maybe) but the market will be so fragmented at that point that it will be a suicide mission…
      just my 2 (pessimistic) cents ;)

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel