- Feasible Impossibilities - https://www.impossibilities.com/v4 -

Virtual Elmo Overhead Digital Visual Presenter – Flash Source Files

We had a great Philadelphia Flash MMUG [1] meeting tonight. Thanks to all the students from the Flash and mCommerce classes at the Art Institute, we had close to 70 attendees at one point. Great turnout. The first half of my presentation was about Flash Lite 1.1. I had a chance tonight to use an idea I came up with a while back when the Flash MX first came out and introduced the Camera object. I wanted to demonstrate applications running on a real phone (my Nokia 6600) while also showing code and info on my desktop. I also didn’t want to have to switch video feeds on the overhead projector since I’m just a one man show up there in front of everyone. I wanted it to be as seamless as possible, yet still provide a real feel for how things work and appear on a device. I wanted a PIP or picture-in-picture effect if you will. I only have one regular projector that I bring, but I needed an Elmo style projector [2] to even come close. Unfortunately, I cant rely on one being everywhere I present, so I built my own with Flash, the Camera object and my Pyro DV Firewire webcam. I had used this method before to show some brief Pocket PC Flash content, but it really worked great with the form factor and size of my Nokia and Flash Lite 1.1 content. I also spruced up the application a bit to make things even more flexible. After building the application in Flash to show the video from my webcam at a resolution of 640×480 at high quality, I used a trial version of the Mac OS X release of Screentime’s mProjector [3] to turn the .swf into a “widget” application that floats above all other windows and applications.
Note: You could also accomplish this same floating trick by hacking the Central Trace Panel application [4] that Mike Chambers [5] put together, by replacing the .swf in it with mine. On a Mac simply open the Central Trace Panel package and find and replace the Central Trace Panel .swf file with mine, renaming it to match the original. alternately you can use the source Mike released to modify and build your own with Xcode.
So after everything was working, I had my webcam on the small tripod it came with, aiming down onto the table at my Nokia. See this photo [6] and this screenshot [7] of it in action. I used the tiny Symbian Torch application [8] to keep my backlight on all the time for a better view and lighting. The Virtual elmo app I made, allows you to rotate the video to adjust for which side you have your camera on. By rotating the video 90 degrees to the left or right you can show video in a similar tall portrait format that most phones/devices follow and allow the extra keys, and input buttons/controls to be seen as well. I am right handed, so I set mine up to my right, with the camera to the right of my phone. It took a little practice to not shake so much, but a little duct tape to hold things down makes it easier to control and keep your eye on your screen at the same time. My Pyro camera supports high resolution and high frame rates thanks to its firewire connection. I set the app up just to use 15fps and that still looked great. You might experiment to see what works best for you. I could have gotten fancy and added sliders, etc. but wanted to keep it simple since I was going to have other apps and my presentation running at the same time. I’m sure other cameras like the Apple iSight and other USB 2.0 based camera offer comparable quality and performance. So, if your doing any presentations and want to show devices, but don’t have access to an Elmo [2] do yourself a favor and download this 112k, tarred, gzipped source file with compiled .swf [9] and give it a whirl.

Right now my version does only a few things.

  • You launch it and it pops up the settings dialog so you can set permissions and your video feed.
  • It starts showing local video from your video feed at a 90 degree angle – portrait mode.
  • Click anywhere in the screen (except for the bottom 40 or so pixels) to pause the feed and show the rotate buttons.
  • Use the rotate Plus 90 or Minus 90 buttons to adjust for what side and orientation your webcam is aiming at your device
  • I didn’t have a need for a landscape mode, but you could add that in rather easily. The rotation uses ActionScript based tweening classes for some smooth movement when you rotate the view.
    Again, it works best if you use something like mProjector or Mike’s Central Trace Panel to make it a floating widget, but it doesn’t have to be. Actually you could simply drop it in your Panels folder to allow it to appear directly in the Flash IDE itself. Let me know what you think, if its useful or if you improve upon it at all.