Drag and drop with easeljs in Animate CC 2017

Question

I've been using an HTML Canvas project in Adobe Animate CC 2015.2 to drag around a movieClip on the stage, using the method recommended in the creatjs Mouse Interaction Tutorial. I was doing this on a MacBook Pro running OS X Yosemite at work.

Here is the code I used and it worked fine. The movieClip is on the stage in the first frame of the timeline and the actions are in that same frame. The movieClip instance (my_mc) follows the mouse around - so far so good.

this.my_mc.on("pressmove", function(evt){
    evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
});

However, trying the exact same example in Animate CC 2017 on two friends' MacBook Pros with Retina Display running macOS Sierra, results in there being a strange and significant offset between the position of the mouse and the position of the movieClip. The offset is bigger the further away the mouse moves from the origin (0,0) of the stage.

Does anyone know why this is happening or can think of a workaround? I've tried a few modifications using globalToLocal, but this does not solve the problem.

The three main reasons I can think of are:

• Some change in Animate CC 2017 is causing this problem
• The Retina Display is causing the problem
• macOS Sierra is causing the problem

Any thoughts or workarounds are welcome.

Thanks in advance,

Dave

Answer 1

I think I've sorted the problem. The following seems to work on both Animate CC 2015.2 and Animate CC 2017 irrespective of OS and display resolution.

this.my_mc.on("pressmove", function(evt){
    var p = stage.globalToLocal(evt.stageX, evt.stageY);
    evt.currentTarget.x = p.x;
    evt.currentTarget.y = p.y;
});

I still have to get my head around why the change was necessary in Animate 2017 and not in Animate CC 2015.2 (scratches head).

Thanks,

Dave