Add/Move/Remove Movie Clip from Library via Touchpoints

From NUI Group Community Wiki

Jump to: navigation, search

What is the best solution to pull a MovieClip from the library dynamically onto the stage...keep tracking that MovieClip with the one specific blob...then remove it when that blob is removed. And I must say, I was scratching my head on this one for a while. I would get to the point of removing the MC, and it would all fall apart from the way I thought I should work.

Now before we start, time for a little file preparation.

  1. Make your new Flash File, 1024 x 768, 30fps is what I use
  2. Add the background shape to enable TUIO to recognize your touching the stage
  3. Now Make a new MovieClip You want to be pulled from the Library, I named mine "libraryItem"
  4. Open the "Linkage..." properties for that MovieClip in the Library
  5. Select "Export for Actionscript" and name the Class "libraryItem"
    • This will make sure the AS file can grab this MovieClip dynamically
  6. Now we make the AS file. I named mine "PressAndAppear.as"
    • We will put that in this folder structure: app/demo/MyTouchApp
    • and link to it in the Flash File: In the 'Document Class' enter "app.demo.MyTouchApp.PressAndAppear"

I'll let you get that all setup. It should be similar to my previous tutorials.

Revised Code

package app.demo.MyTouchApp{
 
	import flash.events.TUIO;
	import flash.events.TouchEvent;
	import flash.events.Event;
	import flash.display.*;
 
	public class PressAndAppear extends Sprite {
 
		public function PressAndAppear():void {
			//--------connect to TUIO-----------------
			TUIO.init(this,'localhost',3000,'',true);
			addEventListener(TouchEvent.MOUSE_MOVE, onTouchMove);
			addEventListener(TouchEvent.MOUSE_DOWN, onTouchDown);
		}
		public function onTouchDown(e:TouchEvent):void {
			var dynamicObj:MovieClip = new libraryItem();
			dynamicObj.name = e.ID.toString();
			dynamicObj.x = e.localX;
			dynamicObj.y = e.localY;
			addChild(dynamicObj);
			dynamicObj.addEventListener(Event.ENTER_FRAME, checkForRemoval);
		}
		public function onTouchMove(e:TouchEvent):void {
			var target:DisplayObject = getChildByName(e.ID.toString());
			target.x = e.stageX;
			target.y = e.stageY;
		}
		public function checkForRemoval(e:Event):void {
			if (!TUIO.getObjectById(e.target.name)) {
				e.target.removeEventListener(Event.ENTER_FRAME, checkForRemoval);
				removeChild(e.target as MovieClip);
			}
		}
	}
}

Now that onTouchUp is removed, we need something to know when to remove the MovieClips, so we use the MovieClips themselves

			dynamicObj.addEventListener(Event.ENTER_FRAME, checkForRemoval);

This runs checkForRemoval so long as the Movie Exists on the stage

		public function checkForRemoval(e:Event):void {
			if (!TUIO.getObjectById(e.target.name)) {
				e.target.removeEventListener(Event.ENTER_FRAME, checkForRemoval);
				removeChild(e.target as MovieClip);
			}
		}

And we can utilize data inside of TUIO with an original function inside of it: getObjectById() and since I named the movie clip with the intended blob for it to track all is needs to do is keep checking if that blob still exists. One the blob is removed from the stage, that blob's Id will NEVER return again so all we have to do is remove the ENTER_FRAME event and remove the object from the stage. And if I remember correctly the removed items should also eventually get garbage collected and cleared from memory when Flash deems necessary.

There you have it. Each touch point gets it's own Movie Clip which is pulled from the library, follows the same touch point and removes itself when the touch point is removed. And the code remains as simple as i can make it so you all can use it as a starting point.

More can be found at http://code.google.com/p/multitouchas3experiments/