1 - Setting up tBeta > 2 - Talking to Flash

Integration - Talking to Flash

tBeta

tBeta is the software we recommend for managing your webcam input. When your infrared-enabled webcam sees an image, tBeta is what analyses this image for points of high contrast (blobs). What tBeta outputs is TUIO data about the blobs, which will be passed to the FLOSC server. This isn't as complicated as it sounds, and there is a simple review of the whole process near the end of this page.

tBeta is available for Windows, Mac, and Linux at tbeta.nuigroup.com/. Download and extract the files, and then run "tbeta.exe". Ensure the "use camera" button is selected, and if you have more than one camera connected to your computer click on the "next camera" button until the correct camera input is shown in the source image window.


The tBeta interface
FLOSC

To use the touch input data in flash tBeta must send the information to a FLOSC server, which will translate the data into xml and then send the information to the flash application through an XMLSocket.

Download the latest version of FLOSC from code.google.com/p/flosc/downloads/detail?name=flosc-2_0_3.jar. Run the java executable file. The default settings should be 3000 for the flash port, and 3333 for the OSC port. Click Start and tBeta will automatically send the TUIO information to the FLOSC gateway.


Settings for FLOSC
TouchLibrary

TouchLibrary (or Touch!Libary) is a library with ActionScript 3.0 (AS3) classes for interfacing Flash applications with TUIO data. It enables the AS3 programmer (you) to use events like FINGER_DOWN, FINGER_MOVE, and FINGER_UP. These work just like any other Flash events such as CLICK.

The library itself is just a folder with classes that are imported, similar to TweenLite. Download TouchLibary here http://www.crystalminds.net/?page_id=74. Later, you'll see a sample AS class that imports the library and sets up an TouchEvent listener.

Bringing It Together

Now that we have tBeta, FLOSC, and TouchLibary, let's review how TUIO data is collected and passed.

  1. The touch detection software (tBeta) analyzes the input from the infrared camera and detects areas of high contrast.
  2. tBeta sends TUIO (Table-Top User Interface Object) data to the FLOSC gateway.
  3. FLOSC converts the data into XML.
  4. The Flash application uses an XMLSocket to receive and parse the XML data from the FLOSC server.
A Sample Flash Class

To start your interface, make sure you have pushed the Start button on the FLOSC window, and that tBeta is running (using tBeta is explained in more detail on another page). This is the point where TouchLibrary comes in, when you compile your Flash application. Take a look at this example to see how a TouchEvent is comparable to a regular Flash event.

reacTIVision - for simulating touch input during Flash development

If you're in the middle of building your Touch-enabled application and you don't want to test on your full interface whenever you make a change (and trust us, you don't), you can use a TUIO "simulator" called reacTIVision. Download it from sourceforge.net/projects/reactivision and run it while FLOSC has been started to simulate touch input for your Flash application.


The reacTIVision interface. A click here equals a touch for FLOSC.

The white area represents your screen. Click this area as if you were touching the screen to send TUIO data to FLOSC automatically.

NOTE: The colored shapes on the reacTIVision interface are used for testing shape-recognition methods. Don't worry about them, they are not used in this learning centre.

YOU'RE DONE! Congrats! Don't forget to publish your amazing apps and setups on the NUI Group Forums.

Credits!