• Coding

  • [AS3] Stopping Tween From Messing Up My Grid

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?
I tried to use event propagation and add/remove listeners to a parent movieclip which contains all the thumbs but that didn't fix the problem... here's my updated 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() { thumbsContainer.removeEventListener(MouseEvent.MOUSE_OVER, thumbOver);; }, 
			onComplete: function() { thumbsContainer.addEventListener(MouseEvent.MOUSE_OVER, thumbOver);;} } );
		}
		
		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() { thumbsContainer.removeEventListener(MouseEvent.MOUSE_OUT, thumbOut); }, 
			onComplete: function() { thumbsContainer.addEventListener(MouseEvent.MOUSE_OUT, thumbOut); }  } );
		}
You should use absolute values instead of relative for the tweens so that the timing for the on/out shouldn't affect the outcome of the tween.
arithma wroteYou should use absolute values instead of relative for the tweens so that the timing for the on/out shouldn't affect the outcome of the tween.
Yup, that's what I'm doing now. But now the e.target doesn't always reference the thumb itself, sometimes it references the thumbsContainer which contains all the thumbs. I'm thinking I should take the on/out effects into the ProjectThumb class itself. But in that case, I cannot use event propagation to add/remove listeners anymore... Any thoughts?
You should use the e.currentTarget. Never e.target
e.target references the object that is clicked, which is most probably a child of the grid element rather than that element itself.
arithma wroteYou should use the e.currentTarget. Never e.target
I did try that, didn't work either. And that's when I thought of internalizing the on/out tweens.