<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2283234405279860&amp;ev=PageView&amp;noscript=1">

Working Flash applications with multi-touch


David "Whitenoise" Wallin, one of the main developers at NUIgroup, wrote a couple of applications in Flash 9 using Actionscript 3 to collaborate with the multi-touch display. These Flash applications communicate with TUIO data (OSC implemented) sent by Touchlib (THE open source multi-touch library).

View FlickR Lightbox - This imports a set of photo's from Flickr, it's possible to move, rotate and scale the objects (see image above)

View Paint Application - A simple yet effective way to show the use of a brush by using your fingers

View Ripples Application - Generate ripple effects with your fingers (this application is very cpu intensive)

Download Source Code - Download the source code for all these three applications. Make sure you have Flash 9 and Actionscript 3 installed. It's necessary to have Flash 8. Afterwards update it with the Flash 9 Alpha patch . This patch includes Actionscript 3.


To illustrate how to setup these applications with your multi-touch display, I'm writing down this little howto.

First of all you'll need a working multi-touch display. You could also just test the applications with a remote control and a hacked webcam that detects infra red light.

First of all you need to have Flash 9 with Actionscrip 3 installed. Download here.

Second, you'll need the Flash applications. Download here.

And finally, you need Touchlib. Download here.

These are the binaries (executables). But you can also compile Touchlib yourself. The source of Touchlib can be found here: http://code.google.com/p/touchlib/ In most cases you just want to go with the precompiled binairies, if you're not an experienced software developer.

In the Touchlib package, you'll find an executable called OSC.exe (this is the protocol that sends TUIO messages) to FLOsc. FLOsc is the application that receives the TUIO messages from OSC.exe and hands them through to Flash.

Run the file OSC.exe. A window with some settings pops up, leave them unchanged and hit the "ok"-button.

Next, 6 windows pop up with the output of your webcam. Press b, to remove the background, changing 3 of the 6 screens to black.

Test your multi-touch display to see if your blobs (lit up finger tips) are detected. You can finetune some settings with the slider.

Now you go to the FLOsc folder, inside the Flash package, which you downloaded. Run the file run.bat

A prompt window pops up telling you "attempting to start OSC / Flash Gateway server" OscServer created... TcpServer created...

So now you got OSC.exe and run.bat (FLOsc) running. OSC can now send messages to FLOsc and FLOsc can receive them. Now all we have to do is start the applications, so FLOsc can send the messages it receives from OSC, to Flash.

Open up, for example Paint.fla. When the file is loaded, press CTRL-Enter to publish it. The file will be executed at that moment. You'll see some predefined brush strokes being rendered on the canvas. Wait untill they are finished. Now you should be able to brush paint on the canvas with your fingers.

Follow the last step as well to run the other 2 applications (ripples and photo)