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

Draggable object not aligned with cursor

Participant ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

Hi everyone,

 

I'm making a test interactive animation. The goal of the interactive animation is that when you drag the blue ball over the red line an animation will play.

 

It works like a charm, the only problem I have is that the blue ball doesn't stay aligned with the cursor when I drag it. I guess it has to do something with getting the coordinates from the browser and not the stage? And this could be done with globalToLocal? But I don't know how to implement it to my code.

 

Example video: https://www.youtube.com/shorts/KCJ7yZphv5M

Project files: https://www.dropbox.com/scl/fo/h79cyghs9ebcab3qeaw7g/h?dl=0&rlkey=du4t4he9scsj7an45jl1cpgf6

 

this.stop();


let root = this;


this.pull_me.addEventListener("pressmove", dragCord)

function dragCord(e) {
	
	e.currentTarget.y= e.stageY;
}


this.pull_me.addEventListener("pressmove", activateSwitch)

function activateSwitch () {
	
	if (root.pull_me.y>852)
	root.gotoAndPlay(10);
}

 

TOPICS
Code

Views

333

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 , Oct 04, 2022 Oct 04, 2022

Hi.

 

This should work:

let root = this;

function onMouseDown(e)
{
	e.currentTarget.offset = { x: e.stageX / stage.scaleX - e.currentTarget.x, y: e.stageY / stage.scaleY - e.currentTarget.y };
}

function onPressMove(e)
{
	e.currentTarget.x = e.stageX / stage.scaleX - e.currentTarget.offset.x;
	e.currentTarget.y = e.stageY / stage.scaleY - e.currentTarget.offset.y;
	
	if (e.currentTarget.y > 852)
	{
		root.pull_me.removeEventListener("pressmove", onPressMove);
		root.gotoAndPlay(10);
	}
}

root
...

Votes

Translate

Translate
Community Expert ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

Hi.

 

This should work:

let root = this;

function onMouseDown(e)
{
	e.currentTarget.offset = { x: e.stageX / stage.scaleX - e.currentTarget.x, y: e.stageY / stage.scaleY - e.currentTarget.y };
}

function onPressMove(e)
{
	e.currentTarget.x = e.stageX / stage.scaleX - e.currentTarget.offset.x;
	e.currentTarget.y = e.stageY / stage.scaleY - e.currentTarget.offset.y;
	
	if (e.currentTarget.y > 852)
	{
		root.pull_me.removeEventListener("pressmove", onPressMove);
		root.gotoAndPlay(10);
	}
}

root.pull_me.addEventListener("mousedown", onMouseDown);
root.pull_me.addEventListener("pressmove", onPressMove);
root.stop();

 

I hope it helps.

 

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
Community Expert ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

@JoãoCésar, do you know why or how the stage is scaled (up by 25%), by default!?

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 ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

Hello, @kglad! What exactly do you mean?

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 ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

why did you (and i) suggest adjusting the mouse position by the stage scale?  (hint: it's because the stage scaleX and scaleY are not 1 by default).

 

i was asking if you knew why that is, but if you didn't understand the question i'm guessing you won't be able to answer that.

 

maybe @ClayUUID knows.

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 ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

Thanks JoãoCésar! It works perfect! Ever thought of making tutorials?

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 ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

You're welcome!

 

I actually have some on my YouTube channel (including a drag and drop game):
https://www.youtube.com/channel/UCaETeAAdW-j2n33Y9oVSv9g

But due to lack of time, I'm not able to upload a single tutorial anymore. But I intend to continue as soon as possible!

 

I also have a repo on GitHub full of examples:
https://github.com/joao-cesar/adobe

 

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 ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

Nice, I have subscribed

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 ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

Hi @JoãoCésar, I hate to bother you, but there is one more thing I like to achieve. I want the cord to act like a switch. So if I pull it ones shape1 falls, if I pull it for a second time shape2 falls. If I pull it for a third time the animation will start at the beginning.

 

I tried a counter variable with a if/else statement, but I couldn't figure it out. Maybe if you have the time you could take a look at it? If you don't have the time, that is fine too.

 

Thanks! 🙂

 

Project files: https://www.dropbox.com/sh/s9bjwx16garshse/AACIgU_6gDnaA8EOb9j4NX7Ka?dl=0

 

let root = this;

function onMouseDown(e)
{
	e.currentTarget.offset = { x: e.stageX / stage.scaleX - e.currentTarget.x, y: e.stageY / stage.scaleY - e.currentTarget.y };
}

function onPressMove(e)
{
	e.currentTarget.y = e.stageY / stage.scaleY - e.currentTarget.offset.y;
	
	if (e.currentTarget.y > 852)
	{
		root.pull_me1.removeEventListener("pressmove", onPressMove);
		root.gotoAndPlay(5);
		root.falling_shape_clip1.play();
		
		root.pull_me2.removeEventListener("pressmove", onPressMove);
		root.gotoAndPlay(55);
		root.falling_shape_clip2.play();

	}
}

root.pull_me1.addEventListener("mousedown", onMouseDown);
root.pull_me1.addEventListener("pressmove", onPressMove);
root.pull_me2.addEventListener("mousedown", onMouseDown);
root.pull_me2.addEventListener("pressmove", onPressMove);
root.stop();

 

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 ,
Oct 06, 2022 Oct 06, 2022

Copy link to clipboard

Copied

Hi, Mark. Sorry for the delay.

 

Were you able to implement the feature?

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 ,
Oct 07, 2022 Oct 07, 2022

Copy link to clipboard

Copied

Hi JoãoCésar, no unfortunately I haven't had time yet to solve it.

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 ,
Oct 07, 2022 Oct 07, 2022

Copy link to clipboard

Copied

OK. No problem.

 

Can you elaborate more? I still don't quite understand what you want to do.

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 ,
Oct 07, 2022 Oct 07, 2022

Copy link to clipboard

Copied

LATEST

I made a video example: https://www.dropbox.com/s/tw32j1yvbzaw3mw/animation%20example.mp4?dl=0

 

If I pull the first time shape1 (rectangle) falls. When I pull for the second time shape2 falls (the triangle). When I pull for the third time I want it to start over again, so shape1 falls again.

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 ,
Oct 04, 2022 Oct 04, 2022

Copy link to clipboard

Copied

use:

 

e.currentTarget.y= e.stageY/stage.scaleY;

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