Displaying a Flash Video at Its Native Size

There's the very likely possibility that when you're building a Flash user interface intended to display video, you won't be able to predict all of the possible sizes of the video clips you want to play. In this section, you learn how to use the metadata encoded into .flv files in order to appropriately size the Video object in which the video plays.

Caution 

Not all Flash Video encoding utilities add metadata to .flv files they create. Most current encoding utilities, including the Flash Video 8 Encoder that ships with Flash Professional 8, add accurate metadata. If the NetStream.onMetaData() handler does not fire, or if it reports 0 values for the width and height properties of the clip, then it's likely that there's no metadata in the .flv file. Luckily, there are tools that can add metadata to your .flv files after you have created them. Check the "Flash Video Utilities" section of the www.flashsupport.com/links page for specific resources.

Before you proceed with the tutorial for this section, though, you must understand one important concept: The Video class has two sets of dimension properties — width/height and _width/_height. The _width and _height properties control the displayed size of the Video instance on the Stage, while the width and height properties report the actual dimensions of the video stream playing. You can set the _width and _height properties but not the width and height properties. As you'll see in the second part of this section, you can use the width and height properties to check the actual width and height of the .flv file even if there is no metadata in the .flv file.

Note 

The width and height properties of the Video class do not necessarily report the width and height values that are displayed in the Property inspector when you select the Video instance on the Stage. To check the displayed width and height of a vWin instance, use the _width and _height properties of the Video instance.

Adjusting Video Size with Metadata

If your .flv file has metadata available, then you can use the NetStream.onMetaData() handler to resize the Video instance displaying the .flv file. As you learned in the last exercise, the onMetaData() handler is invoked before the video begins to play.

On the CD-ROM 

Make a copy of the NetStream_100.fla file from the ch28 folder of this book's CD-ROM. You'll use this file as the starter document for this section.

1. Open your copy of the NetStream_100.fla document, and save it as NetStream_resize_100.fla.

2. Select frame 1 of the actions layer, and open the Actions panel (F9 or Option+F9 on Mac). Add or modify the bold lines shown in Listing 28-8. In this updated code, you set the _width and _height properties of the vWin instance (a Video object) to the same values as the returned width and height properties in the metadata object, oData. Note that the visibility (the _visible property) of the vWin instance is set to true as well. In the oLoader.click() handler, the visibility of the vWin is turned off. This step is taken so that you don't see the video properties snap and update when the video begins to play. The video is only visible after the transformations have been applied.

   Listing 28-8: The Updated onMetaData() Handler

    var cbtLoad:mx.controls.Button; var cbtUnload:mx.controls.Button; var tVid:TextField; var vWin:Video; var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); ns.onStatus = function(oInfo:Object):Void {    trace("ns.onStatus >");    trace("\tlevel:\t" +oInfo.level);    trace("\tcode:\t" + oInfo.code); }; ns.onMetaData = function(oData:Object):Void {    trace("ns.onMetaData >");    var nWidth:Number = oData.width;    var nHeight:Number = oData.height;    trace("\twidth: "+ nWidth);    trace("\theight: "+ nHeight);    vWin._width = nWidth;    vWin._height = nHeight;    vWin._visible = true; }; ns.setBufferTime(5); vWin.attachVideo(ns); var oLoader:Object = new Object(); oLoader.click = function(oEvent:Object):Void {    var sLabel:String = oEvent.target.label.toLowerCase();    if(sLabel == "load flv"){       vWin._visible = false;       ns.play(tVid.text);    } else if (sLabel == "unload flv"){       ns.close();       vWin.clear();    } }; cbtLoad.addEventListener("click", oLoader); cbtUnload.addEventListener("click", oLoader); focusManager.defaultPushButton = cbtLoad; 

3. Save your document, and test it (Ctrl+Enter or z+Enter). Type the name stella_speak_keyed.flv into the tVid text field, and press the Load FLV button. The clip of Stella plays at the original size of the .flv file, 320 x 380. Compare the sizes of the clip from the last exercise with this new resized clip.

4. You probably noticed that the video clip was playing behind the text field and buttons on the Stage. You can also shrink or enlarge the video size by performing further mathematical operations on the width and height values. Select frame 1 of the actions layer, and open the Actions panel. Change the nWidth and nHeight values in the onMetaData() handler, as shown in the following bold code. Here, you divide the width and height data by two, reducing the size of the video display.

    ns.onMetaData = function(oData:Object):Void {    trace("ns.onMetaData >");    var nWidth:Number = oData.width/2;    var nHeight:Number = oData.height/2;    trace("\twidth: "+ nWidth);    trace("\theight: "+ nHeight);    vWin._width = nWidth;    vWin._height = nHeight;    vWin._visible = true; }; 

5. Save the document, and test it (Ctrl+Enter or z+Enter). Type the name stella_speak_keyed.flv in the tVid field, and press the Load FLV button. As shown in Figure 28-22, you should now see Stella's video at a quarter of the size.

Figure 28-22: The newly resized video clip

Note 

Even though you divided the width and height values by two, the new displayed pixel area is one-fourth of the original pixel area of the clip.

On the CD-ROM 

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

Setting the Video Size without Metadata

You might not always have the luxury of loading .flv files that have metadata. Luckily, you can still resize the Video object using the native width and height properties of the Video class. In this section, you learn how to alter the onMetaData() event handler to check for the existence of metadata and make the appropriate modifications to the video display area.

We intentionally included a clip without accurate metadata on this book's CD-ROM. Make a copy of the stella_speak_no_meta.flv file to the same location as the NetStream_resize_100.fla file you created in the last section. Test the Flash movie for that document, and type stella_speak_no_meta.flv into the text field and click the Load FLV button. The .flv file will load, and if you have your speakers turned on, you'll hear the audio, but you won't see the video. Why? Because the clip has no metadata, the width and height properties are being set to 0. In order to fix this problem, you'll have to make some modifications to the onMetaData() event handler.

On the CD-ROM 

Continue using the NetStream_resize_100.fla file from the last section, or make a copy of the file from the ch28 folder of this book's CD-ROM. Make sure you have made a copy of the stella_speak_no_meta.flv file as well.

1. Open the NetStream_resize_100.fla file, and resave it as NetStream_resize_nometa_100.fla.

2. Select frame 1 of the actions layer, and open the Actions panel. Modify the onMetaData() event handler as shown in the following bold code. Here, you check to see if the nWidth variable is equal to 0, an undefined value, or if it's not a number. If any of those conditions are true, you'll assume that there isn't valid metadata for both the width and height of the .flv file. As such, check the width and height properties of the vWin instance, which will return the FLV's native dimensions. As with our previous example, the values are divided in half to size Stella more appropriately for the movie's Stage.

    ns.onMetaData = function(oData:Object):Void {    trace("ns.onMetaData >");    var nWidth:Number = oData.width/2;    var nHeight:Number = oData.height/2;    if(nWidth == 0 || nWidth == undefined || isNaN(nWidth)){       trace("\tclip has empty metadata");       vWin._width = vWin.width/2;       vWin._height = vWin.height/2;    } else {       trace("\tclip has proper metadata");       vWin._width = nWidth;       vWin._height = nHeight;    }    vWin._visible = true; }; 

3. Save the document, and test it (Ctrl+Enter or z+Enter). Type stella_speak_no_meta.flv into the text field, and click the Load FLV button. You should see the same size video as the clip you sized in the previous section.

On the CD-ROM 

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