EaselJS Drag Drop - With Drag Drop within Responsive Publish

Question

Software: Adobe Animate
Type: HTML5 Canvas
Publish Settings: JavaScript/HTML (Loop Timeline | Include hidden layers | Center Stage: Both | Make Responsive: Both | Scale to visible area: Fit in view)

I've created a circle and converted it to a Movie Clip. In frame one I've added the following Actions:

// Defines "circle" as the object named "circle" in the library.
var circle = this.addChild(new lib.circle());

circle.on("pressmove", function(evt) {
    evt.target.x = evt.stageX;
    evt.target.y = evt.stageY;
});
circle.on("pressup", function(evt) {
    console.log("up");
});

The problem appears when exporting to Responsive it seems the drag drop's offset. Does anyone know the reasoning behind this and a method to resolve it?

score 1 · Accepted Answer · answered Jan 15 '18 at 20:46

1

I believe this is because Animate's responsive export scales the stage. You may need to transform your coordinates.

Check out this answer to an earlier post.

answered Jan 15 '18 at 20:46

Lanny

11,244
1
22
30

Thanks for your help Lanny I'll try making those adjustments to my code and see how it helps. – Matt Seligman Jan 16 '18 at 22:04

score 1 · Answer 2 · answered Feb 24 '18 at 16:53

This works in Adobe Animate CC with responsive scaling. Just replace yourMC with your movie clip.

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

EaselJS Drag Drop - With Drag Drop within Responsive Publish

2 Answers2