Skip navigation
Currently Being Moderated

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

Jun 18, 2012 7:01 AM

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);

}

 

}

 
Replies
  • kglad
    72,340 posts
    Jul 21, 2002
    Currently Being Moderated
    Jun 18, 2012 8:20 AM   in reply to minimalcomfort

    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

    }

    }

     
    |
    Mark as:
  • kglad
    72,340 posts
    Jul 21, 2002
    Currently Being Moderated
    Jun 19, 2012 6:39 PM   in reply to minimalcomfort

    replace your code with the code i suggested.

     
    |
    Mark as:
  • kglad
    72,340 posts
    Jul 21, 2002
    Currently Being Moderated
    Jun 20, 2012 6:25 AM   in reply to minimalcomfort

    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

    }

    }

     
    |
    Mark as:
  • kglad
    72,340 posts
    Jul 21, 2002
    Currently Being Moderated
    Jun 23, 2012 6:44 AM   in reply to minimalcomfort

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points