Video and the Flash Communication Server

Figure 1-6 shows the user interface for the helloVideo client. Each user’s video is displayed above the name he chose when he connected. The example shows the screen Robert used to connect.

The interface is made using four movie clips and a few components. There is one movie clip for each user. The movie clip contains an embedded Video object and a Label and TextInput component. The TextInput component in each movie clip will

Figure 1-6.  The helloVideo Flash movie

display the name each user enters in the My Name field. Note the TextInput component at the bottom of the screen containing the text “robert.” I also use a TextInput component to display the current connection status of the application. The button also indicates that the user is connected by displaying the Disconnect label. If the user is not connected, it toggles to Connect.

To build the interface:

1. Start with an empty Flash movie and set its dimensions to 320 x 480 using the Properties panel.
   
2. Create a new library symbol using the Insert -> New Symbol (Ctrl-F8) command.
   
3. In the Create New Symbol dialog box, enter the symbol name GuestVideo and set the Behavior type to MovieClip. Enable the Export for ActionScript option, (click the Advanced button to display this option if it isn’t already visible). Set the Identifier field to GuestVideo as well.
   
4. When the symbol is created in the Library, the Stage displays the empty symbol and its registration point. We want to place an embedded Video object within the symbol so that the video’s upper-left corner is at the symbol’s registration point.
   
5. To add a Video object to the Library, open the Library panel (Ctrl-L or Cmd-L), and choose New Video from the Library panel’s Options menu, as shown in Figure 1-7.
   
   
   Figure 1-7.  Using the Library's Options menu to add an embedded video object

To place the embedded Video object within the symbol so that the video’s upper-left corner is at the symbol’s registration point:

1. Drag the Video object from the Library to the Stage and position it at the GuestVideo symbol’s registration point. Use the X and Y fields in the Properties panel as illustrated in Figure 1-8 to position it at exactly (0, 0), and give it the instance name video.
   
2. Drag one Label and one TextInput component from the Components panel to the Stage. Arrange them as illustrated in Figure 1-8 and give the TextInput component the instance name nameInput.
   
3. Set the Text parameter of the Label to the text Name: using the Properties panel.
   
   
   Figure 1-8.  Using the Library menu to add the Video, Label, and TextInput to the GuestVideo symbol

Now that you’re done creating the GuestVideo symbol with the embedded Video object, we want four instances on stage (to display the four possible simultaneous clients):

1. To return to the main movie’s Stage, click the Scene 1 link in the Timeline panel’s Edit bar.
   
2. Drag the GuestVideo symbol from the Library to the Stage four times and arrange the four instances as shown in Figure 1-6. Select each one in turn and set its name toguest_1,guest_2,guest_3, orguest_4using Flash’s Properties panel.
   
3. Finally, at the bottom of the movie, add the two Label components, two TextInput components, and one Button component. Position and resize them as illustrated in Figure 1-6. Name the large TextInput instancestatusInput, the small TextField instanceuserNameInput, and the Button instanceconnectButton.

With the main Stage of the movie laid out, it’s time to start coding.