cyancdesign [Chris Yanc]

Interactive Designer and Developer

Well, I've been really liking the AS3Tiuo Framework. I've been using it to build the app for the digital graffiti wall, and I've used it for a little experiment with the Hype Framework... I do love me a good framework mashup!

That Particle generator app used a different type of listening events than I expected though. And I really needed to get back to using TouchEvent to interactive with specific objects on the stage. The particle generator just listens to all the Flash as a whole and reacts, it was never set specifically to anything, that is the way just using this.tuio.addListener(this); works it seems. Really nice for things like that, just listening to anything.

But I now need specifics in my programming. So I need TouchEvent.TOUCH_DOWN and whatnot now! As I'm sure you all would like that too. Well here is a simple way of getting started...

1. Get the tuio as3 library

Here are the places you can download it:

• http://bubblebird.at/tuioflash/
• http://code.google.com/p/tuio-as3/downloads/list
• http://sparkon.net/framework/tuio-as3

~ The mostly all go to the same place.

2. Get the udp-flashlc-bridge (and simulator)

http://gkaindl.com/software/udp-flashlc-bridge

Instead of listening to the XML format of the TUIO 1.1 data. This takes the udp data and converts it to LocalConnection, which is readable by Flash directly. So no more parsing XML and saving just that bit of time. Making this smoother.

NOTE: If you are on windows, there is just one problem with the files. The one you need, never got a file extension on it...
Find, udp-flashlc-bridge-win and rename to --> udp-flashlc-bridge-win.exe

When you run it, you should see a window like this:

If you are running off CCV, my favorite, you'll need to switch back to sending TUIO OSC. This is what the bridge will intercept and give you a LocalConnection data stream.

Also at this point, getting a Simulator may help.
Here's one: http://sourceforge.net/projects/reactivision/files/TUIO%201.0/TUIO-Clients%201.4/TUIO_Simulator-1.4.zip/download

3. Start Building Your Flash

I've upgraded to CS5, so I'm a little weary of putting out sets of files. But I'll definitely give you the important part. The Main.as file source...

package
{
 
	import flash.display.MovieClip;
 
	import org.tuio.*;
	import org.tuio.debug.TuioDebug;
	import org.tuio.TuioManager;
	import org.tuio.connectors.*;
 
	public class Main extends MovieClip
	{
 
		// as3-tuio
		private var tuio:TuioClient;
		private var tuioManager:TuioManager;
		private var tdbg:TuioDebug;
 
		public function Main():void
		{
			//starts TUIO - LC based
			this.tuio = new TuioClient(new LCConnector());
 
			// This is the TuioClient listener, doesn't do TouchEvent events and uses a different type of listeners
			// http://bubblebird.at/tuioflash/guides/using-the-tuioclient/
			//this.tuio.addListener(this);
 
			//This activates listening to Blobs for TouchEvents.
			this.tuioManager = TuioManager.init(stage, this.tuio);
			this.tuioManager.triggerTouchOnBlob = true; 
 
			//Debugging data, just delete to remove
			tdbg = TuioDebug.init(stage);
			this.tuio.addListener(tdbg);
 
			//Nice Addition, no need for anything on the stage for TouchEvents to work, unlike Touchlib's setup
			stage.addEventListener(TouchEvent.TOUCH_DOWN, onTouchDown);
			stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
			stage.addEventListener(TouchEvent.TOUCH_UP, onTouchUp);
 
		}
 
		public function onTouchDown(evt:TouchEvent):void{
			trace("Touch ID = " + evt.tuioContainer.sessionID + ", Event = TOUCH_DOWN");
 
			// other usable data includes
 
			// TouchEvent data
			// -------------------------------------- //
			// evt.stageX
			// evt.stageY
			// evt.localX
			// evt.localY
			// evt.relatedObject
 
			// tuioContainer data
			// -------------------------------------- //
			// evt.tuioContainer.isAlive <-- boolean
			// evt.tuioContainer.frameID <-- ID of frame, not object
			// evt.tuioContainer.m <-- Motion acceleration
			// evt.tuioContainer.x <-- Remeber, these are decimal values, they need to be multiplied by the stage width
			// evt.tuioContainer.y <-- Remeber, these are decimal values, they need to be multiplied by the stage width
			// evt.tuioContainer.z <-- Remeber, these are decimal values, they need to be multiplied by the stage width
			// evt.tuioContainer.X <-- acceleration
			// evt.tuioContainer.Y <-- acceleration
			// evt.tuioContainer.Z <-- acceleration
 
		}
		public function onTouchMove(evt:TouchEvent):void{
			trace("Touch ID = " + evt.tuioContainer.sessionID + ", Event = TOUCH_MOVE");
		}
		public function onTouchUp(evt:TouchEvent):void{
			trace("Touch ID = " + evt.tuioContainer.sessionID + ", Event = TOUCH_UP");
		}
 
	}
}

How will you know it's working?

1. No Errors Compiling (of course)
2. First this traced: 'connected as: _OscDataStream'

And what can you change?

stage.addEventListener(TouchEvent.TOUCH_DOWN, onTouchDown);

You can change stage to any MovieClip so the touches will happen on that MovieClip.

And there are a few comments in the source of a few other explinations.

I hope this helps you all get started working on your projects.
Happy Experimenting (^_^)//

Tags: Actionscript 3.0, Flash, Multi-Touch, TUIO, Tutorial

This entry was posted on Monday, September 6th, 2010 at 8:58 pm and is filed under cyancdesign, Multi-Touch, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.