Camera Interaction In Flash Goes Public (w/video)!

We recently had the pleasure of working with Tequila (TBWA \ Chiat \ Day‘s interactive arm) to build a very unique interactive piece to market Nissan’s new Sentra model. The concept was based on the interactive webcam systems I’ve been playing with at incomplet.org[Moved to incomplet.gskinner.com]. Media vans (trucks with big screens on the side) in seven US cities would act as mobile installations, and users could play on screen via camera input.

Users standing in front of a red screen are masked out and projected over a video running in the background. Users can play with any of five interactive “lessons”: Catching virtual leaves, controlling the volume of different tracks of music with their movements, wiping fog and water drops off the screen, being chased by a swarm of fireflies, and kicking around a beachball sized soccer ball.

We even rigged it so that the software could all be operated by the van operators using a wireless remote from in front of the screen.


In addition to building all the software (100% Flash & AS3) and working with Tequila to develop the interactive concepts, we sourced all the hardware, which was more of a challenge than I expected. Even though we managed to do everything with off-the-shelf equipment, getting 9 sets of everything (7 on-site, 1 for development and 1 for back-up) was trickier than I would have thought.

It was a learning process, but I think we now have it down to a science, and I’m looking forwards to the next opportunity to apply this technology. The Nissan installations have been running for 3 weeks now, and it seems to be going very smoothly so far.

We also threw together a rough video of it in use in our office (thanks Kyle!) for anyone interested. The compression from SnagIt is pretty bad, and we didn’t bother making it beautiful, but I’m planning to post a better video (and more info) when I get back. I just wanted to post something while people could still check out the installations for themselves. (sorry, no audio – we don’t own rights to the music / audio in the installations)

I’m looking forwards to checking it out on-site in San Francisco this Saturday. Here’s the schedule for the final week if you are interested in having a look. I’d love to hear what you think of it.

Chicago: OakBrook Court Mall Nov 15-18, 11am-7pm
Nov 19, 11am-6pm
Dallas: 5307 East Mockingbird Station Nov 15-19, 4pm-12am
LA: Venice Beach Boardwalk Nov 15-19, 9:30am-5:30pm
Miami: Downtown-Bayside Market Place Nov 16 & 19: 1pm-9pm or 4pm-12am (game days)

Nov 17 & 18: 4pm-12am

New York: corner of Lafayette & Houston Nov 15-17: 11am-7pm
Nov 18 & 19: 10am-6pm
San Francisco: Stonetown Mall Nov 15-19, 11am-7pm
Washington DC: Landmark Mall Nov 15-18, 10am-6pm
Nov 19, 11am-6pm

I’ll be posting some photos and video of the live installation in San Francisco, along with some other good stuff in a week or so.

Tequila was a ton of fun to work with, and I want to thank them and Nissan for taking a big chance on using bleeding-edge technology in a very public way. It was awesome having experimental work like this turn into a real commercial project. Definitely one of the coolest projects I’ve worked on in a long time.

Also, good news for those of you following my Resource Management articles: This system loads large videos, shifts tons of data, and uses BitmapData extensively. With some careful optimization I was able to get it to run 16hrs+ straight without ANY increase in memory or CPU usage. And yes, I will post the final article in the series soon!!

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

15 Comments

  1. That’s quite the accomplishment! I’m more so impressed with how the agency got the client to go with such a bleeding-edge concept.

    Kudos to them, and yourself!

  2. Gratz Grant, I’ll check it out in SF on Sunday. I fly in from London for a bit of a get together with some fellow flashers and a bit of R&R. Will be cool to see it in the flesh so to speak. 😀

  3. That’s awesome, Grant! Congrats on such a great project- will try and swing by Stonestown this weekend and say hi. Nice to see all that sweet Gallery Incomplet tech get put to great use… 😀

  4. Setting up dedicated machines could be a big pain. This is also the reason for a research I’m doing (just posted some info about it: http://nuthinking.com/blog/2006/11/14/future-development/ ).

  5. Next-gen video

    Next-gen video: Adobe Flash Player is more than a traditional video player. It treats video as a first-class media type in an interactive, programmable environment. Grant Skinner shows where this is going… he greenscreens an actor against varying bac…

  6. how does the interactive fit into the branding for Nissan’s new Sentra model?

    Does it tie in with the tvc’s? or is it an isolated piece?

  7. Hi Grant,

    I’m interested that you said you’d had problems getting multiple copies of the hardware. Was it a problem buying the kit of getting it set up? In the past I’ve done this by setting up one machine and then creating a disk image of the setup which can then be installed on all the others. You can put the image on a DVD for distribution which is easy to send around. In the future I’d like to use Flash memory cards instead of hard drives for installations. Should be more reliable and it would make it very easy to send out software updates.

  8. WHOA !!

    nice vid interactivity .

  9. Grant, your stuff is really cool. I do much the same sort of work for HMC Interactive in the UK – although we use Director for most of our camera tracking stuff.

    Great to see offline interactives becoming more commonplace!

  10. Nice for flash, but really oldskool in media art.

    Respect,

    williams!

  11. I saw you at flash in the can talking about how you would be doing this. I really wish i got to see it, it sounds amazing.

    Eric

  12. Really impressive stuff! I noticed in most of your examples that the webcam captures have been limited to 160×120 resolution.

    I’ve been trying to increase webcam resolution in my own work, but can’t get setMode() to do anything with my hardware. I know the webcams I’m using support higher res video (e.g. Logitech Quickcam) but I can’t get Flash to take advantage of the available resolution.

    Just wondered if you had any luck going higher res with other cameras, or if there are any other tricks you know of to get full video res out of cameras in Flash?

    Thanks,

    Grant.

  13. Hi Grant,

    Your work it’s amazing.I have been inspired by your work and I started to experiment webcam interactivity for my terminal year project. This is a brief demo of my first experiment http://maestro.troisiemeoeil.ca. For my project I’am building a class package,SinergieLib, who will help other programmer to deal with motion tracking, color tracking and some other function who render video effect. This will by presented at the prom’s exposition from may 15th to may 22th, in Quebec City at Cegep-ste-foy’s Margelle room.

    If Grant Gibson read this, contact me i’am dealing with 640×480 on my webcam with setMode() function.

    I’am glad that you have made a commercial project with this technologie, this technologie have a great marketing potential. I hope you will do more!

    Thanks

    Tom

  14. Nicely put together. It’s very inspiring to see new innovations like this.

    Thanks

    Mateo

  15. Hello,

    I’m a dutch art student, I’m working on an interactive instalation for my final exam. I should be kinda like this project,

    I’m using a webcam for video feed, I chroma key the greenscreen and I want movieclips to react with the motion at the webcam. I came as far as a working chromakeying effect, I cant combine the motion tracking part.

    Is it possible for u to help me with it? I’m looking for someone in holland to help me but I cant find anyone with the right knowledge.

    Thank you anyway

    Iris

Comments are closed.