Archive | October, 2011

My Introduction to Gesture Tech! (w/ Flash)

11 Oct

Hey everyone! I’m new to this whole “coding” thing.

One of the languages I’m attempting to master is ActionScript 3.0. It’s a language native to Flash and so far I feel I’ve had a lot of luck picking it up! Though Flash has had its share of ups and downs and detractors over the last few years it’s apparent Actionscript is going to be here for a good while longer. Why? Brand new and exciting uses for it keep on creeping up from unlikely places.

One such use is gesture technology. I’ve been experimenting with it. The technology is called Ostrich, and was created by interactive development guru Dan Zen. (link!) Dan Zen is responsible for a lot of really cutting edge development and experimentation in Flash and better yet he’s prone to sharing it with the world. So check out his site if you’re interested.

To use Ostrich all you have to do is put it in your classes folder and import it using the class path structure. (google it!) Ostrich is so powerful because it can serve several functions at once. First, it sources and draws the users camera to stage. You have to declare and add the camera to the stage as an object. This is the lynchpin of all Ostrich – because if you don’t have a camera inputting commands to Flash how could it ever work? This is gestures, after all — and we get those gestures from the camera! Next, you can draw a cursor to the stage. Ostrich will do the heavy lifting for you – determining the x,y coordinates of the cursor on stage depending on what motion is on screen. If there happens to be two people moving their hands on screen it averages the motion between them. This can cause the cursor to stick in the direct middle of the two areas Ostrich is sensing motion. So if one person is waving their hand in the bottom left corner and another person is waving their hand in the top right the cursor will appear somewhere in the middle of them! Ostrich also allows you to recognize blobs (such as hands) and input graphics over them. Check out Dan’s site for more samples — for my experiment I was messing around with the cursor only!

The simple Flash program I made from Ostriche’s technology draws a balloon to the stage wherever the cursor is. And you can move the position of the cursor by waving your hands around. The balloon will float to wherever it senses motion from. It works best if you stand out of frame and use only your finger / hand to lead the balloon. My first idea was to draw clouds to the stage, and whenever the balloon hit a cloud its position would reset back to the top left corner. So essentially it was a maze! And you’d have to try and navigate your balloon through the maze and keep it out of trouble. But it wasn’t the balloon that ran in to trouble… it was me trying to craft this small game!

The problem was when I was trying to reset the x and y on the Ostrich camera the balloon would pop to the top left hand corner like I wanted it to, but immediately after that it would pop back to where it was before going to the top corner. Ostrich’s was still determining the x and y coordinates based on where it was sensing motion (instead of defaulting).

Bummer dude! 😦

Bittersweet, though! I mean, I got the balloon to follow your hand / motion on screen. That’s a win for a novice like me. Imagine if you could reset the coordinates cleanly, though?! I would have completed my first game! And with motion sensing, no less! As a work around I removed the resetting of the x and y coordinates. When you hit the cloud all the program does is trace “You’re hitting the cloud!”. I was thinking that I could make the balloon have a life bar and every time you hit a cloud it takes away from that hit bar. When your balloons life is reduced to nothing (after hitting the cloud 10 times or something) it’s game over.

Regardless of whether or not my game was successful I’m really glad I did this exercise using the Ostrich!  flash class code. It helped further along my understanding of drawing and manipulating objects in Flash without drawing them directly on the stage. Everything I drew from the balloon to the clouds was done by outputting movieclips from the library using Actionscript 3.

I’ll try and post my swf and fla/as files for you check out sometime. WordPress isn’t letting me upload them natively in WordPress for some reason.

– Andrew Corway