AS3 Loading multiple external images into an array?

Question

Trying to pick 4 images randomly and load them into and array and then show them using a timer when all 4 images are shown 4 more images will be loaded again. here is the code:

var images : Array = new Array();
var rndNumbers : Array = new Array();
var imageLoader : Loader;
var imageTimer : Timer = new Timer(3000, 0);
var currImageID : int;
var imgID : int;
var loaded : Boolean = true;
var i : int;
var tmp : int = 0;
var rnd : int = 0;

addEventListener(Event.ENTER_FRAME, OnLoad);

imageTimer.addEventListener(TimerEvent.TIMER, ChangePicture);

function OnLoad(e : Event) : void {
    RandomNumbers();
    LoadImages();
}

function RandomNumbers() {
    for (var n = 0; n <= 3; n++) {
        rnd = 1 + Math.floor(Math.random() * 4);
        while (tmp == rnd) {
            rnd = 1 + Math.floor(Math.random() * 4);
        }
        tmp = rnd;
        rndNumbers[n] = rnd;
        trace(rnd);
    }
}

function LoadImages() : void {
    for (var i = 0; i <= rndNumbers.length - 1; i++) {
        imageLoader = new Loader;
        var urlRequest : URLRequest = new URLRequest("images/pic" + rndNumbers[i] + ".jpg");
        imageLoader.load(urlRequest);
        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadComplete);
    }
    imageTimer.start();
}

function LoadComplete(event : Event) {
    removeEventListener(Event.ENTER_FRAME, OnLoad);
    images[imgID] = imageLoader;
    imgID++;
}

function ChangePicture(event : TimerEvent) : void {
    transition.gotoAndPlay(1);
    Img_Box.addChild(images[currImageID]);
    if (currImageID != 3) {
        currImageID++;
    } else {
        RandomNumbers();
        LoadImages();
        currImageID = 0;
    }
}

The possible problem here would be that the for loop which loads images won't wait for the load to complete and continues the loop whatsoever. How is can that be solved? Or do you suggest any better way?

Thanks in advanced.

Answer 1

Okay so no video tutorial on the photo gallery but here is an Actionscript 3 tutorial on how to make a photo gallery . Since you're new to AS3, start there and then look into using Timers in AS3 to switch up your photos. Also my advice: try and avoid doing timeline tweens and animations, try and go pure actionscript. This is because basically flash is a tool/platform with an identity crisis. It's meant to be used for artists and animators (hence the timeline stuff, designer UI) and also developers. When you blend the two worlds, and then get into more complex projects, things get messed up really fast. But if you're doing simple transitions as is implied in your code this should be okay.

Make sure when learning, you learn actionscript 3. Actionscript 2 is the old flash AVM language (actionscript virtual machine 1) and its about 20X slower than actionscript 3, is a non-type-safe or non-strict language. Actionscript 3 is a type-safe strict language based on ecmascript 3 language standards and was at one point the base model for the ecma script version 4.0 format proposition. It was however shut down as the new spec thanks to people like microsoft and is considered a proprietary language because of this, but is yet still based on open standards.

As for your code you can simply change the onLoad method to keep a count via a class-member variable of how many times the onLoad callback has been called. Once you count 4 times (4 loads completed), you can then reset the variable back to 0. Also instead of having the first load calls placed inside an ENTER_FRAME event, you can change the function to a generic function and just call it from inside the frame this actionscript is placed on. (I'm assuming this code is just typed on a frame in the flash FLA). Example:

//---->Delete this -->addEventListener(Event.ENTER_FRAME, OnLoad);

imageTimer.addEventListener(TimerEvent.TIMER, ChangePicture);

OnLoad(); // Manually call the first function to get the whole load/display loop going.

function OnLoad():void{

     RandomNumbers();
     LoadImages();
}

Also you're going to want to learn how to start using classes, including the document class if you want to become a serious, object-oriented flash developer. You can find a link to a video tutorial about this here:

http://gotoandlearn.com/play.php?id=43

That website is also packed full of free video tutorials that should have you well on your way to becoming a full-blown flash developer. I myself got my foundation in flash strictly from watching these tutorials when they were first coming out. From there you may want to look into books/tutorials on object-oriented programming and design patters, and how they apply to the actionscript 3 language. Hope this helps and all the best on your endeavors.