Creating a smooth loop effect

[Martagnan]

Hello,

I'm trying to create a looping fire effect using images fading in and out. Although not brilliant the effect is almost acceptable apart from a pause before the loop begins again. Is there anyway to get rid of the pause?

 

My code:

 

import com.greensock.TimelineMax;
import com.greensock.TweenLite;
import com.greensock.easing.*;

var timeline:TimelineMax = new TimelineMax({repeat:-1});


timeline.append(TweenLite.to(fl01, 0, {_x:0, _y:0}));
timeline.append(TweenLite.to(fl02, 0, {_alpha:0, _x:0, _y:0}));
timeline.append(TweenLite.to(fl03, 0, {_alpha:0, _x:0, _y:0}));
timeline.append(TweenLite.to(fl04, 0, {_alpha:0, _x:0, _y:0}));


timeline.append(TweenLite.to(fl01, 0.3, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl02, 0.3, {_alpha:90, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl02, 0.3, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl03, 0.3, {_alpha:90, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl03, 0.3, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl04, 0.3, {_alpha:90, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl04, 0.3, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl01, 0.3, {_alpha:90, ease:Linear.easeNone}));

 

Note: We can't use any random maths (hence the poor fallback version)

 

Many thanks

 

Martin

[Carl]

I don't see anything that would suggest a pause is taking place in your code, unless the last tween on fl01 to alpha:90 may just not be that noticeable.

 

Can you upload a simple file with just this code and the necessary assets so that we can test it for ourselves?

 

you could also experiment with using yoyo:true so that the effect is more like a smooth pulse of fading in and out instead of everything abruptly jumping back to alpha:0. of course that sort of flicker-effect may be what you intended and that is absolutely fine.

 

var timeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

[Martagnan]

Hi Carl,

I tried yoyo but the animation just stopped - I probably used it wrong

 

I've attached a simple file as requested. Even after clearing out all other elements the animation still has a slight pause.

 

Many thanks

 

Martin

[GreenSock]

The biggest problem is that you didn't name your fl05 instance on the stage. Doh!

 

Another issue is that both of your fl05 tweens towards the end of your timeline go to _alpha:20 whereas all the other ones go from 20 to 50. So it makes total sense that there'd be a visual stagnation at that point.

 

All you need to do is name your fl05 instance and then use this code:

 

import com.greensock.TimelineMax;
import com.greensock.TweenLite;
import com.greensock.easing.*;

var timeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

TweenLite.to(fl01, 0, {_x:0, _y:0});
TweenLite.to(fl02, 0, {_alpha:10, _x:0, _y:0});
TweenLite.to(fl03, 0, {_alpha:10, _x:0, _y:0});
TweenLite.to(fl04, 0, {_alpha:10, _x:0, _y:0});
TweenLite.to(fl05, 0, {_alpha:10, _x:0, _y:0});


timeline.append(TweenLite.to(fl01, 0.1, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl02, 0.1, {_alpha:50, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl02, 0.1, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl03, 0.1, {_alpha:50, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl03, 0.1, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl04, 0.1, {_alpha:50, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl04, 0.1, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl05, 0.1, {_alpha:20, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl05, 0.1, {_alpha:50, ease:Linear.easeNone}));
timeline.append(TweenLite.to(fl01, 0.1, {_alpha:90, ease:Linear.easeNone}));

[Martagnan]

Absolutely brilliant! Many thanks for your time.

 

It's an unfortunate compromise after I discovered random maths we're not allowed in banners published by Google. Our original flames we're these http://www.istockphoto.com/stock-flash- ... st=5c35529

 

Oh well...

 

Thanks again!