5 Replies Latest reply on Oct 2, 2009 11:31 AM by Ned Murphy

    Tween fade animation with buttons

    surfmad1

      Hi, can anyone help me!

       

      I have four movie clips with instance names of "purple_ob", "green_ob", "orange_ob" and "blue_ob"

      and four buttons "purple_but", "green_but", "orange_but" and "blue_but"

      I want to have the movie clips automatically fade from one to another continually with a 5 second pause inbetween, but then if the user clicks one of the four buttons it will fade the relevant movieclip in. Then if nothing else is pressed the fading will carry on working through the four images in a loop.

       

      So far I have the movie clips fading on a button press but how do I implement the automatic fading from one MC to another?

       

      I've added the code below into the first frame of my scene

       

      //My actionscript 2.0 code

      import mx.transitions.Tween;

      import mx.transitions.easing;

      purple_but.onPress = function() {

      purple_ob.alpha = 0;

      purple_ob._x = 0;

      purple_ob._y = 0;

      var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

      var alphaTween2:Tween = new Tween(purple_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

      var currentPage:String = purple_ob;

      purple_ob.swapDepths(thedepth += 1);

      };


      green_but.onPress = function() {

      green_ob.alpha = 0;

      green_ob._x = 0;

      green_ob._y = 0;

      var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

      var alphaTween2:Tween = new Tween(green_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

      var currentPage:String = green_ob;

      green_ob.swapDepths(thedepth += 1);

      };


      orange_but.onPress = function() {

      orange_ob.alpha = 0;

      orange_ob._x = 0;

      orange_ob._y = 0;

      var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

      var alphaTween2:Tween = new Tween(orange_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

      var currentPage:String = orange_ob;

      orange_ob.swapDepths(thedepth += 1);

      };


      blue_but.onPress = function() {

      blue_ob.alpha = 0;

      blue_ob._x = 0;

      blue_ob._y = 0;

      var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

      var alphaTween2:Tween = new Tween(blue_ob, "_alpha", Strong.easeIn, 0, 100, 15, false);

      var currentPage:String = blue_ob;

      blue_ob.swapDepths(thedepth += 1);

      }

        • 1. Re: Tween fade animation with buttons
          Ned Murphy Adobe Community Professional & MVP

          I felt like playing with it, so here's one approach.  Someone else may have a different approach or might simplify this one:

           

          import mx.transitions.Tween;
          import mx.transitions.easing;

           

          var ob_array = new Array(purple_ob, green_ob, orange_ob, blue_ob);
          var ob_count = 0;
          var currentPage = purple_ob;

           

          var intervalID = setInterval(fadeOBs, 3000); // adjust the 3000 (3 secs) as desired

           

          green_ob._alpha = 0;
          orange_ob._alpha = 0;
          blue_ob._alpha = 0;

          purple_ob._x = 0;
          purple_ob._y = 0;
          green_ob._x = 0;
          green_ob._y = 0;
          orange_ob._x = 0;
          orange_ob._y = 0;
          blue_ob._x = 0;
          blue_ob._y = 0;

           

          function fadeOBs(){

                clearInterval(intervalID);
                intervalID = setInterval(fadeOBs, 3000);

                ob_count += 1;
                if(ob_count >= ob_array.length){
                      ob_count = 0;
                }

           

                var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

                var alphaTween2:Tween = new Tween(ob_array[ob_count], "_alpha", Strong.easeIn, 0, 100, 15, false);


                currentPage = ob_array[ob_count];
                ob_array[ob_count].swapDepths(thedepth += 1);
          }

           

          purple_but.onPress = function() {
                ob_count = -1; // one less than this
                fadeOBs();
          }

           

          green_but.onPress = function() {
                ob_count = 0; // one less than this
                fadeOBs();
          }

           

          orange_but.onPress = function() {
                ob_count = 1; // one less than this
                fadeOBs();
          }

           

          blue_but.onPress = function() {
                ob_count = 2; // one less than this
                fadeOBs();
          }

          • 2. Re: Tween fade animation with buttons
            surfmad1 Level 1

            Ned, unfortunately because the movieclip depth is increasing the MC's are fading in over the buttons is there an easy way to fix that?

             

            many thanks for your help!!!!!!!

            • 3. Re: Tween fade animation with buttons
              Ned Murphy Adobe Community Professional & MVP

              You can try eliminating the swapDepths entirely and see if that is sufficient... since you have thing fading simultaneously, it may not matter.

               

              Or you can swapDepths between the fading-out mc and the fading-in mc rather than incrementing to a new depth all the time.  That way they always stay within their designed depths.

              • 4. Re: Tween fade animation with buttons
                surfmad1 Level 1

                Perfect!

                I removed the 'swapdepth' and it works perfectly now.


                thank you so much for your help, Ned!!!

                 

                Below is the final code

                 

                import mx.transitions.Tween;
                import mx.transitions.easing;

                 

                var ob_array = new Array(purple_ob, green_ob, orange_ob, blue_ob);
                var ob_count = 0;
                var currentPage = purple_ob;

                 

                var intervalID = setInterval(fadeOBs, 3000); // adjust the 3000 (3 secs) as desired

                 

                green_ob._alpha = 0;
                orange_ob._alpha = 0;
                blue_ob._alpha = 0;

                purple_ob._x = 0;
                purple_ob._y = 0;
                green_ob._x = 0;
                green_ob._y = 0;
                orange_ob._x = 0;
                orange_ob._y = 0;
                blue_ob._x = 0;
                blue_ob._y = 0;

                 

                function fadeOBs(){

                      clearInterval(intervalID);
                      intervalID = setInterval(fadeOBs, 3000);

                 

                      ob_count += 1;
                      if(ob_count >= ob_array.length){
                            ob_count = 0;
                      }

                 

                      var alphaTween:Tween = new Tween(currentPage, "_alpha", Strong.easeIn, 100, 0, 15, false);

                      var alphaTween2:Tween = new Tween(ob_array[ob_count], "_alpha", Strong.easeIn, 0, 100, 15, false);


                      currentPage = ob_array[ob_count];

                //Uncomment the line below if you want to increase the MC's depth
                      //ob_array[ob_count].swapDepths(thedepth += 1);
                }

                 

                purple_but.onPress = function() {
                      ob_count = -1; // one less than this
                      fadeOBs();
                }

                 

                green_but.onPress = function() {
                      ob_count = 0; // one less than this
                      fadeOBs();
                }

                 

                orange_but.onPress = function() {
                      ob_count = 1; // one less than this
                      fadeOBs();
                }

                 

                blue_but.onPress = function() {
                      ob_count = 2; // one less than this
                      fadeOBs();
                }

                • 5. Re: Tween fade animation with buttons
                  Ned Murphy Adobe Community Professional & MVP

                  You're welcome