[flexcoders] Re: smooth image component fade effects

[abhinay.dronamr...@yahoo.com [flexcoders]]

<?xml version="1.0" encoding="utf-8"?>
 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"; 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="imgProcess()">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <fx:Script>
 <![CDATA[
 import mx.events.EffectEvent;
 private var previousIndex:int=0;
 var timer:Timer=new Timer(6000);
 
 
 /********** Image Slide Show **********/
 
 private var pictures:Array=["IMG_0066.JPG", "IMG_0068.JPG", "IMG_0072.JPG"];
 
 
 
 private function imgProcess():void
 {
 
 
 
 var length:int = pictures.length;
 
 if(length > 1){
 previousIndex = 1;
 img.source = "assets/" + pictures[0];
 img1.source = "assets/" + pictures[1];
 }
 
 
 
 timer.repeatCount = 0;
 timer.addEventListener(TimerEvent.TIMER, changeImage);
 timer.start();
 
 
 }
 
 
 
 protected function onFadeOut(event:EffectEvent):void
 {
 if(this.previousIndex == pictures.length - 1){
 previousIndex = 0;
 }else if(previousIndex >= 0){
 previousIndex = previousIndex +1;
 
 }
 var ig:Image = ((event.currentTarget as Fade).target as Image)
 ig.source= "assets/" + pictures[previousIndex];
 
 fadeIn.target = ig;
 if(img1 == ig){
 fadeOut.target = img;
 fadeIn.target = img1;
 }else{
 fadeOut.target = img1;
 fadeIn.target = img;
 }
 
 
 
 }
 
 private function changeImage(e:TimerEvent):void
 {
 fades.play();
 }
 
 protected function fadeIn_effectEndHandler(event:EffectEvent):void
 {
 timer.stop();
 timer.start();
 }
 
 ]]>
 </fx:Script>
 <fx:Declarations>
 <s:Parallel id="fades" duration="5000"  repeatCount="1"   >
 <mx:Fade id="fadeIn" duration="5000" target="{img1}"
 alphaFrom="0" effectEnd="fadeIn_effectEndHandler(event)"
 alphaTo="1"/>
 <mx:Fade id="fadeOut" duration="5000" target="{img}" 
effectEnd="onFadeOut(event)" 
 alphaFrom="1"
 alphaTo="0"/>
 </s:Parallel>
 
 </fx:Declarations>
 
 
 <mx:Canvas >
 <mx:Image left="0" alpha="1" height="200" width="200"
  top="0"
  id="img"/>
 <mx:Image left="0" alpha="0" height="200" width="200"
  top="0"
  id="img1"/>
 </mx:Canvas>
 </s:WindowedApplication>