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 UDPConnector("127.0.0.1", 3333));
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 UDPConnector but there are two additional ones included in the library (TCPConnector & LCConnector) 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.addListener(tm);
Note that since v0.8 of the library you have to explicitly add the TuioManager to the TuioClient as listener.
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
October 28th, 2010 - 11:57
Hi Thank you for the example, but I tried this in Flash CS5 (11.02.489)and got errors on the TOUCH_DOWN event. 1119: Access of possibly undefined property TOUCH_DOWN through a reference with static type Class. I have setup the file to be of type Adobe AIR 2.0.
My code is as follows:
import org.tuio.*;
import org.tuio.connectors.*;
import org.tuio.debug.*;
import org.tuio.TouchEvent ;
var tc:TuioClient = new TuioClient(new TCPConnector(“127.0.0.1″, 3000));
var tm:TuioManager = TuioManager.init(stage, tc);
tc.addListener(TuioDebug.init(stage));
rect.addEventListener(TouchEvent.TOUCH_DOWN,onTouchDown);
//rect is a rectangle symbol I placed on stage manually
function onTouchDown(e:TouchEvent):void{
}
Any suggestions would be most welcome
October 28th, 2010 - 22:36
Mh this seems to be a result of the name conflict between the library’s TouchEvent and the native TouchEvent, make sure you declare the listener for org.tuio.TouchEvent.TOUCH_DOWN
The library’s TouchEvent will be renamed in the next release to fix this problem.
December 13th, 2010 - 00:57
I got a problem with my socket, is it common?
ioErrorHandler: [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2031: Socket Error. URL: 127.0.0.1"]
December 22nd, 2010 - 04:58
Hi,
I am new to flash and programming..
Learnt the concepts out of interest and tried this as per guide.
I use flash CS4(AS3.0). Does the above guidebook work only with CS5 ?
I get this error
1046: Type was not found or was not a compile-time constant: TouchEvent.
Moreover, I would like to know where to write the TuioClient and TuioManager. Should they be in a same AS file or different one ?
Sorry for basic questions. I started with Flash a month back and worked a lot with FLA and have less knowledge on AS files and using the package structure.
Please help me on this.! If I can have the rectangle demo working, I can extend it over the new flash game which I am making now.
Thanks ,
Jack
[cooljackDJ@hotmail.com]
December 22nd, 2010 - 05:21
I resolved the previous problem..
I did not import the libraries and hence got the Error. (import org.tuio.*; did the trick)
Now I run the FLA and get the output. But i am not able to check it in the TuioSimulator which i downloaded.
I figured out that the problem is with the AS files.
1-Let me know how I must associate the AS files with the FLA. ?
2-Also I want to know where the AS files shd be saved ? with the FLA or shd i replace the tuioclient and the tuiomanager in the library ??
Thanks in advance.
December 23rd, 2010 - 19:34
What exactly is your problem?
As for associating the library with you Flash project you can put the “org” folder in the same directory as your .fla or you can put the org folder somewhere else and point to that location in your project preferences in the classpath settings.
You don’t have to replace anything in the library except when you try to target flash 10 which could produce some errors if you use the TuioManager because of the “dispatchNativeTouchEvents” functionality which needs the native Moultitouch api which is only supported since flash 10.1 The you simply have to remove all the parts accessing “flash.events.TouchEvent”.
December 29th, 2010 - 10:54
I have got the following error when i tried to follow the above stated rectangle tutorial..
1- 1180: Call to a possibly undefined method TCPConnector.
referencing->var tc:TuioClient = new TuioClient(new TCPConnector(“127.0.0.1″, 3000));
2- 1120: Access of undefined property TuioDebug.
referencing -> tc.addListener(TuioDebug.init(stage));
Please help me on this.. I this is my first try at flash development .. so pls explain in a little detailed manner.. I have CS4 and hence, I will discard (commenting it will do right ? ) the native touch events..
Pls tell me how i must proceed.. thanks a lot..
Jack !
December 29th, 2010 - 20:51
Hi, make sure you have the import statements for org.tuio.debug.TuioDebug and org.tuio.connectors.TCPConnector
And yes commenting out the native touchevent parts should be enough to make it work in cs4
February 20th, 2011 - 12:24
HI,
I got
ioErrorHandler: [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2031: Socket Error. URL: 127.0.0.1"]
Error.
How to resolve it.
I am trying it on flash cs5
February 20th, 2011 - 12:32
Able to run the above code but with change in connector.
var tc:TuioClient = new TuioClient(new LCConnector);
Why its not working with TCP connector
April 19th, 2011 - 21:14
HI
I have a very basic question
to run the samples I have to create
create a flex project with Adobe AIR or create an ActionScript project or that I use?
Please help me on this.! I am new and that is my confusión
I am trying it on adobe flex3
thanks and sorry
April 19th, 2011 - 22:53
The best way would be to create an AIR project and copy the example files into it (and fix probable package errors) or simply link the example folder in the build options.
Then you simply create an instance of the Example clss and add to the stage.
April 20th, 2011 - 07:19
Thanks for your help gimmix
I created a project with adobe AIR
but now I have an error. when I run the application and loaded into Adobe AIR, I receive the following error
TypeError: Error #1009: Cannot access a property or method of a null object reference…..
This error is removed when I commented this line of code
// stage.addChild(myRectangle);
but how add the rectangle to the stage
I’m using flex 4
thanks and sorry for basic questions
April 20th, 2011 - 21:41
Well either the stage or myRectangle are null at that point. In which class do you comment this line? Normally in AIR apps you have to make sure that the app is fully initialized before referencing the stage. If you are using mxml this is done via the creationComplete attribute.
If you simply have a main class you have to do something like this:
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
//more code here
}
April 28th, 2011 - 07:04
Thanks for your help gimmix
Worked perfectly as you said
worked well in flex 3 and flex 4
in Flex 3 is more accurate than in flex 4
any idea why
ohh my machine may be
July 30th, 2011 - 10:32
hi
I am testing the latest svn version from Flash CS5 and I get this proble. I get a pop up saying
“You have used a feature that requies the Flash SDK :
Embed metadata”
This was not needed before
July 30th, 2011 - 18:08
You need to configure flash to use the flexSDK because the TuioDebug class uses an Embed tag to import a font which isn’t supported by flash.
you can find some info on how to do that here http://actionscriptexamples.com/2008/10/26/using-the-flex-sdk-with-flash-cs4/
or simply google flash and flexsdk
July 31st, 2011 - 00:13
more details about the problem described in the previous post …
if I comment out in tuio/debug/tuioDebug.as the line number 43 where it says
[Embed(source="/org/tuio/assets/fonts.swf", fontName="Arial")]
the it works, but I get further errors related to TouchEvent :
Scene 1, Layer ‘actions’, Frame 5, Line 226 1046: Type was not found or was not a compile-time constant: TouchEvent.
However I can type org.tuio. and the Flash editor shows me the TouchEvent file in the autocompletition menu. The full path is org.tuio.TouchEvent and I am always refering to the classs with that full path to avoid conflicts, for instance in line 226 it says :
function touchDownCircle(e:org.tuio.TouchEvent):void { trace(e); }
So I dont see why it does not find it because it is there and the editor itself sees it.
thanks for any help
July 31st, 2011 - 00:14
oops… sorry I did not see your reply until I sent my latest post. thanks for your reply
July 31st, 2011 - 13:08
No problem
On your other problem. In the current svn version the org.tuio.TouchEvent has been renamed to org.tuio.TuioTouchEvent in order to prevent naming conflicts with the native flash.events.TouchEvent, so you will need to refactor your code in order to make it compile with the svn version of the library.