XML Driven Flash Photo Gallery Thumbnails

Question

Hi,
I need to make a XML Driven Photo slide in Flash CS5.
It needs to have a Box that contains 5 Thumbnails(by XML) act as buttons.
The Box sits on top of the Main photo area and shrinks (or close out) when user click its close button. And it opens out by clicking on a open button.
I'm sure it can be done by using timeline, Tweening or you name it..But what about the Thumbnails that run from the XML file?
Can they disappear with the Box and retrieve when it opens? is it possible?
If yes, what would be the best way to do that?
Any comment would be greatly appreciated!
Here is the ActionScript.
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
import fl.controls.Button;
import flash.display.Shape;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.text.TextField;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.Shader;
var hasloaded:Boolean = false;
var firstLoaded:Boolean = false;
var barWidth:int;
var barHeight:int;
var images;
var imageCount:int;
var thumbnailArray:Array = new Array();
var bigImageArray:Array = new Array();
var descriptionArray:Array = new Array();
var xmlLoader:URLLoader = new URLLoader();
var imageXML:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("slideshow.xml"));
function LoadXML(e:Event):void {
    imageXML = new XML(e.target.data);
    ParseImages(imageXML);
Populates the arrays with the image values
and the text for each picture.
function ParseImages(imageInput:XML):void {
    var iconList:XMLList = imageInput.image.icon;
    var mainImageList:XMLList = imageInput.image.mainimage;
    var descriptionList:XMLList = imageInput.image.description;
    for (var i:int = 0; i < iconList.length(); i++) {
        var imageElement:XML = iconList[i];
        //trace(imageElement);
        thumbnailArray[i] = imageElement;
    for (var j:int = 0; j < mainImageList.length(); j++) {
        var mainimageElement:XML = mainImageList[j];
        //trace(mainimageElement);
        bigImageArray[j] = mainimageElement;
    for (var l:int = 0; l < descriptionList.length(); l++) {
        var descriptionElement:XML = descriptionList[l];
        //trace(descriptionElement);
        descriptionArray[l] = descriptionElement;
    loadImages();
function loadImages():void{
    trace("inside of loadimages function.");
    trace(thumbnailArray.length);
    for(var i:int=0; i < thumbnailArray.length; i++){
        trace(thumbnailArray[i]);
        populateContainers(thumbnailArray[i], i);
        //populateContainers2();
        trace("Loaded " + thumbnailArray[i]);
var loader:Loader;
var xStart = -210;
var ypos = -34;
var currentPos = xStart;
var incrementValue = 66;
This takes in the name of the image file and
displays it within the newly created movie clip
function populateContainers(file:String, pos:int):void{   
    //create a movie clip to hold the image
    var mc:MovieClip = new MovieClip();
    mc.graphics.beginFill(0xFFFFFF);
    mc.graphics.drawRect(0, 0, 50, 51);
    mc.graphics.endFill();
    mc.buttonMode = true;
    mc.x = currentPos;
    mc.y = ypos;
    mc.name = "thumb_" + pos;
    mc.addEventListener(MouseEvent.CLICK, clickHandler); 
    loader = new Loader();
    //loader.mask = imagemask;
    var url:URLRequest = new URLRequest(file);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadInitialImage);
    loader.load(url);
    //add the image to the movie clip
    mc.addChild(loader);
    this.imageBar.addChild(mc);
    //increment the currentPos
    currentPos += incrementValue;
function clickHandler(e:MouseEvent):void{
    var str:String = e.currentTarget.name;
    var index:int = int(str.substr(6,1));
    if(hasloaded) {
        this.mainWindow.removeChild(loader);
    loader = new Loader();
    loader.load(new URLRequest(bigImageArray[index]));
    this.mainWindow.addChild(loader);
    TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeOut});
    //setChildIndex(loader, 0);
    hasloaded = true;
    loadText(index);
function loadText(index:int):void {
    Object(this).imageBar.txtdescription.text = descriptionArray[index];
function loadInitialImage(event:Event):void {
    if(!firstLoaded) {
        loader = new Loader();
        loader.load(new URLRequest(bigImageArray[0]));
        this.mainWindow.addChild(loader);
        TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeIn});
        //setChildIndex(loader, 0);
        hasloaded = true;
        loadText(0);
    firstLoaded = true;
/*  This section defines the buttons that control the image bar */
Object(this).imageBar.btnBarOpen.addEventListener(MouseEvent.MOUSE_UP, openImageBar);
function openImageBar(event:MouseEvent):void {
    this.gotoAndPlay(1);

Answer 1

thank you!