Getting started
There are multiple ways how to use the tuio-as3 library. This article will explain the "easiest" one that will get you results pretty quickly and from which you can continue to explore the library's features.
The simplest way to get a project going is to use the TuioManager.
The TuioManager will dispatch TouchEvents onto objects on the stage which you can handle like normal MouseEvents.
At first we need to create a TuioClient like this:
-
var tc:TuioClient = new TuioClient(new TCPConnector("127.0.0.1", 3000));
The TuioClient is the base class that receives the data from your tracker and converts it into Objects which the TuioManager will use to do his thing.
In order to receive tuio data the TuioClient needs a connector. Here I used the TCPConnector but there are two additional ones included in the library and you can even write your own connectors. For more information on the connectors you can read the connectors article.
After we have the TuioClient up and running we can initialize the TuioManager.
The TuioManager is a singleton class so we won't create an instance via "new TuioManager(...);" but will use the init(...) function like this:
-
var tm:TuioManager = TuioManager.init(stage, tc);
Now TouchEvents should be dispatched on your stage.
Here's a little snippet of code for testing touches on a rectangle.
-
tc.addListener(TuioDebug.init(stage)); //a little help to display touches
-
-
//draw a simple rectangle to the stage
-
myRectangle.graphics.beginFill(0x6633cc);
-
myRectangle.graphics.drawRect(0, 0, 200, 200);
-
-
//add the event listener to the rectangle
-
myRectangle.addEventListener(TouchEvent.TOUCH_DOWN, function(e:TouchEvent):void {
-
trace("touchdown! " + e.tuioContainer.sessionID);
-
});
-
-
//add the rectangle to the stage
-
stage.addChild(myRectangle);
In the first line of the snippet I used the TuioDebug class to display the touches directly on stage without any additional scripting needed. You can find more information on the TuioDebug features in the article on debugging.
And that's it! Congratulations you have just created your first tuio-as3 lib based multitouch application.
August 19th, 2010 - 14:49
Hi there,
thanks for your blog.
I have a trouble with starting the program.
When I follow your steps and whant to run the program I get 20 errors.
Eg.:\src\org\tuio\TuioManager.as(172): col: 43 Error: Call to a possibly undefined method TouchEvent.
target.dispatchEvent(new flash.events.TouchEvent(flash.events.TouchEvent.TOUCH_BEGIN, true, false, tuioContainer.sessionID, false, local.x, local.y, 0, 0, 0, target as InteractiveObject));
^
What did I made wrong??
Cheers,
Kadri
August 19th, 2010 - 19:27
Hi you have to run your project in flash 10.1 or air2.0. Which means that you need Flash CS5 or flex sdk 4.
If that isn’t possible you can try to comment out all lines in the TuioManager containing “flash.events.TouchEvent”. That should fix the compiler warnings.
I hope that helps, if not let me know.
August 23rd, 2010 - 18:26
Hi,
I’ve used your stuff in the past, and was excited to see the new scaling and dragging gestures. But in trying the latest release, with flex sdk 4 and flash player sa content debugger, im getting the same errors for TouchEvents and TransformGestureEvents when I try the GestureManagerExample. I noticed that the adobe description of TouchEvent says they are only supported on windows, and im using a mac. Do you know if there is a way to get your latest stuff (the new gestures) working on a mac? I tried the commenting out suggestion above and that didn’t help.
thanks, jessica
August 23rd, 2010 - 19:06
That is really strange. I’ll try to reproduce that on my mac.
update: I just tried and it seems to work fine with the newest version of FlashBuilder. Are you sure you compile & run your project either for/in flash 10.1 or air2.0?
August 24th, 2010 - 05:00
Thanks for checking, I’ll try it with FlashBuilder instead.
Jessica