The Chat and UserColor Communication UI Components

Giving "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:

  1. Open your previous example, myFirstApp, in the Macromedia Flash MX authoring environment. You should already have a SimpleConnect, a PeopleList, and a ConnectionLight already on the Flash stage.

  2. Drag a Chat UI component from the Components panel and place it on the stage.

  3. Name the Chat component chat_mc in the Properties panel. Remember, you must have the component selected to edit its properties.

Figure 4.1. The Chat UI component.


The Chat component has three elements to it:

  • The Message Input form

  • The Send button

  • The Message Display window

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:

  1. Drag the UserColor component from the Components panel to an empty place on the stage.

  2. Name the component userColor_mc in the Properties window.

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:

  1. Select the SimpleConnect component on the stage again and double-click the field that is now showing peopleList_mc, connectionLight_mc next to Flash Communication Components. The Values window appears as in Figure 4.3.

    Figure 4.3. The Values window of SimpleConnect.


  2. Click the plus (+) sign. This creates a new row in the Values window. Double-click the new row and enter the instance name of the Chat component you just added: chat_mc.

  3. Click the plus (+) sign again and add the userColor_mc instance to the list.

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 emoticons?those 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!

    Part I: 10 Quick Steps for Getting Started