xml driven video player

[kamiiru]

First of all hi everyone, I'm new here.
I'm creating a small application that will contain a simple video player.
I have managed to load all the content into the player and it works as it should.

My problem is that I would like to have a grid of thumbnails next to the videoplayer so that the user will be able to scroll through them and click on individual thumbnails to load the appropriate video.

I am using a tileList component at the moment, so far I have managed to load the images into it "within" the flash using as3. But I'd like to be able to do it dynamically from a xml file.

I have the xml file somewhat written: (not sure if correctly)

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<thumbLibrary xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <thumbs>
        <label>Iron Man 2</label>
        <imageFile>videothumb1.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Autosport</label>
        <imageFile>videothumb2.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>GAMEFest</label>
        <imageFile>videothumb3.jpg</imageFile>
    </thumbs>
</thumbLibrary>

That's my as3 code at the moment, for loading the content into the tileList component.

myTileList.addItem({label:"Iron Man", source:"thumbs/videothumb1.jpg"});
myTileList.addItem({label:"CATERHAM", source:"thumbs/videothumb2.jpg"});
myTileList.addItem({label:"GAMEFest", source:"thumbs/videothumb3.jpg"}); 

Is it possible to "convert" the above as3 code so that the application loads it without me accessing script each time I want to add new stuff. I'm not sure but I think It should be based around the loop function, is that right?

I've seen a couple of solutions for uses of tileList+XML but they use Flex, which I'm not familiar with at all.
I've attached an image of the layout to better clarify the situation.

If anyone can help me with this I'll be very thankful.




EDIT:



I understand if my explanation is a bit messy, I'm not exactly experienced in Flash area.
I've got rather short deadline, I'd like to have that thumbnail grid working by evening of Monday 7th. (is it doable by that time?)
If you guys need more information ask question, I'll try my best to explain the situation.
If there is another way to create this kind of interactive thumbnail grid please do share.

Thanks again.

[kamiiru]

OK, I'm slowly getting rather desperate with this tileList.

Here is all my as3 code:

//----------------------video-player--------------//
var numVids = 0;
var currentVid = 0;

var vidXML = new XML();
var vidXMLURLreq = new URLRequest("videos.xml");
var vidXMLLoader = new URLLoader(vidXMLURLreq);
vidXMLLoader.addEventListener("complete", xmlLoaded);
vidXMLLoader.addEventListener("ioError", xmlLoadFail);

nextBtn.addEventListener("click", loadNextVid);
prevBtn.addEventListener("click", loadPrevVid);
stopBtn.addEventListener("click", stopVid);
playBtn.addEventListener("click", playVid);
pauseBtn.addEventListener("click", pauseVid);

vidPlayer.autoRewind = true;
vidPlayer.addEventListener("complete", loadNextVid);

vidList.addEventListener("change", loadSelectedVid);

function xmlLoaded(eventObj)
{
    try {
        vidXML = XML(vidXMLLoader.data);
        numVids = vidXML.children().length();
        loadList();
        loadVid();
    }
    catch(error){
           trace(error.message);
    }
}

function xmlLoadFail(eventObj){
    trace("file failed to load");
}

function loadList(){
    for (var i = 0; i < numVids; i++){
        var vidTitle = vidXML.Video[i].Title.toString();
        var listItem = new Object();
        listItem.label = vidTitle;
        listItem.data = vidTitle;
        vidList.addItem(listItem);
    }
}

function loadVid(){
    titleTxt.text = vidXML.Video[currentVid].Title.toString();
    var videoFile = vidXML.Video[currentVid].VideoFile.toString();
    vidPlayer.source = "videos/" + videoFile;
    
    var imageLoader = new Loader();
     var imageFile = vidXML.Video[currentVid].Image.toString();;
     var ImageURLreq = new URLRequest("thumbs/" + imageFile);
     imageLoader.load(ImageURLreq);
    imageHolder.addChild(imageLoader);
    
    vidList.selectedIndex = currentVid;
}

function loadSelectedVid(eventObj){
    currentVid = vidList.selectedIndex;
    loadVid();
}

function loadNextVid(eventObj){
    currentVid ++;
    if(currentVid >= numVids){
        currentVid = 0;
    }
    loadVid();
}

function loadPrevVid(eventObj){
    currentVid --;
    if(currentVid < 0){
        currentVid = numVids - 1;
    }
    loadVid();
}

function stopVid(eventObj){
    vidPlayer.stop();
}

function playVid(eventObj){
    vidPlayer.play();
}

function pauseVid(eventObj){
    vidPlayer.pause();
}
//----------------------------------------------//


//----------------tileList-----------------------//
import fl.controls.TileList;
import fl.controls.ScrollBarDirection
import flash.events.Event;

// create TileList instance
var myTileList:TileList = new TileList();
// create TextFormat object for labels
var tf:TextFormat = new TextFormat();

//set textFormat font, color, and size
tf.font = "Arial";
tf.bold = true;
tf.color = 0xffffff;
tf.size = 15;

// add content to the TileList
//This section of the code needs to be changed so that the data is loaded from an external xml file.
myTileList.addItem({label:"Iron Man", source:"thumbs/videothumb1.jpg"});
myTileList.addItem({label:"CATERHAM", source:"thumbs/videothumb2.jpg"});
myTileList.addItem({label:"GAMEFest", source:"thumbs/videothumb3.jpg"});
myTileList.addItem({label:"The Punisher", source:"thumbs/videothumb4.jpg"});
myTileList.addItem({label:"Transformers 1", source:"thumbs/videothumb5.jpg"});
myTileList.addItem({label:"Pulp Fiction", source:"thumbs/videothumb6.jpg"});
myTileList.addItem({label:"Transformers 3", source:"thumbs/videothumb7.jpg"});
myTileList.addItem({label:"House M.D.", source:"thumbs/videothumb8.jpg"});
myTileList.addItem({label:"Cafe Tomorrow", source:"thumbs/videothumb9.jpg"});
myTileList.addItem({label:"2012", source:"thumbs/videothumb10.jpg"});
myTileList.addItem({label:"Appleseed", source:"thumbs/videothumb11.jpg"});
myTileList.addItem({label:"Fearless", source:"thumbs/videothumb12.jpg"});
myTileList.addItem({label:"Stargate SG1", source:"thumbs/videothumb13.jpg"});
myTileList.direction = ScrollBarDirection.VERTICAL;  // set scroll direction

//column and row values
myTileList.columnWidth = 150;
myTileList.rowHeight = 115;
myTileList.columnCount = 3;
myTileList.rowCount = 5;
myTileList.width = 470;
myTileList.height = 345;


//add onto the stage and position
addChild(myTileList);
myTileList.move(475,307);

// set style for labels
myTileList.setRendererStyle("textFormat", tf);
myTileList.setRendererStyle("imagePadding", 2);

// set the background skin
myTileList.setStyle("skin", darkBackground);

//set the cell renderer
myTileList.setStyle("cellRenderer", MyRenderer);

myTileList.addEventListener(MouseEvent.MOUSE_DOWN, tileList_MouseDown);
function tileList_MouseDown(evt:MouseEvent):void{
trace(myTileList.selectedItem.label + " was clicked");
} 

And this is my xml file for the thumbnails:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<thumbLibrary xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <thumbs>
        <label>Iron Man 2</label>
        <imageFile>videothumb1.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Autosport</label>
        <imageFile>videothumb2.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>GAMEFest</label>
        <imageFile>videothumb3.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>The Punisher</label>
        <imageFile>videothumb4.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Transformers 1</label>
        <imageFile>videothumb5.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Pulp Fiction</label>
        <imageFile>videothumb6.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Transformers 3</label>
        <imageFile>videothumb7.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>House MD</label>
        <imageFile>videothumb8.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Cafe Tomorrow</label>
        <imageFile>videothumb9.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>2012</label>
        <imageFile>videothumb10.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Appleseed</label>
        <imageFile>videothumb11.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Fearless</label>
        <imageFile>videothumb12.jpg</imageFile>
    </thumbs>
    <thumbs>
        <label>Stargate SG1</label>
        <imageFile>videothumb13.jpg</imageFile>
    </thumbs>
</thumbLibrary>

As I've mentioned, all I need is to have the tileList populated from xml file (with or without labels, don't care) and to be able to click on each image in the tileList so that it loads the appropriate video.

Is it actually doable this way? I don't want to wait till the end and find out that it has to be done in a complete different way.

Thanks to anyone that will try to help.

[rynoe]

var vidXML:XML = new XML(); 
var vidXMLURLreq = new URLRequest("videos.xml"); 
var vidXMLLoader = new URLLoader(vidXMLURLreq); 
vidXMLLoader.addEventListener("complete", xmlLoaded); 
vidXML.ignoreWhitespace = true;

function xmlLoaded(eventObj){
	vidXML= new XML(vidXMLLoader.data)

   for(var a:int=0;a<vidXML.children().length();a++){
	trace("child["+a+"]: label= "+vidXML.children()[a].label+" and image= "+vidXML.children()[a].imageFile);
   }
} 
vidXMLLoader.load(vidXMLURLreq)

[kamiiru]

Thank you rynoe, I really appreciate your help.
I can sort of get the idea of the code, but this line is a bit confusing:

trace("child["+a+"]: label= "+vidXML.children()[a].label+" and image= "+vidXML.children()[a].imageFile); 

[rynoe]

Thats just a trace statement to see some output.

Once you load the xml actionscript is available to use to work with the data.
For instance

vidXML.children()[0].label

would be the data in the label node of the first child.

vidXML.children()[2].imageFile

would be the data in the imageFile node of the 3rd child