Creating a Stream Archive System in Macromedia MX

This chapter is from the book

Macromedia MX: Building Rich Internet Applications

Learn More Buy

This chapter is from the book

This chapter is from the book 

Macromedia MX: Building Rich Internet Applications

Learn More Buy

Designing the Live Conference Client Movie

As you learned at the beginning of this chapter, the conference recording and retrieval clients are two different Flash movies. You start by building the conference chat client, which allows two users to log in to a specific application instance, which records each user's audio/video stream.

This section walks you through the steps necessary to make the Flash MX document that connects to the conference application. Later in this chapter, you will learn how to create the server-side capabilities required for this Flash client movie.

Creating the Start Screen

The first screen of the live chat client presents the user with two text fields in which the user can specify a conference title and room name. The client movie does not make a connection to the conference application until the user clicks a Proceed button, which moves the timeline to the chat frame label (discussed in the next section).

TO BUILD THE START SCREEN OF THE CLIENT MOVIE:

1. On the machine that's hosting the FlashCom server, create a folder named conference in the applications folder. If you have the default Developer Install the FlashCom server on a Windows machine running IIS, the path to this folder should be the following:

   C:\Inetpub\wwwroot\flashcom\applications\conference 

   Once the conference folder is created, connections can be made to this application on the FlashCom server.

2. Open Macromedia Flash MX and create a new document. Save this document as confRecord_100.fla.

3. Change the dimensions of this document to 425 × 300. Choose Modify > Document and enter the new dimensions in the Document Properties dialog box (Figure 13.6).

   Figure 13.6 The dimensions of the Flash movie are changed in the Document Properties dialog box.

4. Rename Layer 1 to labels. On this layer, select frame 20 and press the F5 key (or Insert > Frame) to add more frames. Select frame 1 of the labels layer and label this keyframe init in the Property inspector. Select frame 10 and insert an empty keyframe (F7, or Insert > Blank Keyframe). Label this frame chat.

5. Create a new layer, and name it heading. Place this layer beneath the labels layer. On frame 1 of this layer, use the Text tool to add the Static text

   Two-Party Audio Video Conference :: Record. Place this text near the top edge of the stage. Make another layer named frame and create a rounded rectangle shape with the Rectangle tool, as shown in Figure 13.7.

   Figure 13.7 The Rectangle tool is selected, and the Round Rectangle Radius button in the toolbox is enabled to draw a rounded frame for a portion of the movie's stage.

   
   

6. Create another layer, and name it textfields. Place this layer underneath the heading and frame layers. Select frame 10 of the textfields layer, and press the F7 key to insert an empty keyframe.

7. Select frame 1 of the textfields layer. Using the Text tool, create an Input text field with an instance name of confName_txt. Enable the Show border option for this field, and set the Line type to Single line. Add the Static text Conference Title: to the left of the field (Figure 13.8).

   Figure 13.8 A confName_txt field is created and labeled with Static text.

   
   

8. Repeat step 7 for another Input text field with an instance name of conf-Room_txt. Place this field beneath the confName_txt instance (Figure 13.9). Enable the same options for this text field in the Property inspector. Add the Static text Conference Room: to the left of the field.

   Figure 13.9 A confRoom_txt field designates the application instance name of the conference application.

   
   

   Tip

   You can optionally add the following Static text to alert the user to the purpose and functionality of the application: This call will be recorded and archived on this server. If you do not want to be recorded, please exit the application.

   Note

   When you click the Proceed button, you may be asked to allow access to your camera and microphone. In the Flash Player Settings dialog box, select "Allow" and click the "Close" button.

9. Create a new layer, and name it proceedButton. Place this layer underneath the textfields layers. Select frame 10 of the proceedButton layer, and press the F7 key to insert an empty keyframe.

10. Select frame 1 of the proceedButton layer, and drag an instance of the SimpleConnect component from the Components panel to the stage. You won't actually use the SimpleConnect component on this frame, but you will use the FCPushButton component that's nested within the SimpleConnect component. This component is a modified version of the regular PushButton component. Delete the SimpleConnect instance on the stage, and open the document's Library panel (F11). There, open the Communication Components folder, and then open the Communication UI Components folder. From this folder, drag the FCPushButton symbol from the Library panel to the stage. Position the new instance below the Input text fields. In the Property inspector, name this instance proceedButton. Assign a Label value of Proceed and a Click Handler value of setName (Figure 13.10).

11. Make a new layer and rename it functions. Place this layer underneath the labels layer. Define the setName() function, which is used as the click handler for the proceedButton instance. This function moves the playhead of the Flash movie to the chat frame label, if the Input text fields are not empty. If one of the fields is empty, the respective field displays a message to the user, and focus is directed to the field. The setName() function follows in Listing 13.1.

    Figure 13.10 The proceedButton instance is placed below and to the right of the TextField instances.

    
    

    Listing 13.1 setName() function

    function setName(obj) {
     if (confName_txt.text != "" && confRoom_txt.text != "") {
      appInstance = confRoom_txt.text;
      confTitle = confName_txt.text;
      this.gotoAndStop("chat");
     } else if (confName_txt.text == "") {
      confName_txt.text = "Specify a title name for the conference.";
      Selection.setFocus(confName_txt);
     } else if (confRoom_txt.text == "") {
      confRoom_txt.text = "Type a name for the chat room.";
      Selection.setFocus(confRoom_txt);
     }
    }

    This code also creates two variables on the _root timeline: appInstance and confTitle. When you declare an appInstance variable on _root, its value is appended to the Application Directory value (that is, the connect URI) used by a SimpleConnect component instance. Later in this chapter, you will place a SimpleConnect instance on the chat frame, where the appInstance value is used. For this application, the text that the user types in the conf-Room_txt field becomes the name of the application instance within the conference application on the FlashCom server. The confTitle variable stores the current text within the confName_txt field, so that the title can be redisplayed to the user on the chat frame.

    Note

    The setName() function is shown here with an obj argument. This argument is not actually used in the scope of the function. It's included to remind you that you can directly access a reference to the proceedButton instance as the argument of a click handler for a PushButton (or FCPushButton) instance.

12. Define a function that retrieves and formats the current date. This function is used to populate the confName_txt field with a new date when the movie loads. Select frame 1 of the functions layer, and open the Actions panel (F9). Add the following code after the existing setName() function:

    function retrieveDate() { 
    
     var currentDate = new Date().toString(); 
     currentDate = currentDate.substring(0, (currentDate.indexOf("GMT") 
    - 1));
      return currentDate; 
    } 

13. Create another layer and rename it actions. Place this layer beneath the functions layer. On the init frame, you fill the confName_txt field with the current date and restrict the confRoom_txt field to accept only alphanumeric characters and the underscore character. In this way, you can prevent a user from typing an illegal instance name for the conference application into the confRoom_txt field. Select frame 1 of the actions layer, and open the Actions panel (F9). Add the following code:

    confName_txt.text = retrieveDate();
    confRoom_txt.restrict = "A-Za-z0-9_";
    Stage.scaleMode = "noScale"; 
    stop(); 

    This code also sets the scaleMode of the Stage object to "noScale", which prevents the Flash movie from scaling above or below 100 percent of its original size (425 × 300). This line is optional and can be omitted.

14. Choose File > Publish Settings, and choose the HTML tab. In the Dimensions field, choose Percent. Leave the Width and Height values at 100 percent. This setting allows the Flash movie to center itself at original size (thanks to the noScale property set in the previous step) within the full area of the browser window. Now, choose the Formats tab and clear the Use default names check box. In the Filename field for the Flash format, type confRecord.swf. In the Filename field for the HTML format, type confRecord.html.

15. Save the Flash document and test it (Control > Test Movie). When the movie loads, the current date should display in the confName_txt field. Type a name into the confRoom_txt field and click the Proceed button. The movie should jump to the empty chat frame. You can retest this movie leaving one of the Input text fields empty to test the nested else if statements within the setName() function.

    
    You can find the completed version of this document, confRecord_100.fla, in the chapter_13 folder of this book's CD-ROM.

If you inserted the Stage.scaleMode = "noScale"; line in step 13, try using File > Publish Preview > Default - (HTML) to view your Flash movie in a Web browser. Regardless of the size of the browser window, the Flash movie appears centered within the window, and the movie's dimensions remain fixed at 425 × 300.

Constructing the Chat Screen

Once the user has specified a room name (and modified the conference title, if desired), the user can begin to publish an AV stream to a specific instance of the conference application on the FlashCom server. On the chat frame, you will add the same Communication Components you learned in the last chapter. You will also create an Input text field that displays the conference's title. The user can change the title in this field, and update a remote SharedObject with this new title, so that any user connected to the same application instance can see the updated title.

TO BUILD THE CHAT SCREEN:

1. Open the confRecord_100.fla document from the last section and save this document as confRecord_101.fla.

2. Create a Dynamic text field to display the current room name (that is, application instance name). Select the empty keyframe on frame 10 of the textfields layer. Use the Text tool to create the field and position the field below the heading text. In the Property inspector, name the instance conf-Room_txt, enable the Selectable option, and disable the Show border option. Choose Single line in the Line type menu. (Figure 13.11)

   Figure 13.11 A new instance of the confRoom_txt field is created and placed at the top left of the stage.

   
   

3. Create a new layer and name it login_mc. Place this layer beneath the pro-ceedButton layer. Select frame 10 of this layer and press the F7 key to insert an empty keyframe. With frame 10 selected, drag an instance of the Sim-pleConnect component from the Components panel to the stage. Place the instance below the confRoom_txt instance. In the Property inspector, name the instance login_mc. In the Application Directory field, type the URI to the FlashCom server hosting the conference application. If the FlashCom server is running on the same IP and machine as the Web server hosting the Flash client movie (SWF file), you can use the value rtmp:/conference. For now, do not add any instance names to the Communication Components list parameter. (Figure 13.12)

   Figure 13.12 An instance of the SimpleConnect component.

   
   

4. Make a new layer named connLight_mc. Place this layer underneath the login_mc layer, and add an empty keyframe on frame 10. With this frame of the connLight_mc layer selected, drag an instance of the Connection-Light component from the Components panel to the stage. Place the instance to the right of the SimpleConnect instance. In the Property inspector, name the instance connLight_mc. Do not change the default parameters of this instance.

5. Create a layer named speedList_mc and place this layer below the conn-Light_mc layer. Insert an empty keyframe on frame 10 of the new layer. On this keyframe, drag an instance of the SetBandwidth component from the Components panel to the stage. Place the instance near the right edge of the stage (Figure 13.13). In the Property inspector, name the instance speedList_mc. Do not change the default parameters of the instance. On frame 10 of the textfields layer, add the Static text Bitrate: to the left of the speedList_mc instance.

   Figure 13.13 An instance of the SetBandwidth component is placed to the right side of the stage.

   
   

6. Create a layer named speakers and move the layer below the speedList_mc layer. On frame 10 of the new layer, insert an empty keyframe and drag an instance of the AVPresence component to the stage. Place the instance in the left half of the movie's stage, below the other components. In the Property inspector, name the instance speaker_1_mc. Do not change the default parameters of the instance (Figure 13.14).

   Figure 13.14 The speaker_1_mc instance of the AVPresence component is placed on the left half of the stage.

   
   

7. Select the speaker_1_mc instance from step 6 and duplicate it (Edit > Duplicate). Position the new instance to the right of the original, as shown in the Figure 13.15. Name the new instance speaker_2_mc.

   Figure 13.15 The speaker_2_mc instance is placed on the right half of the stage.

   
   

8. Create an Input text field in which the user can change the title of the conference during the session. On frame 10 of the textfields layer, use the Text tool to create an Input text field instance named confName_txt. Use the same options as the original confName_txt field. Place this instance near the bottom edge of the stage, leaving a gap for another text field (discussed in the next step). Add the Static text Title: to the left of the confName_txt field (Figure 13.16). The text in this field is used to update a property of a remote SharedObject, discussed in steps 13 and 14.

   Figure 13.16 A new instance of the confName_txt field.

   
   

9. Make a text field that displays a notification regarding the update status of the remote SharedObject storing the conference's title information. On frame 10 of the textfields layer, create a Dynamic text field instance named soStatus_txt. Place this field below the confName_txt field. Disable the Show border option for this field (Figure 13.17).

   Figure 13.17 The soStatus_txt field displays notification messages to the user.

10. Make a new layer named updateButton. Move the layer below the pro-ceedButton layer. On frame 10 of the new layer, insert an empty keyframe and place another instance of the FCPushButton component to the right of the confName_txt field. In the Property inspector, name this new instance updateButton. In the Parameters tab, assign a Label value of Change. In the Click Handler field, type updateTitle. Refer to Figure 13.18.

    Figure 13.18 The updateButton instance is placed to the right of the confName_txt instance.

    
    

11. Now, add a sound asset to the movie's library. This sound plays when the remote SharedObject for the conference's title successfully updates. Choose Window > Common Libraries > Sounds. From this document's Library panel, drag a copy of the Plastic Button sound to the Library panel of the confRecord_101.fla document. Right-click (or Control-click on the Mac) the Plastic Button sound in the confRecord_101.fla document's Library panel, and choose Linkage. In the Linkage Properties dialog box, select the Export for ActionScript check box and change the Identifier value to updateSuccess (Figure 13.19). Click the OK button to accept the changes. This sound asset can now be dynamically attached and played with ActionScript code. You will use this linkage identifier in step 13.

    Figure 13.19 A linkage identifier of updateSuccess is assigned to the Plastic Button sound.

12. Add actions to the chat frame that insert the appropriate information into the confRoom_txt and confName_txt fields. Create an Object object that can use the NetConnection object from the SimpleConnect component. This object should create a client-side reference to a temporary remote Share-dObject named sessionName. This SharedObject stores the conference's title, as typed in the confName_txt field. Insert an empty keyframe on frame 10 of the actions layer. Select this frame and open the Actions panel (F9). Type the following code in the actions list:

    initSO = {};
    initSO.connect = function(nc) {
     sessionName_so = SharedObject.getRemote("sessionName", nc.uri,
     false);
     sessionName_so.onSync = sessionSync;
     sessionName_so.connect(nc);
    };
    confName_txt.text = confTitle;
    confRoom_txt.text = "Room: " + appInstance;

    The connect() method of the initSO object is invoked by the SimpleConnect instance, login_mc. In step 14, you will add the name of the initSO object to the Communication Components list parameter of the login_mc instance. When the connect() method is invoked, the sessionName remote SharedObject data is linked to the sessionName_so instance. This instance's onSync() handler, sessionSync, is defined in the next step.

13. When the first user connects to the sessionName data, that user's title information should be assigned to a property of sessionName. If any user revises the text in the confName_txt field and clicks the Change button, the new title information should be shared with the other user. Select frame 1 of the functions layer and add the code in Listing 13.2 after the existing functions. Note that the line numbers shown with this code are relative; they do not refer to the actual line numbers in the Actions panel.

    Listing 13.2 sessionSync() function

    1. function sessionSync(list) {
    2.    for (var i in list) {
    3.       trace(i + ": name: " + list[i].name + ", code: " +
             list[i].code);
    4.       if (list[i].code == "clear" && this.data.title == null) {
    5.          this.data.title = confTitle;
    6.       } else if (list[i].name == "title") {
    7.          if (list[i].code == "change") {
    8.             confName_txt.text = this.data.title;
    9.             soStatus_txt.text = "Conference title changed.";
    10.            var playSound = true;
    11.         }  else if (list[i].code == "success") {
    12.            soStatus_txt.text = "Conference title updated.";
    13.            var playSound = true;
    14.         }  else if (list[i].code == "reject") {
    15.            soStatus_txt.text == "Change rejected by server.";
    16.            var playSound = false;
    17.         }
    18.         if (playSound) {
    19.            clickSound = new Sound(_root);
    20.            clickSound.attachSound("updateSuccess");
    21.            clickSound.start();
    22.         }
    23.         statusTimer = setInterval(clearStatus, 3000);
    24.       }
    25.    }
    26. }

    This function processes any changes or updates that occur to the session-Name data within the current instance of the conference application. Remember, such changes are reported as an Array object to the onSync() handler of a remote SharedObject instance.

    If the conference title has not been added to the sessionName data, lines 4 and 5 are processed. A property named title is set to the text contents of the confName_txt field. This code is only invoked for the user who is the first to arrive on the chat frame. If the title property has already been set, lines 6-24 are processed.

    Lines 7-10 are processed by any client that is receiving an update published by another user. The confName_txt field displays the new value of the title property, and the soStatus_txt field displays a notification message of "Conference title changed." A local variable named playSound is set to true, indicating that the Plastic Button sound should be played (lines 18-22). Lines 11-13 are processed by the client movie that declared the new conference title in the sessionName data. Because this client (that is, the user) was the one that already typed a new title into the confName_txt field, no text changes need to occur in the confName_txt field. Only the soStatus_txt field needs to display a notification to the user that the server successfully received his update. Again, playSound is set to true to indicate that the Plastic Button sound should be played.

    Lines 14-16 are processed by any client movie whose attempt to change the title property of the sessionName data was denied or rejected. The soStatus_txt field displays an error notification, and playSound is set to false. The Plastic Button sound is not played for this condition.

    TIP

    You could add a second linked sound asset to the movie's library for the error (or reject) condition. In this situation, you would set playSound equal to the linkage ID of the appropriate sound to be played. Instead of using a static reference in the attachSound() method in line 20, you would use the playSound value.

    If playSound was set to true in the previous code, the updateSuccess sound (that is, the Plastic Button sound) is played by the movie in lines 18-22.

    After a notification message has been displayed to the user, the clearSta-tus() function is invoked within 3 seconds, as shown in line 23. The clearStatus() function clears the soStatus_txt field after the delay period has transpired. You will define the clearStatus() function in step 15.

14. Define the updateTitle() function used as the Click Handler for the update-Button instance. This function changes the title property of the sessionName remote SharedObject to match the text typed into the confName_txt field. Select frame 1 of the functions layer and open the Actions panel (F9). Add the following code after the existing functions:

    function updateTitle(obj) {
       trace("updateTitle() invoked"); 
       sessionName_so.data.title = confName_txt.text; 
    } 

15. Define the clearStatus() function invoked by the onSync() handler, session-Sync. This function is invoked three seconds after the notification text is displayed to each user in the soStatus_txt field. Select frame 1 of the functions layer and open the Actions panel (F9). Insert the following code after the last function:

    function clearStatus() {
       trace("clearStatus() invoked");
       soStatus_txt.text = "";
       clearInterval(statusTimer); 
    } 

16. Add all the object instance names requiring a NetConnection object to the Communication Components list parameter of the login_mc instance. Select the login_mc instance and click the Communication Components field in the Property inspector. In the Values list, add each instance's name as a new item (Figure 13.20).

    Figure 13.20 The instance names of each object that requires a connection to the conference application are added to the Values list.

    
    

17. Save the Flash document. Before you can test the movie, you need to create a main.asc document for the conference application that enables the Communication Components.

18. In Macromedia Dreamweaver MX, choose File > New to create a new ActionScript Communications document. On line 1 of this document, type the following code:

    load("components.asc"); 

    This code loads the components.asc document when a new instance of the conference application runs. The components.asc document contains all the necessary server-side ActionScript code for the Communication Components to interact with one another.

    Xref

    For more information on the components.asc document, read the previous chapter.

19. Save the ASC document as a file named main.asc in the conference folder, located in the applications folder of your FlashCom server.

20. Switch back to the confRecord_101.fla document in Macromedia Flash MX. Test the movie (Control > Test Movie). When the movie loads, type a room name and click the Proceed button. On the chat frame, the connLight_mc instance should turn green once a connection is made to an instance of the conference application. Type a name into the text field of the login_mc instance and click the Login button. The AVPresence instances should then be enabled for your use. Test the movie in a Web browser on two different computers at the same time. While the conference application does not currently record any streams or save any permanent data, you should be able to conduct a live conference with two users in the Flash client movie.

    
    You can find the completed version of this document, confRecord_101.fla, in the chapter_13 folder of this book's CD-ROM. A version of the main.asc document, named main_100.asc, is also in this location.