Welcome!

Adobe Flex Authors: Yakov Fain, Keith Swenson, Jacques Durand, Pat Romanski, Liz McMillan

Related Topics: Adobe Flex

Adobe Flex: Article

Generating Thumbnail Previews Using Progressive FLVs

A workaround involving loading a non-existing FLV

We probably all know by now how to play a progressive FLV without Flashcom:

nc = new NetConnection();
nc.connect(null);
ns = new NetStream(my_nc);
ns.setBufferTime(0.1); // small buffer to limit motion in preview
my_video.attachVideo(ns); // my_video is a video object on stage
ns.play(thefile);

To turn this example into a thumbnail preview of the actual FLV you could do this:


ns.onStatus = function (info) {
if(info.code == "NetStream.Buffer.Full"){
ns.pause();
}
};
There's even a way of supressing the sound resulting in a silent preview:

// soundholder is a simple movieclip on stage
soundholder.attachAudio(ns);
audio = new Sound(soundholder);
audio.setVolume(0);

You don't have to be a rocket scientist to take this example further using a 'play' button and kicking the video plus sound into life upon click. But what's not so obvious is the fact that even if you pause the video, the FLV file will load in its entirety in the background, potentially clogging up a user's connection. This is even more of an issue if you want to display many previews at once.

I found out about this behavior using a neat little program called Netlimiter (www.netlimiter.com/). It allows you to see which applications are using what kind of bandwidth and it also enables you to throttle a fast connection on a per application basis, emulating dialup users for example.

I thought it would be easy enough to stop the FLV downloading by killing the NetConnection or close the NetStream similar to how this would work using Flashcom. Unfortunately I had no success with that approach, the FLV would continue downloading come what may.

Fortunately the workaround was surprisingly easy: try loading a non-existing FLV. Here's the code I used:


ns.onStatus = function (info) {
if(info.code == "NetStream.Buffer.Full"){
my_video.attachVideo(null);
ns.pause();
ns.play("nonexist.flv");
}
};
This seems to do the trick quite nicely, showing one frame of the previously loaded FLV without clearing the video object. A typical preview consumed only about 5 to 10 KB of data -- a big saving over a whole flv file which is potentially several MB in size.

The source for the finished example is here: www.flashcomguru.co.uk/downloads/flv_preview.zip

The sourcecode is a bit messy but I didn't have time to clean it up.

Let me emphasize again: if you only have a single FLV file on your page then the background download can be a great feature and even improve the user experience. But if you want to preview many different FLV files on one page then I recommend you use my approach above.

Hope this helps someone.

More Stories By Stefan Richter

Stefan Richter is a Certified Flash Developer and Team Macromedia member who has been involved with Flash Communication Server since its early days. As VP of Application Development and cofounder of POPview, he has developed a variety of Rich Internet Applications using Flash Communication Server, Flash MX 2004 and Coldfusion. You can find more of Stefan's articles at www.flashcomguru.com.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.