[RESOLVED] [F8] Adding dynamic delays to an XML gallery

[drn33]

Hello all, simple problem here. I am using XML to bring in an image gallery that slides to the next image every 5 seconds. However, I would really like to be able to control the number of seconds via XML and make it different for every XML value. Here's my XML:

<gallery>
   <item> 
      <image>images/Main01.jpg</image>
      <delay>10</delay>
   </item>
   <item> 
      <image>images/Main02.jpg</image>
      <delay>5</delay>
   </item>
</gallery>

I have pulled the delay values into an array and called them through the XML like this:

var myDelay:Array = new Array();
//I've skipped the other xml code parts for ease of viewing
   for (i=0; i<NumOfImages; i++) {
      myDelay = getInfo[i].childNodes[1].firstChild.nodeValue; 

This returns the values 10 and 5.

Now here's the code I use to set the delay for each image:

var timeCounter:Number = 0;
this.onEnterFrame = function() {
    if(AutoPlay){
        timeCounter = timeCounter+1;
        if (timeCounter>=myDelay*30) {
            timeCounter = 0;
            next_img();
        }
    }
}; 

My problem is that this code is outside the for loop, so it only grabs the last value, which in this case is 5. How can I get it to grab each delay value for each slide?

[deepakflash]

your myDelay array has to get populated like this...

  
var myDelay:Array = new Array(); 
 for (i=0; i<NumOfImages; i++) { 
      myDelay.push = getInfo[i].childNodes[1].firstChild.nodeValue; 
}

and then... for your second set of code, its BETTER if you can make use of setInterval() instead of onEnterFrame.

something like this:

var initDur=0;
var intervalcall=setInterval(callInt,myDelay[0]);
function callInt(){
initDur++;
clearInterval(intervalcall);
next_img(); 
intervalcall=setInterval(callInt,myDelay[initDur]);
}

[drn33]

Thanks for the response deepak. You are right about using setInterval, I just grabbed some old code that still worked and used it. That's me being lazy.

I have tried your code, but am still having problems. For one, adding push to the myDelay doesn't seem to work. A trace(myDelay) doesn't return anything, whereas it returns all the correct values without the push. So I think the array is populating correctly.

I tried your setInterval code, but it does not do anything. However, I did also notice that a trace(myDelay) outside of the for loop returns nothing. So it would seem that the array is only populated inside the for loop. Any suggestions?

Thanks for your help.

[deepakflash]

ooopsss !!!!!
it has to be myDelay.push(getInfo[i].childNodes[1].firstChild.nodeValue);

[deepakflash]

that should be fine

[drn33]

Thanks for the response Deepak, I changed the code and now my trace(myDelay) returns this:

10
10,5

So it is populating the array and I believe this is the way I want it, with comma separated values. But the setInterval code still does not do anything. A trace of mydelay outside the loop statement still returns nothing. Is this the problem?

Thanks, again for your help!

[deepakflash]

can you show us your entire code?

[drn33]

Sure, here it is:

On frame 1:

var totalXML:XML = new XML();                                    
totalXML.ignoreWhite = true;                                    
totalXML.load("externals/MainNews2.xml");
totalXML.onLoad = function(success) {                            
   var getInfo = this.firstChild.childNodes;
   NumOfImages = getInfo.length;
   for (k=0; k<NumOfImages; k++) {
      var theClip:MovieClip = images_mc.attachMovie("mc_Image", "image"+k, k+1);
      theClip._x = Xposition;
       mcLoader.loadClip(getInfo[k].firstChild.childNodes[0].nodeValue,theClip.img_mc);
      theClip.img_mc._alpha = 0;
      ImagesXPosition.push(theClip._x);
      Xposition += 540;
      theClip.myDate = getInfo[k].childNodes[1].firstChild.nodeValue;
      theClip.myTitle = getInfo[k].childNodes[2].firstChild.nodeValue;
      theClip.myFullText = getInfo[k].childNodes[3].firstChild.nodeValue;
      myDelay.push(getInfo[k].childNodes[4].firstChild.nodeValue);
      theClip.onRelease = function() {
         _parent.newsBox.fullNews.htmlText = "<h1>"+this.myTitle+"</h1><h3>"+this.myDate+"</h3><br/><body>"+this.myFullText+"</body>";
         _parent.newsBox._visible = true;
         };
      }
};

//----- AUTO PLAY CODE -----
trace(myDelay);
var initDur=0;
var intervalcall=setInterval(callInt,myDelay[0]);
function callInt(){
    initDur++;
    clearInterval(intervalcall);
    next_img();
    intervalcall=setInterval(callInt,myDelay[initDur]);
    } 

And my XML code:

<MainNews>
   <item> 
      <image>images/Main00.jpg</image>
      <date>15 September 2008</date>		
      <title>Title text here</title>
      <full><![CDATA[Body text here]]></full>
      <delay>10</delay>
   </item>
   <item> 
      <image>images/Main01.jpg</image>
      <date>10 September 2008</date>		
      <title>Title text here</title>
      <full><![CDATA[Body text here]]></full>
      <delay>5</delay>
   </item>
   <item> 
      <image>images/Main02.jpg</image>
      <date>5 September 2008</date>		
      <title>Title text here</title>
      <full><![CDATA[Body text here]]></full>
      <delay>5</delay>
   </item>
<MainNews>

Thanks again for your help. What I am trying to do is use the XML to choose the amount of time each slide waits before moving to the next one. Everything else is working perfectly.

[deepakflash]

How can you manually set a timeframe like that? Coz some images may take time to load depending on the internet speed... so if you set image1 to be displayed for 5 seconds by that time your image1 has to be completely loaded and ready for your count down am i right? Hence, even if the image has not been loaded completely within 5 seconds the other image starts to load after a gap of 5 seconds... ONLY if you want this application to work on local drive(instead of internet) you can be damn sure of getting all images displayed as per your delay set.

To fix this problem i suggest you to set time delay inside your onLoadInit() function of your MovieClipLoader class

Also where is your next_img() function coming?

[drn33]

Thanks for the response Deepak, if I understand the coding correctly, all my images are loaded at the same time and are then tiled one after another 540 pixels apart. So the loading is already done before I get to the time interval for sliding these images. In my original code myDelay was just a number set to 5 that would slide to the next image every 5 seconds. But I wanted to put it in my XML so that I could change the amount of time spent on each image if I wanted to.

The code is working in that all the delay values are pulled in from the XML and populated into an array. The problem is that it's only recognizing the last value in the array. So I feel that I'm almost there, and that it's just one line of code away from working perfectly. So what I'm really looking to do is make Flash read each value in the array as it corresponds to each XML loaded slide. Does this make sense?
Thanks again for your help.

[deepakflash]

ok.. then if you need a delay of 5 seconds, make it 5000 in your xml.

<delay>5000</delay>

[drn33]

My mistake, the XML was working with my old code below:

var timeCounter:Number = 0;
this.onEnterFrame = function() {
    if(AutoPlay){
        timeCounter = timeCounter+1;
        if (timeCounter>=myDelay*30) {
            timeCounter = 0;
            next_img();
        }
    }
}; 

But only grabbing the last value. So that is what I am trying to solve. However I'd like to use the new code you suggested (below)

var initDur=0;
var intervalcall=setInterval(callInt,myDelay[0]);
function callInt(){
   initDur++;
   clearInterval(intervalcall);
   next_img();
   intervalcall=setInterval(callInt,myDelay[initDur]);
   } 

But the images are not sliding, no matter what values I put in the XML. Any suggestions?

[drn33]

Deepak,

Okay, problem almost solved. I was able to get the delay working by moving your script inside my XML function (success). So it reads all the XML values and scrolls through them perfectly. The only remaining issue is that when all images have scrolled it is supposed to return to the first one and start all over again. But in this case it returns to the start and stops. How would I loop your code?
Thanks again for all your help!

[drn33]

Okay, problem solved. Here is the last piece of code that made it work:

var initDur=0;
var intervalcall=setInterval(callInt,myDelay[0]);
function callInt(){
   initDur++;
   clearInterval(intervalcall);
   next_img();
   if (initDur == NumOfImages) {
      initDur = 0;
      intervalcall=setInterval(callInt,myDelay[0]);}
   else {intervalcall=setInterval(callInt,myDelay[initDur]);}
   }
}; 

Thanks for all your help Deepak! I really appreciate it.