Loading Progress Bar in a dynamic Image Loader

programming flash
1

Hey All,

I’m making a Flash catalogue and I’ve achieved 99% of what I wanted to. Here’s how it works. The Flash Movie has 3 sections. The first section is a list component that loads all names of ‘Brands’. The second section is another list component that loads all names of ‘Products’ of the chosen brand. The 3rd column loads an ‘image’ associated with the chosen ‘Product’ into a ‘Loader’ component. All data is fetched from an XML file. The XML is dynamically generated as the website runs off a MySQL DB. Everything works fine.

Now, my only question if can I have a loading progressbar or a loading GIF while the image loads into the loader? All help will be greatly appreciated!

Here’s my code.

// Import the MX.UTILS so it can be used to set the scope of the listBox listener and the xml onload feature
import mx.utils.Delegate;

// Define default URL to load if no URL is defined in XML attribute
_root.urlLink = "http://www.theinventory.in";


// declare variables
var people:Array;
var product:Array;
var update:String;
var dirpath:String;

// set up the XML instance
var peoplexml:XML = new XML();

// initialize items on stage
_global.style.setStyle("fontFamily","Verdana");
_global.style.setStyle("fontSize",11);


// define what should happen when the XML loads
// (read data into update, dirpath, and brand variables)
function onXmlLoaded(success:Boolean)
{
    if (success)
    {

        // make a handle to the root node in the xml
        var mainnode:XMLNode = peoplexml.firstChild;
        update = mainnode.attributes.lastupdate;
        dirpath = mainnode.attributes.dir;
        // set up an array of all brand nodes

        var peoplenodes:Array = peoplexml.firstChild.childNodes;
        for (var i:Number = 0; i < peoplenodes.length; i++)
        {


            // for each brand node:
            var personnode:XMLNode = peoplenodes*;
            people.push({i:i + 1, pname:personnode.attributes.name});
        }

        // data is all read and put in the right place -- now setup the screen
        // using this data
        setup();
    }
    else
    {
        trace('error reading XML');
    }
}

function setup()
{
    // set up chooseperson dropdown
    choosebrand.labelField = "pname";
    choosebrand.dataProvider = people;
    choosebrand.addEventListener("change",Delegate.create(this, loadProducts));
}

function loadProducts(evt:Array)
{
    var thisitem:Array = evt.target.selectedItem;
    var productList:Array;
    chooseproduct.labelField = "prname";

    product = [prname];
    var peoplenodes:Array = peoplexml.firstChild.childNodes;

    for (var i:Number = 0; i < peoplenodes.length; i++)
    {


        // for each brand node:
        var personnode:XMLNode = peoplenodes*;
        if (personnode.attributes.name == thisitem.pname)
        {
            var productnodes:Array = personnode.childNodes;

            for (var j:Number = 0; j < productnodes.length; j++)
            {

                // for each product node:
                var productnode:XMLNode = productnodes[j];


                product.push({i:j + 1, prname:productnode.attributes.title, img:productnode.attributes.photo, url:productnode.attributes.url, txt:productnode.attributes.txt, det:productnode.attributes.det, price:productnode.attributes.price, clck:productnode.attributes.clck});
            }

            loader.img.contentPath = "";
            loader.clck.text = "";
            productTitle.ptitle.text = "";
            productTitle.pdet.text = "";
            productTitle.prc.text = "";
        }
    }

    //initialize the product array

    chooseproduct.labelField = "prname";
    chooseproduct.dataProvider = product;
    chooseproduct.addEventListener("change",Delegate.create(this, loadImage));
}

function loadImage(evt:Array)
{
    var thisitem:Array = evt.target.selectedItem;
    productTitle.ptitle.text = thisitem.txt;
    productTitle.pdet.text = thisitem.det;
    productTitle.prc.text = 'Rs.'+ thisitem.price;
    loader.img.contentPath = thisitem.img;
    loader.clck.text = thisitem.clck;
    _root.urlLink = thisitem.url;

}

function init()
{
    // initialize the brand array
    people = [pname];


    // set up the xml instance to ignore whitespace between tags
    peoplexml.ignoreWhite = true;

    // set the scope of the onLoad function to the main timeline, not peoplexml
    peoplexml.onLoad = Delegate.create(this, onXmlLoaded);

    // start the xml loading
    peoplexml.load("bannerxml.php");
}
init();

Thank you,
Sudarshan