Question

I have done a simple code for a slideshow that dynamicly loads images from a subfolder, depending on what is listet in a text file.

the code:

import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Loader;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.Bitmap;
import flash.display.BitmapData;

public class slideshow extends MovieClip {

    public var listLoader:URLLoader;
    public var newImgList:Array;
    public var imgX:int = 0;
    public var container:MovieClip;

    public function slideshow() {
        container = new MovieClip();
        stage.addChild(container);

        listLoader = new URLLoader(new URLRequest("./slideshow.txt"));
        listLoader.addEventListener(Event.COMPLETE, initImages);
    }

    public function initImages(event:Event):void {
        var imgList:Array = listLoader.data.replace(/^\s+/,"").replace(/\s+$/,"").split(/\s+/);
        newImgList = new Array();
        for(var line:int = 0; line < imgList.length; line++ ) {
            if(imgList[line].indexOf(".png") != -1 || imgList[line].indexOf(".jpg") != -1) {
                newImgList.push(imgList[line]);
            }
        }
        loadImage();
    }

    public function loadImage():void {
        for(var loaderNum = 0; loaderNum < newImgList.length; loaderNum++) {
            var imgLoader = new Loader();
            imgLoader.load(new URLRequest("./slideshow/" + newImgList[loaderNum]));
            imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgInit);
        }
    }

    public function imgInit(event:Event):void {
        var imgBmp:BitmapData = event.target.content.bitmapData;
        var img:Bitmap = new Bitmap(imgBmp);
        img.height = 150;
        img.scaleX = img.scaleY;
        img.y = 0;
        img.x = imgX;
        imgX = (imgX + img.width + 10);
        container.addChild(img);
    }
}

well actually it works fine for me except for that the images are displayed in a almost random order.

i guess the code is loading some images too slow, so some of them are added to the movieclip although they are loaded after the one that should go next.

so what i mean :

1.png is loaded

1.png is added

2.png is loaded

3.png is loaded

3.png is added

2.png is added

so my question:

is there any other propper/better way to make that slideshow load images from a textfile where just the full names of the images ( that are in a subfolder ) are listet ?

thanks for any suggestions.

g.r.

Answer 1

Queue your image loading to have them ordered.

Rough example:

var queue:Array = []; // Populated from your text/whatever file.
// If you want the images to load from first to last you will need
// to use queue.reverse() once you get the filenames.

/**
 * Beings loading the next image in queue.
 * Ignored if the queue has no remaining items.
 */
function loadNext():void
{
    if(queue.length > 0)
    {
        var imgSrc:String = queue.pop();

        var ldr:Loader = new Loader();
        ldr.load(new URLRequest(imgSrc));

        ldr.addEventListener(Event.COMPLETE, _done);
    }
}


/**
 * Called once a Loader instance has finished loading a resource.
 * @param e Event.COMPLETE.
 */
function _done(e:Event):void
{
    e.target.removeEventListener(Event.COMPLETE, _done);
    container.addChild(e.target as DisplayObject);

    // Begin loading the next image in queue.
    loadNext();
}