Stupid Web Cam Tricks: Number 1

Web cameras are wonderful devices. Hook one up to your computer and you can wave at Aunt Millie in Manchester, U. K. If Millie has one, she can wave back at you. How boring. Web cameras can be an absolute blast to play with and you can be funnier than Bill Horvath was when he wore the lampshade at a recent CommunityMX party. All you need to do is think a bit differently. In this tutorial you will turn your web camera into a kaleidoscope and the web equivalent of a fun house mirror.

Seeing as how it has been a few months since I last explored web camera usage, now might not be a bad time to review getting a web camera to play in Flash.

Flash and the Camera object

The first thing to understand about using the camera objects is that its primary purpose is to broadcast a video feed from your camera, through the Flash Media Server 2 or your web server to the SWF in a web page. It does this through the use of ActionScript's Camera class. Though waving at Aunt Millie is the primary purpose of using a web cam, you can also use this class to allow users with web cams to see themselves and even put themselves into some rather interesting circumstances you devise.

The other aspect of using a web cam with the Flash Player is that any SWF that tries to access a camera will kick out a Privacy dialog box that lets the user choose whether to allow or deny access to the camera. This Privacy dialog box also lets you choose the camera to be used. More about that in a minute. Finally, though you can connect a number of cameras to your computer, the camera object will only let you display them one at a time. Connect your web camera to your computer and let’s have some fun.

  1. Open a new Flash document. Open the library and create a video object by selecting New Video from the Library pop down menu. Drag the video object to the stage from the library.
  2. Click once on the video object and give it the instance name of myVid. Also set its size to 320 pixels wide by 240 pixels high.
  3. Add an Actions layer to the main timeline, open the ActionScript Editor by selecting Window > Actions and entering the following two lines of code into the Script Pane:

var myCamera: Camera = Camera.get();
myVid.attachVideo (myCamera);

The first line retrieves the camera object using the Camera.get() method and gives the camera a name by assigning it to myCamera. The second line simply attaches the feed from the camera to the video object on the stage. That is all you need to get in the game. Go ahead, test the movie.

You don't even have to enter those two lines. If you are lazy, the one-line method is:


Though you are using a video object that is 320 by 240 to play the video feed you can use any size you wish. Just be aware that every time the camera is detected, the Privacy Settings dialog box will appear over the SWF. This means if you have a video object on a stage that is 160 by 120 your user is going to have a real problem because the Privacy Settings dialog box will be larger than the stage. If you do use a web camera the minimum stage size is 215 by 138 pixels which is the minimum size required by Flash to display the dialog box.

The camera at work.

Image 1. Hello Aunt Millie

You may have noticed the empty parameter in the Camera.get() method. All that means is use the first camera found that is connected to your computer. If you were to have three cameras they would have index values of 1,2 and 3. If you wanted to use the second camera the method would be:


If you haven’t been able to get your camera to connect to the video object, all is not lost. Sometimes there are multiple camera drivers installed and Flash may have picked the wrong one. To choose the proper driver test the movie again and follow these steps:

  1. Right-Click (PC) or Control-Click (Mac) on the SWF this will open the context menu. Choose Settings.The Macromedia Flash Settings dialog box will open.
  2. Along the bottom are four icons. The last two look like a microphone and a camera. Click the Camera icon.
  3. This is the area where you can choose your camera. Just click on the pop down list and, when you find your camera, select it and click the Close button.

The Camera settings.

Image 2. Choose your camera through the SWF Settings dialog box.

If you are a Mac user and connect an iSight camera to your computer the camera settings may give you a bit of grief. You may see your iSight listed as a choice. If you choose it, the image quality will be absolutely terrible. Instead, choose the generic FireWire camera- IIDC FireWire Video- shown in the above image.

Now for the stupid web cam trick. Wouldn't it be neat to have a bunch of video feeds with the end result being a sort of kaleidoscopic effect. This is accomplished by simply “flipping” the movie clips containing the video object. Let's have some fun.

  1. Create a new movie clip and add a video object named myVid to the movie clip. You add the video object by selecting New Video... from the Library's pop down menu. The Video Properties dialog box that opens will, first, ask you to name the object. In this case the default - Video 1- will do. The next question essentially asks if you want to use ActionScript to feed the video into the object or whether the video will be embedded on the time. Considering embedding is "evil", be sure to select Video(ActionScript-controlled) before you click OK.

  2. Add a new layer to the movie clip's timeline name it Actions and add the following code to the Actions layer:

var myCamera: Camera = Camera.get();
myVid.attachVideo (myCamera);

  1. Close the Symbol editor and drag four copies of the movie clip from the Library onto the stage. Create a square with the movie clips and be sure that each clip is aligned with the others on the edges where they touch.

The movie clips on the stage

Image 3. The movie clips are on the stage and aligned with each other.

  1. Select the movie clip in the upper right corner and select Modify > Transform > Flip Horizontal. You will know the movie clip has flipped because its registration point will move to the upper right corner from the upper left corner of the movie clip.
  2. Select the movie clip in the bottom left corner and apply a vertical flip transform to the selection.
  3. Select the last clip and flip it vertically and then flip it horizontally.

You can tell the clips have been "flipping" by keeping an eye on the registration point- that little +-sign in the corner -for the movie clip. It will change position. When you finish the registration point will be at the four corners of the square.

The clips are aligned and flipped.

Image 4. The movie clips have been "flipped" as indicated by the positions of the registration points.

  1. Connect your web cam and save and test the movie. Watch what happens as you move.

The final product.

Image 5. I just know Flick will make me pay for this.


Creative Commons logo