5,880 views 23 comments

Introducing AS3 Multitouch Gesture Demo Application/Utility

On my last project I had to use a gesture to initiate an event. Due to this, I recently started experimenting in creating a simple multitouch version of some gesture engines that are available. I’ve come across three that are already available in AS3 and chose to start with the $1 gesture algorithm http://depts.washington.edu/aimgroup/proj/dollar/. It only seems fitting to start with this one since Andy Wilson of microsoft research (and many multitouch devices) had a hand in it’s development.

 Introducing AS3 Multitouch Gesture Demo Application/Utility

Like most algorithms, this one matches points drawn with a template that’s already stored. After the gesture is finished, it is matched up against templates in the database and given a percentage of how much it matched it’s closest template (from 0-1). One of the coolest things about this engine is that it’s orientation-less. This means, no matter how you’re orientated on the surface it’ll still recognize the gesture.

The main thing I contributed to the already created $1 gesture port was the ability to have multiple simultaneous gestures occurring at once. This means a single user can perform more than one gesture at a time or multiple users can perform their own gestures while someone else is using the device. However, there are flaws with this algorithm that I’m not fond of  that are performance (speed) related. I’ve only tested with up to 4 touches though so if someone can test with more, please let me know how it runs.

Currently, the demo isn’t fully segregated form the core gesture classes and therefore there’s still some work to be done so that the gesture classes can be used without the demo itself. In the meantime, go ahead and test this out and make sure to give some feedback; it also works with the mouse. The demo allows you to draw a gesture and if it matches on in the database, that gesture will ‘light up.’

The tolerance is set at 80% and therefore if a gesture doesn’t match 80% of a template, it’s not recognized. Both the source and swf file are included. To test the demo, just load up the TouchGestureDemo.swf in flashplayer or a web browser.

Stay tuned for more on this as i’ll show the basics for using this in your own projects in case you need help.

Thanks to Tito (Mathieu Vibrel) and the pyMT crew for pointing me in the right direction.

downloads icon Introducing AS3 Multitouch Gesture Demo Application/UtilityMultitouch Gesture Demo
Downloads: 12439
Size: 102.8 kB

Did you enjoy this post?

Comment Below , Follow Me on Twitter , Like Me on Facebook , or Network with Me on Linkedin

  • http://www.peauproductions.com Nolan (PeauProductions)

    Works well, though the bottom row is hard to work right. Had to do the gestures multiple times to kinda get the hang of it, especially the curly braces.
    I tested it with my stylus on my DELL XT tablet, so it may work better on a MT touch screen.

    • Vniversum

      Hi,
      Should this work on an Eclipse Plugin? I want to create new gestures

  • vahid

    thank you seth i’ll try and send you feedback

  • http://amitsarangi.wordpress.com Amit

    nice work seth . Amazing works . Keep it up .

  • http://www.sparsh-i.com vivek

    awesome.. :)

  • http://txzone.net/blog/ tito

    Nice, you did it :)

  • M Tall

    Very cool Seth! Multiple simultaneous gestures is a nice addition!

  • http://www.sethsandler.com SethSandler

    Thanks guys! Hopefully this will find some useful applications :)

  • http://adam-meyer.com Adam Meyer

    This is really great seth.

    I did some usability testing for a PHD at brown university a few years back doing something just like this for tablet computers. The one thing I think really needs to be hashed is allowing for ambiguity of creation.

    When I draw a star, it is actually backwards from that. So it never recognizes it even though it is the same shape. So building in some way so that all versions are recognized would be great.

  • http://www.sethsandler.com SethSandler

    That’s a good point Adam.

    Although, it’s somewhat questionable if that’s the behavior people would want. Personally, I’d use this as a gesture recognition and not shape/symbol/alphabet recognition. So that means that creating the right symbol, but with the wrong gesture isn’t really the same thing. For example making a ‘C’ starting from the top vs starting from the bottom might trigger two different behaviors (since they’re two different gestures) although the result is the same. Since it’s orientation-less, if it was also ambiguous shapes 6 and 11, 9 and 10, and 13 and 14 would all be considered the same. I get what you mean though; both solutions would be highly usable for various scenarios. :)

  • Pingback: Blog.LitStudios.com

  • David

    i downloaded this demo but i dont know where to go from there. i have the files saved but no matter what i try it just wont work.

  • dragon fly

    me too .. i downlaoded but the files are in unknown format .. i ahve tuio and ccv and quicktime(if thts req) bt nothing happening.. m missing sumthign basic?

  • http://www.sethsandler.com SethSandler

    There’s a swf file included which is the application. The rest of the files are the sourcecode in which you need Flash to use.

  • Ash

    Should this work on a MacBook Pro running 10.6 + with a track pad… I can’t get any Flash gesture code to work. Many thanks for your help in advance.

    • http://sethsandler.com/blog Seth Sandler

      No, this isn’t for a mouse or trackpad device. It’ll only work with multitouch table/pads that are using the TUIO protocol. Like here: http://sethsandler.com/multitouch/mtmini/

  • Rodrigo Cespedes Daza

    Any idea as to how I can use this to initiate key events?

    like… make gesture “–>” initiate a keystroke “ctrl+n”??

    thanks for the help!!

    I’m trying to connect this for flash presentations also (so that a gesture initiates a key event that in turn goes to the next slide for example)

    • http://sethsandler.com/blog Seth Sandler

      You can dispatch events in flash using dispatchEvent.

      Like  dispatchEvent(new KeyboardEvent(KeyboardEvent.KEY_DOWN,true,false,ch arCode,keyCode,0,ctrlKey,altKey,shiftKey))