SloMo Web Cam in Flash

My co-author Jordan Chilcott came with this idea we call "The Bucket Brigade, when we got talking about other uses for a web cam. The use of the BitmapData class in Flash came up and here's the result.

Hook up a web cam and have some fun.

Here's the code:

import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.ColorTransform;

/* This example will store a series of bitmaps and display them giving
the appearance of a ghostly slow motion effect for any item that is moving.
The effect is accomplished using a technique called bucket-brigade. In real life,
it is analogous to a line-up of people passing a bucket of water from the back of
the line to the front of the line. This is how they used to put out fires before hoseswere invented. In this case, we are using bitmaps.

var mainVideo:Video;
var bitMapArray:Array = new Array(); // We will be storing a series of bitmaps for our bucket-brigade
var maxImages:Number = 10;
var mainBitmap:BitmapData = new BitmapData( 240, 180 ); // This is our main canvas for the screen
var bitmapMovie:MovieClip = _root.createEmptyMovieClip( "bitmapMovie", _root.getNextHighestDepth() );
var vidCamera:Camera = Camera.get();

/* attach our canvas to a movieclip in order for it to display */
bitmapMovie.attachBitmap( mainBitmap, _root.getNextHighestDepth() );

/* this is our main engine */
function slomotion():Void {
/* First, we check to see if we have our maximum number of bitmaps in our bucket-brigade list. If we do,
then remove the oldest image from our list and get rid of it. It's no longer of any use. */
if( bitMapArray.length >= maxImages ) {

var bitmap:BitmapData = new BitmapData( 240, 180 ); // this will grab our latest snapshot

/* This will instruct our draw routines below to draw at 30% of the current alpha level. The first 4 numbers
of our ColorTransform object are multipliers and the last 4 or offsets which are added after the multipliers
have been applied. */
var alpha:ColorTransform = new ColorTransform( 1, 1, 1, .30, 0, 0, 0, 0 );

bitmap.draw( mainVideo ); // Take the latest camera snapshot
bitMapArray[bitMapArray.length] = bitmap; // and place it at the end of our bucket-brigade - it will travel forward as a new image is placed

/* Now, we're going to cycle through our list of images and draw them to our main canvas. Note that we
draw the oldest ones first as the effect as we draw newer images will make the oldest ones appear to have
faded away. */
for( var bitmapLoop:Number = 0; bitmapLoop < bitMapArray.length; bitmapLoop++ ) {
var tBitmap:BitmapData = BitmapData(bitMapArray[bitmapLoop]); // get our selected bitmap to draw from our list
mainBitmap.draw( tBitmap, new Matrix(), alpha ); // draw it to our main canvas at 30% of its current alpha level

/* check to see if the Flash player believes that a camera is attached */
if( vidCamera != null ) {
vidCamera.setMode( 240, 180, vidCamera.fps );
mainVideo.attachVideo(vidCamera); // attach our camera to our video object to provide a base for drawing
var ourIntervalID = setInterval( slomotion, 100 ); // our bucket-brigade function is going to run every 100ms automatically



Creative Commons logo