Skip to main content
Inspiring
August 20, 2021
Answered

Constrained movement in Animate

  • August 20, 2021
  • 1 reply
  • 414 views

Hello,
With Animate html5, I want myClip to be able to be moved in a Y coordinate range defined according to its starting position: here between y = 50 and y= 100 if myClip.y < 200 or between y = 300 and y = 400 if myClip.y > 200.
myClip stays at the defined coordinates but if the mouse goes beyond the Y coordinates, myClip changes zone.
Where is my error? What is the problem in my code to force myClip to never leave the predefined area?
Thanks for any answer.

this.myClip.addEventListener("mousedown", fct1.bind(this));
function fct1(evt) {
	var pm = this.globalToLocal(evt.stageX, evt.stageY);
	differenceX = (this.myClip.x - pm.x);
	differenceY = (this.myClip.y - pm.y);
};
this.myClip.on("pressmove", fct2.bind(this));
function fct2(evt) {
	var pm = this.globalToLocal(evt.stageX, evt.stageY);
	this.myClip.x = (pm.x + differenceX);
	this.myClip.y = (pm.y + differenceY);

	if (this.myClip.y < 200) {
		if (this.myClip.y > 100) {
			this.myClip.y = 100;
		}
		if (this.myClip.y < 50) {
			this.myClip.y = 50;
		}
	}
	if (this.myClip.y > 200) {
		if (this.myClip.y > 400) {
			this.myClip.y = 400;
		}
		if (this.myClip.y < 300) {
			this.myClip.y = 300;
		}
	}
};

Translated with www.DeepL.com/Translator (free version)

    This topic has been closed for replies.
    Correct answer kglad

    use:

     

     

    this.myClip.addEventListener("mousedown", fct1.bind(this));
    var startPos
    function fct1(evt) {
    	startPos = this.globalToLocal(evt.stageX, evt.stageY);
    };
    this.myClip.on("pressmove", fct2.bind(this));
    function fct2(evt) {
    	var pm = this.globalToLocal(evt.stageX, evt.stageY);
    	this.myClip.x = pm.x;
    	this.myClip.y = pm.y;
    
    	if (startPos.y < 200) {
    		if (this.myClip.y > 100) {
    			this.myClip.y = 100;
    		}
    		if (this.myClip.y < 50) {
    			this.myClip.y = 50;
    		}
    	}
    	if (startPos.y > 200) {
    		if (this.myClip.y > 400) {
    			this.myClip.y = 400;
    		}
    		if (this.myClip.y < 300) {
    			this.myClip.y = 300;
    		}
    	}
    };

    Translated with www.DeepL.com/Translator (free version)


    By @mp63178988

     

    1 reply

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    August 20, 2021

    use:

     

     

    this.myClip.addEventListener("mousedown", fct1.bind(this));
    var startPos
    function fct1(evt) {
    	startPos = this.globalToLocal(evt.stageX, evt.stageY);
    };
    this.myClip.on("pressmove", fct2.bind(this));
    function fct2(evt) {
    	var pm = this.globalToLocal(evt.stageX, evt.stageY);
    	this.myClip.x = pm.x;
    	this.myClip.y = pm.y;
    
    	if (startPos.y < 200) {
    		if (this.myClip.y > 100) {
    			this.myClip.y = 100;
    		}
    		if (this.myClip.y < 50) {
    			this.myClip.y = 50;
    		}
    	}
    	if (startPos.y > 200) {
    		if (this.myClip.y > 400) {
    			this.myClip.y = 400;
    		}
    		if (this.myClip.y < 300) {
    			this.myClip.y = 300;
    		}
    	}
    };

    Translated with www.DeepL.com/Translator (free version)


    By @mp63178988

     

    Inspiring
    August 20, 2021

    Fantastic. Many thanks to you.

    kglad
    Community Expert
    Community Expert
    August 21, 2021

    you're welcome.