wiggling images+ mouseover function = conflicting tweens

[andikoeppke]

Hey guys,

 

so I´ve been experimenting with TweenLite and TweenMax. I´m currently working on flash document containing 9 images, all of them moving slightly to the left/right/top/buttom in order to make the flash document appear more vivid (wiggle effect). Each image is supposed to be scaled times 1.5 on mouseover and move to the center. I hope i´ve explained it well.

 

I´ve also attached the swfjust in case some of you can take the time and look at it.

 

So here´s how I´ve built it: for the sake of simplifying it i will just post the code for three images instead of all 9.

 

 

Imported classes:

import com.greensock.*;
import com.greensock.easing.*;

 

tweens for the mouseoverfunction when the images center and are scaled up:

var myTween:TweenLite = new TweenLite(end1_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5});
myTween.pause();
var myTween2:TweenLite = new TweenLite(end2_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5});
myTween2.pause();
var myTween3:TweenLite = new TweenLite(end3_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5});
myTween3.pause();

 

eventListeners for MouseOver

end1_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler1);
end2_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler2);
end3_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler3);

 

 

eventListener for MouseOut (Tween is supposed to be reversed and images set back to original pos/size

end1_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler1);
end2_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler2);
end3_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler3);

 

 

functions containing the "wiggle" or "float" effect of the images when there´s no mouseover. I´ve created two functions containing tweens that call eachother on complete so I get an infinite loop.

function doTween1():void {
var wiggle1:TweenLite = new TweenLite(end1_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween2, x:end1_mc.x + Math.random() * 10, y:end1_mc.y + Math.random() * 10, ease:Sine.easeInOut});
var wiggle2:TweenLite = new TweenLite(end2_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween2, x:end2_mc.x + Math.random() * 10, y:end2_mc.y + Math.random() * 10, ease:Sine.easeInOut});
var wiggle3:TweenLite = new TweenLite(end3_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween2, x:end3_mc.x + Math.random() * 10, y:end3_mc.y + Math.random() * 10, ease:Sine.easeInOut});

function doTween2():void {
var wiggleBack1:TweenLite = new TweenLite(end1_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween1, x:end1_mc.x - Math.random() * 10, y:end1_mc.y - Math.random() * 10, ease:Sine.easeInOut});
var wiggleBack2:TweenLite = new TweenLite(end2_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween1, x:end2_mc.x - Math.random() * 10, y:end2_mc.y - Math.random() * 10, ease:Sine.easeInOut});
var wiggleBack3:TweenLite = new TweenLite(end3_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween1, x:end3_mc.x - Math.random() * 10, y:end3_mc.y - Math.random() * 10, ease:Sine.easeInOut});

 

now I call the first function and start the animation loop:

doTween1()

 

 

RollOver handler for every single image, starting the corresponding scale/position tween that I´ve specified in the beginning as a var inside a function. in order to have the hovered image on top i´ve added the addChild command:

function rollOverHandler1(event:MouseEvent):void {
addChild(end1_mc);
myTween.play();

}
function rollOverHandler2(event:MouseEvent):void {
addChild(end2_mc);
myTween2.play();

}
function rollOverHandler3(event:MouseEvent):void {
addChild(end3_mc);
myTween3.play();
}

 

 

Same for RollOut: Tween is reversed:

function rollOutHandler1(event:MouseEvent):void {
myTween.reverse();
}
function rollOutHandler2(event:MouseEvent):void {
myTween2.reverse();
}

function rollOutHandler3(event:MouseEvent):void {
myTween3.reverse();
}

 

 

So far so good.

 

When I compile it works fine, wiggle movement looks quite cool and MouseOver animation runs. However, I notice that the Tweens (wiggle animation and mouseover animation) get in conflict with each other and mess up the whole animation. Sometimes the scaling stops or it jumps to random positions.

 

I´ve tried various overwrite options with the overwrite manager but couldn´t quite figure out a way to solve it. Maybe my document´s too buggy anyway and I need to write a totally different code that simplyfies everything.

 

Any help is greatly appreciated, I know it´s a big chunk of code to look at but I´m really stuck here.

Thanks and best wishes!

Untitled-1.zip

[Carl]

Hi and Welcome to the GreenSock forums.

 

Yeah, you have a few things going on that are going to cause some odd results.

When your mouse-countrolled tween reverses it is always going to want to go back to where it started, but your wiggle-float tweens at the same time are trying to move that object as well.

 

Keep in mind that when you set up your tweens like so:

var myTween:TweenLite = new TweenLite(end1_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5});

 

Whenever it plays and reverses it is always going to want to follow the same path between where the mc was when the tween was created and where that tween is telling it to go.

 

The problem is that your wiggle-float tweens are getting in the way. When you try to reverse or play the x/y values are always getting stomped by your wiggle tweens. the scaling still happens on ROLL_OVER and ROLL_OUT because there are no other tweens that are fighting for the scale.

 

I think it would be best to devise a system that allows you to apply the wiggle/float effect only when your over/out tween isn't playing. I would suggest you start a new file with a single image and experiment with some ways of communicating with and controlling the various tweens. You can use your myTween1's onComplete to start your wiggle effect and use your ROLL_OVER to call a function to stop the wiggle from happening.

 

Also instead of playing and reversing the same tween on ROLL_OVER and ROLL_OUT I would create NEW tweens each time those mouse events happened so that you record fresh starting and ending values.

 

Since your objects are going to constantly be wiggling you want your roll_over tween to start fresh from the current position of the target object, not where the target object was when you first created myTween1.

 

Also keep in mind that every time the object moves away from the mouse, a ROLL_OUT will fire which in your case will immediately tell the existing tween to reverse(). That can cause some jumpiness as well.

 

Hopefully some of this helps you work out the issues. In all honesty, what you are trying to do is fairly complicated and will take some time to work out.

[andikoeppke]

Thanks for the reply, I think I understand what you´re saying. However, there´s one bit I can´t quite figure out:

 

Also instead of playing and reversing the same tween on ROLL_OVER and ROLL_OUT I would create NEW tweens each time those mouse events happened so that you record fresh starting and ending values.

 

How do I achieve this?

 

Anyway thanks for your elaborate reply, it helped me a great deal!

[Carl]

Sure thing.

 

 

function rollOverHandler1(event:MouseEvent):void {
addChild(end1_mc);
new TweenLite(end1_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5})
}

 

I do want to clarify though, the way you have it set up currently with 1 tween to play() and reverse() is what I would recommend most of the time as it keeps the timing consistent.

 

The reason I am suggesting new tweens is because your object is going to be moving around (wiggling/floating) and it will be better to have each tween on rollover/rollout start the object from where it currently is at the time of mouse interaction.

[andikoeppke]

Awesome, thanks for the input. As soon as I come up with something that´s fully working I´ll post the code =).