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!
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);
}
}
Copy link to clipboard
Copied
you need to convert all your actionscript to createjs/javascript.
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();
Copy link to clipboard
Copied
what code is "trying" to highlight the area?
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.
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);
}
}
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!
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 !!!
Copy link to clipboard
Copied
you're welcome.
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).
Copy link to clipboard
Copied
i can't tell what's occurring from that video, what's undesirable and what you want to occur.
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.
Copy link to clipboard
Copied
i don't see any difference betwen the two videos.
Copy link to clipboard
Copied
These two videwos. You can see in the first one, the content keeps flashing and restarting.
Copy link to clipboard
Copied
what's the console show when the flashing occurs?
in
out
in
out
etc?
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!
Copy link to clipboard
Copied
you're welcome.