Create dynamic playlist for streaming Flash video

We are often bogged down with mundane tasks such as site maintenance and updates. If we want to pass these tasks on to clients or colleagues who are not tech-savvy, we have to develop sophisticated interfaces to simplify the process for them and to give them easy access to the data. XML gives the power to control content back to the client, freeing us developers to do what we do best.

High-profile sites, most notably Google Video and Amazon.com, are taking advantage of the integration of Flash video with XML. By editing one flat file, you too can update your video content dynamically.

At a MAX conference, Chris Hock and Srinivas Manapragada from Macromedia (now Adobe) presented an XML-based solution for creating content-driven media players called VideoSource. Using their code as a foundation, you will develop your own dynamic video playlist in this article. This XML-based approach is perfect if you ever need to display multiple video clips but you don’t want to edit your Flash source code every time you add new video content. As an extra bonus, the application actually generates thumbnail previews on the fly.

Note: This tutorial shows you how to create a dynamic playlist for streaming Flash video. To find out how to build a similar playlist using progressive download Flash video, see my article, Creating a Dynamic Playlist for Progressive Flash Video.

The basic framework of the VideoSource application consists of the following (see Figure 1):

• Flash Media Server (FMS) to stream video
• XML file as the data source (playlist-demo-1.xml)
• Custom-made player for playback (VideoSource2.swf)
• External ActionScript files (VideoSource.as, VideoThumb1.as)

Figure 1. Server/file diagram of the VideoSource application

You can download all source files for this project.

Requirements

To complete this tutorial you will need to install the following software and files:

Flash Professional 8

Flash Media Server 2

Sample files:

• dynamic_playlist.zip (ZIP, 7 MB)

Prerequisite Knowledge

You should be familiar with Flash Professional 8 and understand the basics of delivering video through Flash and Flash Media Server (FMS). You should also have a basic understanding of XML.

Exploring the Video Player Interface

This section explains the structure of the finished player and walks you through creating the interface. You also create a very simple custom component that displays your dynamic thumbnails within the playlist.

The video player is a relatively simple interface, consisting of an embedded video object for playback and a List component for the video (see Figure 2).

The List component is populated automatically from the contents of your XML file. You can extend the List object class to include an automatically generated thumbnail of the video for each list item. Each item links to the appropriate Flash video (FLV) file, which plays in the FLVPlayback component when clicked.

Follow these steps to create your interface:

1. Open the Flash Professional 8 authoring environment and create a new Flash file.
2. Save the file as VideoSource2.fla.
3. Add an instance of the List component to the Stage and give it the instance name of list.
4. Open the ActionScript panel and add code to call the external ActionScript file you’ll be creating:

   #include "VideoSource.as"
   

5. Create a new movie clip symbol called VideoHolder.
6. Within this symbol, add a new instance of the Video component to the Stage.
7. Click the menu on the Library tab and choose New Video. Name the instance video.
8. Draw a box with an empty fill and an outside rule of 1 pixel that’s the same size as your video component (160 x 120 pixels). Place it directly on top of your video component to give you a nice frame around your thumbnail videos.
9. Create the VideoThumb component as follows:
   1. Go back up to the main Timeline and create a new symbol called VideoThumb.
   2. Within the symbol, add a stop(); action to the first frame.
   3. Create a new layer and add a blank keyframe at Frame 2. In this frame, add an instance of the VideoHolder movie clip. Call this instance VideoHolder. Change its size to 5 x 5 pixels, at x,y coordinates 0,0.
   4. Go back up to the main Timeline and select VideoThumb in the Library panel. Choose Component Definition from the Library menu. In the Component Definition dialog box, set the AS 2.0 Class to VideoThumb and add the following parameters (see Figure 3):
      • enabled, enabled, true, Boolean
      • visible, visible, true, Boolean
      • minHeight, minHeight, 0, Number
      • minWidth, minWidth, 0, Number

      Make sure that both the “Parameters Are Locked in Instances” and the “Display in Components Panel” options are checked.

   

1. Save the file as VideoSource2.fla.

You’ll need to wait until after you write the VideoSource.as file (see Step 3 in the section “Writing the Client-Side ActionScript”) to publish the SWF file, so keep the interface file handy.

That’s all there is to the interface. Provided that you don’t decide to change your layout, you won’t need to edit the file again. You just make all future updates in your XML file. It’s truly a thing of beauty.

The next section shows you how to set up the application on your server.