The Chat and UserColor Communication UI ComponentsGiving "Hello World" an entirely new identity, the Chat component quickly adds real-time text messaging to your Communication Server Application (see Figure 4.1). This exercise will build on the connection sample you built in the previous chapter. To add the Chat component, follow these steps:
Figure 4.1. The Chat UI component.
The Chat component has three elements to it:
When you or other people enter a message in the text field (showing "Hello" in Figure 4.1) and press Send, everyone logged in will see your name followed by your message. You can scroll the archive of the message to view what was previously said. When you are chatting, it is helpful to select a unique color with which to display your messages. This helps distinguish your messages from others. The UserColor UI component lets you select a color that will represent you in the Chat window (see Figure 4.2). Let's step through the process of using the UserColor component:
Figure 4.2. The UserColor UI component.
The UserColor component is simply a combo box that contains a series of color swatches. When a user selects a color, some Communication UI components will be visualized by this color. Registering these two new components with SimpleConnect is the next step. This is done exactly as you did in Chapter 3, with the PeopleList component:
Your Values window should now look like what appears in Figure 4.3. Your stage might be getting a little crowded now, so arrange and resize the components to look something like Figure 4.4. The components can be resized using the Free Transform tool on the Flash toolbar. Leave lots of room at the top because video is next. Figure 4.4. Lay out your components to look like this so that you have room for video.
Test your new chat tool using Test Movie (select Control, Test Movie or press Ctrl+Enter). You should immediately see your name in the login box. If not, log in again. Go ahead and type something, but don't let anyone catch you talking to yourself. When you are satisfied that it is working, leave the test movie running in Flash MX and load the myFirstApp.html file on Computer B. Log in, and you should see both users in the People list. Enter some messages, but be careful: If someone catches you doing this, who knows what they will think. It is recommended, at this point, to find a friend to help you test. It's going to get a lot more fun when you add the video cameras ! Try out the color selector. Notice how it changes the color in the Chat window on your next message. The UserColor component can contain customized colors; however, you will be forced to edit the ActionScript FCUserColor prototype. This is an advanced technique. There will be more discussion about customizing the UI components in Chapter 10, "STEP 10: Lobby Applications." You might be thinking, "That's great, but what if I want to filter my chatty figs into their own rooms?" At this point, you should explore the Rooms UI component. Yes, Macromedia thought of that and gave it to you, but we will cover that later in Chapter 10. There are some advanced techniques required in ActionScript to make it work. You might also find yourself pondering, "I like emoticonsthose little happy faces you get by entering a colon and closing parentheses :)but I don't see any emoticons included in the UI components." Well, you are on your own with that one. That UI component was not included in Macromedia Flash's UI component offering. But first, on to video! |