Creating JPEG Thumbnails

A more bandwidth-conscious way of displaying thumbnails is to create scaled-down JPEG files for each video file. You have several options for creating them; you can:

• Export a single scaled-down frame in a video editing program.
• Take a screenshot and scale it down in an image editing program.
• Use a third-party utility such as Camtasia to capture and export a single frame.

The optimal size for thumbnails in this example is 60 pixels high by 80 pixels wide, 72 dpi resolution. Place the scaled-down JPEG files in the same directory as your SWF file, in a directory called thumbs. When you have your thumbnail files, you’ll need to tell your application where to find them, which brings me to the XML file that is part of the ZIP file that accompanies this tutorial.

Specifying JPEG Thumbnails in the XML File

To dynamically add new videos to your playlist, you simply edit the playlist-demo-1.xml file, which is included in the ZIP file for this tutorial. Thumbnail filenames need to be specified in this file as well. The last attribute of each item is thumb; its value is the thumbnail filename, as shown in the following code:

<xml>
     <listitem name="Battle 1" url="streams" thumb="battle1.jpg">
         <stream name="battle1.flv" />
     </listitem>

      <listitem name="Fight!!!" url="streams" thumb="fight.jpg"> 
        <stream name="fight.flv" /> 
    </listitem>

      <listitem name="Marco Diaper" url="streams" thumb="marcodiaper.jpg">
         <stream name="marcodiaper.flv" />
     </listitem> 

     <listitem name="Cheetah Cougar" url="streams" thumb="cheetahcougar.jpg">
         <stream name="cheetahcougar.flv" />
     </listitem>

      <listitem name="Cloning" url="streams" thumb="cloning.jpg">
         <stream name="cloning.flv" />
     </listitem>

      <listitem name="Run" url="streams" thumb="run.jpg">
         <stream name="run.flv" />
     </listitem>

      <listitem name="Midgets 1" url="streams" thumb="midgets1.jpg"> 
        <stream name="midgets1.flv" />
     </listitem>

      <listitem name="Midgets 2" url="streams" thumb="midgets2.jpg">
         <stream name="midgets2.flv" /> 
    </listitem> 

     <menu>
         <listitem name="Battle 1"/>
         <listitem name="Fight!!!"/>
         <listitem name="Marco Diaper"/>
         <listitem name="Cheetah Cougar"/>
         <listitem name="Cloning"/> 
        <listitem name="Run"/>
         <listitem name="Midgets 1"/>
         <listitem name="Midgets 2"/>
     </menu>
 </xml>  

To display the thumbnails in the playlist, you’ll now edit the VideoThumb.as file to grab them.

Adding JPEG Thumbnails to a Playlist

A few small changes to VideoThumb.as are needed to pull the thumbnails specified in the XML file:

60    //grab jpg thumbnail instead of initiating stream.
 61    var newClip = 
        this.createEmptyMovieClip("thumbie",this.getNextHighestDepth());
 62    newClip.loadMovie("thumbs/"+stream); 

This code attaches the JPEG file to a newly generated movie clip inside thumb.video, which is displayed in the ListBox component. Note that the thumbnail cannot be attached directly to the thumb.video object, as was done in the streaming example, because the JPEG file will not just attach, but will unload any content currently loaded. In this case, it unloads the caption data. So you will create a new movie clip inside, called newClip, and load the JPEG file there.

There’s only one more change needed to finish up the application, in the VideoSourcePro.as file.