how to replace image thumbnails with numbers in xml driven a gallery using actionscript(flash)

Question

i've designed an xml driven photogallery using actionscript 3.0.

First when the swf file is run, all the thumbnails load in, Then I have thumbnails below, when i click them the large image loads in.

I wanted the thumbnails to be replaced with the numbers which form dynamically from the xml file. i.e I simply want the numbers, on clicking them loads respective images

Please give a solution to this, or please suggest a good tutorial. Thanks very much :)

here's the code i've worked on and im stuck replacing

var titleArray:Array = new Array();
var descriptionArray:Array = new Array();
var largeImageArray:Array = new Array();
var thumbnailArray:Array = new Array();

//XML
var imageNum:Number=0;
var totalImages:Number;


//Load in XML
var XMLURLLoader:URLLoader = new URLLoader();
XMLURLLoader.load(new URLRequest("portfolio.xml"));
XMLURLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(event:Event):void {
var theXMLData:XML=new XML(XMLURLLoader.data);
totalImages=theXMLData.title.length();
for (var i:Number=0; i< theXMLData.title.length(); i++) {
    titleArray.push(theXMLData.title[i]);
    descriptionArray.push(theXMLData.description[i]);
    largeImageArray.push(theXMLData.largeImage[i]);
    thumbnailArray.push(theXMLData.thumbImage[i]);
}
loadThumbnail();
}

myScrollPane.source=allThumbnails;

//Load the thumbnails
function loadThumbnail():void {
trace(imageNum);

var thumbLoader1:Loader = new Loader();
thumbLoader1.load(new URLRequest(thumbnailArray[imageNum]));
thumbLoader1.x=100*imageNum;           //Distance between images
//stores the appropriate info for the thumbnail
var thisLargeImage:String=largeImageArray[imageNum];
var thisTitle:String = titleArray[imageNum];
var thisDescription:String = descriptionArray[imageNum];
thumbLoader1.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded1);
function thumbLoaded1(event:Event):void {
    //add the thumbnail to the allThumbnails instance
    allThumbnails.addChild(thumbLoader1);
    myScrollPane.update();
    allThumbnails.buttonMode=true;
    thumbLoader1.addEventListener(MouseEvent.CLICK,loadMainImage1);
    function loadMainImage1(event:MouseEvent):void {
        largeUILoader.source=thisLargeImage;
        selectedTitle.text=thisTitle;
        selectedDesc.htmlText=thisDescription;
    }
}
imageNum++;
if (imageNum<totalImages) {
    loadThumbnail();
}
}

Answer 1

Instead of adding thumbnails, simply add TextFields and assign respective number to their text property.

Use the Textfield name property to store the larger Image url.