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

Hide shape when I drag and release it to a position

Participant ,
Oct 14, 2022 Oct 14, 2022

Copy link to clipboard

Copied

Hi everyone,

 

My goal is to make the button symbol dissapear when I drag and release it over a certain Y value.

 

It kinda works but when I drag the button symbol over the Y value (shown with the red line) I first have to click the shape for it to dissapear.

 

Is there a way for it to dissapear when I drag and release the button symbol over the red line?

 

Video example:

https://www.dropbox.com/s/gn4efqrlzkq1vf7/example.mp4?dl=0

 

Project files: https://www.dropbox.com/scl/fo/mpy2bsyjtcidizx5afuf8/hdl=0&rlkey=n51y70ro754ekzk135lm6yfsd

 

this.button.addEventListener("mousedown", onMouseDown.bind(this));
this.button.addEventListener("pressmove", onPressMove.bind(this));

function onPressMove(e){
	e.currentTarget.y = e.stageY / stage.scaleY - e.currentTarget.offset.y;
}

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

	if (e.currentTarget.y > 650) {
		this.button.visible=false;		
		}
}
TOPICS
Code

Views

215

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

Hi.

 

Here is a suggestion:

var root = this;
var targetPos = { y: this.line.y };

function main()
{
	createjs.Touch.enable(stage);
	stage.mouseMoveOutside = true;
	root.mouseDownListener = root.button.on("mousedown", onMouseDown);
	root.pressMoveListener = root.button.on("pressmove", onPressMove);
	root.pressUpListener = root.button.on("pressup", onPressUp);
}

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

function onPressMove(e)
{
	
...

Votes

Translate

Translate
Community Expert ,
Oct 14, 2022 Oct 14, 2022

Copy link to clipboard

Copied

Hi.

 

Here is a suggestion:

var root = this;
var targetPos = { y: this.line.y };

function main()
{
	createjs.Touch.enable(stage);
	stage.mouseMoveOutside = true;
	root.mouseDownListener = root.button.on("mousedown", onMouseDown);
	root.pressMoveListener = root.button.on("pressmove", onPressMove);
	root.pressUpListener = root.button.on("pressup", onPressUp);
}

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

function onPressMove(e)
{
	e.currentTarget.y = (e.stageY / stage.scaleY) - e.currentTarget.offset.y;
}

function onPressUp(e)
{
	if (e.currentTarget.y - e.currentTarget.nominalBounds.height * 0.5 >= targetPos.y)
		remove(e.currentTarget); // or the visible property can just be set to false here
}

function remove(target)
{
	target.parent.removeChild(target);
	target._off = true; // needed in some versions of Animate
	target.off("mousedown", root.mouseDownListener);
	target.off("pressmove", root.pressMoveListener);
	target.off("pressup", root.pressUpListener);
}

main();

 

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
Participant ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

Thanks for your reply! It seems I get an error "Uncaught TypeError: Cannot read properties of undefined (reading 'y')".

 

There is probably a mistake in this line: var targetPos = { y: this.line.y };

 

I removed .y but then the shape won't disappear when I release the mouse.

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

Copy link to clipboard

Copied

Hi.

 

Do you have an instance on stage called line?

 

If you prefer, you can assign a hard-coded value. Like this:

var targetPos = { y: 300 };

 

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

Copy link to clipboard

Copied

That did the trick, 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 ,
Oct 26, 2022 Oct 26, 2022

Copy link to clipboard

Copied

LATEST

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

Copy link to clipboard

Copied

1.  this.line is undefined.

 

2. hittest is a movieclip/displayobject method:

hitTest(x , y ) 

Boolean

Inherited from DisplayObject but overwritten in hitTest:450

Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at the specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all transform properties including regX/Y.

Parameters:

  • x Number

    The x position to check in the display object's local coordinates.

  • y Number

    The y position to check in the display object's local coordinates.

Returns:

Boolean: 

A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified coordinates.

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

Copy link to clipboard

Copied

Thanks kglad! I'm still learning, i'm not a developer by nature but have grown an interest for it. Every bit of knowledge helps, 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 ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

i just reread your message.

 

"There is probably a mistake in this line: var targetPos = { y: this.line.y };"

 

 

there shouldn't be any doubt about which line is causing the error.  open your browser's developer console and it will tell you exactly which line, in which frame on which timeline that error occurs.

 

if you don't know how to use the developer console,

 

 

 lesson 1 - https://youtu.be/PBDQN9CQSeI lesson 2 - https://youtu.be/KJEl0OenGUY

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

Copy link to clipboard

Copied

Nice, I will use this the next time I have a bug. 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 ,
Oct 14, 2022 Oct 14, 2022

Copy link to clipboard

Copied

use the hitTest

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

Copy link to clipboard

Copied

Hi kglad, I'm kind of a noob. What is a hitTest?

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