[flexcoders] Slideshow problem: Preloading a hidden image resets its visible property

[Tony Wu]

Hi I am creating a slideshow that display images from a RSS feed. It has
two images overlapping each other.  The logic is simple: When one image
is shown, I preload the next image in the hidden second image, then I
flip them on a timer with fade in/out effects.

The problem I have is: For the hidden image, although the image.visible
property is set to false. when preloading a new image 
image.load(newImageURL), the image will become visible (not hidden) -
although I can reset it to invisible right away, however, this produce a
quick screen flicker. I guess when loading anew  image,  Flex is
recreating a brand new object while discarding original properties.

How can I keep the image hidden? Or is there a better approach with
doing fade in/out in picture slideshow?

Thanks for your time and efforts.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" width="100%" height="100%" creationComplete="init()"
horizontalScrollPolicy="off" verticalScrollPolicy="off">

<mx:Script source="assets/pictureScript.as" />
<mx:HTTPService id="picturesRSS" useProxy="false"
result="parsePictures();"/>
<mx:Fade id="fadeOut" duration="2000" alphaFrom="1" alphaTo="0" />
<mx:Fade id="fadeIn" duration="2000" alphaFrom="0" alphaTo="1" />
     <mx:Panel id="panelPictures" width="100%" height="100%"
layout="absolute" title="{gPictureCaption}"  borderAlpha="1"
borderColor="#37beff" borderThicknessBottom="5" borderThicknessLeft="5"
borderThicknessRight="5" verticalScrollPolicy="off"
horizontalScrollPolicy="off">
         <mx:DataGrid visible="false" x="10" y="267" width="319"
height="33" id="picturesGrid"
dataProvider="{picturesRSS.lastResult.rss.channel.item}" />
         <mx:Image visible="false" id="pictureImg2" top="3" left="3"
right="3" bottom="3" scaleContent="true" mouseUp="openImage();" 
hideEffect="{fadeOut}" showEffect="{fadeIn}" />
         <mx:Image visible="false" id="pictureImg" top="3" left="3"
right="3" bottom="3" scaleContent="true" mouseUp="openImage();"
hideEffect="{fadeOut}" showEffect="{fadeIn}" />
         <mx:Label visible="true" text="{gPictureCaption}"
color="#ffffff" id="imgTitle" fontSize="12" bottom="3" height="30"
left="10" right="10" mouseDown="showDebug()"/>
     </mx:Panel>
</mx:Application>

//=== here's the code for doing the preloading / flipping, all gXXXX are
global variables

         public function doTimerEvent(evt:TimerEvent):void {
             slideshow();
         }

         public function slideshow():void {

             if(!gImageInitialized) {  //== initialize for one time only
                 imgCaption1 = loadNextImage(pictureImg);
                 gPictureCaption = imgCaption1;
                 gImageInitialized = true;
             }

             if(!gImageFlip) {   // now do the image flipping, we preload
the next picture so it's smooth
                 gPictureCaption = imgCaption1;
                 pictureImg.visible = true;
                 pictureImg2.visible = false;
                 imgCaption2 = loadNextImage(pictureImg2);
             } else {
                 gPictureCaption = imgCaption2;
                 pictureImg2.visible = true;
                 pictureImg.visible = false;
                 imgCaption1 = loadNextImage(pictureImg);
             }
             gImageFlip = !gImageFlip;

         }

         public function loadNextImage(imageObj:Object):String {
             gImageIndex++;
             if(gImageIndex>=gImageArray.length) gImageIndex = 1;
             var newImgSrc:String = gImageArray[gImageIndex].sizedURL;
             if(newImgSrc!="") {
                 imageObj.load(newImgSrc);
                 imageObj.visible = false;
             }
             return gImageArray[gImageIndex].caption;
         }