Simple Slideshow with Fade Effect

Hi,
In some of the slide show applications slide transition will be performed before the second image loaded. So the slide show application has blank screen without any images on screen after loading the second image then it start showing the image with effect. In below example avoid the blank screen and it will check whether the second image was loaded or not. If loaded the image it start the transition otherwise it remains on the first image to avoid the blank screen. In below example has avoid the blank screen and apply smooth fade effect when transistions.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()">
<mx:Script>
<![CDATA[
import mx.effects.Fade;
import mx.controls.Button;
import mx.containers.HBox;
import mx.controls.ProgressBar;
import mx.core.UIComponent;

private var image_container:UIComponent;
private var first_mc:Sprite;
private var second_mc:Sprite;
private var load_mc:Sprite;
private var _selectedIndex:Number=0;
private var timer:Timer;
private var _imgArray:Array = ["http://www.digitalphotoartistry.com/rose1.jpg","http://blogs.warwick.ac.uk/images/spjyoung/2006/02/20/rose.jpg","http://www.mccullagh.org/db9/1ds2-2/rose-side-view.jpg"];

private function onInit():void
{
image_container = new UIComponent();
first_mc = new Sprite();
image_container.addChild(first_mc);
second_mc = new Sprite();
image_container.addChild(second_mc);
addChild(image_container);

image_container.width = 400;
image_container.height = 400;
image_container.x = 20;
image_container.y = 20;

load_mc = first_mc;
loadImage();
startTimer();
}

private function startTimer():void
{
timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER,loadImges);
timer.start();
}

private function loadImges(evt:TimerEvent):void
{
if(_selectedIndex >= _imgArray.length-1)
{
_selectedIndex = -1;
}
else
{
_selectedIndex++;
loadImage();
}
}

private function loadImage():void
{
var urlLoader:Loader = new Loader();
var urlRequest:URLRequest =new URLRequest(_imgArray[_selectedIndex]);
urlLoader.contentLoaderInfo.addEventListener(Event.OPEN,onImageOpen);
urlLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImageLoaded);

try
{
urlLoader.load(urlRequest);
}
catch(err:Error)
{
trace("Error");
}
}

private function onImageOpen(evt:Event):void
{
if(first_mc.numChildren > 0)
first_mc.removeChildAt(0);
if(second_mc.numChildren > 0)
second_mc.removeChildAt(0);

var num:Number = switchNumber(_selectedIndex);
if(num == 1)
{
load_mc = first_mc;
fadeOutImage(second_mc);
fadeInImage(first_mc);
}
else
{
load_mc = second_mc;
fadeOutImage(first_mc);
fadeInImage(second_mc);
}
}

private function onImageLoaded(evt:Event):void
{
load_mc.addChild(evt.target.content);
load_mc.width = 380;
load_mc.height = 300;
}

private function switchNumber(num:Number):Number
{
var ind:Number = num%2;
return (ind == 0)?1:2;
}

private function fadeInImage(target:Sprite):void
{
var _fadeIn:Fade = new Fade(target);
_fadeIn.alphaFrom = 0;
_fadeIn.alphaTo = 1;
_fadeIn.duration = 400;
_fadeIn.play();
}

private function fadeOutImage(target:Sprite):void
{
var _fadeOut:Fade = new Fade(target);
_fadeOut.alphaFrom = 1;
_fadeOut.alphaTo = 0;
_fadeOut.duration = 400;
_fadeOut.play();
}

]]>
</mx:Script>
</mx:Application>