Open the component_connection.fla you created in the last section. Resave this document as component_chat.fla.

Create a new layer named list_mc. On frame 1 of this layer, drag an instance of the PeopleList component from the Components panel to the Stage. Name the instance list_mc using the Properties panel. Also, place this component near the lower-left edge of the Stage, as shown in Figure 2-20.

Figure 2-20. The list_mc instance

Create another layer named chat_mc. On frame 1 of this layer, drag an instance of the Chat component to the Stage. Name the instance chat_mc using the Properties panel. Place this component to the right of the list_mc instance, as shown in Figure 2-21.

Figure 2-21. The chat_mc instance

Create another layer named userColor_mc. On frame 1 of this layer, drag an instance of the UserColor component to the Stage. Name the instance userColor_mc using the Properties panel. Place this instance below the SimpleConnect and ConnectionLight instances near the upper left of the Stage, as show in Figure 2-22.

Figure 2-22. The userColor_mc instance

Select the connect_mc instance on stage, and double-click its Communication Components parameter in the Parameters tab of the Properties panel. In the Values list, add the instance names of the three communication componentslist_mc, chat_mc, and userColor_mcas shown in Figure 2-23.

Figure 2-23. The updated Values list for the Communication Components parameter of the SimpleConnect component

Save your Flash document. In order to see the chat elements working properly, choose File Publish Preview Default - (HTML). Leave the web browser's window open, and go back to the Flash authoring environment. There, choose Control Test Movie to open another version of the Flash movie. When the movie loads, enter your name in the username field of the SimpleConnect component and click the Login button. Your name should display in the PeopleList component, both in the Test Movie environment and the web browser window. Now, log in with another username in the Flash movie running from the browser window. Again, you should see the new name populate both movies' PeopleList instance. In each movie, choose a unique color from the UserColor component. Finally, enter a message in the chat message window, and click the Send button. You should see the message appear in the history area of both Chat instances. The color of the message text should be the same color selected in the sender's UserColor combo box.