Controller Applications

In Chapter 7, "STEP 7: Streaming Video with NetStream()," you were introduced to a model of publication and subscription in the context of streaming video. The controller application operates similar to the streaming subscription model. Controller and subscriber applications use two different interfaces to interact with an application. One interface controls what the other interface can see and do.

To illustrate this model, imagine you were sitting in on a presentation at a conference. The presentation has a speaker on a stage with a PowerPoint (or Flash) presentation on a laptop. You take your seat in the back of the room and enter into a one-way relationship with the presenter and his laptop. During a presentation, the speaker is positioned on a stage in front of an audience of attendees. The speaker controls what the audience can see on a screen and manages when questions can be asked or answered.

Using multiple Flash user interfaces connected to a single application instance, you can build applications with the Communication Server to handle a relationship like this. Multiple Flash user interfaces can be integrated into a single Flash movie or completely separate movies altogether. Each unique interface plays a role in the application.

For example, in Exercise 9.1 you will build two interfaces. One interface will control how the other (subscribing) interface will act. For example, the controller will feed the subscriber presentation slides and a video feed. This relationship is also useful to distribute a single live video stream to multiple receivers.

The controller interface is responsible for publishing and managing streams and access to data and interface elements.

The subscriber interface responds to controller messages. The subscriber interface operates as a listener.

If you plan to use the Communication Server to broadcast corporate annual general meetings, online panel discussions, presentations, or even to deliver e-learning applications, a controller and subscriber application is what you should consider. So, be prepared to build two interfaces, and plan the roles and use cases for each interface.

Let's start by getting comfortable with the concept. This next very quick exercise will let you control a MovieClip on the Flash stage of each subscriber movie that is connected.

Exercise 9.1: The Simple Controller Application

This exercise is a quick primer to help you understand the roles of the controller movie and the subscriber movie. It will also introduce you to using SharedObject messaging via the so.send() method.

Step 1: The Interfaces

The first phase in this project is to create the controller and subscriber interfaces.

  1. Create a new Flash Communication Server application folder called mySimpleController.

  2. The controller (controller.fla) has three main elements on it. Use Figure 9.1 as a guide to place the elements on the Flash stage. To start, use the Text tool to draw a text input box in Frame 1 of Layer 1. This box will be used to send an instant message. Give it the instance name controllerMSG_txt.

    Figure 9.1. The interface for the controller movie. Use this as your layout guide when you create the movie.

    graphics/09fig01.gif

  3. Still in Frame 1 of Layer 1, add a PushButton from the Flash UI Components panel. This button will be used to turn on a MovieClip called theBall_mc running inside the subscriber.swf movie. Give the PushButton an instance name of ballControl_pb.

  4. In the same frame and layer, add a ConnectionLight from the Flash Communication UI Components panel. Give it an instance name of connectionLight_mc.

  5. The subscriber movie (subscriber.fla) has three main elements, as shown in Figure 9.2. For the first one, use the Text drawing tool to create a text box, make it a dynamic text box in the Properties window, and give it the instance name controllerMSG_txt. This dynamic text box will receive instant messages from the controller application.

    Figure 9.2. The interface for the subscriber movie. Use this as a layout guide.

    graphics/09fig02.gif

  6. Next, add the "ball" that the controller movie will turn on and off. Draw a circle using the drawing tools on the Flash stage. When finished, select it and press F8, and make it a MovieClip and press OK. In the Properties panel, give it an instance name of theBall_mc.

  7. Drag the ConnectionLight component from the Communication UI Components panel onto the stage and give it an instance name of connectionLight_mc.

These are two completely separate interfaces, with completely separate assets on their Flash stages. They will operate under a common Flash Communication Server application.

Step 2: Controller ActionScript

Next, let's look at the ActionScript required first for the controller interface, and then for the subscriber interface.

  1. Place the following ActionScript on Frame 1 of Layer 1 in the Controller.fla movie:

    myConnection_nc = new NetConnection(); 
    connectionLight_mc.connect(myConnection_nc);
    myConnection_nc.onStatus = function(info) {
          trace("Status Message: "+info.code);
          if (info.code == "NetConnection.Connect.Success") {
                initSO();
          }
    };
    

    This ActionScript establishes a quick connection with the server. We aren't worried about usernames at this point. When the server returns a status of NetConnection.Connect.Success, the initSO() function runs to connect the movie to a Remote SharedObject on Flash Communication Server.

  2. Create the initSO() function:

    initSO = function () { 
          // Create and Connect a Shared Object to Broadcast to
          my_so = SharedObject.getRemote("testBroadCast", myConnection_nc.uri);
          my_so.connect(myConnection_nc);
          // initialize the Ball Toggle
          toggleBall_ON();
    };
    

    The temporary SharedObject is connected to the NetConnection. Then a function, toggleBall_ON(), initializes the PushButton on the stage. This function will actually be called by the button when the ball is turned off.

  3. Create two PushButton functions. One will be used when the ball is disabled, and one will be used when the ball is enabled. These functions do two things: They broadcast a message to everyone connected to the SharedObject and dynamically change the label and Click Handler of the PushButton. Use the following code:

    // The pushButton Functions 
    toggleBall_ON = function () {
          my_so.send("toggleBall", true, controllerMSG_txt.text);
          ballControl_pb.setLabel("Disable Ball");
          ballControl_pb.setClickHandler("toggleBall_OFF");
    };
    
    toggleBall_OFF = function () {
          my_so.send("toggleBall", false, controllerMSG_txt.text);
          ballControl_pb.setLabel("Enable Ball");
          ballControl_pb.setClickHandler("toggleBall_ON");
    };
    

    You might be wondering where the ball fits in with this script. There is no ball in the controller interface, just a button to send a signal to a MovieClip (the ball) that exists within the subscriber's interface.

    The Send operation (my_so.send) calls the toggleBall method defined in the subscriber.fla file. The toggleBall function will be written within the local SharedObject variable. SharedObject methods are not stored on the server, they are local to the client. Therefore, toggleBall will not be created on the controller application, only on the subscriber. The method will control the visibility of the MovieClip. There are two parameters sent to toggleBall: the state of the ball, as a Boolean value, and the text inside the controllerMSG_txt text box.

  4. Connect the movie to the server:

    // Connect to the server. 
    myConnection_nc.connect("rtmp:/mySimpleController/myInstance");
    

Save and publish, and you're done on the controller side.

Step 3: Subscriber ActionScript

Your next task is to code the subscriber file's ActionScript.

  1. Place the following ActionScript on Frame 1 of Layer 1 in the Subscriber.fla movie:

    myConnection_nc = new NetConnection(); 
    connectionLight_mc.connect(myConnection_nc);
    myConnection_nc.onStatus = function(info) {
          trace("Status Message: "+info.code);
          if (info.code == "NetConnection.Connect.Success") {
                initSO();
          }
    };
    

    This first bit of code is identical to the Controller.fla movie's code. It sets up the NetConnection and handles the success code when it is accepted by the server.

  2. Create the initSO method. This, too, is similar, except here you declare the toggleBall method within the SharedObject variable my_so. This will handle the broadcast sent from the controller. Use the following ActionScript:

    initSO = function () { 
          // Create and Connect a Shared Object to Broadcast to
          my_so = SharedObject.getRemote("testBroadCast", myConnection_nc.uri);
          my_so.connect(myConnection_nc);
          // connect a handler to the shared object.
          my_so.toggleBall = function(toggle, message) {
                theBall_mc._visible = toggle;
                controllerMSG_txt.text = message;
          };
    };
    

    The toggleBall function turns the visibility of theBall_mc to the value sent by the controller (true or false). Then it sets the text value of the controllerMSG_txt text box to what was sent by the controller.

  3. Connect the movie to the server:

    // Connect to the server. 
    myConnection_nc.connect("rtmp://localhost/mySimpleController/myInstance");
    

With the bulk of the coding finished, you're ready to handle the connections.

main.asc ActionScript

A very simple onConnect routine accepts all connections. Place this code within a new main.asc file in the mySimpleController application folder:

application.onConnect =function(newClient) { 
      application.acceptConnection(newClient);
}

Save and publish both FLA movies. You can test them both within Macromedia Flash MX, but it can get tricky if you don't have two monitors. You want to run the controller.swf movie and a couple subscriber.swf movies. If you can, try running the subscriber.swf movies on remote computers so you can impress your friends with your wizardry.

Note

Now that you understand how the controller movie works, try to extend Exercise 9.1. You can use this technique to do anything you need to within the subscriber's Flash movie. Control the Timeline, video, sound, anything.




    Part I: 10 Quick Steps for Getting Started
     
    ASPTreeView.com
     
    Evaluation has РЕАРЪЕєТexpired.
    Info...