Hey everyone,
I'm trying to layout some thumbs according to a grid and then when I mouse over one of the thumbs it should scale up from the center (not from the top left corner). Everything is going fine except when I mouse over and out relatively fast, the thumbs are moving out of place and the scaling is messing up. I cannot rely on the users not doing so, hence I need to find a solution for this issue.
Here's my code:
private function thumbOver(e:MouseEvent):void
{
TweenLite.to(e.target, 0.5, { x: e.target.x - offset, y: e.target.y - offset, scaleX:1.1, scaleY:1.1,
onStart: function() { e.target.removeEventListener(MouseEvent.MOUSE_OVER, thumbOut); },
onComplete: function() {e.target.addEventListener(MouseEvent.MOUSE_OVER, thumbOut);} } );
}
private function thumbOut(e:MouseEvent):void
{
TweenLite.to(e.target, 0.5, { x: e.target.x + offset, y: e.target.y + offset, scaleX:1, scaleY:1,
onStart: function() { e.target.removeEventListener(MouseEvent.MOUSE_OUT, thumbOver); },
onComplete: function() {e.target.addEventListener(MouseEvent.MOUSE_OUT, thumbOver); } } );
}
Any thoughts?