Highlight target area when dragging objects on it

[Young@YANGY]

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!

[kglad]

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

[Young@YANGY]

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();

[kglad]

what code is "trying" to highlight the area?

[Young@YANGY]

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.

[kglad · Accepted solution]

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);

}
}

[Young@YANGY]

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!

[Young@YANGY]

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 !!!

[kglad]

you're welcome.

[Young@YANGY]

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). 

[kglad]

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

[Young@YANGY]

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.

[kglad]

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

[Young@YANGY]

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

[kglad]

what's the console show when the flashing occurs?

in

out

in

out

etc?

[Young@YANGY]

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! 

[kglad]

you're welcome.