Skip navigation
minimalcomfort
minimalcomfort
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);

}

 

}

1380 Views   7 Replies   Latest reply: kglad, Jun 23, 2012 6:44 AM
 
Replies
  • kglad
    62,117 posts
    Jul 21, 2002
    Currently Being Moderated
    1. kglad,
    Jun 18, 2012 8:20 AM   in reply to minimalcomfort
    Report

    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:
  • minimalcomfort
    Currently Being Moderated
    2. minimalcomfort,
    Jun 18, 2012 11:23 PM   in reply to kglad
    Report

    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.

     
    |
    Mark as:
  • kglad
    62,117 posts
    Jul 21, 2002
    Currently Being Moderated
    3. kglad,
    Jun 19, 2012 6:39 PM   in reply to minimalcomfort
    Report

    replace your code with the code i suggested.

     
    |
    Mark as:
  • minimalcomfort
    Currently Being Moderated
    4. minimalcomfort,
    Jun 20, 2012 4:05 AM   in reply to kglad
    Report

    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...

     
    |
    Mark as:
  • kglad
    62,117 posts
    Jul 21, 2002
    Currently Being Moderated
    5. kglad,
    Jun 20, 2012 6:25 AM   in reply to minimalcomfort
    Report

    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:
  • minimalcomfort
    Currently Being Moderated
    6. minimalcomfort,
    Jun 20, 2012 9:31 PM   in reply to kglad
    Report

    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.

     
    |
    Mark as:
  • kglad
    62,117 posts
    Jul 21, 2002
    Currently Being Moderated
    7. kglad,
    Jun 23, 2012 6:44 AM   in reply to minimalcomfort
    Report

    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:
Actions

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