Using the Kinect to Control Flash: An Introduction – Active Premium
plus

Using the Kinect to Control Flash: An Introduction – Active Premium

Tutorial Details
  • Difficulty: Intermediate
  • Platform: Flash
  • Language: AS3
  • Software used: Flash Professional CS5
  • Estimated Completion Time: 1-2 hours
  • Libraries Used: TweenMax, TUIO
Download Source Files

It’s time for another excellent Active Premium tutorial exclusively available to Premium members. In this tutorial, you’ll learn how to create a Pong game that can be controlled by moving your hands, and a picture gallery that can be navigated in the style of Minority Report — all in the browser’s Flash Player with no drivers required, if you’re on the Mac.


Preview

Let’s take a look at what we will be working towards. First, a Pong game where each paddle is controlled by a player’s hand:

Second, an image gallery with gesture control, in the style of Minority Report:

Zoom is two hands on one image and then you expand them away from each other.

Rotate is two hands on an image, one going up and the other going down.


Will It Work for Me?

You’ll need a Kinect, of course! Assuming you have that, if you’re on a Mac, it’s very easy to get this working; no drivers are required. On Windows it’s a little more fiddly: you’ll need to install some drivers, and the libraries to make Flash recognise the Kinect are still in beta and not as polished as the Mac versions.


Active Premium Membership

Activetuts+ Premium Membership

We run a Premium membership system which costs $19 a month which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium and Photo Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.

Add Comment

Discussion 12 Comments

  1. Bwakathaboom says:

    I find it hilarious that Microsoft’s Kinect works better on a Mac!

  2. Xander says:

    Why is it hilarious? Microsoft doesnt build PC’s.

  3. ahmed says:

    where is the tutorial it self I just find the source files

  4. Andrea says:

    This tutorial is not correct..
    You say to comment some functions in the interface, but it will fire up errors in the ITuioClient, and for me the tutorial is not working. So it looks like you forgot something…

    I can’t control flash, even though I have set up correctly the TuioKinect app (near and far threshold)…

    What should I do?

    • Staff

      Hey Andrea, sorry that you’re experiencing problems.

      Are you sure you commented out the correct lines? The code was tested before publishing. Have you tried taking Jon’s code, compiling it, and testing that?

    • John says:

      The same for me too..

      The example only works online..

      Even the finished examples do not work for me when I compile them..

      I dont think that there is a mistake in the tutorial but that something is missing on the file associations or the structure of the folders or… i dont know..

      I got Premium Membership for this tutorial and its a shame that I cant make it work!!

      I need to finish a project Ive been trying to finish for the past couple of months and I hoped that this would be my solution…

      Hope that we can figure the problem out soon!!

      • Staff

        Hey John, I spoke to Jon and here’s what he said:

        “It could possibly be a security issue with his player. Sometimes that can happen when using sockets.
        He needs to right-click on the player, choose “security settings” and then make sure that the list of allowed directories includes the location of his Flash files.

        You don’t get this error when running in browsers I think, as Flash lets you run sockets locally through browsers. ”

        Take a look and let me know whether that helps.

  5. John says:

    YES!!

    Selected the files directly in the Global Settings on the Browser (not the System Preferences on Mac) and everything is working like charm!!!

    CANT WAIT!!! Hope I’ll be able to finish my project on time… got 3 more days!!

    Thanx and hope that I can get some more help if i get stuck in anything in the process.

    Thank you so much!!

  6. xoxo says:

    Thanks for your great written tutorial. but, just like the others above, i still can’t run the flash on my mac. the online demo works fine, but no reaction on the files from the zip. John, you said u did managed it? could u explain it in detail?

  7. natey says:

    docent work for me either. i have used the global settings before to allow a google map API to run from a local folder so I’m aware of this security issue.

    this is very odd! according to the Terminal window it states that its serving to Flash and I have also added the folder location in global settings with no luck. from the zip file i have had to re-publish the finished solutions in order to generate a HTML file. I have tried both Safari and Firefox. Can you run the SWF directly from the folder? – assuming you have set its security permissions in the global settings.

    the kinect LED is blinking steadily. should this be a solid green not blinking?

    are there any basic tests you can run to test to see if a connection is being made to Kinect? if so how do you go about this?

    some screenshots and help on this would be appreciated. saw this tutorial thought it was awesome but gutted i can’t get this to work!!! I’m not a flash developer novice either!! its very very odd!!

    • natey says:

      update: i downloaded OpenKinect AS3 experiments from:

      https://github.com/silviopaganini/openKinect-as3-experiments

      run the file TuioKinect app from inside the libs folder and the Kinect is definitely working as i wave my hands in the quad viewports :-)

      so definitely looks like a Flash security global issue!!

      Could it be due to the fact that I’m running Lion and/OR a particular Flash Player version? I am running the latest.

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.