3 Replies Latest reply on Nov 2, 2006 11:41 AM by peterent

    repeater & effects

    n0ris
      hi
      look at this code:

      <mx:Script>
      <![CDATA[
      [Bindable]
      private var dp:Array = ["DSC00418.JPG", "DSC00428.JPG", "DSC00481.JPG"];
      ]]>
      </mx:Script>

      <mx:Parallel id="SlowFade">
      <mx:Fade duration="1000"/>
      </mx:Parallel>

      <mx:Tile width="603" height="374" id="tilecontainer" direction="horizontal">
      <mx:Repeater id="rp" dataProvider="{dp}" >
      <mx:Image source="{String(rp.currentItem)}" addedEffect="SlowFade" />
      </mx:Repeater>
      </mx:Tile>

      it displays a series of thumbnails, and all of them fade-in simultaneously. is there a way of fading first image, then second and so on, like a cascade? i've tried different ways but they still fade all at the same time.

      many thanks.
        • 1. Re: repeater &amp; effects
          peterent Level 2
          The first thing that comes to mind is something like this:

          <mx:Image source="{String(rp.currentItem)}" showEffect="SlowFade" visible="false" />

          This starts off with all of the images invisible. When the Repeater is finished (a repeatEnd event, I think - but look it up to be sure), loop through the images and set them visible, but you'll need to use callLater so each image gets a change to start the fade-in process before the next one. Something like this:

          function showImage(index:Number ) : void {
          var img:Image = tilecontainer.getChildAt( index ) as Image;
          img.visible = true;
          if( ++index < tilecontainer.numChildren ) {
          callLater( showImage, [index] );
          }
          }

          Then kick it off with showImage(0);

          If you just loop over the children and set the visible flag, all you've done is set the visible flag, nothing will have happened until the function ends and the Flex framework carries out your wishes and all of the images will fade in at once again.

          If you weren't using a Repeater you could create a Sequence effect and as each Image was created, make a Fade effect fo it and add that effect to the Sequence. When all of the Images have been created, play the Sequence.
          • 2. repeater &amp; effects
            n0ris Level 1
            thanks for such a quick reply.

            however callLater seems to be triggered before the effect ends so i was getting the same result, all of them faded at the same time. in the help file callLater "queues an operation to be performed for the next screen refresh rather than in the current update" but i guess the next screen refresh is not at the effect's end.

            i've found a workaround by setting a timer (a bit longer than the effect), and in timer's event i'm applying the fade so it won't get triggered again before the last effect has ended. the repeat parameter is tilecontainer.numChildren so it will be triggered for as many children as needed.

            and i didn't use the "visible" parameter but instead i've set the images creation alpha to 0, and the fade effect would bring it up to 1.
            • 3. Re: repeater &amp; effects
              peterent Level 2
              Here are a couple of other options:

              1. Effects can have a delayed start, but you'll have to use ActionScript to set that;
              2. You can use the effectEnd event of one component to start the effect on the next component. Again, you'll need to do more ActionScript to make this happen.

              The Repeater is bit limiting in this case.