9 Replies Latest reply on Jul 20, 2011 4:33 PM by Ned Murphy

    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

       

       

       

        • 1. Re: How to add a wait or interval in seconds for fade in/out effects
          Ned Murphy Adobe Community Professional & MVP

          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;

          }

          • 2. Re: How to add a wait or interval in seconds for fade in/out effects
            panasan Level 1

            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

            • 3. Re: How to add a wait or interval in seconds for fade in/out effects
              Ned Murphy Adobe Community Professional & MVP

              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.

              • 4. Re: How to add a wait or interval in seconds for fade in/out effects
                panasan Level 1

                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,

                • 5. Re: How to add a wait or interval in seconds for fade in/out effects
                  Ned Murphy Adobe Community Professional & MVP

                  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.

                  • 6. Re: How to add a wait or interval in seconds for fade in/out effects
                    panasan Level 1

                    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

                    • 7. Re: How to add a wait or interval in seconds for fade in/out effects
                      Ned Murphy Adobe Community Professional & MVP

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

                      • 8. Re: How to add a wait or interval in seconds for fade in/out effects
                        panasan Level 1

                        You are absolutely right!

                         

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

                         

                        Regards,