[flexcoders] smooth image component fade effects

0 views
Skip to first unread message

stinasius@yahoo.com [flexcoders]

unread,
Nov 10, 2014, 8:28:24 AM11/10/14
to flexc...@yahoogroups.com
 

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>



__._,_.___
Posted by: stin...@yahoo.com
Reply via web post • Reply to sender • Reply to group • Start a New Topic • Messages in this topic (1)

.

__,_._,___

stinasius@yahoo.com [flexcoders]

unread,
Nov 10, 2014, 11:40:39 PM11/10/14
to flexc...@yahoogroups.com
 

any help guys?

__._,_.___
Posted by: stin...@yahoo.com
.

__,_._,___

abhinay.dronamraju@yahoo.com [flexcoders]

unread,
Nov 11, 2014, 6:43:50 PM11/11/14
to flexc...@yahoogroups.com
 

why not use a parallel effect instead of a timer.

__._,_.___
.

__,_._,___

abhinay.dronamraju@yahoo.com [flexcoders]

unread,
Nov 11, 2014, 6:44:07 PM11/11/14
to flexc...@yahoogroups.com

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

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

__._,_.___
.

__,_._,___

abhinay.dronamraju@yahoo.com [flexcoders]

unread,
Nov 11, 2014, 6:51:22 PM11/11/14
to flexc...@yahoogroups.com
 

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
{

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


__._,_.___
.

__,_._,___

stinasius@yahoo.com [flexcoders]

unread,
Nov 12, 2014, 12:41:06 AM11/12/14
to flexc...@yahoogroups.com
 

Thanks Guys.... worked like a charm. very smooth i must say

__._,_.___
Posted by: stin...@yahoo.com
.

__,_._,___
Reply all
Reply to author
Forward
0 new messages