how do you do muliple tween after each other?

[matthy]

Hi, i am new to tweenMax and i am trying to make a sort of ligth flashbulb.

 

what ive got is:

var myTween:TweenMax = new TweenMax(emmer, 4, {delay:0, glowFilter:{color:0x00A4FF, alpha:1, blurX:100, blurY:100, strength:10, quality:3}});
myTween.play();	

 

what works is that is glowsUp but it stay's glowing what i dont want.

 

i know you have a option to tell him to remove the glow after its finished. But i want the glow to stay for like 5 seconds and then smoothly shrink like it smoothly is growing now at the start. i have seen things like reverse but i don't really know how to use it all especialy because it are 2 tweens after each other,

 

anyone knows how to make it work?

 

cheers

Matthy

[GreenSock]

It should be as simple as using the "repeat", "yoyo", and "repeatDelay" special properties:

 

var myTween:TweenMax = new TweenMax(emmer, 4, {glowFilter:{color:0x00A4FF, alpha:1, blurX:100, blurY:100, strength:10, quality:3}, repeat:1, yoyo:true, repeatDelay:5});

 

Or you could do two separate tweens if you prefer. But it seems cleaner to just use the one.

[matthy]

wow thanks for the help!

but can you plz also tell me how to do it in 2 tweens? its not applicable for this effect but you have more freedom if you could do it in separate tweens.

like the steps:

1. glow

2. change aplha

3. move it

4. remove glow.

 

especially then it would be cleaner.

[GreenSock]

Here's the cleanest way to do it - place the tweens into a TimelineLite so that you can control the entire sequence as a whole:

 

function buildAnimation():TimelineLite {
   var tl:TimelineLite = new TimelineLite();
   tl.append( new TweenMax(emmer, 4, {glowFilter:{color:0x00A4FF, alpha:1, blurX:100, blurY:100, strength:10, quality:3}}) );
   tl.append( new TweenMax(emmer, 1, {alpha:0.5}) );
   tl.append( new TweenMax(emmer, 2, {x:100, y:300}) );
   tl.append( new TweenMax(emmer, 2, {glowFilter:{color:0x00A4FF, alpha:0, blurX:0, blurY:0, strength:0}}) );
   return tl;
}

 

Then you could control the entire sequence like this:

 

var animation:TimelineLite = buildAnimation();
animation.pause();
animation.currentProgress = 0.5; //skips to halfway through the animation
animation.reverse(); 
//...and so on...

 

If you're not familiar with TimelineLite, I would highly recommend watching the video at http://www.greensock.com/timeline-basics/. It can really change your entire animation workflow and open new opportunities.

 

You could accomplish the same sort of animation using delays in your tweens, but I really like wrapping them in a TimelineLite because not only is it easier to build progressively with append(), but it also gives you much more flexible control. Try it. You'll like it.

[matthy]

hey thank you very much for the great support!

i will try it out a.s.a.p.