4 Replies Latest reply on Jun 21, 2007 5:05 PM by scythaxus

    Staggering object fade-in programmatically

    scythaxus Level 1
      Ok, here's another one that's probably very simple, but I just can't get right. I have an array of items. As I step through the array, I instantiate a new movie clip, add it to the stage and call a custom method myMovieClip.fadeIn(). I would like to stagger the animation so that there are a few frames of delay between each object when it fades in (creating a cascading effect), but all the objects in the array fade in at the same time. Within the UI, its as simple as placing each object on a separate layer and shifting the timeline a couple of frames for each subsequent object.

      How can I do this programmatically (with AS 3)?
        • 1. Re: Staggering object fade-in programmatically
          kglad Adobe Community Professional & MVP
          stagger you call to your class fadeIn() method. using the timer class for that would work.

          but you just might want to extend your fadeIn() method to accept a variable that indicates a time delay to the start of the fadeIn(), again using the timer class.
          • 2. Re: Staggering object fade-in programmatically
            scythaxus Level 1
            Ok, thanks. Will give that a go.
            • 3. Re: Staggering object fade-in programmatically
              kglad Adobe Community Professional & MVP
              you're welcome.
              • 4. Re: Staggering object fade-in programmatically
                scythaxus Level 1
                In case anyone else is wondering how to do this, here's how:

                Remember the "_eventList" variable is an Array of items that need to fade in sequentially. Use a for loop to step through the items in the array, but instead of calling the fadeIn() method, call a wait() method inside the custom class:

                //fade in each entry onto the screen...
                for(var j:int = 0; j < _eventList.length; j++)
                {
                addChild(_eventList[j]);
                _eventList[j].alpha = 0;
                _eventList[j].wait(j*200);
                }

                Note that I'm passing the current count, "j", times a 200ms interval into the wait() method inside the custom function. If I simply passed the value "200" into the wait function, all the items would still fade in at the same time, just after a 200ms delay. The reason is because the timers have NO effect on the execution of the "for" loop; it continues to run so the timers would all end up starting simultaneously. Therefore, we have to make each timer wait for a longer period of time, equal to the fade in interval we want.

                Then, inside the custom class, import "flash.utils.Timer" and "flash.events.TimerEvent" and add the wait() function: