• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Buttons remember state of movieclip.

Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

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 🙂

 

Views

370

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 10, 2023 Nov 10, 2023

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 = "poin
...

Votes

Translate

Translate
Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

Btw, it's a canvas project.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

Hi.

 

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

 

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

Marieke2d_0-1699621231301.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

Marieke2d_0-1699621289938.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

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 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

O  M  G

This works exactly how it needs to work!

Thank you so much, both of you 🙂

 

Marieke

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

Awesome! You're welcome!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

LATEST

ditto!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines