Getting Started with Flash Webcam Motion Tracking

Posted by & filed under Flash.

It seems that the subject of Flash motion tracking has been neglected as of late. Developers who want to develop something that looks cool and responds to motion have opted to play with FLARToolkit/Augmented Reality. The gesture recognition and multi-touch capabilities of Flash Player 10.1 provide a user interface that reliably captures user input better than the difference/threshold method of motion tracking in Flash. So will we ever have a Minority Report-style UI that allows us to fight crime by flailing our arms? If so, it probably won’t be built with Flash. But can we still create some stuff that looks cool using motion tracking in Flash? Absolutely.

This post isn’t meant to be a tutorial, but here’s the quick-and-dirty of how motion tracking with Flash works. In short, we compare the current frame of video with the previous frame, see what’s changed and mark that as motion. Here’s how it happens:

  1. Get the Camera- No webcam, no fun.
  2. Create a Matrix to flip the video and subsequent BitmapData. – The video is displayed as it’s captured, so we need to flip it on the y-axis in order to make it display the mirror image of the video.
  3. Attach the Camera to a Video object – We can’t see the Camera unless it’s attached to a video.
  4. Create our three BitmapData instances – We use _output, _difference and _previous to calculate motion inside the render() method.
  5. Create a Bitmap from our _output – This allows us to see the tracked motion.
  6. Create a Timer to dispatch events at the _renderFrequency
  7. Handle the TimerEvent with the render() method

The magic happens in the render() method. First we draw the _video into the _difference BitmapData. Then we draw the BitmapData stored in _previous (the previous frame of video) into the _difference BitmapData in "difference" mode. This turns any pixels that have changed since the previous frame white and the static pixels black. Then we fill the _output with transparent pixels and use the threshold() method of the BitmapData class to color any pixels in the _difference BitmapData that aren’t black (greater than the _thresholdMask value). We then draw the current video frame to _previous for use the next time the TimerEvent is dispatched.

Some of that may be a bit confusing, but it’s not necessary that you understand exactly what’s going on in order to get started experimenting yourself. I’ve created a BasicTracker class for motion detection in Flash in order help you get started. You can easily extend the BasicTracker class to create your own experiments. The attached MotionHitTest class demonstrates how you can perform a hitTest() between objects on the stage and motion detected by the webcam.

When sub-classing the BasicTracker, override the render() method as such:

public override function render(e:TimerEvent = null):void
//your code here

Pretty simple, huh?

4 Responses to “Getting Started with Flash Webcam Motion Tracking”

  1. Company Website Design

    Heya my partner and I thought that the Getting Started with Flash Webcam Motion Tracking entry very interesting thus we have added an track-back for it on my blog site, continue your great job Thanks … Company Website Design

  2. cececece

    Hello. Thank you very much for the source code. Can i use it with some changes in my master’s thesis and with a reference to your name?


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>