Skip to main content
P
panasan
Participating Frequently
July 16, 2011
Answered

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

  • July 16, 2011
  • 1 reply
  • 1217 views

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

This topic has been closed for replies.
Correct answer Ned Murphy

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


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

1 reply

Ned Murphy
Ned Murphy
Legend
July 16, 2011

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;

}

P
panasanAuthor
Participating Frequently
July 19, 2011

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
Ned Murphy
Legend
July 19, 2011

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.

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices