Mouse Over Tween Stopping Timeline

[Nebulous]

Hi Jack & Others,

 

I have a tween that makes 4 buttons appear on the screen... each of these buttons has a mouse over event that scales the image to 1.1 on and back to its original size on mouse out.

 

The problem I have is that if you mouse over one of the buttons, while they are still tweening to their start location they will just stop where they are.

 

Is there a way to get around this ?

 

Regards.

[X10]

Hi Nebulous,

Do you have some sample code you can show us?

 

X10

[Nebulous]

Sure thing.

public function showAnswers(answers:Array) {

		btnTimeLine = new TimelineLite;

		answerBox(answers[0], 1 , -300, 200,  { x:25 } );
		answerBox(answers[1] , 2 , -300, 300,  {x:25});
		answerBox(answers[2] , 3 , 600, 200, {x:300});
		answerBox(answers[3] , 4 , 600, 300, {x:300});
	}

	private function answerBox(txt:String, id:int, xcord:int, ycord:int, tweenOptions:Object = null ) {

		var i:Number = 0;
		var textFormat:TextFormat = new TextFormat();
		var textContainer:Sprite;
		var textField:TextField;

		textFormat.color = 0xFFFFFF;

		textContainer = new Sprite();

		textContainer.buttonMode = true;
		textContainer.graphics.lineStyle( 1, 0x000000 );
		textContainer.graphics.beginFill( 0x333333 );
		textContainer.graphics.drawRoundRect( 0, 0, 250, 60, 0, 0);
		textContainer.graphics.endFill();

		textContainer.mouseChildren = false;
		textContainer.name = 'question' + id.toString();;

		textContainer.y = ycord;
		textContainer.x = xcord;

		textField = new TextField();

		textField.autoSize = TextFieldAutoSize.CENTER;
		textField.defaultTextFormat = textFormat;

		textField.text = txt;

		textField.x = 60 - ( textField.width / 2 );
		textField.y = 15 - ( textField.height / 2 );

		textContainer.addChild( textField );
		btnTimeLine.append(new TweenLite(textContainer, 0.5, tweenOptions));
		textContainer.addEventListener(MouseEvent.ROLL_OVER, btnRollOver);
		textContainer.addEventListener(MouseEvent.ROLL_OUT, btnRollOut);
		textContainer.addEventListener(MouseEvent.CLICK, btnClick);
		addChild( textContainer );
	}

function btnRollOver(e:MouseEvent) {
		TweenLite.to(e.currentTarget, 0.2, {transformAroundCenter:{scaleX:1.1, scaleY:1.1}});
	}
	function btnRollOut(e:MouseEvent) {
		TweenLite.to(e.currentTarget, 0.2, {transformAroundCenter:{scaleX:1, scaleY:1}});
	}

 

So at the start, showAnswers is called, which makes the answer boxes slide in one at a time... however if you roll over one of them during their tween it will stop it straight away and that box will stay where it is.

[X10]

HI Nebulous, thanks for that.

From my (rather limited) knowledge, the first thing to try is changing the overwrite value so the tween in the btnRollOver and btnRollOut functions does not overwrite the current tween of putting the buttons on stage.

Otherwise, logically what needs to happen is the ROLL_OVER and ROLL_OUT event listeners need to go outside of the function creating them, which you could do in the main function with OnComplete();

 

Try:

 

TweenLite.to(e.currentTarget, 0.2, {transformAroundCenter:{scaleX:1.1, scaleY:1.1, overwrite:0}});

OR

TweenLite.to(e.currentTarget, 0.2, {transformAroundCenter:{scaleX:1.1, scaleY:1.1, overwrite:2}});

 

And let us know if that helps.

 

NOTE:

TweenLite only recognises OverWrite 0 or 1, you will need to init the Overwrite Manager for option 2 (AUTO) (Or use TweenMax):

 

import com.greensock.OverwriteManager;  //Import OverWrite Manager
import com.greensock.TweenLite;
OverwriteManager.init(OverwriteManager.AUTO); //Initialise it with the AUTO mode for all Tween by default

See more in the Docs here and the Tutorial here.

 

Let us know how you get on with the OverWrite option and if not you can try the OnComplete way.

 

X10