Loading a Flash Video into a Flash Movie


Since Flash Player 7, you have had the capability to load Flash Video files (.flv) directly into a Flash movie at run time. In Flash Player 6, such files needed to be embedded with a Flash movie file (.swf) and loaded with traditional loadMovie() actions.

New Feature 

Flash Player 8 can play .flv files that use the new On2 VP6 codec, which has better image quality than the older Sorenson Spark codec used in Flash Players 6 and 7.

Cross-Reference 

If you don't know what a Flash Video file (.flv) is, see Chapter 17, "Displaying Video."

Tip 

You could — and still can — stream Flash Video files (.flv files) with the aid of Macromedia Flash Communication Server MX or Flash Media Server. In fact, to get the best performance out of .flv files, we still recommend that you consider Flash Communication Server as a solution for real-time audio/video streaming.

In this section, you learn how to progressively download an .flv file into a Flash movie at run time.

On the CD-ROM 

You need to make a copy of the load_image_100.fla document used earlier in this chapter, as well as the stella_speak.flv file found in the ch28 folder of this book's CD-ROM. This .flv file uses the new On2 VP6 codec and features an 8-bit alpha channel.

  1. Open the load_image_100.fla document, and save it as NetStream_100.fla.

  2. Delete the mcHolder instance and layer in the document. Flash Video files are not loaded into MovieClip objects.

  3. Select the cbtLoad instance on the Stage. In the Property inspector, change the label value to Load FLV.

  4. Select the cbtUnload instance on the Stage. In the Property inspector, change the label value to Unload FLV.

  5. Select the tImg instance, and in the Property inspector, change its instance name to tVid.

  6. Create a new layer, and rename it to vWin. Place this layer at the bottom of the layer stack.

  7. Open the Library panel (Ctrl+L or z+L). In the panel's options menu in the top-right corner, choose New Video. When the Video Properties dialog box opens, make sure the Video (ActionScript-controlled) option is selected in the Type category. Click OK.

  8. With frame 1 of the vWin layer selected, drag an instance of the Video symbol from the Library panel to the Stage. Position the instance in the same area that the mcHolder previously occupied. In the Property inspector, name this instance vWin. Change the width to 320 pixels and the height to 240 pixels. Most video clips use a 4:3 aspect ratio, such as 320 x 240, 640 x 480, and so on. See Figure 28-20.

    Note 

    Video symbols belong to the Video class, not the MovieClip class. Like MovieClip objects, though, Video class members require an instance name so that they can be targeted by ActionScript.

  9. Now, you're ready to add the ActionScript code necessary to load an external .flv file, and display it in the vWin instance. Select frame 1 of the actions layer, and open the Actions panel (F9, Option+F9). Change the code to that shown in Listing 28-7.

    Listing 28-7: Creating a NetStream Object to Access Flash Video Content

    image from book
     1.  var cbtLoad:mx.controls.Button; 2.  var cbtUnload:mx.controls.Button; 3.  var tVid:TextField; 4.  var vWin:Video; 5. 6.  var nc:NetConnection = new NetConnection(); 7.  nc.connect(null); 8. 9.  var ns:NetStream = new NetStream(nc); 10. 11. ns.onStatus = function(oInfo:Object):Void { 12.    trace("ns.onStatus >"); 13.    trace("\tlevel:\t" +oInfo.level); 14.    trace("\tcode:\t" + oInfo.code); 15. }; 16. 17. ns.onMetaData = function(oData:Object):Void { 18.    trace("ns.onMetaData >"); 19.    trace("\twidth: "+ oData.width); 20.    trace("\theight: "+ oData.height); 21.    trace("\tduration: "+ oData.duration); 22.  }; 23. 24. ns.setBufferTime(5); 25. vWin.attachVideo(ns); 26. 27. var oLoader:Object = new Object(); 28. oLoader.click = function(oEvent:Object):Void { 29.    var sLabel:String = oEvent.target.label.toLowerCase(); 30.    if(sLabel == "load flv"){ 31.       ns.play(tVid.text); 32.    } else if (sLabel == "unload flv"){ 33.       ns.close(); 34.       vWin.clear(); 35.    } 36. }; 37. 38. cbtLoad.addEventListener("click", oLoader); 39. cbtUnload.addEventListener("click", oLoader); 40. 41. focusManager.defaultPushButton = cbtLoad; 
    image from book

    In lines 1 through 4, the data types of elements on the Stage are updated to reflect the current contents.

    In lines 6 through 7, a new NetConnection instance named nc is created. This object is required as the sole parameter of the NetStream constructor (line 9). In line 7, the nc instance is connected to a null URL. If you were streaming content from a Flash Communication Server application or Flash Video Streaming Service, you would specify an RTMP location here. For progressively downloaded .flv files from a standard Web server, though, you simply connect to a null location.

    In line 9, a new NetStream instance named ns is created. A NetStream instance is required to play an FLV file.

    In lines 11 through 15, an onStatus() handler is defined for the ns object. This handler is invoked whenever an event occurs on the stream. In this example, the handler simply outputs trace() messages to the Output panel, letting you know what's happening with the stream.

    Note 

    The \t backslash pairs shown in the trace() actions enable you to shift trace messages to the right, inserting tab characters. You'll see the effect of each \t when you test the movie.

    Lines 17 through 22 define the onMetaData() handler for the NetStream instance. This handler is invoked when the .flv file's metadata is received. The metadata is at the front of the .flv file. As such, this handler invokes before the video begins to play. The file's metadata includes information describing the media file, including its width, height, and duration.

    On line 24, a buffer time is set for the stream. This value determines how many seconds of the stream must download before playback begins.

    In line 25, the attachVideo() method of the Video class is invoked on the vWin instance, the object you placed on the Stage in Step 8. The parameter for the attachVideo() method is the instance name of the NetStream object created in line 9.

    Like previous examples, the behavior for each Button component is tied to respective if/else statements within the click() handler of the listener object, oLoader. If the cbtLoad instance is clicked, then lines 30 and 31 are invoked. In line 31, the play() method of the NetStream class is invoked on the ns instance. For .flv files that are not accessed from a Flash Communication Server application, the parameter for the play() method is the HTTP-based URL of the .flv file. You can use relative or absolute paths for this URL. In our example, you use the text from the tVid field to determine the URL.

    In lines 32 through 34, the video file's playback is stopped. This code is invoked when the cbtUnload instance is clicked. In line 33, playback of the stream is stopped by invoking the close() method of the ns instance, and the image in the Video instance, vWin, is erased with the clear() method.

    In line 41, you set the focusManager class's defaultPushButton property to the cbtLoad instance. This action enables the Enter key for the cbtLoad instance. When you test the movie, make sure you choose Control ð Disable Keyboard Shortcuts to remap the Enter key to the Flash movie.

    Note 

    The focusManager class is automatically available in your Flash movies whenever you add User Interface components to your Flash movie.

  10. Save your Flash document. Make sure you have copied the stella_speak_keyed.flv file from the ch28 folder of this book's CD-ROM to the location where you saved the Flash document for this exercise. Test the movie (Ctrl+Enter or z+Enter), and type the text stella_speak_keyed.flv into the tVid field. Click the Load FLV button, and the video will play in the vWin instance (see Figure 28-21). If you click the Unload FLV button, the playback stops and the image no longer appears in the nWin instance.

image from book
Figure 28-20: The vWin instance will display the video from external .flv files.

image from book
Figure 28-21: The video as it plays in the vWin instance

Note 

You might notice that the stella_speak_keyed.flv file appears distorted on playback. That particular .flv file has a frame size of 380 x 320, and the picture is being stretched on playback within the 320 x 240 dimensions of the vWin object. In the next section, you learn how to adjust the size of the Video object based on the actual dimensions of the .flv file.

On the CD-ROM 

You can find the completed file, NetStream_100.fla, in the ch28 folder of this book's CD-ROM.

Try creating some of your own Flash Video files and using them with this Flash movie. Remember to go back to Chapter 17, "Displaying Video," for more information on Flash Video encoding.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net