Section 2.4. Building a Simple Chat Room

2.4. Building a Simple Chat Room

Now that you know how to connect to a FlashCom application using the SimpleConnect and ConnectionLight components, you can proceed to add features to the application. In the following steps, you will learn how to add the PeopleList, Chat, and UserColor components to the basic_app application:

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

2. 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

   
   

3. 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

   
   

4. 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

   
   

5. 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 components list_mc , chat_mc , and userColor_mc as shown in Figure 2-23.

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

   
   

6. 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.