AFComponents.com

Recently, we've had several requests from users who want to use the IMG Loader component to load multiple images with buttons from an XML file or from an ActionScript Array. I'm going to provide some examples here, and explain them. Here are the files we are going to be working with:

IMG Loader Examples (Zip, 620KB)

In this zip, you will find several images, a Flash file for the array example, a Flash file for the XML example, as well as an XML file and our XML parsing class file.

Part I - The File Setup

These example takes an array or XML file of images and add buttons to the stage for each image in the array/XML file. Clicking one of these buttons will load the corresponding image into the IMG Loader component. This is the file that we use on the IMG Loader component home pages. See it here.

Let's get started.  Open the file "img_loader_fade_array.fla." You will notice that we have added the IMG Loader (Fade) component to the stage and given it an instance name of "myLoader." You will also notice that we have added some text "load preview image." Our buttons will load after this text.

Open the library. There, you will find our button template "button_btn" we set this button up to contain a dynamic text field and a linkage identifier so that we can use attachMovie to build it "on the fly." For more about this go to Adobe's website.

Finally, look at the layers panel.  Here you will notice layers for the component, the text, and then an actions layer.  Select the actions layer keyframe and expand your ActionScript pane. Here you will find the code that makes this whole thing work.

Note: for the XML example we will also be using the listXML.as file.

Now lets look at some code.  We'll start with the array example.

Part II - The Array Example

The easiest way to do this will be to just go through the code line-by-line, so here we go ...

Stage.scaleMode = "noScale";
Stage.align = "TL";

These lines simple set the scale mode and alignment of our Flash movie.

var imgArray = new Array("img_1.jpg","img_2.jpg","img_3.jpg","img_4.jpg","img_5.jpg","img_6.jpg");

Define an array of the images that you want to load.

var current_num:Number = 0;
var previous_num:Number;

Variables to hold the current and previous button id's.  We'll use these to help us set up styles for roll over, roll out, active, etc.

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

Loop through our array of images.
  
    var button:MovieClip = this.attachMovie("button_btn", "button_"+i+"_btn", this.getNextHighestDepth(),{_x:100+(i*12),_y:321});

Add a button to the stage using attachMovie for each image.  You can change the x and y properties here to move the buttons to where you need them on the stage.
   
    button.txt.text = (i+1);
    var color = new Color(button);
    color.setRGB(0x0066CC);

Set the button text (txt is the instance name of the dynamic text field in our button). Set the color of the button.
       
    button.onRollOver = function (){
        var color = new Color(this);
        color.setRGB(0xFF0000);
    }
    button.onRollOut = function (){
        var color = new Color(this);
        color.setRGB(0x0066CC);
    }

These just setup the roll over and roll out styles for our button, so they highlight on rollover.
   
    button.path = imgArray[i];
    button.id = i;

Here we set the path and id for the current button.  (Using button.path and button.id will just create a new path and id properties of our button that we can access locally with "this." Essentially you are just creating the path and id vars on the button timeline).
   
    button.onRelease = function (){
        markCurrent(this.id)
        myLoader.contentPath = this.path;
        myLoader.load();       
    }

Now, on button release, we mark and disable the button that was clicked, we set the contentPath property of our IMG Loader, and then tell it to load.  This loads the image that corresponds to the button that was clicked.
   
    if(i==0){
        button.onRelease();
    }
}

This just loads the first image (otherwise the user would see nothing until a button was clicked).

function markCurrent(current:Number):Void{
   
    previous_num = current_num;
    current_num = current;
   
    //Disable Current
    delete this["button_"+current_num+"_btn"].onRollOver;
    delete this["button_"+current_num+"_btn"].onRollOut;
    delete this["button_"+current_num+"_btn"].onRelease;
   
    var color = new Color(this["button_"+current_num+"_btn"]);
    color.setRGB(0xFF0000);
   
   
    //Enable Previous
   
    var color = new Color(this["button_"+previous_num+"_btn"]);
    color.setRGB(0x0066CC);
   
    this["button_"+previous_num+"_btn"].onRollOver = function (){
        var color = new Color(this);
        color.setRGB(0xFF0000);
    }
    this["button_"+previous_num+"_btn"].onRollOut = function (){
        var color = new Color(this);
        color.setRGB(0x0066CC);
    }
   
   
    this["button_"+previous_num+"_btn"].onRelease = function (){
        markCurrent(this.id)
        myLoader.contentPath = this.path;
        myLoader.load();       
    }
}

Finally, our function to mark the current button.  This function disables the current button, then enables the previous button.  For example I click button 2.  Button 2 becomes disabled and remains in the highlighted state and the last button I clicked (say it was button 1) gets reset.

That's all there is to it.  Next I will extend this example to load the images from XML.

Part III - The XML Example

Open listXML.as.  This is the class that we use here at Advanced Flash Components to parse XML files.  This class can be modified to parse any XML file.  To read more about parsing XML with ActionScript, go the the Adobe Website. You'll need to be somewhat familiar with how ActionScript classes work, and how ActionScript parses XML for this part.

Open "img_loader_fade_xml.fla." Let's look at what changed in our ActionScript.

function loadFeed(){
    var xmlLoader = new listXML();
    xmlLoader.loadXML("content.xml");
    xmlLoader.addEventListener("evntXmlLoaded", this);
}

We have added this function which instantiates the listXML class, loads the specified XML document, and then dispatches an event that it is done.

function evntXmlLoaded(evnt:Object){
   
    for(var i:Number=0; i<evnt.target.Path.length; i++){
       
        var button:MovieClip = this.attachMovie("button_btn", "button_"+i+"_btn", this.getNextHighestDepth(),{_x:100+(i*12),_y:321});
       
        button.txt.text = (i+1);
        var color = new Color(button);
        color.setRGB(0x0066CC);
           
        button.onRollOver = function (){
            var color = new Color(this);
            color.setRGB(0xFF0000);
        }
        button.onRollOut = function (){
            var color = new Color(this);
            color.setRGB(0x0066CC);
        }
       
        button.path = String(evnt.target.Path[i]);
        button.id = i;
       
        button.onRelease = function (){
            markCurrent(this.id);
            myLoader.contentPath = this.path;
            myLoader.load();       
        }
       
        if(i==0){
            button.onRelease();
        }
    }
}

This function handles our evntXmlLoaded event from above.  It does the same thing as the array example with a couple minor changes.  The first change is that now we loop through evnt.target.Path which is an array of our XML "path" nodes from the listXML class.  The other change is that now we set button.path = String(evnt.target.Path[i]); which is the value of the current XML "path" node from the listXML class.

The markCurrent(); function is unchanged.

loadFeed();

Finally, we call the loadFeed(); function to start it all up.

I hope I've helped to answer some questions about using our IMG Loader component.  If you have any comments, suggestions, or examples, etc you can post on the forum or send me an email matt at afcomponents dot com (wigz). Enjoy!