Question

I have an xml image bank, pretty standard, and I have a loader, along with movie clips that I want the images loaded into, the problem that I am running into is I want the images to load into separate movie clips, so I’m using a case statement to specify where they go. However, I can only get them to load into a single movie clip, I assume they are loading ontop of each other and I don’t know how to get them to separate out. I’ll post my code. It doesn’t make any sense to me but if you have any suggestions that would be real great.

I can make separate loaders and then just do 1 image per loader, but that just doesn’t sound right to me.

   var counterNumber:Number = 0;

   function callThumbs():void{
     for (var i:Number = 0; i <3; i++){
        thumbLoaded();
        counterNumber++;
     }
   }




    function thumbLoaded(){

    var photoLoader = new Loader();

    switch (counterNumber){

            case 1:
                photoLoader.load(new URLRequest(MovieClip(this.parent).xml.photos.imageOne.image.@url[0]));
                whole.boxOne.pictureLoader.addChild(photoLoader);
                trace("1Done");
                break;

            case 2:
                photoLoader.load(new URLRequest(MovieClip(this.parent).xml.photos.imageTwo.image.@url[0]));
                whole.boxTwo.pictureLoader.addChild(photoLoader);
                trace("2Done");
                break;    
       }
   }

Answer 1

Here is how I would go about it. The only thing I did not do is change the position of the MovieClips after they are loaded with the images. You could easily add in this feature in the imageLoaded() function.

Put the following code on the Actions panel of the first frame of an AS3 FLA file. This assumes that a directory named ‘images’ exists in the same directory as the FLA/SWF.

//Create array of image filenames
var filenames:Array = new Array();
filenames[0] = 'some_image.jpg';
filenames[1] = 'some_other_image.jpg';
filenames[2] = 'and_another.jpg';

//Declare variables
const IMAGES_DIRECTORY:String = 'images/';
var loaders:Array = new Array();
var movieClips:Array = new Array();

//This function instantiates the exact number of Loader objects that are required
//and initiates the loading process for each image file. As each image is loaded,
//imageLoaded() is called
function createLoaders(filenamesAsArray:Array, directory:String):void
{
    for(var i:int = 0; i < filenamesAsArray.length; i++)
    {
        loaders[i] = new Loader();
        loaders[i].load(new URLRequest(directory + filenamesAsArray[i]));
        loaders[i].contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
    }
}

createLoaders(filenames, IMAGES_DIRECTORY);

//This function is called as each Loader object is completely loaded
//It creates each individual movieclip, adds the image to it, and then adds the MC to the stage
function imageLoaded(e:Event):void
{
    if(e.target.content.bitmapData)
    {
        var mc:MovieClip = new MovieClip();
        var bmp:Bitmap = new Bitmap(e.target.content.bitmapData);
        mc.addChild(bmp);
        movieClips.push(mc);
        addChild(movieClips[movieClips.length - 1]);
    }
}

About importing XML data

Look into the XML Object.

Loading XML Example

The XML Document for the Example:

<images>
    <image>
        <title>Portrait of a Woman</title>
        <filename>portrait.jpg</filename>
    </image>
    <image>
        <title>Rural Landscape</title>
        <filename>landscape.jpg</filename>
    </image>
    <image>
        <title>My Cat</title>
        <filename>cat.jpg</filename>
    </image>
</images>

The AS3 for Loading the above XML Document

//Instantiate some objects (URLoader and XML)
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

//Listen for the instance of URLLoader (xmlLoader) to trigger Event.COMPLETE,
//which will call the function named 'loadXML()'
xmlLoader.addEventListener(Event.COMPLETE, loadXML);

//Initiate the process of loading the XML document
//In this case, 'test.xml' is located in the same directory as the SWF/FLA
//that this code is located in
xmlLoader.load(new URLRequest('test.xml'));

//This is the function that will be called by the event listener above (when
//the xmlLoader signals Event.COMPLETE
function loadXML(e:Event):void
{
    //Retrieve the contents of the XML document
    xmlData = new XML(e.target.data);

    //Trace the entire document:
    trace(xmlData);

    //Trace the filename for the first <image> node
    trace(xmlData.image[0].filename);
}

Of course, your XML document may be very different, in which case, you need to practice retrieving the exact information that you want. This is the trickiest part, in my opinion. Also, you would want to instantiate an array outside of the scope of the loadXML function above. Then, recursively fill the array with the filenames from the XML document.