cyancdesign [Chris Yanc]

Interactive Designer and Developer

Hey there. It sure has been a while hasn't it?

Looks like I have a little down time while my computer defrags and my upgrade goes through at work, so I thought I'd hop on and white up a quick post of something I just wrapped up and released.

Download Source Code

Some nice this about this. It is written using the Hype Framework, with the use of object pooling. Why is that important? From what I learned, object pooling grabs a collection of movieclips or whatnot and sets it aside in you memory before the file even start running. So when you make a call to the object pool, the movieclip is ready to go, no questions asked. But if you reach the maximum number, you can set it so it waits until there is a movieclip returned to the pool before adding a new one to the stage.

This means you can figure out the maximum number of objects your computer can handle and set it's limit and now worry about slowing down your system by overloading it with objects. In turn, making your Flash run nice and smooth, even though it may look like there are just massive amounts of things going on. Very nice for particle systems.

Let's look at some code:

Preface: I used this Object Pool 3 code from the Hypeframework to begin.

I also have a couple lines for using eaze (a tweening engine). I like it because it's light and easy once you get the hang of it.

ALSO!! I built this using as3-tuio code for the TUIO touch. It is different from the touchlib as3 I've been using. And you will need to use http://code.google.com/p/udp-tcp-bridge/
I found it a little trying to get it up and running, but did eventually. If you are using windows, you'll need to add .exe to the file to get it to run. I may have done something else, but i don't remember, sorry.

Then set CCV to TUIO UDP for communication.

Moving forward, I am planning on trying to more to using Native Touch Events. But I'm still working on how I'm going to get to that point. So please bare with me, if anything you can use this code as a jumping off point and swap out the TUIO part of it. Accessing the raw touch data is the important part.

Here is the new modified code:

package {
 
	import flash.ui.*;
	import flash.events.*;
	import flash.display.*;
	import flash.utils.Dictionary;
 
    import org.tuio.*;
	import org.tuio.connectors.*;
	import org.tuio.osc.*;
 
	import hype.extended.behavior.FixedVibration;
	import hype.extended.behavior.VariableVibration;
	import hype.extended.color.ColorPool;
	import hype.extended.trigger.ExitShapeTrigger;
	import hype.framework.core.ObjectPool;
	import hype.framework.core.TimeType;
	import hype.framework.display.BitmapCanvas;
	import hype.framework.rhythm.SimpleRhythm;
 
	import aze.motion.eaze;
	import aze.motion.EazeTween;
 
	public class Main extends MovieClip implements ITuioListener {
 
		// as3-tuio
		private var tuio:TuioClient;
 
		// dictionary to track data
		private var TouchTrackDictionary:Dictionary = new Dictionary(true);
		private var keyID:Object;
 
		//hype variables
		private var myWidth = stage.stageWidth;
		private var myHeight = stage.stageHeight;
		private var bmc:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
		private var color:ColorPool = new ColorPool(
			0x587b7C, 0x719b9E, 0x9FC1BE, 0xE0D9BB, 0xDACB94, 0xCABA88, 0xDABD55, 0xC49F32, 0xA97409
		);
		private var clipContainer:Sprite = new Sprite();
		private var pool:ObjectPool = new ObjectPool(MyCircle, 5000);
		private var rhythm:SimpleRhythm = new SimpleRhythm(addNextClip);
 
		public function Main():void {
 
			//hype content
			addChild(bmc);
			rhythm.start(TimeType.TIME, 15);
			pool.onRequestObject = function(clip) {
				drawNewObject(clip);
			}
			bmc.startCapture(clipContainer, false);
 
			//starts TUIO - TCP based
			this.tuio = new TuioClient(new TCPConnector());
			this.tuio.addListener(this);
		}
 
		// hype gets new pool item
		public function addNextClip(r:SimpleRhythm) {
			for (var key:Object in TouchTrackDictionary) {
				keyID = key; // I use this to help cycle through the object pool and dictionary of x/y coordinates simultaneously
				pool.request();
			}
 
		}
 
		// hype clears pool item
		public function onExitShape(clip):void {
			pool.release(clip);
			clipContainer.removeChild(clip);
		}
 
		// hype object drawer
		public function drawNewObject(clip):void {
 
			clip.x = TouchTrackDictionary[keyID].x;
			clip.y = TouchTrackDictionary[keyID].y;
			//clip.x = stage.stageWidth / 2;
			//clip.y = stage.stageHeight / 2;
			clip.scaleX = clip.scaleY = .15;
 
			// target Object, property, spring, ease, vibrationRange
			var xVib:VariableVibration = new VariableVibration(clip, "x", 0.79, 0.01, 600);
			var yVib:VariableVibration = new VariableVibration(clip, "y", 0.79, 0.01, 600);
			xVib.start();
			yVib.start();
 
			// target Object, property, spring, ease, min, max, isRelative
 
			var aVib:FixedVibration = new FixedVibration(clip, "alpha", 0.9, 0.05, 0.0, Math.ceil(Math.random() * 3) * 0.3, true);
			var rVib:FixedVibration = new FixedVibration(clip, "rotation", 0.9, 0.05, 0, 360, false);
			aVib.start();
			rVib.start();
 
			// this eaze call shrinks the object and when it is done removes it from the pool.
			eaze(clip).to(.25, { scaleX : 1,scaleY : 1 })
				.chain(clip).to(1.5, { scaleX : 0,scaleY : 0 }).onComplete(onExitShape, clip);
 
			color.colorChildren(clip);
			clipContainer.addChild(clip);
 
		}
 
		// adds cursor to dictionary
		public function addTuioCursor(tuioCursor:TuioCursor):void
		{
			TouchTrackDictionary[tuioCursor.sessionID.toString()] = { x: tuioCursor.x*stage.stageWidth, y:tuioCursor.y *  stage.stageHeight};
		}
		// updates dictionary
		public function updateTuioCursor(tuioCursor:TuioCursor):void
		{
			TouchTrackDictionary[tuioCursor.sessionID.toString()] = { x: tuioCursor.x*stage.stageWidth, y:tuioCursor.y *  stage.stageHeight};
		}
		// clears dictionary for that cursor
		public function removeTuioCursor(tuioCursor:TuioCursor):void
		{
			delete TouchTrackDictionary[tuioCursor.sessionID.toString()];
		}
 
		// unused but required functions for as3-tuio
		public function addTuioObject(tuioObject:TuioObject):void{}
		public function updateTuioObject(tuioObject:TuioObject):void{}
		public function removeTuioObject(tuioObject:TuioObject):void{}
		public function addTuioBlob(tuioBlob:TuioBlob):void{}
		public function updateTuioBlob(tuioBlob:TuioBlob):void{}
		public function removeTuioBlob(tuioBlob:TuioBlob):void {}
		public function newFrame(id:uint):void {}
 
	}
 
}
 

So how does the object pool work?

private var pool:ObjectPool = new ObjectPool(MyCircle, 5000);

When the flash loads, it is setting aside 5000 MyCircle movieclips in memory.

pool.onRequestObject = function(clip) {
	drawNewObject(clip);
}

private var rhythm:SimpleRhythm = new SimpleRhythm(addNextClip);
 

hythm.start(TimeType.TIME, 15);
 

pool.request();
 

Work together to call the movieclips that are in the pool. It is basically saying: Every 15 milliseconds, add a new object from the object pool into the flash.

But to add some control over that we add in a little extra code:

		public function addNextClip(r:SimpleRhythm) {
			for (var key:Object in TouchTrackDictionary) {
				keyID = key; // I use this to help cycle through the object pool and dictionary of x/y coordinates simultaneously
				pool.request();
			}
 
		}
 

At the same time, as you touch down, that touch point gets added to a Dictionary item. I've used them before and they work out great because the "key" or name of that spot in the Dictionary is the ID of that touch point. So when you move/release it, it can be instantly identified. Instead of having to search through an Array every time.

Trace through the code more and play around with the code in "public function drawNewObject(clip):void" to change up how the particles work.
I hope this gets you interested in using the Hype framework. I am personally looking forward to learning what else I can do with it in conjunction with multitouch.

Happy Experimenting (^_^)//

Tags: actionscript, as3-tuio, eaze, Flash, hype, Multi-Touch, multitouch, Tutorial

This entry was posted on Friday, June 18th, 2010 at 11:52 am 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.