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>