how to make transition animation when changing photos in Flex

Question

I have an image in Flex I want to change the image with actionscript to show some other image say every 3 seconds or so. I also want to make transition between the image and the next one for instance fade in/out. What is the best way to do so?

Answer 1

Picking things up when you already have an image up:

Use the Fade effect on the first image. Make its alphaFrom="1.0" and its alphaTo="0.0". It willthen dispatch an EffectEnd event. In your handler for that event, switch the target image source and call another Fade effect, that switches the alphaFrom and alphaTo values and switches the image source. Then just use a timer or setTimeout (or setInterval) to stay on the image a certain length of time, then rinse and repeat. Look at the example in the link provided above. It's really not hard.

Answer 2

Use a timer to change the image source attribute in conjunction with Fade Effects.

The general gist is:

1. Timer Ends
2. Start Fade Out Effect
3. On Fade Out Effect complete, change image source
4. Start Fade In Effect
5. On Fade in Complete, restart timer

Answer 3

If you want to fade in the new image while at the same time fading out the old, use a Parallel object:

var p:Parallel = new Parallel();
var fadeOut:Fade = new Fade(image1);
fadeOut.alphaFrom = 1;
fadeOut.alphaTo = 0;
var fadeIn:Fade = new Fade(image2);
fadeIn.alphaFrom = 0;
fadeIn.alphaTo = 1;
p.addChild(fadeOut);
p.addChild(fadeIn);
p.duration = 1000; //time in ms
p.play();