Develop a Video Playlist, hardcoded in Flash, and Imported from an XML file.

There are two basic ways that playlists can be developed with FLVs. One is with the list of videos hardcoded within the Flash file, and the other is calling the video list from an XML file. The second is recommended because information can be updated without opening Flash. As you may already know XML files are versatile and easy to update, and can be adapted into a database. I suggest going this way. This tutorial covers both options.

Preparing your videos with Flash Video Encoder

To prepare your videos, you don't have to open Flash. In fact, it is quite inefficient to encode videos as FLVs with Flash. It is recommended that you use the Flash Video Encoder that comes with your Flash application. You should be able to find it in the same folder of your Adobe suite, next to the Flash Folder.

Open the Flash Video Encoder and look for the videos you want to encode. You may choose more than one. Once you choose them, make sure to adjust the parameters so that they fit properly within the Flash Skin.

It is recommended that you prepare all videos with the same dimensions. If you did not do this in the video application in which you edited the videos, you can adjust them with the encoder. To do this, open import the video to the Encoder then select "Settings." You will get a window with various options, select "Crop and Resize." To keep things clean, you may want to resize one video at a time, although the encoder should be able to deal with multiple files.

Create a Hardcoded list of Your FLVs

Once you have encoded your videos, place them in the folder from which they will be accessed. The link to the folder may be relative or absolute.

Open Flash and choose a customized or pre-existing skin from the Video Folder in the Components Library and place it on the stage. Also from the User Interface folder in the Components Library, as well, choose a list movie clip and place on the stage next to or below your video skin.

Name the video skin "myPlayScreen" and name the list "myPlayList".

Create a second layer at the top of the timeline and rename it actions. On the first keyframe add the code that you see below. Make sure to change the name of the videos on the first line ("var myArray:Array...") to the name of the videos that you want to play. code is below. Paste it and study it.

Code which should go on the top keyframe of your file:

var myArray:Array = ["HyperWall_1.flv", "HyperWall_2.flv", "HyperWall_3.flv", "HyperWall_4.flv"];

//Populate the list box
for(var i:Number= 0; i<myArray.length; i++) {
myPlayList.addItem({label:myArray[i]});

}

//Add a listener to detect when new video is selected and play it

function listListener(event:Event) {
myPlayScreen.play(event.target.selectedItem.label);
}

myPlayList.addEventListener(Event.CHANGE, listListener);

//Automatically play the first video
myPlayScreen.play(myArray[0]);
//Select the first video
myPlayList.selectedIndex = 0;

Create a playlist with an external XML File

Take the previous file and create a copy. On the top frame get rid of the previously pasted code and paste the one below. (Read more below, there is an xml file you need to create after you insert the code.)

Code which should go on the top keyframe of your file:

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(new URLRequest("playlistXML.xml"));

function xmlLoaded(event:Event):void {
var playlistXML:XML = new XML(event.target.data);
var item:XML;
for each(item in playlistXML.videoname) {
trace("item: "+item.attribute("flvurl").toXMLString());
myPlayList.addItem({label:item.attribute("desc").toXMLString(), data:item.attribute("flvurl").toXMLString()});

}

//Select the first video
myPlayList.selectedIndex = 0;
//And automatically play it
myPlayScreen.play(myPlayList.selectedItem.data);

}

//Add a listener to detect when new video is selected and play it
function listListener(event:Event) {
myPlayScreen.play(event.target.selectedItem.data);

}

myPlayList.addEventListener(Event.CHANGE, listListener);

-----------

Create an XML file in Dreamweaver or any editor of your choice and write the parameters below. Please note that the names of the flv files are my own, you should replace these with the names of your own files.

Code that should go on your XML file:

<?xml version = "1.0" encoding = "i-8859-1"?>

<playlist>
<videoname
flvurl="HyperWall_1.flv"
desc="Hyper Wall First Video" />

<videoname
flvurl="HyperWall_2.flv"
desc="Hyper Wall Second Video" />
<videoname
flvurl="HyperWall_3.flv"
desc="Hyper Wall Third Video" />

<videoname
flvurl="HyperWall_4.flv"
desc="Hyper Wall Fourth Video" />

</playlist>