This exercise will step you through the process of developing a simple Lobby application to handle multiple chat rooms. Because this is the last introduction chapter, let's see how many UI components we can usenot because we have to, but because we can! This chapter will use relatively little ActionScriptjust enough to keep it interesting. The Flash UI components we'll use include the following:
Figure 10.4. The Login interface.
Figure 10.5. The Lobby interface.
Figure 10.6. The Chat Room interface.
Just because a large gamut of UI components will be used, you should still build a "use case" scenario to help you when you are coding. The user opens the Flash movie and is presented with a Login screen containing a Login prompt. There is no password authentication with this application. Everyone has access. Flash Communication Server accepts all connection requests and signals the client to enter the Lobby screen. The Lobby contains a list of current rooms and an option for the user to create a new room. Joining a room enters the user into the application instance of the selected room. The user can join a chat using text messaging or capture one of three video windows . Users who do not have video can participate using the Audio chat (audioConference) tool. At any point, the user can exit the chat room to return to the lobby and connect or create another room. If the user shuts down his browser, or disconnects during the visit to the room, the application cleans up all records of the user automatically. Exercise 10.1: The Macromedia Flash MX InterfaceAs you did in Chapter 9, let's start by building the Flash user interface and then move on to the scripts. The artwork used in these examples is available on the web site for this book (http://flashcom.PangaeaNewMedia.ca/). Start by preparing the Timeline. Use Figure 10.7 as a reference as you construct it. Figure 10.7. The Chat Room interface.
That's it for the Timeline. Now, assemble the interface components on the Flash stage. Remember to always know where your Timeline cursor is. This is a common mistake when developing in Flash. The Login Interface (Frame 1)The login interface is exactly the same as it was in Chapter 9. Use Figure 10.8 as your layout guide. Follow these steps:
Figure 10.8. The Login interface guide.
The ConnectionLights and Logout button will be available across all interfaces except the login, so there is no blank keyframe required on Frame 20. There are two ConnectionLights, so you can monitor two NetConnections (explained later in Exercise 10.2). Place a small text label next to the lights, as shown in Figure 10.8. The Lobby Interface (Frame 10)The Lobby interface is very simple. Use Figure 10.9 as your guide for layout. It only contains the RoomList UI component and a couple text prompts. Follow these steps:
Figure 10.9. The Lobby interface guide.
Add some color to the background to make it friendly for your user, and you are off to the races (see Figure 10.10)! Figure 10.10. The Lobby interface with a background applied.
The Chat Room Interface (Frame 20)The Chat Room interface is an assembly of UI components. Really, to demonstrate this tool, all you need is the Chat tool; but because this is the finale, let's have some fun. Each component will exist on the same layer on Frame 20. Use Figure 10.11 to help you build the interface:
Figure 10.11. The Chat Room interface guide.
That's it for the interface. Add some color to the interface to liven it up and you're ready for coding! The next exercise will add the code. Exercise 10.2: Coding the ApplicationThe ActionScript for this project is straightforward. Because this application uses a lot of UI components, there is very little scripting required. All processes are encapsulated within a series of functions to make it easier to present. Certain methods may not be the most efficient because they are built with training in mind. The concept behind a Lobby application is switching between application instances. You can maintain multiple NetConnection objects within a single Flash client; you can even be connected to any number of servers at the same time. Maintaining more than one connection exposes the Flash client to resources such as streams or SharedObjects across multiple application instances or servers. This may not be your best option, especially if user licensing is an issue. Each connection made to the server is registered as a licensed seat. If each Flash client maintains two connections with the server, you have just cut the number of clients that can connect in half. A 10-user license server (Personal edition) supports only five users if each Flash client requires two connections. Lobby applications must carefully manage their network connections to ensure there are not unnecessary connections being sustained. The ActionScript for this project handles the switching of the application instance connections between the Lobby instance and the rooms instance. This project, as you already know, takes a much different approach to designing a chat room than is presented in the manual. The underlying difference is that this application is completely integrated within a single movie and application. The manual's application relies on HTML, two separate movies, and two separate applications. Your first job in ActionScript is to reprogram the join method of the RoomList component to not launch a separate browser window. Initialization (Frame 1)If you explore the RoomList component's class, you would come across the prototype method, joinRoom(); . This method is called internally by the UI component when the Join Room button is clicked on the interface. When called, the prototype method uses getURL() to open a new web browser sending data through the URL scope to JavaScript handlers embedded within the HTML file. We don't want the web browser to be involved. When the user clicks the Join Room button, we want to have the method call a custom function outside the prototype so the processes can be changed easily. When selected, the details about the room are transferred from the SharedObject to a _global structure inside the Flash movie. This lets us access data that will become unavailable when the Lobby connection is closed. Reprogramming the prototype is your first job. Here's what to do:
Lobby (Frame 10)You have already programmed the script for the Lobby interface in Frame 1. The only script in this frame is the call back to the loginToLobby(); function and a playhead stop(); command: /* FRAME 10: "LOBBY" */ loginToLobby(); stop(); Room (Frame 20)Here is where you will really notice the convenience of using the Flash UI components. The script in this frame does nothing more than connect the UI components and assign the room information to the text objects on the screen. The only thing you need to remember is that the AVComponents need to run the function to assign the username to them before they are operable: /* FRAME 20: "ROOM" */ // // Connect the UI Components to the new connection chat_mc.connect(room_nc); color_mc.connect(room_nc); peopleList_mc.connect(room_nc); bandwidth_mc.connect(room_nc); audioConf_mc.connect(room_nc); // // Connect the AVPresence Components av1_mc.connect(room_nc); av2_mc.connect(room_nc); av3_mc.connect(room_nc); av1_mc.setUsername(session.username); av2_mc.setUsername(session.username); av3_mc.setUsername(session.username); // // Set the Screen Text Data username_txt.text = session.username; roomName_txt.text = activeRoom.room; description_txt.text = activeRoom.description; owner_txt.text = activeRoom.id; // // **CONTROL THE PLAYHEAD stop(); Sever-Side ActionScript (main.asc)Create a folder called chapter 10 in the Flash Communication Server's application folder. There really is no processing done by the server for this application beyond the normal accepting the connection request and setting the username to the UI component framework. Add the following script to a new main.asc file and save it in the chapter 10 folder: /* CHAPTER 10: LOBBY CHAT ROOM */ load("components.asc"); application.onConnect = function(newClient, newUserName) { gFrameworkFC.getClientGlobals(newClient).username = newUserName; application.acceptConnection(newClient); }; That's all there is to it! This project gives you the foundation for building great Lobby applications using the Flash Communication Server UI components. It has also paved the way for you to start exploring ways to extend the UI components' native functionality. Be sure to check out the book's web site (http://flashcom.PangaeaNewMedia.ca/) for a live example of the Chat room and the source code! |