cyancdesign [Chris Yanc]

Now feels like a good time to get back into it. Especially coming across this site:

asluv

Sure, it doesn't seem like there has been many recent posts. It can be hard juggling a life around experimenting. It doesn't make it any less awesome when you see something and get inspired. Here is what I found, a AS3 script that would not just draw a line, but so nice ribbon curving and add a glow around everything automatically. It is just begging to be multitouchable (that sounds a little dirty now that I think about it).

http://asluv.com/2007/09/18/laser-draw-as3-experiment/

"This experiment uses the AS3 drawing methods to generate an organic mask formed by several pairs of points linked with curveTo.

The generated shape masks a simple radial gradient and the result has a GlowFilter and a DropShadowFilter applied to it."

It works great, no doubt about it. But the source is there, we can take it a little further. Now I got a lot further than expected working on it, and the night is starting to get late, so I'm going to try and condense the main ideas I want to remember that are the most useful.

Download Multitouch Source Code

Making a single complex function multicapable.

I started with diving right into the LaserDraw.as file to see where the drawing positioning was being controlled. At first, it looked like it was going to be an easy conversion. There was only one mouseX and mouseY statement to replace with TUIO.returnBlobs()[val].x and TUIO.returnBlobs()[val].y. But like some thing, looks can be deceiving.

There are so many other functions outside the main position calculation function that to rework it just didn't make sense to me. Too much to track. Time to think of another plan.

I can definetly have it track one specific blob. TUIO.returnBlobs()[0] being the simplest. And it worked, convert the mouse to the first blob, there just needed to be a few changes to the MOUSE_DOWN and MOUSE_UP events and some additional conditionals to think through.

But still not multitouch yet.

Thinking a little down and dirty, If I treat this LaserDraw.as as an external movieclip that I bring in dynamically from a new actionscript file, it should work. That's the 'important' idea. And its something I may be able to use more of in the future.

package {
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.TUIO;// allows to connect to touchlib/tbeta
	import flash.events.TouchEvent;// allows to use TouchEvent Event Listeners
	import LaserDraw;
	import gs.TweenLite;
	import flash.utils.Dictionary;
 
	public class MultitouchLaserDraw extends Sprite {
 
		private var dict:Dictionary=new Dictionary(true);
		private var newLaser:LaserDraw;
 
		function MultitouchLaserDraw() {
 
			TUIO.init(this,'127.0.0.1',3000,'',true);
 
			addEventListener(TouchEvent.MOUSE_DOWN, onPress2);
			addEventListener(TouchEvent.MOUSE_UP, onRelease2);
		}
 
		private function onPress2(evt:Event) {
			var evtObj:Object = evt;
			var newLaser=new LaserDraw(evtObj.ID);
			dict[evtObj.ID]=newLaser;
			addChild(dict[evtObj.ID]);
		}
 
		private function onRelease2(evt:Event) {
			var evtObj:Object = evt;
			TweenLite.to(dict[evtObj.ID], 5, {alpha: 0, onComplete:onFinishTween, onCompleteParams:[dict[evtObj.ID]]});
		}
 
		function onFinishTween(deadMovie:LaserDraw):void {
			removeChild(deadMovie);
		}
	}
}

And there are some previous ideas I can utilize. Specifically the Dictionary Object. Also, for a little added *umph* a quick TweenLite to help fade stuff out so the screen doesn't stay too cluttered.

		private function onPress2(evt:Event) {
			var evtObj:Object = evt;
			var newLaser=new LaserDraw(evtObj.ID);
			dict[evtObj.ID]=newLaser;
			addChild(dict[evtObj.ID]);
		}
 
		private function onRelease2(evt:Event) {
			var evtObj:Object = evt;
			TweenLite.to(dict[evtObj.ID], 5, {alpha: 0, onComplete:onFinishTween, onCompleteParams:[dict[evtObj.ID]]});
		}
 
		function onFinishTween(deadMovie:LaserDraw):void {
			removeChild(deadMovie);
		}

But here is the point. In this new first actionscript file. When the stage is touched on, onPress2 creates a new instance of LaserDraw along with the ID of the touchpoint (to be used a little later for memory control too). Now, LaserDraw is only going to be used to make 1 line for that specific blob via TUIO.getObjectById(_blobID), not try and control all of them. This way, there can be multiple instances of LaserDraw without needing to keep track of everything everywhere. Much simpler I think.

Then, when any touch point is released, it'll use that ID to fade out that specific line, then remove the instance from the stage. And since it is hooked in through the Dictionary item, it should be available for garbage collection. Keeping the memory in check, but I have not done any rigorous testing yet, so that's just speculation for now.

Download Multitouch Source Code

Happy Experimenting (^_^)//

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

This entry was posted on Tuesday, July 28th, 2009 at 11:33 pm and is filed under 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.