1 Reply Latest reply on Sep 18, 2013 7:09 PM by Ned Murphy

    Creating an staggered tween assistance

    JonnyDL Level 1

      I was trying to create a tween that would fade objects in one after another. Ideally when one movieclip fades in at about 90% it would trigger the next movieclip to fade in, and the next would do the same and so on. I figured I could use the onMotionChanged with if statements to trigger them at 90% and then start the next tween, but Im not getting the expected results. the code I have appears to work, until it wants to goto the next function. All the other animations appear slow and choppy

       

      I think its because the onMotionChanged is simular to onEVENT that calls the actions every second that the tween is moving, I thought I had set up the if statements to limit that, but it still isint working. Here is the code Im using that is creating the problem. Hopefully from my description and code, someone can tell me whats wrong (what am I doing wrong) and how I can fix it.)

       

      Thanks

       

      function starter ()

      {

      clearTimeout(holdit)

      var fadeout:Tween = new Tween (starter_mc,"_alpha",Strong.easeOut,100,0,2,true);

      fadeout.onMotionChanged = function ()

                {

                          if (starter_mc._alpha > 0 && starter_mc._alpha < 10)

                                    {

       

                                              var fadeiname:Tween = new Tween (name_mc,"_alpha",Strong.easeOut, name_mc._alpha,100,2,true);

                                              fadeiname.onMotionChanged = function ()

                                              {

                                                        if (name_mc._alpha >90 && name_mc._alpha <95)

                                                        {

                                                                  var fadeinaddress:Tween = new Tween (location_mc,"_alpha",Strong.easeOut,location_mc._alpha,100, 3,true);

                                                        }

                                                        if (name_mc._alpha >97 && name_mc._alpha < 100 )

                                                        {

                                                                  var fadeintop:Tween = new Tween (accessible_mc,"_alpha",Strong.easeOut,accessible_mc._alpha, 100, 4,true);

                                                                  fadeintop.onMotionFinished = function ()

                                                                  {

                                                                            var holdit = setTimeout (stagetwo, 3000)

                                                                  }

                                                        }

                                              }

                                    }

                }

      }

        • 1. Re: Creating an staggered tween assistance
          Ned Murphy Adobe Community Professional & MVP

          I suggest breaking up the nesting and delete the onMotionFinished detection as soon as possible.  Something like what I show below.  It has elements added in to make sure that you do not create a new tween each time the motionFinished events are processed.  In some cases the motionFinished is deleted, while in the Name case a boolean is used to stop it from creating more than one address tween.

           

          I tested this myself and found that having the last condition based on

           

               if (name_mc._alpha > 97 && name_mc._alpha < 100 )

           

          was insufficent for the last object to start tweening... the alpha values went from 96 to 100 so it never passed the conditions to start the tween.  Put a trace in the  fadeInAddress() function to see what values you are getting for the name_mc _alpha value to see if that's your problem as well.

           

          var fadeiname:Tween;
          var fadeName = true;

           

          var fadeinaddress:Tween;

          var fadeintop:Tween;

          var fadeout:Tween;

           

          function starter(){
              fadeout = new Tween (starter_mc,"_alpha",Strong.easeOut,100,0,2,true);

              fadeout.onMotionChanged = fadeInName;
          }

           

          function fadeInName(){

           

              if (starter_mc._alpha > 0 && starter_mc._alpha < 10)
              {
                 delete fadeout.onMotionChanged;
                  fadeiname = new Tween (name_mc,"_alpha",Strong.easeOut, name_mc._alpha,100,2,true);
                  fadeiname.onMotionChanged = fadeInAddress;
              }
          }

           

          function fadeInAddress(){

              if (name_mc._alpha >90 && name_mc._alpha <95 && fadeName)
              {
                  fadeinaddress = new Tween (location_mc,"_alpha",Strong.easeOut,location_mc._alpha,100, 3,true);
                  fadeName = false;
              }
              else if (name_mc._alpha > 97 && name_mc._alpha < 100 // I changed 97 to 95 to get it to work
              {
                 delete fadeiname.onMotionChanged;
                  fadeintop = new Tween (accessible_mc,"_alpha",Strong.easeOut,accessible_mc._alpha, 100, 4,true);
              }
          }