smooth image component fade effects

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

smooth image component fade effects

FlexCoders mailing list
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>
 

 

Reply | Threaded
Open this post in threaded view
|

Re: smooth image component fade effects

FlexCoders mailing list
any help guys?
Reply | Threaded
Open this post in threaded view
|

Re: smooth image component fade effects

FlexCoders mailing list
why not use a parallel effect instead of a timer.
Reply | Threaded
Open this post in threaded view
|

Re: smooth image component fade effects

FlexCoders mailing list
In reply to this post by FlexCoders mailing list
Try something like this.

 <?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>
 


 

Reply | Threaded
Open this post in threaded view
|

Re: smooth image component fade effects

FlexCoders mailing list
In reply to this post by FlexCoders mailing list
<?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>
 

Reply | Threaded
Open this post in threaded view
|

Re: smooth image component fade effects

FlexCoders mailing list
In reply to this post by FlexCoders mailing list
Thanks Guys.... worked like a charm. very smooth i must say