How do i use Arrays and For Loops in Loading Multiple Images?

[screeen]

I am struggling to load a sequential array of images to appear like a moving image. So when u click the button the images load one after the other.

The code below is what i have so far, but it fails to do what i seek in that there's only one image loading which is the last image in the array, so either because the images are stacking up atop each other, or because i simply dont understand the basics...

And, i am unclear about what you said kglad, that my solution will be more complicated because i need to preload my image sequence and then use a loop to load it?

import flash.net.URLRequest;

import flash.display.Loader;

var count:int = 0;

var imageArray:Array=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg",

"8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg"];

for(var i:uint=0;i<imageArray.length;i++){

var btn:YourButton=new YourButton();

btn.ivar=i;

addChild(btn);

btn.x=0;

btn.y=0;

btn.addEventListener(MouseEvent.CLICK,clickF);

}

var ldr:Loader=new Loader();

addChild(ldr);

ldr.x=20;

ldr.y=20;

function clickF(e:MouseEvent){

    ldr.load(new URLRequest("D:/flash cs5.5/image_sequence/twirlSeq/"+imageArray[e.currentTarget.ivar]));

}

function loadComplete(e:Event){

     // first process loaded image, then...

    count++;

    if(count < imageArray.length){

        loadCurrentImage();  // load the next image

    } else {

        // sequencial loading complete, carry on to next activity

    }

function loadCurrentImage(){

     ldr.load(imageArray[count]);

     ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

}

}

[kglad]

you'll need to preload those images if you want them to load rapidly and appear to be animated.

so, load them all then use something like:

var count:int;

var imageArray:Array=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7. jpg",

"8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg"];

var ldr0:Loader=new Loader();

ldr0.contentLoaderInfo.addEventListener(Event.COMPLETE,loadCompleteF);

var ldr1:Loader=new Loader();

ldr1.contentLoaderInfo.addEventListener(Event.COMPLETE,loadCompleteF);

btn.addEventListener(MouseEvent.CLICK,clickF);

function clickF(e:MouseEvent):void{

count=0;

loadF();

}

function loadF():void{

addChild(this["ldr"+count%2])

this["ldr"+count%2].load(new URLRequest(imageArray[count]));

}

function loadCompleteF(e:Event):void{

count++;

if(count<imageArray.length){

if(this["ldr"+count%2].content){

this["ldr"+count%2].unloadAndStop();

}

loadF();

} else {

// last load completed

}

}

[screeen]

Hi kglad, thnx for replying. am still failing. If i understand the code which i need, it is saying that there's an array which is a string, 2 loaders that  listen for the loadCompleteF event, the btn click function that counts and activates the loadF function, which adds the first loader, is counting for divisible by 2 and loading a new url request with the image array, in accordance to the counter. the loadCompletF function starts the count and conditions the laoders.

I am trying to understand your recommendation...not sure i do.

In any case, this is taking ma a step back because the code i provided is at least loading the last of the images while this new version is not, sorry to say, and many thanks anyhow because i do appreciate your help.

[kglad]

replace your code with the code i suggested.

[screeen]

thanks for not giving up on me Kglad. i've done that - pasted yours in lieu of mine, got this strange error: ReferenceError: Error #1065: Variable TCMText is not defined.

Plus, i dont understand the code at all. i mean, would you be willing to put it in words for me, and then i might know what to do wiht the error...

[kglad]

create a new fla, add btn and add the code i suggested.  test.

var count:int;

var imageArray:Array=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7. jpg",

"8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg"];

var ldr0:Loader=new Loader();

ldr0.contentLoaderInfo.addEventListener(Event.COMPLETE,loadCompleteF);

var ldr1:Loader=new Loader();

ldr1.contentLoaderInfo.addEventListener(Event.COMPLETE,loadCompleteF);

btn.addEventListener(MouseEvent.CLICK,clickF);

function clickF(e:MouseEvent):void{

// initialize count

count=0;

// call loadF

loadF();

}

function loadF():void{

// add one of the loaders to the top of the displaylist and load the next image

addChild(this["ldr"+count%2])

this["ldr"+count%2].load(new URLRequest(imageArray[count]));

}

function loadCompleteF(e:Event):void{

// increment count

count++;

// check if the last has loaded

if(count<imageArray.length){

// if not clear the content out of the next loader.

if(this["ldr"+count%2].content){

this["ldr"+count%2].unloadAndStop();

}

// and call loadF so the next loader can load the next image in the array

loadF();

} else {

// if the last has loaded.

// last load completed

}

}

[screeen]

HI kglad. Amazing, it's practically done. And many many thanks for explaining what each phase is doing. THat is really helpful.

Otherwise, i have an issue, and a question. The question: why does "count%2" in the loadCompleteF function clear the content.

The issue: I am getting a familiar error - "SecurityError: Error #2000: No active security context."

which i am familiar with when there's a string that's a path, but in this case, i have the jpgs in the same folder as the fla file, plus, the string is an array. Usually this error is resolved when i change the string which is hte path. SO the question is, where can i put in a url path?

thank you so much, again.

[kglad · Accepted solution]

count%2 alternates between 0 and 1 as count increments.  that allows you to load into ldr0 and then ldr1 and then ldr0 etc. 

that way the stage always has one image displayed instead of flashing white between loads that you would see if you used one loader.