Adding Video and Sound - NetStream Controls

(Page 9 of 9 )

Once you have an embedded video instance displaying a progressively downloaded FLV file, you can use the properties, methods, and events associated with the NetStream class to provide your users with additional information or just to grab their attention.

So that you understand the difference between true video streaming and progressive downloads, we'll use the NetStream.seek() method, which is both instructive and useful. The seek() method moves the play forward or backward the number of seconds specified in the argument. The general format is as follows:

streamInstance_ns.seek(seconds);

Therefore, if you have a 60-second FLV video, the following setting would jump to the halfway point of the video:

streamInstance_ns.seek(30);

The only problem with using seek() and progressive download is that it cannot seek beyond the portion that has been downloaded. Therefore, a 60-second video that has played 30 seconds can only seek to 30 seconds or less. It could not, for example, seek to 45 seconds. (Flash Communication Server uses true streaming, so the user can seek to any position, no matter how long the FLV file has streamed.) To "rewind" the video, set the seek() value to 0.

The FLV files are played using cached memory, so when you play a smaller-size FLV file, the entire video may be stored in cached memory. If you play the file a second time, it can seek ahead to the limit of the cache. For example, if 45 seconds of a 60-second video are in cached memory, you can seek any part of the 45 seconds, no matter how few seconds of the video have played.

For a quick demonstration of how seek() affects a video, revise the application from the previous section using the following steps:

0. Change the size of the embedded video object to 160 by 120. This change will give you more room on the Stage for the Button and TextInput components.

0. Drag a Button component onto the Stage, providing it with the label Seek and the instance name seek_btn.

0. Directly beneath the Seek button, add a TextInput component with the instance name seek_txt.

0. Click the first frame of the Actions layer and add the following code to the existing script in the Actions panel:

   var seekHear:Object = new Object();
   seekHear.click = function() {
   var seeker:Number = parseFloat(seek_txt.text);
   netWork_ns.seek(seeker);
   };
   seek_btn.addEventListener("click", seekHear);

When you test the program, if you put in a value higher than the number of seconds the video has played, the video won't jump ahead. Once the video has played all the way through, type 0 in the text field and click the Seek button. Then, type in a value in seconds that's greater than the video has played. On this second time, it will jump ahead because the FLV file has been cached.

In addition to the seek() method, NetStream has several other methods and properties you can use. In order to examine as many of these methods and properties as possible, this next example shows several properties, some methods, and the NetStream event handler, onStatus(). To keep things as simple as possible, use the previous example's application and remove everything from the Stage except for the embedded video instance and the background images. It will serve as a foundation for this next example.

To make it interesting, you'll employ a horizontal slider to change the seek position and a moving "playhead" to move along with the NetStream.time property. Depending on the length in seconds of the video, an offset variable adjusts the movement of both the "playhead" and the lever for changing the seek position. The following steps explain setting up the document:

0. Start with the document from the previous section and remove everything from the movie except the Embedded Video instance and background. Add a Controls layer right above the Background layer.

0. In the Background layer, add two "groove" lines for the lever and the time playhead. Each line should be exactly 200 points in horizontal length. Position the top line at X=175, Y=69, and the bottom line at X=175, Y=294. Use Figure 10.9 as a guide. Lock the Background layer.

0. All instance names in this step are in parentheses and refer to those shown in Figure 10.9. In the Controls layer, add a Button component and label it Buffer (buffer_btn). Beneath the Buffer button, add an InputText component (buffer_txt). To the right of the InputText component, add a dynamic text field (time_txt), and above it use static text to type the label, Time. Position the Embedded Video instance (flashVid_video) at the left center and add a TextField component to the right (status_txt). Add a Button component to the bottom center and label it Pause (pause_btn).

   
   Figure 10.9
   Objects and their instance names.

0. Still in the Controls layer, draw a vertical line (V=15) using a 4-point stroke. Convert it to a movie clip (timeline_mc) and position it on the left side of the top groove line (X=175, Y=61). Draw a rectangle (W=9, H=25), convert it to a movie clip (lever_mc), and position it at X=174, Y=281.

0. Click the first frame in the Actions layer and add the following script:

   //Make NetConnection
   var makeConn_nc:NetConnection = new NetConnection(); makeConn_nc.connect(null);
   //New NetStream var netWork_ns:NetStream = new NetStream(makeConn_nc);
   //Connect to Video instance
   flashVid_video.attachVideo(netWork_ns);
   //Set Buffer and Start Play
   var bufferHear:Object = new Object();
   bufferHear.click = function() {
   var buffer:Number = parseFloat(buffer_txt.text); netWork_ns.setBufferTime(buffer);
   netWork_ns.play("media6.flv");
   };
   buffer_btn.addEventListener("click", bufferHear);
   //Pause
   var pauseHear:Object = new Object();
   pauseHear.click = function() {
   netWork_ns.pause();
   };
   pause_btn.addEventListener("click", pauseHear);
   //Time
   var timeHear:Object = new Object();
   timeHear.click = function() {
   time_txt.text = netWork_ns.time;
   };
   time_btn.addEventListener("click", timeHear);
   //Drag lever_mc.onPress = function() {
   this.startDrag(false, 175, 281, 375, 281);
   };
   //Calculate offset
   //Length of groove and time line (200)
   //divided by number of seconds in movie.
   var timeOfMovie:Number = 124;
   var offset:Number = 200/timeOfMovie;
   lever_mc.onRelease = function() {
   stopDrag();
   netWork_ns.seek((lever_mc._x-175)*offset);
   };
   //Status netWork_ns.onStatus = function(netInfo) { status_txt.text += "Status: "+netInfo.code+newline; status_txt.text += "Buff Length: "+netWork_ns.bufferLength+newline;
   status_txt.text += "Bytes Loaded: "+netWork_ns.bytesLoaded+newline; };
   //Track Time function timeCallback() {
   time_txt.text = netWork_ns.time;
   timeLine_mc._x = 174+(netWork_ns.time*offset); }
   setInterval(timeCallback, 50);

This movie is a learning project in that you can test your FLV file with different values in the buffer and change the seek position by moving the bottom slider. The time is constantly displayed (every 50 milliseconds), and the different status codes, buffer length, and bytes loaded are displayed in the text field, which can be scrolled to review all the data generated. The NetStream.onStatus event handler can be used to capture the information that triggered the event. Because we used an argument in an unnamed function, the argument has both code and level properties. The code property contains the result of the handler, and the level property contains either status or error. In this example, only the code property is used because it's more informative. Figure 10.10 shows the kind of information displayed when the movie plays.

Figure 10.10
Information displayed as movie plays.

The NetStream.pause() method is an interesting one because it's a true toggle. The first time it's invoked, it stops the playback, and when it's invoked while the playback is stopped, it starts the playback again. You don't have to add any special code. Just set up the code to call this method with no parameters, and it will serve to start and stop the playback.

In Brief

• Sounds can be imported from a wide variety of sources into Flash.

• Sounds can be embedded in a Flash movie or dynamically loaded while the movie plays.

• Sound editing from within Flash can control volume levels in two channels.

• Sounds can be separated from digital files by Flash and used in a Flash movie without the video.

• Built-in code for working with sound can be generated easily with the Behaviors panel.

• The media components in Flash Pro make it.

This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today. Buy this book now.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Adding Video and Sound

· Thanx for taking the time to write this verry useful tutorial.. you helped me so...   >>> Post your comment now!