tileList as a video playlist

programming flash
1

First of all, hi everyone I’m new here.
I’m creating a small application on my uni course.
For some reason I’ve decided I want a customized video player.
Somehow I managed to get one working. My tutor “suggested” to add a thumbnail playlist to it. But he didn’t point out where to start. I’ve looked at various articles/tutorials etc. Nothing works.

In the end I managed to get tileList component to display the images. The problem is, I need to load the content into that component from a xml file. In addition, I’d like to be able to click on each image so that the videoplayer next to it plays the appropriate video.

This is 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*.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");
}

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>

Can anyone help me with that tileList component? I’m quite desperate to get it working.
Even if it throws some errors I don’t mind as long as it’ll somehow work.
I’ve attached an image of the layout to better clarify the situation.

Thanks to anyone who’s willing to help.