How to add a wait or interval in seconds for fade in/out effects

[panasan]

Hi,

I have the following actionscript which is working fine, but I would like to wait for some seconds each image once has reached the alpha in 100, if you see the example in the header (www.vmortiz.com/index2.htm) what it does is that the image fades in and when it gets to 100 starts fading out, and I want that when it gets the alpha in 100, keep it for let's say 5 seconds and then fade it out. Could ou please help to do so?

square._alpha = 0;
whichPic = 0;

_root.onEnterFrame = function() {
if (whichPic<4 && !fadeIn && !fadeOut) {
fadeOut = true;
whichPic++;
}
else if (whichPic>=4) {
whichPic = 1;
}
if (square._alpha>10 && fadeOut) {
square._alpha -= 2;
}
if (square._alpha<10) {
loadMovie("../images/banner/foto"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 5;
} else {
fadeIn = false;

}
};

Thanks

Regards

[Ned Murphy]

Look into using the setTimeout() function in some manner to delay the start of the fade-out.  One way would be to stop the enterframe code from executing for a short time... you can do this by putting all the enterframe code into a function and assigning the function to the enterframe.  That way it can be removed and reassigned at will.  See below for how your code gets changed to accomodate this... new code is bolded...

_root.onEnterFrame = doFadingInOut;

function doFadingInOut() {
if (whichPic<4 && !fadeIn && !fadeOut) {
fadeOut = true;
whichPic++;
}
else if (whichPic>=4) {
whichPic = 1;
}
if (square._alpha>10 && fadeOut) {
square._alpha -= 2;
}
if (square._alpha<10) {
loadMovie("../images/banner/foto"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 5;
} else {
fadeIn = false;

delete _root.onEnterFrame;

setTimeout(resetEnterFrame, 3000)

}
};

function resetEnterFrame(){

   _root.onEnterFrame = doFadingInOut;

}

[panasan]

Thanks Ned,

I have copied the code you supplied tome with the changes, but what is doing now looks like every 3 seconds, the image is fading out, and actually what I need is the image to fade in, stayed 3 secondas and then fade out and so on with all the images. You could take a look at www.vmortiz.com/index2.htm on the header to see actually what is doing with the actionscript modified.

square._alpha = 0;
whichPic = 0;

_root.onEnterFrame = doFadingInOut;

function doFadingInOut() {
if (whichPic<4 && !fadeIn && !fadeOut) {
fadeOut = true;
whichPic++;
}
else if (whichPic>=4) {
whichPic = 1;
}
if (square._alpha>10 && fadeOut) {
square._alpha -= 2;
}
if (square._alpha<10) {
loadMovie("../images/banner/foto"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 5;
} else {
fadeIn = false;
delete _root.onEnterFrame;
setTimeout(resetEnterFrame, 3000);
}
};

function resetEnterFrame(){
   _root.onEnterFrame = doFadingInOut;
}

Thanks

Regards

[Ned Murphy]

Hopefully you will be able to figure out where you need to move the setTimeout function call in your code to do whatever you want it to.  I was assuming that if the

if (square._alpha<100 && fadeIn && !fadeOut) {

line is indicating that the alpha is >= 100, that it is officially faded in by the time the setTimeout is called.  But there is a bit of tangling in your code such that it could possibly be happening elsewhere.

So try to reason out where you think the waiting for 3 seconds should start, just like I tried to do (and still believe is where it is).

As for the link you provided, I have no idea what I am supposed to be looking at since nothing seems to be doing any continuous fading in/out.

[panasan]

Hi Ned,

Thanks for your quick response.

I'll try ti figure out where shoudl I set the setTimeout.

You won't be able to see any continuous fade in/out because I have modified the code with the one you sent me and the effects got lost.

Regards,

[Ned Murphy]

One thing you probably need to do that I neglected to show is to declare the fadeIn/fadeOut variables outside of the function.  That way they can retain their values when you end the function call during the timeout period.

[panasan]

I have removed the setTimeOut so you can now see the continues fadein/fadeout effects at www.vmortiz.com/index2.htm

You'll the effect fading out very fast not letting the user to look at the image.

Thanks

[Ned Murphy · Accepted solution]

I rewrote your code mainly because having fadeIn and fadeOut both operating isn't needed.  It is either fading in or it isn't, when it isn't, it can be treated as fading out.  I instead added a variable named fading that helps differentiate when to load new or deal with the current image...

square._alpha = 0;
whichPic = 0;
var fadeIn = true;
var fading = false;

_root.onEnterFrame = doFadingInOut;

function doFadingInOut() {
    if(fadeIn && !fading){
       if (whichPic<4) { 
          whichPic++;
       } else {
          whichPic = 1;
       }
       loadMovie("../images/banner/foto"+whichPic+".jpg", "square");
        fading = true;
    }

    if(fading){
       if(fadeIn){
           if (square._alpha<100 && fadeIn && fading) {
              square._alpha += 5;
           } else {
              delete _root.onEnterFrame;
              setTimeout(resetEnterFrame, 3000)
           }
       } else {
           if(square._alpha > 0){
              square._alpha -= 2;
           } else {
              fading = false;
              fadeIn = true;
           }
       }
    }
}

 
function resetEnterFrame(){
     fadeIn = false;
     _root.onEnterFrame = doFadingInOut;
}

[panasan]

You are absolutely right!

Thanks a lot...Couldn't be working better! Awesome.

Regards,

[Ned Murphy]

You're welcome