[flexcoders] smooth image component fade effects

[stinas...@yahoo.com [flexcoders]]

Hello guys, have an image component that loads 3 images. i would like it to be 
that as one image is fading out, another is fading in rather than have the 
first image fade out then the other jumps in. below is my code and for some 
reason am not getting the desired results. any help is appreciated.
 

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
 layout="vertical"
 creationComplete="imgProcess()">
 

 <mx:Script>
 <![CDATA[
 private var index1:int=0;
 

 /********** Image Slide Show **********/
 

 private var pictures:Array=["main pic.jpg", "library.jpg", "grad.jpg"];
 

 private function changeImage(e:TimerEvent):void
 {
 img.load("assets/" + pictures[index1]);
 if (index1 < pictures.length - 1)
 index1++;
 else
 index1=0;
 }
 

 private function imgProcess():void
 {
 

 img.setStyle("completeEffect", fadeIn);
 img.setStyle("hideEffect", fadeOut);
 

 img.load("assets/" + pictures[0]);
 index1++;
 

 var timer:Timer=new Timer(6000);
 timer.addEventListener(TimerEvent.TIMER, changeImage);
 timer.start();
 }
 ]]>
 </mx:Script>
 

 <mx:Fade id="fadeIn"
 alphaFrom="0"
 alphaTo="1"/>
 <mx:Fade id="fadeOut"
 alphaFrom="1"
 alphaTo="0"/>
 

 <mx:Canvas width="1280"
   height="546">
 <mx:Image left="0"
  top="0"
  id="img"/>
 </mx:Canvas>
 

 
 </mx:Application>