I'm using Flashdevelop (because I just want to fool around a bit and see if flash is something I want to spend time on), and that means it's really hard to find any useful tutorials, manuals and scripts. Because almost all assume one is using CS3, and are full of design modes, .fla's, timelines and frames

Still, I managed to put together (copying and pasting from several scripts and tutorials I found online) an image slideshow.
I've got two image items covering each other. In the one on top I load the first picture, in the one on the bottom I load the picture to be shown next. Then the pic on top fades out, showing the pic underneath. Once the pic on top has become invisible, I load the pic now visible in the top image item and make it visible again. Then, I load the pic to be shown next in the bottom image item, etc. etc.

The images nicely fade one into the other when I click on the image.
But... when I make the slideshow advance on it's own, I get an ugly flickering between pics. One pic fades into the second pic. Then for a fraction of a sec I see the black background (the pic disappears), it reappears and fades into the next pic.

I guess it's got something to do with the fade out effect duration, or the fact that the goNext() is executed before the pic is completely loaded? Or maybe it's something else, who knows. I'm a complete newbie when it comes to this stuff

Here's my code:

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			
			import com.asfusion.controls.PhotoshowImage;

			//all the pictures
			private var pictures:Array;
			//the index of the array that corresponds to currently shown picture
			private var currentIndex:int = 0;
			
			//actual picture object that is currently shown
			[Bindable]
			private var currentPicture:PhotoshowImage;
			//next picture object to be shown
			[Bindable]
			private var nextPicture:PhotoshowImage;
			
			// show the next picture in set
			private function goNext():void
			{
				if (currentIndex < pictures.length - 1){
					currentIndex++;
				}
				else {
					currentIndex = 0;
				}
				switchPictures();
			}

			private function switchPictures():void{
				fadeIn.end();
				fadeOut.end();
				nextPicture = pictures[currentIndex];
				picture2.visible = false;			
			}

			private function updateCurrentPicture():void{
				
				//set the current picture based on current index
				currentPicture = pictures[currentIndex];
				goNext(); // without this line I have to click on the image and it all works smoothly
			}
				
			//this changes the set of pictures
			public function set dataProvider(value:Array):void
			{
				pictures = value;
				currentIndex = 0;
				updateCurrentPicture();
			}
			
			public function  get dataProvider():Array
			{
				return pictures;
			}
		]]>
	</mx:Script>
	
	<mx:Resize id="resize" />

	<!-- taken straight from the docs -->
	<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>
	
	<mx:Canvas styleName="imageHolder" id="canvasSlideshow" width="500" height="500" horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:ProgressBar styleName="progressBar" id="progressBar1" source="{picture1}" visible="{progressBar1.percentComplete != 100}" />
		<mx:ProgressBar styleName="progressBar" id="progressBar2" source="{picture2}" visible="{progressBar2.percentComplete != 100}" />
		 
		<mx:Image top="0" left="0" id="picture1" 
			source="assets/photoshow/images/{nextPicture.name}" click="goNext()"/>
		<mx:Image top="0" left="0" id="picture2" 
			source="assets/photoshow/images/{currentPicture.name}" hideEffect="{fadeOut}" 
			complete="picture2.visible = true" click="goNext()"/>
	</mx:Canvas>
	
	<mx:Text y="320" height="47" styleName="caption"
		text="{currentPicture.caption}" />

</mx:Canvas>
Any ideas?