I started working out some experiments with dynamic video effects. This one in particular uses the activityLevel from the microphone. I hooked up a scaling effect along with some DisplacementMap video I created and exported from AfterEffects. Below is a video I created of one of my coworkers acting silly. Below that is the actual working file. You need to have a webcam installed for it to work. Let me know what you guys think.

DOWNLOAD SOURCE

This is a perfect example of how simple and effective Flash games can be. You hold the mouse down and move the cursor to shoot orbs. Why the hell are we so intrigued by such simple concepts? I could sit here for hours and play this without getting bored. If I’m having fun, I am going to pass this to all my friends to enjoy as well. Commercial and viral possibilities? HELL YEAH!!! I like the bitmap blurring effect that was added as well, its a nice touch.

VIEW CAMPAIGN LAYOUT

We worked with AMV-BBDO to produce the whole interactive side for Guinness Tipping and I must say that this presentation illustrates to the vastness of the campaign. A project can potentially be so large that a single slide cannot do it justice. We built everything that was internet related on this.

LAUNCH PROJECT

Another project, another crazy deadline. Hopefully the end result of this project brings a smile to everyone who encounters it, adults and children alike. Build a virtual Ice Cream Sundae and print out your creation! Fun for the whole family! Go to your local Friendly’s and tell Joe Friendly his old buddy Charlie sent ya. Lots of hard work went into this. Let me know what you guys think.

LAUNCH

Allow me to say that as much heart ache and pain doing these banners brought, this is one of the most amazing feats me and my team have ever accomplished in banner….dom. Props goes out to my friend and coworker Steve Cucinotta for soldiering thru this. I managed, oversaw, and did some portions of this project, but Steve really stepped up his game in taking the reigns on this one. I don’t know anyone with as much heart and hunger to learn and grow in Interactive than Steve. I am honored to have worked with him on this. I’ll give you guys a recap of what went into this beast (the banner) later.

View Banner

View Website

I built these snickers banners a little while back. I was excited to build them because it involved one of my child hood heroes Mr. T. Although the banners themselves didnt use Mr.T, the website did. I was fortunate enough once again to convince the client to do these banners in Flash 8 because of BitmapData. The banners required a shattering effect which was done using the draw method of the BitmapData class. If these would have been done in an earlier version of Flash, there would have been significant chugging of the processor when the image shatters. Check it out, let me know what you think.

View Banner

I built this banner a while back. I was able to convince the client early on to have this built in Flash 8 because that was the dawning of BitmapData in Flash. Without BitmapData there would have to be layers upon layers of MovieClips with transparent images in them which is never a good thing. I don’t even want to think about how hard this thing would be chugging the processor. Everything had to be under 40K filesize which wasn’t easy with such a graphics heavy banner. Basically all I did was overlap a bunch of images (the individual sprays) for each color as the spraycan moved across. That gave the illusion the can was spraying. When the can stopped spraying I took a snapshot (BitmapData.draw()) of the container MovieClip which housed the spray and removed all of the spray MovieClips from the stage. That kept the Flash player free and clear of having to constantly redraw all of those transparent images. It all came out pretty smooth, I was happy about that.

I wrote this very reusable class called the “CreateBitmapData” class a little while back. I’ve used it in multiple projects and it has saved me countless hours and natural hair color. Basically you pass and Array of image URLs and a callback function expecting an Array of BitmapData Objects and it’s as easy as that. It utilizes the built in MovieClipLoader class and will push in an undefined value into the returning Array if there is an error loading the image. This is a failsafe so that it doesn’t completely break whatever you are doing. I will try to have an AS3 version for it soon. Check it out, let me know if you make any modifications.

DOWNLOAD SOURCE

How to use it:
//—————————————————

import CreateBitmapData;
var objCreateBitmapData:CreateBitmapData = new CreateBitmapData();

function bitmapsReciever($bitmaps:Array){
// Do what you want with the BitmapData Objects Array here.
}
objCreateBitmapData.create([”http://www.example.com/pic1.jpg”,”http://www.example.com/pic2.jpg”], {scope: this, func:”bitmapsReciever”})

//—————————————————

Here’s what the code actually looks like if your interested:
/*

Author: Charles D Clements copyright 2007
Email: charlesdclements@yahoo.com
WebSite: www.charlesclements.net

Pass an Array of image paths into this class and it will return an Array with all the
BitmapData Objects created into the specified return object as a parameter.

*/
import flash.display.BitmapData;
class CreateBitmapData {
/*
Variables
*/
// MovieClips
private var mcContainer:MovieClip;
private var mcInnerContainer:MovieClip;
// MovieClipLoader
private var objMovieClipLoader:MovieClipLoader;
// Numbers
private var numIncrement:Number = -1;
// Arrays
private var arrImageStrings:Array = [];
private var arrNewBitmaps:Array = [];
// Strings
private var strClassName:String = “CreateBitmapData”;
// Objects
private var objCallback:Object;
/*
Constrructor
*/
public function CreateBitmapData() {
trace(’CreateBitmapData’);
this.arrImageStrings = [];
this.arrNewBitmaps = [];
}
/*
Creates BitmapData from external Images.
$array: an Array of external image URLs.
$callbackObj: an Object containing a scope and a callback function in which it returns an Array of BitmapData Objects to.
The callback function should be expacting an Array.
———————————————————
ex: objCreateBitmapData.create([”http://www.example.com/pic1.jpg”,”http://www.example.com/pic2.jpg”], {scope: this, func:”bitmapsCreated”})
*/
public function create($array:Array, $callbackObj:Object):Void {
trace(’create’);
this.arrImageStrings = $array;
this.objCallback = $callbackObj;
this.mcContainer = _root.createEmptyMovieClip(”mcContainer”, _root.getNextHighestDepth());
this.mcContainer._visible = false;
this.loadImages();
}
/*
Load external images from Array.
*/
private function loadImages():Void {
this.numIncrement++;
if (this.numIncrement < this.arrImageStrings.length) {
this.mcInnerContainer = this.mcContainer.createEmptyMovieClip(”mcInnerContainer”, 0);
this.objMovieClipLoader = new MovieClipLoader();
this.objMovieClipLoader.addListener(this);
(this.arrImageStrings[this.numIncrement] == undefined) ? this.spotTaken() : this.loadClip(this.arrImageStrings[this.numIncrement], this.mcInnerContainer);
} else {
this.done();
}
}
/*
Local loadClip() function that calls the MovieClipLoader loadClip() function.
*/
private function loadClip($URL:String, $container:MovieClip):Void {
this.objMovieClipLoader.loadClip($URL,$container);
}
/*

*/
private function onLoadError(target_mc:MovieClip, errorCode:String, httpStatus:Number):Void {
trace(”>> loadListener.onLoadError()”);
trace(”>> ==========================”);
trace(”>> errorCode: ” + errorCode);
trace(”>> httpStatus: ” + httpStatus);
this.spotTaken();
}
/*
If the URL is undefined this inserts an undefined into the Array to be returned.
*/
private function spotTaken():Void {
this.arrNewBitmaps.push(undefined);
this.loadImages();
}
/*
Listens for when the image has loaded.
*/
private function onLoadInit($clip:MovieClip):Void {
var bmd:BitmapData = new BitmapData(this.mcContainer._width, this.mcContainer._height, true, 0×00000000);
bmd.draw(this.mcContainer);
this.arrNewBitmaps.push(bmd);
this.loadImages();
}
/*
Called when all images have been loaded.
*/
private function done():Void {
this.bitmapDataCreated();
this.clear();
}
/*
Load external images by passing an Array.
*/
private function clear():Void {
this.numIncrement = -1;
this.arrImageStrings = [];
this.arrNewBitmaps = [];
this.mcContainer.removeMovieClip();
}
/*
Load external images by passing an Array.
*/
public function getBitmaps():Array {
return (this.arrNewBitmaps);
}
/*
Calls the Callback passed into the setup.
*/
private function bitmapDataCreated():Void {
this.objCallback.scope[this.objCallback.func](this.getBitmaps());
}
}

THE EFFECT:

VIEW EXAMPLE
DOWNLOAD SOURCE

Of all of the filters that Flash has to offer, the DisplacementMapFilter holds a special place in my heart. If you don’t care about the WHY and only want the HOW scroll to the bottom.

THE STORY:
The following is a piece of history as I understood it while it was happening. You should question anyone else involved for the whole story. Here it goes:
We (ichameleon/group/) once got pulled into a project for HP because the client wasn’t happy with the way things were going with their current vendor. Although time was short, they decided to contact a list of other vendors to see who came up with the best solution. As eloquently as I can state it, the whole thing turned into an elaborate pissing contest between 7 other well known and respected vendors. They shall remain nameless because God forbid, I might need something from one of them one day. We ended up being the crowd favorite and delivered in a timely fashon as we always do.

WHAT I NEEDED:
The project required a streaming effect with images being pulled dynamic from the library and they had to warp like paper as they floated across the screen. We couldn’t use image sequences from AfterEffects because eventually this same stream engine needed to be used in a screensaver application that would pull images from the user’s hard drive and warp them dynamically in the same way. It was pretty kool!

God Bless Macromedia at the time for implementing the use of the DisplacementMapFilter in Flash 8. All filters in general for that matter. You can apply a DisplacementMapFilter to either BitmapData or to MovieClips. Filters applied to Bitmaps alter the Bitmap completely. It is like manipulating an image in PhotoShop and there is no undo. You can apply a filter to a MovieClip and it remains unaltered. The filters Array can be cleared and the MovieClip is the same as before anything was applied to it. The actual code that it takes to apply a filter is minimal yet powerful.

THE CODE – What it is:
DisplacementMapFilter(mapBitmap:BitmapData, mapPoint:Point, componentX:Number, componentY:Number, scaleX:Number, scaleY:Number, [mode:String], [color:Number], [alpha:Number])

The following is the bare minimum of what I use to create something kool:
mapBitmap: This is the BitmapData object that contains the displacement map data.
mapPoint: This is the positioning coordinates of the displacement map when it gets applied. You generally want to keep these points at 0,0 or less. If you use a large positive number like 50,50, you will notice part of the area gets the filter applied to it, and the rest of the area remains unchanged.
componentX/ componentY: These are the color channels that will be modified. The different channels are 1 (red), 2 (green), 4 (blue), and 8 (alpha). I’ve never been able to tell the difference when changing these values. I would leave it at 1.
scaleX/ scaleY: This is where the fun happens. These values determine how far a pixel gets displaced according to displacement map color shade.

Here is what the code looks like for the example:
——————————————————————————-
// Import classes
import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;
// Create a BitmapData instance. The DisplacementMapFilter will need this.
var bpm1:BitmapData = new BitmapData(mcMap._width, mcMap._height, true);
// Create a DisplacementMapFilter instance. Pass the BitmapData instance in as the first parameter.
var dpmFilter:DisplacementMapFilter = new DisplacementMapFilter(bpm1, new Point(0, 0), 2, 2, 10, 10);
// Add the DisplacementMapFilter into the MovieClip’s “filters” Array.
mcClip.filters = [dpmFilter];
// Call the “draw()” method of the BitmapData class to continually update the DisplacementMap on the MovieClip.
mcClip.onEnterFrame = function() {
bpm1.draw(mcMap);
};
——————————————————————————-

PS: The example used an image sequence I created in AfterEffects because it would illustrate the power and koolness of the DisplacementMapFilter. I added the exact Bitmap sequence inside the affected MovieClip, masked it out to the size of the image and gave it a “MULTIPLY” blending mode for shadows and extra fanciness! Let me know what you think.
SIDE NOTES:
- You may want to always make the DisplacementMapFilter larger that the image/movieclip you will be affecting. You will notice a cutoff depending on how much the pixels will be displaced. Take my word for it.
- Anything that has contrasting color values (ex: balck/white) can be used as a displacement map. Images, image sequences, video, vector gradient fills, I would say ANYTHING.