Custom Preloader for XML Images

lassen · June 1, 2009, 4:38pm

Hi everyone,

I’ve been working for a little while now trying to make a portfolio site for myself and I’m almost done but I’m having one little issue with preloaders. (There are more things not finished, but they’re just things I haven’t gotten around to doing, I think).

The thing I’m trying to do is create a custom preloader for an image gallery that loads each image.

You can see an example on in the 3D Architecture section on the site here:
www.ianpaschal.net

(Yes, I know the main preloader is working fine, I’m talking about the one in the 3D Architecture section.)

Here is the code I’m using for that frame:

//Specific Actions: Frame 5 (3D Architecture) code:
//All code is 3D Architecture specfic.

currentSection=1;
//This tells what section is currently open.

heading_txt.defaultTextFormat = formatHeading;
//This tells heading_txt to use the text format defined in Global Actions.

var archXMLLoader:URLLoader = new URLLoader();
archXMLLoader.load(new URLRequest("content/archgallery.xml"));
archXMLLoader.addEventListener(Event.COMPLETE, archProcessXML);
//This loads the XML file and runs the processXML function when complete.

var archImages:XMLList;
//This variable will hold a reference to the actual XML nodes that have our image details.
var archTotal:Number;
//This variable will specify the number of songs we have in the gallery.
var archCurrentImage:Number = 0;
//This means that first image as an XML array of elements is zero relative.

//This function processes the loaded XML data:
function archProcessXML (e:Event):void{
    var archXML:XML = new XML(e.target.data);
    archImages = archXML.IMAGE
    archTotal = archImages.length();
    //This says that the 3D Architecture images have the tag IMAGE, and that the total number of images is lenghth of the XML file.
    archShowImage(0);
    //This shows the first image.
}

//This function displays the images and image heading text:
function archShowImage(imageArch:Number):void{
    var archTitle = archImages[imageArch].@TITLE;
    var archDesc = archImages[imageArch].@DESC;
    var archURLReq:URLRequest = new URLRequest(archImages[imageArch].@URL);
    //This stores all the image information in variables.
    archImageLoader.x = 230;
    archImageLoader.y = 50;
    //This specifies where the image should load.
    archImageLoader.load(archURLReq);
    stage.addChild(archImageLoader)
    //This loads the 3D Architecture image from the URL provided by the variable above.
    heading_txt.text = archTitle+" | "+archDesc;
    //This displays the image information.
}

//Next and Previous button code:
next_btn.addEventListener(MouseEvent.CLICK, archNext);
prev_btn.addEventListener(MouseEvent.CLICK, archPrev);

function archLoading(i:Number):void{
    var archLoadTotal:Number = archImageLoader.loaderInfo.bytesTotal;
    var archLoaded:Number = archImageLoader.loaderInfo.bytesLoaded
    //These are temporary variables and will be removed when the function is done.
    archLoader_mc.scaleX = archLoaded/archLoadTotal;
    //When loaded, show the image.
    if (archLoadTotal == archLoaded){
        archShowImage(archCurrentImage);
    }
}

function archNext(e:MouseEvent):void{
    archCurrentImage++;
    if (archCurrentImage>=archTotal) {
        archCurrentImage=0;
    }
    archLoading(archCurrentImage);
}

function archPrev(e:MouseEvent):void{
    archCurrentImage--;
    if (archCurrentImage<0) {
        archCurrentImage = archTotal-1;
    }
    archLoading(archCurrentImage);
}

Unfortunately, if you see on the site, the preloader always shows 100% and doesn’t actually load anything.

Now I’ve been able to trudge through the coding process thus far by reading lots and lots of tutorials, but I’m really stuck on this part.

Anyone know how to fix this functionality?

Thanks,

Lassen