# Play Videos in Sequence Using Flash

It’s an all too familiar occurrence. You click a link to watch a video and, instead, have to sit through a 15 second ad before the video plays. Though this is an extreme example of how one plays a video sequence the technique is exactly the same.

In this tut, I’ll show you a method of playing sequential video through a video object and through the FLVPlayback component in Flash.

To get you going I have included 3 TV ads (FLV format) from the early days of television. These ads, from the Prelinger Archives are about 1 minute in length and will play one after the other. Download the files and let’s get started:

## Step 1: New Document

Open a new Flash ActionScript 3.0 document. When the file opens add a new layer and name it “actions”. Lock the “actions” layer.

## Step 2: Video Object

Add a Video Object to the Library. Now select “New Video” from the Library Pop Down menu. When the Video properties dialog box opens, make sure “Video (ActionScript -controlled)” is selected and click OK. When the dialog box closes you will see a video object (it looks like a video camera) in the Library.

## Step 3: Add to Stage

Add the Video Object to the stage, then with the Video Object selected, click the properties tab and set the size of the object to 320 pixels wide and 240 pixels High. Additionally, in the property Inspector, give the selected video object the instance name of “myVideo”.

Before we get into the code let’s take a moment to think about what needs to be done. First off there are three FLV files that will be played through the Video Object (myVideo) on the stage. Somehow, Flash is going to need to be told which videos will played and in what order.

The next thing Flash needs to do is to cue up the next video in the line up. This tells you that you will need to keep an eye on how much time is remaining in the currently playing video. When it hits the end, or close to it, you will need to clear it out of the stream, queue up the next one in the lineup and get it playing.

Here’s how to do that:

## Step 4: ActionsScript

import flash.events.NetStatusEvent;

var currentVideo:uint = 0;
var duration:uint = 0;



The key to this entire exercise is waiting for one video to finish then lining up the next one to play. This sort of thing is tied to an event that is triggered by the video currently playing on the NetStream. That first line of code is why we import the NetStatusEvent class from the import flash.events package.

The next line of code throws the FLV files to be played into a list. Keep in mind the order of the videos in this list will be their playback order.

While we are on the subject of a list: “Yes this can be done using an XML document instead of hard-wiring the videos into the swf”. In this example we only have three videos, so managing them using an external XML document really isn’t necessary. Where an XML document is critical would be those situations where new videos are constantly being rotated through the line up or where an entire series of videos, let’s say 10 for argument’s sake, have to be played in a particular order.

The next two lines use the uint class to make sure we are always dealing with a positive number when referring to a video in the list or the length of its duration.

The final line sets a Boolean variable to true. We will be using it very shortly.

## Step 5: More ActionScript

Enter the following ActionScript:

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();
duration = evt.duration;
};

ns.client = listener;


This is the standard code used to get a video to play through a Video Object. The first two lines establish a NetConnection and the null parameter in the second line tells Flash these videos will be played using a progressive download rather than streamed through a Flash Media Server.

The next code block creates a NetStream object and passes it the NetConnection parameter – nc. From there, the NetStream is fed into the video object named myVideo and Flash, through the play() method, is told which video to play in the video object.

The listener’s sole function is to reset the ready value to true. Hang on, didn’t we just do that with the variable in line 5? Yes we did, but the following code block makes the reason for this reset much clearer.

## Step 6: Listen Up

Enter the following ActionScript:

ns.addEventListener(NetStatusEvent.NET_STATUS,nsHandler );

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



We start by using a listener to tell Flash to keep an eye on what is going on while the FLV is playing. What Flash is listening for is a NetStatusEvent and these events are usually dispatched whenever the video does something like start, stop and so on. Whenever this happens the nsHandler function is fired.

The nsHandler function is where the magic happens in this project. The NetStatusEvent is constantly running and one of the things being checked is the current time in the video. Each video in this project is about 60 seconds in duration. In this case we want to be sure the current time is somewhere between 0 and 60 seconds. If it is ,the function is ignored…sort of.

Remember that ready variable in the metaData handler? A NET_STATUS event is fired a lot more than when the end of the video is reached. The ready variable ensures the function only does its thing once. If it didn’t there is a good chance it would constantly skip to the next video in the lineup because the two conditions are true. This wouldn’t be a good thing which is why, when the first three conditions – ready, the current time is greater than 0 and greater than or equal to the video’s duration – are met the ready value is set to false. The ready value is reset to true, thanks to the onMetadata handler, only when the next video loads.

Thus the balance of the code block starts to come into focus. If the current time on the stream is somewhere between 59.5 and 60 seconds, the video that is currently playing is ignored – ready = false – and the next video in the list – currentVideo++ - is yanked into the lineup. Of course, before it starts playing, it needs to prove it belongs in the lineup. This is done by checking it against its position in the array – currentVideo < videos.length - and, if its identity passes scrutiny, it is added to the stream and played.

## Step 7: Save and Test

Save the movie to the download folder containing the FLV’s and test the movie.

Hey! What about the FLVPlayback component?

Glad you asked. Here’s how to do the same thing using the FLVPlayback component:

## Step 8: New Document

Open a new Flash ActionScript 3.0 document. When the document opens add a new layer to the timeline and name this layer “actions”. Lock the actions layer.

## Step 9: FLVPlayback Component

Add an FLVPlayback component to the stage.

## Step 10: Resize the Component

Open the Properties panels and set its dimensions to 320 by 240. Next give the component the instance name of myVideo. Normally you wouldn’t manually resize the component because the component is sized to the video’s dimensions when one is chosen in the Component Inspector. In our case the entire thing will be driven by ActionScript, so you need to do this.

## Step 11: Add a Skin

This can be done by selecting the component on the stage and going to Window > Component Inspector.

## Step 12: ActionScript

var videos:Array = new Array("Ad01.flv", "Ad02.flv","Ad03.flv");
var currentVideo:uint = 0;

myVideo.mouseChildren = false;

function playCurrentVideo():void {
myVideo.source = videos[currentVideo];
myVideo.play();
}
playCurrentVideo();

function completeHandler(evt:Event):void {
currentVideo++;
if (currentVideo > 0) {
myVideo.mouseChildren = true;
}
if (currentVideo < videos.length) {
playCurrentVideo();
}
}



We start by creating the Array and using the currentVideo variable to keep track of which video in the list is playing.

The third line is optional but answers a “How do they do that?” question I am often asked. Have you noticed how, when you hit a site where the videos are bracketed by ads, that you can’t get at the controls to skip the ad? This line is how that is done. It simply disables all of the buttons in the component’s skin.

The first function – playCurrentVideo() - keeps the source property of the component’s instance current and plays the video.

The completeHandler() looks oddly familiar. In the case of the FLVPlayback component there are no NET_STATUS events to worry about. The only event to watch is the COMPLETE event fired when the component hits the end of the video. When this event is detected the next video in the array is yanked into the lineup and the playback controls are unfrozen. This only happens if the video can prove it is a member of the array and hasn’t been played already.

## Step 13: Save and Test

Save the project to the same folder as the FLV’s and test the movie.

# Conclusion:

In this tutorial I have shown you how to play a sequence of videos using either a Video Object from the library or an FLVPlayback component. You now understand how to create a playlist and have that list play in the order established. You have also seen how to disable the controls on the component’s skin to prevent users from changing the volume, skipping through the video or even pausing the first video in the lineup.

I hope you found it useful, thanks for reading.

Tags: Videos
• http://active.tutsplus.com/author/andre-cavallari/ André

Wow, this is really very usefull, it´s nice show two ways to create the same thing, one using component and other not using, would be a little better using XML for the playlist, but it´s very cool, thanks a lot.

• krina

I really dont understand what is happening with active.tutsplus, the tutorials are event worst and worst, i dont believe that this could be paid $150,00, for first teachs very bad way to code as3, it uses timeline to code, for second, why not use xml? for third, this teachs only how to sequence some videos, but if i want to click any thumb to jump to a video? come on, if you are being paid$150 to do this, do it right and strive a little bit dude…

I think it´s this, sorry to say but there is nothing usefull to learn here…

Also sorry to say my friend, but judging your last tutorials, you must be friend of adobe staff to be considered one of the “10 most influentials flash designers”, i didnt see anything really good that desesves you this honor, or you have a great portfolio to show us??

• http://snaptin.com Ian Yates
Staff

..have to be honest, I almost didn’t hit approve when moderating that comment. Still, in the interests of free speech, it’s here for all to see.

• http://active.tutsplus.com/author/andre-cavallari/ André

@Ian
Hum, i approve your decision about free speech, but i would aprove your decision if you didnt aproove this comment too, you are being really nice saying “thanks” for this kind of comment.

@krina
I think, you can expose your opinion here, but why not use better words to do this? maybe this can not be an advanced tutorial, but i am sure that there are a lot of people searching for this, active.tutsplus is a real treasure in hands of flash developers…

Posts like this are hilarious. I’m glad it was approved. If you ever browse a flash forum you would see that this basic functionality is something a lot of people need help doing.

You ask the author where his portfolio is…where is your portfolio? Where are your flash tutorials? Sounds like you could be releasing some advanced stuff and earning some easy money!

ahh, I’m still chuckling to myself over this. :)

• http://www.GamesFun.co.il Ian Lockhear

I was laughing at the “you must be friend of adobe staff to be considered one of the “10 most influentials flash designers” “. – SUPER mature.

Indeed, It sounds like krina could be making some big bucks in no time and teaching us some really great stuff.

Looking forward in anticipation krina.

• Alex

@Krina
Just so you know, Tom Green is someone who teaches Flash for a living (both through writing and a classroom) and has been doing it for a long time. The dude knows his stuff. He was one of the teachers at the college I went to, although I wasn’t fortunate enough to be in any of his classes, but I do know the quality of what he does and teaches.

If you don’t know why he’d be in the list of influential flash people, than you don’t know what he’s done for the community, and I suggest you go find out. He alone has probably accomplished more for the Flash community than any of us here ever will.

Tutorials aren’t supposed to teach you everything…if that’s how you’re expecting to get by as a Flash developer, you’re not going to make it very far. A tutorial is supposed to give you a starting point, or teach some basic concepts that you can use elsewhere. Too many people think the final product of these tutorials is supposed to be slapped into a project. Tutorials aren’t (usually) production quality stuff.

Very rarely do tutorials cover extremely advanced or in depth topics. The reason for that is pretty simple…if you’re a developer capable of doing that kind of stuff, you’re probably reading the documentation and learning it yourself, being innovative.

• André

I just think we should not continue this discussion, i´ve never seen this krina here before, must be someone who is visiting here for the first time, or someone who are just wanting to create intrigue here, it´s better we talk only about the tutorial now…

I can see Tom Green is a media lover in flash, almost all his tutorials are about video in flash, and video in flash is one of the thing that people has difficulties.

Tom: dont care about those kind of comments, you´re doing a great job, i just think your tutorials would be better in document classes, it´s nice teach people using good habits, and thanks for them!

• bhenry

Krina obviously didn’t read the article.

“While we are on the subject of a list: “Yes this can be done using an XML document instead of hard-wiring the videos into the swf”. In this example we only have three videos, so managing them using an external XML document really isn’t necessary.”

I think it’s great. This is useful for me. I can use this to put an animated logo bumper in front of our web vids. Thanks Tom!

• André

Even with too few videos, would be better with xml, latter if you want to update, add or delete the videolist you dont need to open your fla and export your .swf again.

• http://www.cbesslabs.com Sebastian Bratu

It is very sad to criticize someone, especially Tom Green. Why everyone is making such a fuss about 150$? Is it the recession ? Do you believe that a tutorial is so simple to make ? Do you think you just wake up and say: “I am going to make a video player tutorial” ? Every time I read a tutorial here, there is a comment: “This definitely didn’t deserve 150$ … ” and that makes me sad.

Even if the tutorial is something you have seen or tried an year ago, it’s still something to learn for the beginners.

Why bite the hand that feeds you ?

• neeraj panwar

its very good tutorials for me

• http://RGS-bg.com Georgi Nikolov

I dont understand people complaining about FREE to read Tutorials.
Really, whats the thing that motivates people to write comments like that?!

If someone says he can do it better, or should include better stuff in this or that tut…. MAKE ONE BETTER, POST IT :) Let us know that you are for real, and better share the knowledge!
Think that the tutorial is not professional, well make one ! For us, this is better then nothing, and what do we get from people that only say that it can be done better …. Nothing!

• http://www.GamesFun.co.il Ian Lockhear

Sure, I might not think a tutorial is advanced enough, I’d like them to perhaps go to the next step, Or I feel like its a stupid topic.
BUT:

1. ITS FREE. I AM NOT FORCED TO READ.
2. In 99% of the tutorials, I learn at least 1 thing that is new to me.
3. If we’d have to face it, ActiveTuts+ IS one of the highest quality Flash tutorial’s site. If not the highest.

Whether you like the topic and find it useful, or you know it like your strong hand, your still getting:
1. A detailed explanation, you might discover something you thought otherwise.
2. Its WELL-WRITTEN. I dont think anyone can argue otherwise…
Have you ever had a situation in which you couldn’t understand what was needed to do? couldn’t understand what the author tried to say?
Not once for me…

@ Ian Yates
I’ve been trying to reach you via the submission form, i guess it’s broken.
If you could leave you email please :)

• http://snaptin.com Ian Yates
Staff

Hi Ian, I just tested the form and it works fine (?) Give it another try..

• André

“If we’d have to face it, ActiveTuts+ IS one of the highest quality Flash tutorial’s site. If not the highest.”

Yeah, i agree, i dont know any other website, in any language, wich post a quality tutorial each two days, the faster i know is a single tutorial per week, and most time are much lower quality tham here, that´s why i am a daily reader of active.tutsplus… so i really cant understand why some people complain about this

• hector

hi there, i really like your tutorial and it really helps me with a project. BTW, i have a question….i am making a project with five videos with same sequence as shown on your tutorial but i want to keep running those videos when the last one is over. can you help me???

• Vince

Just what I needed. Any thoughts on how to loop the sequence?

• Eduardo

Is it possible to put a version that uses XML instead of an Array? Well I have to use more than 10 videos and I can not move constantly in the application to change only one video.
Respond with urgency

• Gerry

Hi Folks,

Just discovered this little gem – very nice.

Regarding “myVideo.mouseChildren = false;” does this only apply to the flvPlayBack component?

How would one acheive this on a custom built player? Any, ideas would really be appreciated.

Kind Regards,

Gerry

• http://www.raymondmonday.com Ray Monday

Hi,
This would be extremely useful but it won’t function for me.

I keep getting this syntax error:
1087: Syntax error: extra characters found after end of program.

• kunjok

Thanks,

This is very useful but it won’t function for me.
i’m using macromedia flash ver8

I keep getting this syntax error

anyone can help? Thanks