ChromaTracker

The ChromaTracker ActionScript 3 library has been created to detect and track blobs of color in any DisplayObject. It is typically used to track colors in a live video camera (webcam) feed.

Demo

I guess the best way to understand what this library does is to actually see it in action. To view this live demo, simply authorize webcam access (don’t worry, I’m not saving this feed – it does not even go further than your own computer). Of course, you will need Flash and a webcam.

Try to pick a color that's different from the rest of the environment. If the result is not convincing, take time to adjust the tolerance and blur parameters. In my experience, those two are the first parameters you should fiddle with to improve the results.

As you can see the green rectangle encompasses all detected pixels. You can retrieve this information by using the rect property of the ChromaTracker object. The red dot is positionned by using the center property of the object. Finally, the preview of detected pixels on the right is simply the bitmap property of the ChromaTracker object that has been placed on the stage.

This demo (with source code), the library and the full API documentation can all be found in the package below. The API documentation can also be viewed online.

Warning

This is beta software. It might contain bugs and is probably not ready for production use yet. Your comments, bug reports and suggestions will help me improve this library. You can send them on my contact page or simply by leave a comment at the bottom of this page.

If you make something cool with this library, let me know!

Download

Here is the full ChromaTracker download pakage (version 1.0b). It contains the library, the full API documentation and a working example.

Comments

  1. Salut à vous,

    Ya t-il moyen de détecter une tâche rouge par exemple sur un .SWF contenu dans un autre .SWF ? En faite je voulai rejouer l´animation depuis l´élément qui se trouve imbriqué dans mon produit final.

    Merci d´avance et publier le plus possible de truc intéressants.

    Daf
    Suéde

    1. For those who do not understand French, Daf’s question was “can we track colors inside an external swf loaded inside a parent swf”. The answer: that’s pretty easy. Here’s how :

      import cc.cote.chromatracker.ChromaTracker;
       
      var ct:ChromaTracker;
       
      // Load the external swf (circle.swf) using a good ol' Loader
      var loader:Loader = new Loader();
      loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onSwfLoaded);
      loader.load(new URLRequest("circle.swf"));
       
      // Once loaded, convert to MovieClip and add to display list
      function onSwfLoaded(e:Event):void {
       
      	circleSwf = MovieClip(loader.contentLoaderInfo.content);	addChildAt(circleSwf, 0);
      	ct = new ChromaTracker(circleSwf, 0xFF0000, 0.4);
      	addEventListener(Event.ENTER_FRAME, onEnterFrame);
       
      } 
       
      // Constantly update the tracking
      function onEnterFrame(e:Event):void {
       
      	// Call tracking method
      	var rectangle:Rectangle = ct.track();
       
      	// Position and size green rectangle over detected region so we can see the detection
      	zone.x = rectangle.x;
      	zone.y = rectangle.y;
      	zone.width = rectangle.width;
      	zone.height = rectangle.height;
       
      }

      The key is to convert the loaded swf to a regular MovieClip (highlighted above). Once you have a MovieClip (or any DisplayObject) you can use it with ChromaTracker in the regular fashion.

      Here’s a full Flash CS6 example you can download to try it out.

  2. When i test my swf offLine works wonderful, but when i try it online the performance it’s pretty slowly

Leave a Reply

Your email address will not be published. Required fields are marked *