FireworksColdFusionDreamweaverFreehandFlashMXHome
Latest New Content

Latest Free Content
View All
Free Content
Accessibility
CMX Learning Guides
Hosted by enterhost

Playing Videos Sequentially

By: Tom Green

Page 1 of 2

Set for printing

Next

If there is one thing about writing a book of this sort, it is that either the authors and the editors totally understand each other, or their egos clash and they start bellowing at each other like mastodons across the primordial ooze. Thankfully, the former was the case with this book.

In creating this chapter the authors were pretty satisfied with the lineup. There was quite a bit of meat here until one of the authors asked this question as the chapter was being written: what is missing? He ruminated on it for a couple of days, and the answer became apparent in one of his classes when a student mentioned that she was trying to get a series of videos to play in sequence.

This is one of those things that is quite common, but we tend not to pay a lot of attention to it. You see this quite a bit on sites that bracket videos with ads. Click the play button, an ad plays; as soon as the ad finishes, the video plays; when it finishes, another ad plays. Realizing that this was omitted, we started thinking about how to do this and in the course of the discussions we discovered that our technical editor and Community MX Partner, David Stiller, had dealt with this very issue in his blog in October 2007.

We naturally contacted David and asked if we could use his solution in this book. Per David, here's how to get a series of videos to play—one after the other:

  1. Open the Sequence.fla file in your download folder. When it opens, you'll see that we have tossed a Video object with the instance name of myVideo onto the stage.
  2. Select the first frame in the Actions layer and click once in the Script pane of the Actions panel. Enter the following code:

    import flash.events.NetStatusEvent;

    var videos:Array = new Array("Puppetji_Gossip.flv","Puppetji_Seeing.flv", "Puppetji_One.flv");
    var currentVideo:uint = 0;
    var duration:uint = 0;
    var ready:Boolean = true;

    var nc:NetConnection = new NetConnection();
    nc.connect(null);
    var ns:NetStream = new NetStream(nc);
    myVideo.attachNetStream(ns);
    ns.play(videos[currentVideo]);

    var listener:Object = new Object();
    listener.onMetaData = function(evt:Object):void {
    duration = evt.duration;
    ready = true;
    };
    ns.client = listener;

    The key to playing a sequence of videos is to wait for the currently playing video to finish, and when it does, to fire up the next video in the lineup. This tells you that the technique is tied to an event triggered by an FLV file playing on the NetStream. This is why we import the flash.events package and use the NetStatusEvent class from that package.

    The next step is to identify the videos and get them into an Array named videos. The next two lines of code make sure the number of videos is set to 0 and is always a positive number (uint) and that the duration value used is also a 0. Finally, a Boolean variable, ready, is declared and set to true. More on that in a moment.

    If you are interested in discovering the difference between an int and a uint, David Stiller deals with this quite neatly in his blog entry.

    The remainder of the code block is nothing you haven't seen before, except that the onMetaData event handler actually does something this time (it resets ready to true). The reason for this variable is described in the NET_STATUS handler notes that follow. With the videos "queued up" and ready to go, the rest of the code concerns itself with getting the next item in the list ready to go.

  3. Press Return/Enter twice and enter the following:

    function nsHandler(evt:NetStatusEvent):void {
    if (ready && ns.time > 0 && ns.time >= (duration - 0.5)) {
    ready = false;
    currentVideo++;
    if (currentVideo < videos.length) {
    ns.play(videos[currentVideo]);
    } else {
    ns.removeEventListener(NetStatusEvent.NET_STATUS, nsHandler);
    }
    }
    };

    The magic happens with this function and a NetStatusEvent. Flash will be constantly checking the FLV file to keep an eye on the current status of the FLV file. As you know, you can keep an eye on the current time of the video. In this case, we check to make sure that the time is somewhere between the start of the video—ns.time > 0—and just before the end of the video—ns.time>= (duration - 0.5). If the time is between those two numbers, Flash is told to ignore the function. There's one more condition, though, and that's the ready variable. The NET_STATUS event often fires more than once during important changes in a video's behavior, such as when a video ends. The ready variable ensures that the event handler function does its thing only once—otherwise, it might increment the currentVideo variable repeatedly while the other two conditions are true. That wouldn't be good, so the first time all three conditions are met, ready is set to false. It is reset to true when the next video loads, thanks to the onMetaData handler.

    When the time is about one-half second before the end of the video, the next video in line is pulled out of the Array—currentVideo++. Naturally, we need to make sure that it is a part of the Array. If it is, put it on the stream and start playing it—ns.play(videos[currentVideo]).

  4. Save and test the movie. The videos will play in the order in which they appear in the list.

Yes you can (and should) skip “hard-wiring” the videos into the code and use XML instead. Regardless of the method used—internal versus external—the key to this exercise is the function in step 3.

Page 1 of 2 1 2 Next


download
Download Support Files


Keywords
Flash, Flash CS3, Video, Flash Video