Showing FLV Progress in Flash Professional 8

You may have noticed that when the above video starts to play, the red diamond moves across the Progress Bar and the numbers in the little green box change to show how much of the video has played. This is a rather neat way of giving your visitor a rough idea of how much of the video is left to play and the current location of the Video Playback in seconds.

This project is not terribly difficult to pull together because everything you need to make the diamond move and the numbers change is readily available to you when the video plays. Feel free to download the Exercise files before proceeding.

  1. The diamond is nothing more than a 5 x 5 square that I filled with red and then rotated 45 degrees using Modify>Transform>Scale and Rotate. The little box was then saved as a movieclip I named "ProgWidget".
  2. Create a new layer named Progress and drag the widget from the library and place it over the Progress Bar (You see how to create a Progress Bar over here).
  3. Set the widget's X value to 0 in the Property inspector and give it the instance name of mcPosition.
  4. Create another layer named "Text". Create a small rectangle and fill it with the color of your choice.
  5. Select the Text Tool and, still in the Text layer, click the mouse on the stage. Enter the following Text properties:
    • Text Type: Dynamic
    • Instance Name: txtText
    • Font: _sans
    • Color: Pick one that contrasts with the box you created.
    • Text: 0.000

The assets in place

Image 1: The assets are in place and ready to be wired up with ActionScript.

  1. Select the keyframe in the Actions layer, press the F9 (PC) or Option-F9 (Mac) keys to open the ActionScript editor
  2. Click once in the Script pane and enter the following code:

var mcPosition:MovieClip;
var mcLoad:MovieClip;
var loaded_interval:Number = setInterval(checkBytesLoaded,100);

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);
myVid.attachVideo (ns);
ns.play("Sheridans.flv")

If you have completed the Load Progress tutorials there really is nothing new here. The variables are declared, the connection made to the server, the stream established and the video is fed into the video object on the stage.

If you have never seen that third line all it does is create a variable named loaded_interval which uses the setInterval() method to essentially see how much of the stream has flowed into the Flash Player and to check it every 100 milliseconds.

  1. Press the return/Enter key twice and enter the following code:

ns["onMetaData"] = function(obj:Object):Void {
duration = obj.duration;
}

function checkBytesLoaded () {
amountLoaded = Math.round((ns.bytesLoaded/ns.bytesTotal)* 100);
mcLoad._xscale = amountLoaded ;
mcPosition._x= ns.time/duration*100;
txtText.text = ns.time;
}

This code is what makes it all work.

The first function pulls the video duration out of the FLV's metadata and gives it the name duration.

When an FLV is created using the Flash 8 Video Encoder, Flix Pro or Sorenson Squeeze, the FLV created will contain metadata in the file. The metadata in an FLV contains such information as:

The neat thing about the onMetaData handler is that the Flash Player can access this information. The handler is essentially called when the NetStream.play() method kicks off but before the video starts playing. This means all of this information is currently sitting in the Flash Player is there and just waiting to be accessed.

Which is the purpose of the next function named checkBytesLoaded.

The first two lines determine what percentage of the FLV data has loaded into the player and use that number to scale the grey loader bar under the diamond. (A more complete explanation of these two lines can be found here. )

The next two lines are what control the movement of the diamond and the changing text.

The first line : mcPosition._x= ns.time/duration*100; .. moves the mcPosition movieclip along the the x axis. It simply uses the the time property of the NetStream, divides it by the duration of the video and multiplies that number by 100 to obtain the "percentage" value used to move the diamond to the right. The diamond moves thanks to the setInterval() method create earlier.

The text simply shows the value of the time property in the Text Box. This number, in a dynamic text field, is updated every .1 seconds thanks to the setInterval() created earlier.

  1. Press the return/Enter key twice and enter the following code to make the buttons functional:

btnPause.onPress = function() {
ns.pause();
}

btnPlay.onPress = function() {
ns.play("Sheridans.flv");
}

  1. Save and play the movie.

 

CreativeCommons license