Posted by & filed under Motion Graphic, Web Design.

Webcam Motion Detection Interface Using FlashCreated using Flash, this application detects motion over the ‘buttons’ of the interface and brings back the content selected. This is an experimental interface which attempts to break free from the restraints of keyboard and mouse. You must have a webcam and preferably a well lit room to view the file. Tutorial files for this project are available from the Web Designer site.

7 Responses to “Webcam motion detection”

  1. Girl-e

    Hi Mark,

    I’ve always loved this AS2 tutorial and have been attempting to experiment with webcam and AS3,which I am just starting out with.

    I’ve managed to create reflections etc. but as far as motion detection using buttons goes, I’m having real trouble figuring out how the “Core Testing” section would work in AS3. In particular, the infamous _root issue presents itself when trying to convert this key function – and I’m also a bit confused with the “ballNew,” “impact” and “val” variables.

    Could you shed more light on this function and AS3 translation, or recommend some links to visit to help me on the path to AS3 enlightenment?!

    I’ve been attempting to write it as a class for the button MovieClip assisted by your new particle tutorial in Web Designer mag this month!


  2. Mark

    Hi Colette

    The root issue arrises when talking to objects on the stage. So in AS3.0 we normally store these in an array so we can loop through them with a for loop. This avoids having to use _root.

    ballNew is an x and y point and I would write it as such in an As3.0 version. This just stores the position of the button (named impact) over a flipped version of the video. The val variable is a temporary colour change found at the X and Y location of ballNew. So if it changes it registers as a hit, but two hits are required to trigger the button functionality to allow for random noise that creeps in with the camera.

    To be honest it’s going to take a lot of work in taking this across to As3.0 because the language is so different and the way we work with it uses a slightly different approach. A straight line by line conversion will not be easy to replicate.

    All the best though.


  3. Girl-e

    Hi Mark,

    Thanks for explaining – it helps clarify those areas I wasn’t sure about.

    Issues such as _root disappearing in AS3 are taking a while to get used to! As you say, it is a very different language, but it’s interesting to have a look at how that changes the approach, as well as the code.

    Thanks again – always look forward to more great tutorials :)

    Best wishes,


  4. Marcelo C

    Hi Mark,
    I did not have access to the magazine since I’m in Brazil, but I download the Fla archive.
    I’m designer and actionscript a little time and I’m having a hard giant and nobody can help me. How can I do to call a next frame or a new swf in place to move the movieclip “content_mc”

    Thank you and congratulations for the excellent work!
    And excuse the bad English …


  5. Nelson Rodrigues

    Hi Mark,
    I found your blog when I was searching for elements and ideas for a school project.
    I want to try some things with your application but I can’t find the tutorial on the webdesigner site, would you be able to provide it to me?
    Thanks in advance

Leave a Reply