Streaming Video

This section will bring together all the steps we have gone over so far into a media streaming application.

The first step is to either create your own Flash Video using the steps we went over earlier or download the one from the companion website.

When you have the Flash video, follow these steps to build a simple video streaming application:

1.	Create a new Flash document.
2.	Save it as videoStream.fla in the same directory as the Flash Video cats.flv.
3.	Create a new blank video object the same way you did earlier.
4.	Drag the blank video object out of the library and onto the stage. Give it an instance name of myVideo_video, and change its dimensions to 200x160.
5.	Drag an instance of the Button component onto the stage and place it under the instance of the Video object.
6.	Give the button an instance name of play_butn and change its label to "Play."
7.	Create a dynamic text field, give it an instance name of status_txt, turn the border on, and set it beside the Play button.
8.	Create a new layer called actions.
9.	In the first frame of the Actions layer, open the Actions panel, and place this code in: //Create the NetConnection object: var myConn_nc:NetConnection = new NetConnection(); //Create the connection myConn_nc.connect(null); //Create the NetStream object var myStream_ns:NetStream = new NetStream(myConn_nc); //Set the onStatus event for the NetStream object myStream_ns.onStatus = function(infoObject){ status_txt.text=infoObject.code; } //Attach the NetStream video to the Video object myVideo_video.attachVideo(myStream_ns); //Set the buffer time to 5 seconds myStream_ns.setBufferTime(5); //create a variable to see if we have played the video yet var played:Boolean = false; //create an object to listen to our play button var clickListen:Object = new Object(); //create the event for the listener clickListen.click = function(){ if(!played){ myStream_ns.play("cats.flv"); played = true; play_butn.label = "Pause"; }else{ if(play_butn.label == "Play"){ play_butn.label = "Pause"; }else{ play_butn.label = "Play"; } myStream_ns.pause(); } } //now add the listener to the button play_butn.addEventListener("click", clickListen);

This code accomplishes several things; let's break it into sections so that it can be more easily analyzed.

The first section creates a NetConnection object and then calls the connect() method to make a local connection:

 //Create the NetConnection object: var myConn_nc:NetConnection = new NetConnection(); //Create the connection myConn_nc.connect(null); 

The next section creates the NetStream object and sets its onStatus event to send what caused the event to the text field we created.

 //Create the NetStream object var myStream_ns:NetStream = new NetStream(myConn_nc); //Set the onStatus event for the NetStream object myStream_ns.onStatus = function(infoObject){     status_txt.text=infoObject.code; } 

The next section attaches the NetStream video to the video object. Then it sets the buffer time (but because we are running locally, it really doesn't matter). Finally, it creates a variable we will use to see whether the video has started streaming yet.

 //Attach the NetStream video to the Video object myVideo_video.attachVideo(myStream_ns); //Set the buffer time to 5 seconds myStream_ns.setBufferTime(5); //create a variable to see if we have played the video yet var played:Boolean = false; 

In the final section, we create a listener to listen to the Play button component. We create the event for the listener that checks to see whether the user has started streaming the video yet. If the video has not started streaming yet, it will start; set the variable to true so that it won't try to start it again, and set the label for the Play button to "Pause" so that the user will know it is playing. After that, if the user clicks the button again, it checks the label to see what the user is trying to do, and it either plays or pauses the movie accordingly. Finally, we add the event listener to the Button component.

 //create an object to listen to our play button var clickListen:Object = new Object(); //create the event for the listener clickListen.click = function(){     if(!played){         myStream_ns.play("cats.flv");         played = true;         play_butn.label = "Pause";     }else{         if(play_butn.label == "Play"){             play_butn.label = "Pause";         }else{             play_butn.label = "Play";         }         myStream_ns.pause();     } } //now add the listener to the button play_butn.addEventListener("click", clickListen); 

Test the movie and click the Play button; you will see something similar to Figure 26.4. You can then pause and resume play, and the text field shows you when the onStatus event fires.

Figure 26.4. Streaming video is a snap with the NetStream and NetConnection objects.

Now that you have coded all of that and built the video streaming application, we move on to the easy way to do it using the FLVPlayback component.