0 Replies Latest reply on Aug 31, 2008 11:46 AM by charger

    Fade in/out effect on an image

    charger
      Hi,

      I'm trying to create a slideshow with images that fade in and out.

      I have a canvas and that I add my images to a la:

      for(var index=0;index<imagelinks.length;index++){
      var image=new Image();
      image.id="image"+index;
      image.source=imagelinks[index];
      image.x="0" ;
      image.y="0" ;
      image.setStyle("horizontalAlign","center") ;
      image.setStyle("verticalAlign","middle") ;
      image.opaqueBackground="true" ;
      image.percentHeight="100" ;
      image.percentWidth="100" ;
      image.setStyle("showEffect",imagefade) ;
      image.setStyle("hideEffect",imagefade) ;
      childcanvas.addChild(image);
      image.visible=false;
      }

      Then I use the image.visible property to fade the images in and out on a button click:

      private function loadnextimage(event:Event):void {
      childcanvas.getChildAt(current_image_index).visible=false;
      current_image_index++;
      current_image_index=(current_image_index==image_count)?0:current_image_index;
      childcanvas.getChildAt(current_image_index).visible=true;
      }

      The problem I'm having is that the next image becomes visible before the previous image completes its fade out, with the result being that the fade in works fine but the fade out gets lost.

      I managed to kludge it by adding a timer that delays the next image becoming visible by 500ms (the default duration of the fade effect) but I'm not all that comfortable with this solution.

      Is there a way to delay the next image.visible=true solely based on whether the fade out effect from the previous image.visible.false has finished?

      Thanks

      M