Skip to main content
Marieke2d
Inspiring
November 10, 2023
Answered

Buttons remember state of movieclip.

  • November 10, 2023
  • 3 replies
  • 1110 views

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 🙂

 

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    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

    3 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    November 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 = "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
    Marieke2dAuthor
    Inspiring
    November 10, 2023

    O  M  G

    This works exactly how it needs to work!

    Thank you so much, both of you 🙂

     

    Marieke

    JoãoCésar17023019
    Community Expert
    Community Expert
    November 10, 2023

    Awesome! You're welcome!

    JoãoCésar17023019
    Community Expert
    Community Expert
    November 10, 2023

    Hi.

     

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

     

    Regards,

    JC

    Marieke2d
    Marieke2dAuthor
    Inspiring
    November 10, 2023

     

    Marieke2d
    Marieke2dAuthor
    Inspiring
    November 10, 2023

     

    Marieke2d
    Marieke2dAuthor
    Inspiring
    November 10, 2023

    Btw, it's a canvas project.