Highlight target area when dragging objects on it

New Here ,
Feb 19, 2021 Feb 19, 2021

Copy link to clipboard

Copied

Hi

 

I'm converting a flash test to html canvas. It's a drag and drop test. I need to drag the character to the right room. When users dragging the character to the rooms, I want to highlight the room when dragging character on it. 

 

I used the mouseover and mouseout within drag function but it didn't work out. How can I solve this problem? 

 

Thank you!

 

 

Views

153

Likes

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

Adobe Community Professional , Feb 22, 2021 Feb 22, 2021
try: root.targetHighlightOn = function() { var highlight = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y); if (!highlight){ if(root.highlightOn){ root.highlightOn.gotoAndStop(0); root.highlightOn = nul; } } else { root.highlightOn = highlight.parent.parent; root.highlightOn.gotoAndPlay(1); } }

Likes

Translate

Translate
Adobe Community Professional ,
Feb 20, 2021 Feb 20, 2021

Copy link to clipboard

Copied

you need to convert all your actionscript to createjs/javascript.

Likes

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
New Here ,
Feb 20, 2021 Feb 20, 2021

Copy link to clipboard

Copied

I did. The drag and drop works fine. Just don't know how to highlight the area.

Here is my code, mouseover and mouseout doesn't workout.

 

var root = this;
var pieces = root.pieces;
var slots = root.slots;
var restart = root.restart;


root.setup = function()
{
	createjs.Touch.enable(stage);
	stage.mouseMoveOutside = true;
	root.drawStart = stage.on("drawstart", root.start, null, true);
};

root.start = function(e)
{
	stage.off("drawstart", root.drawStart);
/*	winMessage.originalY = winMessage.y;
	*/
	pieces.on("mousedown", root.mouseDownHandler);	
};



root.mouseDownHandler = function(e)
{
	e.currentTarget.setChildIndex(e.target, e.currentTarget.children.length - 1);
	e.target.offsetX = (e.stageX / stage.scaleX) - e.target.x;
	e.target.offsetY = (e.stageY / stage.scaleY) - e.target.y;
	pieces.target = e.target;
	root.stageMouseMove = stage.on("stagemousemove", root.stageMouseMoveHandler);
	root.stageMouseUp = stage.on("stagemouseup", root.stageMouseUpHandler);
};

root.stageMouseMoveHandler = function(e)
{
	if (pieces.target)
	{
		pieces.target.x = (e.stageX / stage.scaleX) - pieces.target.offsetX;
		pieces.target.y = (e.stageY / stage.scaleY) - pieces.target.offsetY;
		
		var frequency = 15;
		stage.enableMouseOver(frequency);

		this.pieces.addEventListener("mouseover", fl_MouseOverHandler_9);
		this.pieces.addEventListener("mouseout", fl_MouseOutHandler_3);

	}	
};


function fl_MouseOverHandler_8()
{
	root.test.gotoAndPlay(1);
	console.log("In");
}




function fl_MouseOutHandler_3()
{
	root.test.gotoAndStop(0);
	console.log("Out");
}


root.stageMouseUpHandler = function(e)
{
	stage.off("stagemousemove", root.stageMouseMove);
	stage.off("stagemouseup", root.stageMouseUp);
	
	if (pieces.target)
	{
		root.check();
		pieces.target = null;
		
		
	}	
};



root.check = function()
{
	
	
	var spot = root.getObjectUnderPoint(pieces.target.x, pieces.target.y);
	
	if (!spot)
		return;
	
	root.slot = spot.parent.parent;

	console.log(spot);
	console.log(root.slot.name);
	
};


root.setup();

Likes

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
Adobe Community Professional ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

what code is "trying" to highlight the area?

Likes

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
New Here ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

Hi kglad,

 

The code I uploaded has some error, here is my new code about highlight:

root.stageMouseMoveHandler = function(e)
{
	if (pieces.target)
	{
		pieces.target.x = (e.stageX / stage.scaleX) - pieces.target.offsetX;
		pieces.target.y = (e.stageY / stage.scaleY) - pieces.target.offsetY;
		
		var test = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
		root.targetHighlightOn();
	}	
};


root.targetHighlightOn = function()
{
	var highlight = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
		
		if (!highlight){
						
/*			slots.children.forEach(function(child, index){
				child.gotoAndStop(0);
				});*/
			
			return;
			}
		
		root.highlightOn = highlight.parent.parent;
		
		root.highlightOn.gotoAndPlay(1);
}

Now it can highlight the area by playing the highlight movieclip. But I don't know how to stop the movieclip when dragging objects out of the area.

 

 

 

Likes

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
Adobe Community Professional ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

try:

 

root.targetHighlightOn = function()
{
var highlight = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
if (!highlight){

if(root.highlightOn){

root.highlightOn.gotoAndStop(0);

root.highlightOn = nul;

}
} else {
root.highlightOn = highlight.parent.parent;

root.highlightOn.gotoAndPlay(1);

}
}

Likes

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
New Here ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

Thank you kglad, it works in some way. Here is my code:

root.targetHighlightOn = function()
{
	var highlight = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
		

if (!highlight){
	if(root.highlightOn){

		root.slots.parlor1.gotoAndStop(0);
		root.slots.parlor2.gotoAndStop(0);
		root.slots.parlor3.gotoAndStop(0);
		root.slots.parlor4.gotoAndStop(0);
		root.slots.bedroom.gotoAndStop(0);
		root.slots.workroom.gotoAndStop(0);
		root.slots.storeroom.gotoAndStop(0);
		root.slots.kitchen.gotoAndStop(0);

		root.highlightOn = null;
		}
} else {
	root.highlightOn = highlight.parent.parent;
	root.highlightOn.gotoAndPlay(1);
	}
}

 

One more question, if I drag objects from one slot to another slot, the highlight keeps playing. How to avoid that?

 

Thank you very much!

Likes

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
New Here ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

Oh I find a way to solve it.

root.targetHighlightOn = function()
{
	var highlight = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
		

if (!highlight){
	if(root.highlightOn){

		root.slots.parlor1.gotoAndStop(0);
		root.slots.parlor2.gotoAndStop(0);
		root.slots.parlor3.gotoAndStop(0);
		root.slots.parlor4.gotoAndStop(0);
		root.slots.bedroom.gotoAndStop(0);
		root.slots.workroom.gotoAndStop(0);
		root.slots.storeroom.gotoAndStop(0);
		root.slots.kitchen.gotoAndStop(0);

		root.highlightOn = null;
		}
} else {
	
	root.slots.parlor1.gotoAndStop(0);
	root.slots.parlor2.gotoAndStop(0);
	root.slots.parlor3.gotoAndStop(0);
	root.slots.parlor4.gotoAndStop(0);
	root.slots.bedroom.gotoAndStop(0);
	root.slots.workroom.gotoAndStop(0);
	root.slots.storeroom.gotoAndStop(0);
	root.slots.kitchen.gotoAndStop(0);
	
	root.highlightOn = highlight.parent.parent;
	root.highlightOn.gotoAndPlay(1);
	
	}
	
}

 

Thanks for your help - much appreciated !!!

Likes

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
Adobe Community Professional ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

you're welcome.

Likes

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
New Here ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

Hi kglad,

 

Sorry to border you again. I used the code above, it works fine if there is only one frame. I find that the animation keeps restarting when I drag the objects onto the slots(see my video). 

Likes

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
Adobe Community Professional ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

i can't tell what's occurring from that video, what's undesirable and what you want to occur.

Likes

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
New Here ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

 

This is the capture video from the original flash content.

 

Now for the canvas version, when I dragging the character on the room slots, it keeps re-inniciating.

Likes

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
Adobe Community Professional ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

i don't see any difference betwen the two videos.

Likes

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
New Here ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

 

 

These two videwos. You can see in the first one, the content keeps flashing and restarting.

 

Likes

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
Adobe Community Professional ,
Feb 26, 2021 Feb 26, 2021

Copy link to clipboard

Copied

what's the console show when the flashing occurs?

 

in

out

in

out

 

etc?

Likes

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
New Here ,
Mar 02, 2021 Mar 02, 2021

Copy link to clipboard

Copied

Yes. I found the the gotoAndPlay function in targetHighlightOn funtion trigger this problem(I don't know why, and gotoAndStop works fine).

 

So I used visible instead and it works properly! Thank you for your time and patience

Likes

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
Adobe Community Professional ,
Mar 02, 2021 Mar 02, 2021

Copy link to clipboard

Copied

LATEST

you're welcome.

Likes

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