Multitouch with Actionscript 3 and AIR 2.0

AIR 2.0 is out with a BETA version on labs since a couple of weeks ago more or less.
It introduces a lots of new features like UDP protocol, Socket server implementation, access to raw micrhophone data, multitouch and gesture support and so on.

When I see multitouch and gesture support I start to think how many devices are touchscreen based and they are growing a lots in those months, so I start to investigate about that features.
First of all I suggest to read a cool article on devnet made by Christian Cantrell, he goes in deep about this new features and give you a lots of information about Multitouch, TouchEvent and gestures.
It’s so interesting because you can see compatibility of that features with different OS also.

In this post, I’d like to share with you a little sample on how you can create an AIR 2.0 application with Flash Builder and test it with a macbook trackpad.
In fact, you can use macbook trackpad gesture because they are supported on AIR and it’s so interesting, for example, if you want to test an application for new Wacom Bamboo pen & touch and you haven’it.
Wacom Bamboo has a new AS3 SDK for Flex and Flash that allow you to work with multitouch and gesture too, it could be so interesting if you don’t have a multitouch for an expo and you want to buy a cheap solution to give a cool interaction for your possible new clients.
Bamboo has also the availability to create “minis” that are applications dedicated to Wacom Bamboo, but you can read more at Wacom developer website.

So, in this sample we load an external image and we use gesture to try our macbook trackpad:

package {


import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TransformGestureEvent;
import flash.text.TextField;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;


public class MultiTouchSample {


Multitouch.inputMode = MultitouchInputMode.GESTURE;
private var sq:Sprite;


public function MultiTouchSample() {


sq = new Sprite()
addChild(sq);


this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, scaleObj);
this.addEventListener(TransformGestureEvent.GESTURE_PAN, panObj);
this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotObj);


var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(Event.COMPLETE, addImg);
l.load(new URLRequest("img/sample.jpg"));
}


private function addImg(e:Event):void{
sq.addChild(e.target.content);
sq.scaleY = sq.scaleX = .2;
}


private function rotObj(e:TransformGestureEvent):void{
sq.rotation += e.rotation;
}


private function panObj(e:TransformGestureEvent):void{
sq.x += e.offsetX * 2;
sq.y += e.offsetY * 2;
}


private function scaleObj(e:TransformGestureEvent):void{
sq.scaleX *= e.scaleX;
sq.scaleY *= e.scaleY;
}
}
}

You can see that is so simple work with gesture, a couple of suggestions before starting work with them:

  • remember to verify which gesture are supported on your system, more information you can read on devnet article about multitouch and gesture
  • TransformGestureEvent is event class dedicated to gesture
  • you can use TouchEvent also

Feel free to leave a comment and thank you to visit this blog.

Advertisements

11 thoughts on “Multitouch with Actionscript 3 and AIR 2.0

  1. Hi Luca

    great post, thanks for sharing!

    I’d like to add a great set of libraries to work with tangible interfaces: Touchlib. It supports custom devices and is available for many languages (included AS3).

    Ciao

  2. Hi Luca
    I had tried the code you post in this artical, but it seems couldn’t use in many photos in the same time, in case one user transform on a photo,the other person can’t transform another photo.My English is not good, but I hope you know what I mean,and give me some advise, thank you very much.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s