This is the Title of the Book, eMatter Edition
Copyright © 2007 O’Reilly & Associates, Inc. All rights reserved.
22
|
Chapter 1: Introducing the Flash Communication Server
If an ID is available, the application will accept the client’s request to connect and
send the client its user ID by invoking setID( ), which was introduced earlier under
“Remote Methods,” on the client:
application.acceptConnection(client);
client.call("setID", null, client.id);
We’ll look at the client-side setID( ) method again later. Finally, the application lets
all the other clients know that a new client has connected, so they can subscribe to
the video and audio stream the client will publish:
users_so.setProperty(client.id, name);
The setProperty( ) method saves the name parameter in a slot named after the client’s
ID string.
Later, when the client disconnects by clicking the Disconnect button or by visiting a
different page with her browser, the application.onDisconnect( ) method will be
called on the server and passed the client object representing the client that has dis-
connected. When a client disconnects, we need to reclaim her ID string for use with
other clients, and we need to delete her slot in the
users shared object to indicate she
is no long connected:
application.onDisconnect = function (client) {
idPool.push(client.id);
users_so.setProperty(client.id, null);
};
The application pushes the ID back into the idPool array and sets its slot in the
shared object to
null.
Building the helloVideo Client in Flash
The Flash movie we are going to walk through building will automatically publish
audio and video for the person using it and will play any audio and video being
streamed from the other clients. When it connects to the server, it receives its own
unique user ID string in return. It will publish a stream named after its user ID while
monitoring changes in the
users shared object to discover the unique ID of each user
who connects. It uses the user IDs in the
users shared object to play each remote
user’s stream.
Building the user interface
Figure 1-6 shows the user interface for the helloVideo client. Each user’s video is dis-
played 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
This is the Title of the Book, eMatter Edition
Copyright © 2007 O’Reilly & Associates, Inc. All rights reserved.
Hello Video!
|
23
display the name each user enters in the My Name field. Note the TextInput compo-
nent 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.
Figure 1-6. The helloVideo Flash movie
This is the Title of the Book, eMatter Edition
Copyright © 2007 O’Reilly & Associates, Inc. All rights reserved.
24
|
Chapter 1: Introducing the Flash Communication Server
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.
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 com-
ponent the instance name
nameInput.
3. Set the Text parameter of the Label to the text
Name: using the Properties panel.
Figure 1-7. Using the Library’s Options menu to add an embedded video object

Get Programming Flash Communication Server now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.