AS3如何循环加载外部图像？

Question

I'm making a highscore table in flash using AS3, I have successfully got working code that displays the names and the scores but also part of my high score table it needs to display the users country flag. The images for the flags are stored on a remote server.

Now I know how to load in a single image and add it to my movie clip but things get very complicated when I want to load in 20+ by iterating through a loop. I've looked at many examples and just cant adopt the sample code to work for me. Anyway without a further a do here is what I have so far.

// Load High scores from server
var hiscoreloader:URLLoader = new URLLoader();
hiscoreloader.addEventListener(Event.COMPLETE, highScoresLoaded);
var hiscorexml:XML;
function highScoresLoaded(e:Event):void
{
    hiscorexml = new XML(e.target.data);
    var hsList:XMLList = hiscorexml.highscores.highscore;
    for(var i:uint = 0; i < hsList.length(); i++)
    {
        this["hs_score_"+i].text = zeroPad(hsList.score.text()[i], 8);
        this["hs_name_"+i].text = hsList.name.text()[i];
        // Load in Flag
        // url of flag will be: "http://wfwxg.philosophydesign.com/images/flags/" + hsList.country.text()[i] + ".png"
        // Move clip instance name the above image needs adding too will be: this["hs_flag_"+i]
    }
}
hiscoreloader.load(new URLRequest("http://wfwxg.philosophydesign.com/includes/top20.php?nocache=" + new Date().getTime()));

Can anyone amend my code to do what I'm after?

Many Thanks

Scott

Answer 1

Here's a quick solution.

Practically , I would advise to encapsulate concerns so that your code is not too tightly coupled. Right now, you handle almost everything in one single function while assigning the result data to your main MovieClip. This is why I created an Array to hold the XML data as well as the loaded images.

One possible structure could be to:
- first retrieve the XML data and assign it to the data Array.
- loop thru the data Array to load the images , and assign the loaded content to the relevant Object.
- After all the images have loaded , use the data Array to set your display

       // Load High scores from server
        var hiscoreloader:URLLoader = new URLLoader();

            //Create an Array to hold your XML data
        var data:Array = [];

        hiscoreloader.addEventListener(Event.COMPLETE, highScoresLoaded);

        var hiscorexml:XML;

        function highScoresLoaded(e:Event):void
        {
          hiscorexml = new XML(e.target.data);
              var hsList:XMLList = hiscorexml.highscores.highscore;

          for(var i:uint = 0; i < hsList.length(); i++)
          {
             //here we create a new Object to hold the retrieved data
             //and add it to the data Array
            data[i] = { 
                             hs_score:zeroPad(hsList.score.text()[i], 8), 
             hs_name: hsList.name.text()[i], 
             flagURL:"http://wfwxg.philosophydesign.com/images/flags/"
                             + hsList.country.text()[i] + ".png",
             mc_name:"hs_flag_"+i.toString();
            };

             //load the images
             var loader:Loader = new Loader();
             configureListeners(loader.contentLoaderInfo);  
             loader.name = i.toString();
             loader.load( new URLRequest( data[i].flagURL ) );
          }
        }

        function configureListeners(info:LoaderInfo):void
        {
            //add all your event listeners here
            info.addEventListener(Event.COMPLETE , completeHandler );
        }

        function removeListeners(info:LoaderInfo):void
        {
            //remove all your event listeners here
            info.removeEventListener(Event.COMPLETE , completeHandler );
        }


    function completeHandler(event:Event):void
    {
        var index:int = int( event.currentTarget.loader.name );
        //add the image data to your data Array
        data[index].flag = event.currentTarget.loader.content;
        removeListeners( event.currentTarget );
    }