Buttons remember state of movieclip.

[Marieke2d]

Hello, I have an animation of an old fashioned scale with 3 states: hanging to the left, in the middle(level) and hanging to the right. You can go to the states by pressing 3 buttons. One for every state. So when I press button 1, the scales animate to the left hanging state. Button 2, the scales go level. button 3 the scales go to the right hanging state. 

When I press button 3 after button 1, the scale must go from left hanging state to right hanging state. So the button sees which state the movieclip is in(left, level or right) and animates to the right state.

It looks pretty simple but I can't get it to work.

Any help is much appreciated.

Thanks in advance 🙂

[Marieke2d]

Btw, it's a canvas project.

[JoãoCésar]

Hi.

Do you mind providing some screenshots of your stage and/or timeline so that the idea is more clear?

Regards,

JC

[Marieke2d]

[Marieke2d]

[Marieke2d]

So after pressing btn3, the scales animates from level state to 'right hanging state'

When I then click for instance, btn1 now, it should animate to 'left hanging state'

Hope I made myself more clear!

[kglad]

if you're doing that with timeline animation you'll need outro animations for the two non-level states.

[Marieke2d]

Hi kglad,

yes. If I understand it right, I wil have a timeline with all the animations possible with stops at the end?

So: from level to left, level to right, left to right, right to left, left to level etc?

Thanks 🙂

[kglad]

you only need 4 animations. level to left down and left up. left up and down to level.

then some code to gotoAndPlay the correct frame sequences.

[Marieke2d]

Ah yes I see.

Could you provide an example of the code for btn1? Just to send me in the right direction.

When I for instance press btn3, how does the btn3 know from what state to play?

[JoãoCésar · Accepted solution]

Here is an example:

JavaScript code:

var root = this;
var currentButton;

function main()
{
	document.body.style.backgroundColor = lib.properties.color;
	createjs.Touch.enable(stage);
	stage.enableMouseOver();
	
	setup();

	root.balance.gotoAndStop("middle");

	root.btn1.stop();
	root.btn1.mouseChildren = false;
	root.btn1.cursor = "pointer";
	root.btn1.on("click", animateBalance, null, false, { label: "left" });

	root.btn2.stop();
	root.btn2.mouseChildren = false;
	root.btn2.cursor = "pointer";
	root.btn2.on("click", animateBalance, null, false, { label: "middle" });

	root.btn3.stop();
	root.btn3.mouseChildren = false;
	root.btn3.cursor = "pointer";
	root.btn3.on("click", animateBalance, null, false, { label: "right" });

	currentButton = root.btn2;
	root.btn2.gotoAndStop("down");
}

function setup()
{
	// makes any MovieClip instance capable of playing from the current frame to another one in any direction
	createjs.MovieClip.prototype.playUntil = function(positionOrLabel, ease)
	{
		var duration;
		var to = this.timeline.resolve(positionOrLabel);
		
		this.tweenFrame = this.timeline.position;
		
		if (this.tweenFrame == null)
			return;

		duration = Math.abs(((to - this.tweenFrame) / lib.properties.fps) * 1000);
		
		createjs.Tween.get(this, { override: true }).to({ tweenFrame: to }, duration, ease).addEventListener("change", function(e)
		{
			var target = e.currentTarget.target;
			
			target.gotoAndStop(Math.round(target.tweenFrame));
			
			if (target.tweenFrame === to)
				e.currentTarget.removeAllEventListeners("change");			
		});
	};
}

function animateBalance(e, data)
{
	if (currentButton)
		currentButton.gotoAndStop("up");

	currentButton = e.currentTarget;
	currentButton.gotoAndStop("down");
	root.balance.playUntil(data.label, createjs.Ease.cubicInOut);
}

main();

FLA / source / download:
https://bit.ly/463cRXi

Don't worry about the prototype part. That only makes Movie Clips capable of playing timelines from a frame to another without "jumping" and you also need less animations.

Please let us know if something is not clear.

Regards,

JC

[Marieke2d]

O  M  G

This works exactly how it needs to work!

Thank you so much, both of you 🙂

Marieke

[JoãoCésar]

Awesome! You're welcome!

[kglad]

ditto!