Multiple Tweens?

[walkerau]

I'm not sure exactly what the issue is - but I have a flash piece involving some buttons that have a lot of tweens attached for effects on mouse over/off. It works fine on first glance, but if you click a thumb and rollover/off the thumb next to it real fast, it doesn't finish the some of the tweens I've noticed. I'm pretty sure this might have something to do with the variable prevSlide being changed in before the tweens have finished...but not sure exactly. Here is the link to the swf - http://dev.stoneig.com/soliant/homeflash.html

And below is the code attached to the buttons - sorry for the length, just a lot of tweens.


var prevSlide = 1;

function getSlide(event:MouseEvent) {
for (var i=1; i<5; i++) {
if (event.currentTarget == this['thumb' + i]) {
if (prevSlide != i) {
//Remove Rollout events from hit thumb and add events back to previous thumb
event.currentTarget.removeEventListener(MouseEvent .ROLL_OUT,thumbOut);
var heightTween:Tween = new Tween(this['thumb' + prevSlide], "y", Strong.easeOut, this['thumb' + prevSlide].y, 357, 10, false);
TweenLite.to(this['thumb' + prevSlide]['yellowRectangle'], .5, {tint:0xf4cc27});
var alphaTween:Tween = new Tween(this['thumb' + prevSlide]['arrowButton'], "alpha", Strong.easeOut, this['thumb' + prevSlide]['arrowButton'].alpha, .65, 10, false);
var alphaTween2:Tween = new Tween(this['thumb' + prevSlide]['logo1'], "alpha", Strong.easeOut, this['thumb' + prevSlide]['logo1'].alpha, .65, 10, false);
TweenFilterLite.to(this['thumb' + prevSlide]['logo1'], .5, {colorMatrixFilter:{saturation:1, hue:0}});
this['thumb' + prevSlide].addEventListener(MouseEvent.ROLL_OUT, thumbOut);
//play hit slide, remove previous slide
this['slide' + prevSlide].gotoAndPlay(1);
this['slide' + i].gotoAndPlay(2);
prevSlide = i;
}
}
}
}
// Thumb RollOver Function
function thumbOver(event:MouseEvent) {
var heightTween:Tween = new Tween(event.currentTarget, "y", Strong.easeOut, event.currentTarget.y, 347, 10, false);
TweenLite.to(event.currentTarget['yellowRectangle'], .5, {tint:0xeeb30f});
var alphaTween:Tween = new Tween(event.currentTarget['arrowButton'], "alpha", Strong.easeOut, event.currentTarget['arrowButton'].alpha, 1, 10, false);
var alphaTween2:Tween = new Tween(event.currentTarget['logo1'], "alpha", Strong.easeOut, event.currentTarget['logo1'].alpha, 1, 10, false);
TweenFilterLite.to(event.currentTarget['logo1'], .5, {colorMatrixFilter:{saturation:1, hue:340}});
}
// Thumb RollOut Function
function thumbOut(event:MouseEvent) {
var heightTween:Tween = new Tween(event.currentTarget, "y", Strong.easeOut, event.currentTarget.y, 357, 10, false);
TweenLite.to(event.currentTarget['yellowRectangle'], .5, {tint:0xf4cc27});
var alphaTween:Tween = new Tween(event.currentTarget['arrowButton'], "alpha", Strong.easeOut, event.currentTarget['arrowButton'].alpha, .65, 10, false);
var alphaTween2:Tween = new Tween(event.currentTarget['logo1'], "alpha", Strong.easeOut, event.currentTarget['logo1'].alpha, .65, 10, false);
TweenFilterLite.to(event.currentTarget['logo1'], .5, {colorMatrixFilter:{saturation:1, hue:0}});
}

[earthwyrm]

I had a similar problem animating a bunch of star objects around an arbitrary anchor point using the Tween class, and in the end I ended up making my own animating function using Event.ENTER_FRAME, math and too much spare time. I'll be interested in seeing if anyone can figure a way around this, cos it bugged me for ages.

[aidanmack]

Hmm could be somthing to do with the timings. Its incredibly annoying and somthing that took my boss flipin ages to figure out!
try putting in a if statement for each tween that sets, its time to 9999.

As shown in the below example

if (tweenobject._y_) tweenobject._y_.time = 9999
tweenobject._y_ = new Tween(tweenobject, "y", Bounce.easeOut, 150, 500, 25,false);

[aidanmack]

Could i also just ask what you used for the blur effect on the images on your homeflash? its really nice looking!

[walkerau]

I think I figured it out...well not what was causing it, but a solution. I was using TweenLite for some of the tweens but not all. I switched up the tweens to all be TweenLite. It not only cleaned up the code, but seemed to fix the issue. I think it helps because it automatically overwrites tweens when they're changed due to an event.

The blur effect was actually done on the stage and not through AS - but it could be done either way. All I did was start out with a blur filter applied at 45 - high quality and then tweened to 0.

[martiansam]

Good that you have resolved this issue. However, just for the sake of information, this issue is caused when we have multiple tweens epecially when we trigger a new tween object before the last one has fired the completion event.

This causes the memory leak in flash which becomes uncontrollable unless it is handled carefully right from the begining.

The solution is to make sure that all the tween objects are destroyed completely before assigning the same name to another tween object by assigning them a null value after the completion. If it happens so that another tween has to be triggered by the same name, call the completion event of the previous tween and assign the null value to this tween.

I had created an custom Accordion component in AS3 which used a lot of tweens. Everything worked fine untill it was embeded in the engine which in turn used many more tweens for various effects. This is when I came across this information of memory leak.