Tutorials

Broadcast video using the camera object in Flash

by Tom Green and Jordan Chilcott

The first thing to understand about using the camera object in Flash® is that its primary purpose is to broadcast a video feed from your camera through the Flash Media Server 2 to a SWF file in a web page. This means that if you have a Flash Media Server account with your Internet Service Provider (ISP) you can wave at Aunt Millie in Manchester, England, from your computer and, if she has a webcam, you can see her wave back at you. Though that is the primary purpose, you can also allow users with webcams who only use HTTP to stream video to see themselves and even put themselves into some rather interesting circumstances you devise.

The other aspect of using a webcam with the Flash Player is that any SWF that tries to access a camera will kick out a Privacy Settings dialog box that lets the user choose whether to allow or deny access to the camera. This 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.

Get started

Connect your webcam to your computer and let’s start looking at different ways of using a webcam.

1. Open a new Flash document. Open the library and create a video object. 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, and enter the following two lines of code in 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. (You can find out more about the Camera class by using Flash help.) The second line simply attaches the feed from the camera to the video object on the stage as shown in Figure 1. That is all you need to get in the game. Go ahead; test the movie.

Tip: 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 that 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 webcam, the minimum stage size is 215 x 138 pixels, which is the minimum size required by Flash to display the dialog box.

Figure 1: Hello World.

You may have noticed the empty parameter in the Camera.get() method. That directs Flash to use the first camera it finds that is connected to your computer. If you had three cameras, they would have index values of 1, 2, and 3. If you wanted to use the second camera the method would be Camera.get(2);

If you haven’t been able to get your camera to connect to the video object, all is not lost. Sometimes multiple camera drivers are 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 (Windows) or Control-click (Mac) on the SWF to open the context menu. Choose Settings. The Macromedia Flash Player 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 (see Figure 2), select it and click the Close button.

Figure 2: Choose your camera through the SWF Settings dialog box.

Create a video box

Now you will create a video box.

1. Open a new Flash movie and create a new movie clip named Vid. Add a video object to the library and drag that object to the stage. In the Property Inspector, set the instance name of the video object to myVid, set the dimensions of the video object to 240 wide by 180 high, and set its X and Y coordinates to 0,0.
2. Add a new layer to the movie clip timeline and name it Actions. Select the first frame in the Actions layer, open the ActionScript Editor, and enter these two lines of code:

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

3. Close the ActionScript Editor and click the Scene 1 link to return to the main timeline.
4. Drag two copies of the Vid movie clip to the stage and place them beside each other. Select both clips, open the Transform panel by selecting Window > Transform, and set the width to 130.0%. Before you do the scale, make sure the Constrain check box is deselected
5. Select the movie clip on the left and, using the Transform panel, set its vertical skew to 45%. Do the same thing with the movie clip on the right but set its skew value to -45. Align the edges of the movie clips as shown in Figure 3.

Figure 3: Use the Transform panel to scale and skew by the numbers.

6. Lock Layer 1 and add a new layer named Top. Draw a rectangle in this layer and fill it with a color of your choosing. Select the Free Transform tool and manipulate the rectangle to fit on top of the two movie clips. When you finish, it should look like a box. Unlock the layers.
7. Select Edit > Select All and convert the selection to a movie clip named box.
8. Using the Free Transform tool, scale the box to about half the size of the height of the stage. Move the box to the lower-left half of the stage, as shown in Figure 4.

Figure 4: The first box in position.

9. Alt+Shift-click (Windows) or Option+Shift-click (Mac) once on the box, drag a copy of the movie clip to the right, and align it with the right edge of the other movie clip. Make another copy and this time drag the copy to the top of the two boxes on the stage.
10. Save and test the movie. You are boxed in, as shown in Figure 5.

Note: If you really want to have some fun with this, put a bunch of the movie clip boxes on the stage and, using the startDrag () and stopDrag () methods, let the user stack the boxes.

Figure 5: Boxed in.

Flip video

As you discovered in the previous section, you don’t always need to have the video on a flat plane. In this section you keep the video on that plane but the end result is a sort of kaleidoscopic effect. This is accomplished by simply “flipping” the movie clips containing the video object.

To complete this portion of the tutorial, download the zipped file Flip.fla:

Download (ZIP, 5.71k)

1. Open the Flip.fla file. Everything is wired up and ready to go with this exercise. All you need to do is to flip the videos.
2. Select the movie clip under Flip Horizontal and select Modify > Transform > Flip Horizontal (see Figure 6). 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.

Figure 6: A horizontal flip.

3. Select the movie clip over Flip Vertical and apply a vertical flip transform to the selection.
4. Select the last clip and flip it vertically and then flip it horizontally.
5. Save and test the movie. As you move around, you start to look a bit “odd,” as shown in Figure 7.

Figure 7: Why should carnival fun houses have all the fun?