CODEWITHSUNDEEP
apache-flexactionscript-3
Tam
Tam

Reputation: 12042

how to make transition animation when changing photos in Flex

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?

Upvotes: 0

Views: 1431

Answers (3)

PIM
PIM

Reputation: 314

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();

Upvotes: 1

JeffryHouser
JeffryHouser

Reputation: 39408

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

Upvotes: 1

Robusto
Robusto

Reputation: 31883

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.

Upvotes: 1

Related Questions