Official website for Web Designer - defining the internet through beautiful design
Author: Dave Harfield
27th April 2009

Add webcam fun with Flash

Learn to manipulate the webcam in Flash to create a fun interface

Learn to manipulate the webcam in Flash to create a fun interface

Add webcam fun with Flash

With webcams being as cheap as chips, as we say in the UK, and most new laptops having integrated webcams, we thought it best we have a play this month with webcam integration with Flash CS3 and ActionScript 3.0. We also thought that instead of creating the normal webcam experience where you see yourself and just wave, we would make this tutorial more fun.
So this month, you will be creating your own family portraits by adding your face to any number of animals, plants or things that you may find amusing. In the boxout, you will also get a quick look at a simple implementation of camera motion detection. So enough with the chitter chatter now, and let’s get your face on the screen with this month’s wonderful webcam walkthrough.

This tutorial was written by Darren Richardson and originally appeared in Web Designer magazine issue 152

Click here to download all files for this tutorial

01 Set up

Add webcam fun with Flash

Open Flash CS3 and create a new Flash File (ActionScript 3.0), then save as ‘cheeky.fla’. Open up the Properties panel (Ctrl+F3), press the Size button and change it to 1,200 pixels wide x 800 pixels high. Give it a title of ‘WebCam fun’ and save your work.

02 Wall
Add webcam fun with Flash

Rename the first layer in the timeline ‘wall’, then create a new Movie Clip (Ctrl+F8) and call it ‘wall’ also. Next, inside the wall Movie Clip, draw a rectangle the same size as the stage (1,200 x 800px) and make the background colour ‘#663300’, which is a dark brown.

03 Lines

Add webcam fun with Flash

Next, create a new layer called ‘lines’. In this layer, use the Pen tool to draw uneven lines down the page. Last of all, create another new layer and call it ‘screws’. Now, using the Pen tool again, draw curls in-between a few of the lines to give the wall a wooden look.

04 Add video

Add webcam fun with Flash

As this tutorial is based around video, we should create a video object to use a bit later. Open up the Library (Ctrl+L), and at the top right of the panel is a little button that has lines and an arrow on it. Press this and add a new video, calling it simply ‘video’. You can also get to this menu by right-clicking inside the Library panel.

05 Plaque

Add webcam fun with Flash

Navigate to the main timeline and create a new layer called ‘plaque’. Create a new Movie Clip and call this ‘title’. Inside the Movie Clip, rename the first layer ‘bg’ and draw a rectangle with a heavy line weight of five. Create another layer called ‘text’, and using the Text tool, add a Static text field on top of the bg layer, choosing a fun font.

Pages: 1 2 3 4 5

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • photo retouching

      A nice way to spice up webcams! nice tut

    • Pingback: webcam fun with Flash | Designer Depot

    • http://link Ganry74

      It drives not only the Boom but also a monocular projector that displays on a 4-foot by 6-foot screen at one end of a nearby conference table that seats eight. ,

    • mauritius holidays

      You have written a very informative post. I came across your blog via by searching relevant information. I have bookmarked your site and sent the link to sme of my colleagues are will also find that useful.