Hover problem

[thomasdegry 0 Likes (Newbie)]

Hi guys

 

I'm encountering a problem with Tweenlite. I have an image masked by a sprite, and on hover of the sprite, I want the image to move up with 5 pixels and when I hover out of the sprite I want it to go down again with 5 pixels.

 

The problem is that the sprite and image his y position are relative, so when I hover very quick over and out it keeps moving because I work with +5 and -5.

 

I uploaded a video to demonstrate the problem and how it should be here (only 24 seconds) : http://cl.ly/442o3z020Z2f2E2P1t2B

And this is the code for this ! http://cl.ly/3e3y0P2A291W2h3K3D12

 

I already looked in to the overwrite thing but I don't really get what I should write, and I'm not even sure my solution is the overwrite thing?

 

Kind Regards and thanks in advance !

Thomas

[dominggi 0 Likes (Newbie)]

you should not do an addEventlistener each time you hover somewhere -these will all add up so this will trigger it twice/three times/4 times etc...

 

try copying those lines to outside of these functions.

[Carl 9,066 Likes (Superhero)]

Yeah, I can see how that is frustrating, but really TweenLite is doing exactly what it is being told to do.

In this case relative values may not be the best solution OR you may want to figure out the relative values BEFORE you create the tweens and then create each tween only once.

 

Another issue you are going to run into is that every time you create a new tween it is going to have the same duration. so if the user rolls over and out quickly it may take .3 seconds to move 1 pixel or 5 pixels (depending on how quick the roll out).

 

before I go any further I just want to note that TweenLite can generate relative target values if you provide "string" values.

 

TweenLite.to(mc, 1, {x: mc.x - 100})

 

can be written as

 

TweenLite.to(mc, 1, {x:"-100"})

 

pretty cool.

 

The crux of your problem isn't that you are using relative values, it is that you are creating new tweens every time you roll over and out of the target.

 

To avoid this, I would create 1 tween and then play it forwards on ROLL_OVER and reverse it on ROLL_OUT like so:

 

//create ONE tween ONCE
var upDown:TweenLite = TweenLite.to(mc, .5, {y:"-25", paused:true, reversed:true});


mc.mask = mask_mc
mc.buttonMode = true;

mc.addEventListener(MouseEvent.ROLL_OVER, mcUpDown);
mc.addEventListener(MouseEvent.ROLL_OUT, mcUpDown);

function mcUpDown(e:MouseEvent):void{
//toggle the direction of the tween
upDown.reversed = !upDown.reversed;
upDown.resume();
}

 

see it in action here: http://www.snorkl.tv/dev/upAndDown/

 

I have attached a cs4 fla.

 

I have to strongly commend you for providing that video!!! If everyone did that our lives would be sooooo much easier. Great Job!!!

[thomasdegry 0 Likes (Newbie)]

Hi

 

thanks for the fast and clear reply ! the videos are so much easier for both of us and I'm glad you want to help so you're welcome

I ran into a problem although. See the video, I show how I added the lines of code: http://cl.ly/0z211q451z0z373a1Q3q

 

If I declare the upDown:Tweenlite in the properties (so if I do private var upDown:TweenLite = TweenLite.to(_fotolader1, .3, {y:"-10", paused:true, reversed:true}) it gives me this error on launch so I did it in my funciton : "Cannot tween a null object".

 

Maybe it is because I try the reverso on a loader object? If so and there's nothing you can do, thanks anyway !

 

Th

[Carl 9,066 Likes (Superhero)]

it appears the reversed property is being set on the target of the tween (Loader) instead of the tween itself.

I don't know why that is.

I will try to find an answer.

 

ps, the videos are great for understanding how something is not performing properly. when trying to read code it makes it a touch more difficult than just seeing it as text.

[dominggi 0 Likes (Newbie)]

TweenMax is trying to tween the variable because it doesn't recognize the 'reverse' property.

 

try this:

mc.addEventListener(MouseEvent.ROLL_OVER, mcMouseHandler);
mc.addEventListener(MouseEvent.ROLL_OUT, mcMouseHandler);

 

function mcMouseHandler(event:MouseEvent):void
{
hoverTween = TweenMax.to(this, .5, {y:"-25", paused:true});
if (event.type == MouseEvent.ROLL_OUT)
{
	hoverTween.reverse(); 
} 
else
{
	hoverTween.play();
}
}

 

or a shorter if:

(event.type == MouseEvent.ROLL_OUT) ? alphaTween.reverse() : alphaTween.play();

[Carl 9,066 Likes (Superhero)]

Dominngi,

 

thanks for your contribution. although switching direction based on event type is a very good idea, your implementation re-introduces the initial problem the OP had.

your code creates a NEW tween on each interaction and tweens to relative values so it is very possible that new y values will be generated repeatedly causing the object to go "out of bounds".

 

if your tween is defined once outside the event handlers, it would take care of that issue.

 

TweenMax is trying to tween the variable because it doesn't recognize the 'reverse' property.

 

just to be clear, he is using "reversed" (with a d on the end) which is a valid tween property. it is still unknown to me why reversed[/b ]is being applied to the target of the tween and not the tween itself.

 

thanks again

 

c

[GreenSock 8,117 Likes (Superhero)]

My apologies - that actually was a problem in TweenMax. It should be fixed in the latest version. Again, sorry for the hassle. https://www.greensock.com/account/ and get it with the other bonus plugins/classes).