Rotating a movieclip with javascript - pressmove method

[KeelyM]

Hi, I'm working on a project in Adobe Animate CC, it's an HTML Canvas project which I'm coding in javascript. I'm not a coder - so I'm moving in small steps - but I'd like to rotate a movieclip by clicking and dragging the mouse over said movieclip. I've found some code which helped me to rotate the clip, however it rotates it once then stops (and I'd like it to gradually rotate, not just jump to a new rotation).

The code I'm currently using looks like this (my movieclip is named 'leftyoke'):

var angleInRadians = Math.atan2(stage.mouseY - this.leftyoke.y, stage.mouseX - this.leftyoke.x);
var angleInDegrees = angleInRadians * (180 / Math.PI);
this.leftyoke.addEventListener("pressmove", spin.bind(this));
function spin(evt){
this.leftyoke.rotation = angleInDegrees;
}

This works to rotate the movieclip, however as I said it only rotates to one static position and it jumps to that position. Any help on how to edit this so that the movieclip gradually rotates around would be much appreciated. I'd like it to work like this: Edit fiddle - JSFiddle This link has code in it, however I haven't been successful at arranging that code to work inside of Animate.

Thanks!

[Colin Holgate]

The first two lines of the fiddle example are not needed. If you paste their code into frame 1 of an empty HTML5 Canvas FLA, delete the first two lines, and test it, it will work. In other words, paste this in (watch out for spaces introduced by the forum):

var shape = new createjs.Shape();

shape.graphics.beginFill("#FF0000").lineTo(20, 20).lineTo(0, 40).lineTo(0, 0).endFill();

shape.regX = 10;

shape.regY = 20;

shape.x = 100;

shape.y = 100;

stage.addChild(shape);

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick", function(){

  stage.update();

});

var mouseMove = function(){

  var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

  var angle = rads * (180 / Math.PI) - offset;

  shape.rotation = angle;

  console.log("angle: "+ angle);

};

var offset = 0;

stage.addEventListener("stagemousedown", function(){

  stage.addEventListener("stagemousemove", mouseMove);

  // Determine initial offset, and take off shape rotation

  var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

  offset = rads * (180 / Math.PI) - shape.rotation;

  mouseMove();

});

stage.addEventListener("stagemouseup", function(){

  stage.removeEventListener("stagemousemove", mouseMove);

});

[KeelyM]

Thank you Colin for the response!

This works awesome for creating a new shape on the stage and rotating it, but do you know how I could change it to rotate my existing movieclip? My movieclip instance name is 'leftyoke' - I tried replacing 'shape' with 'this.leftyoke' in the code above, but when I do that and test it, nothing happens when I drag my mouse around the stage.

[Colin Holgate · Accepted solution]

There are other lines in the code that weren't needed. Here it is again only using your movieclip instead of creating a shape. By the way, this code is to rotate the object, if instead you want the object to point at the cursor the code would be slightly different:

var shape = this.leftyoke;

var mouseMove = function () {

  var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

  var angle = rads * (180 / Math.PI) - offset;

  shape.rotation = angle;

  console.log("angle: " + angle);

};

var offset = 0;

stage.addEventListener("stagemousedown", function () {

  stage.addEventListener("stagemousemove", mouseMove);

// Determine initial offset, and take off shape rotation

  var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

  offset = rads * (180 / Math.PI) - shape.rotation;

  mouseMove();

});

stage.addEventListener("stagemouseup", function () {

  stage.removeEventListener("stagemousemove", mouseMove);

});

[KeelyM]

Thank you! This is awesome, I appreciate it!

[ClayUUID]

https://forums.adobe.com/people/Colin+Holgate  wrote

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick", function(){

  stage.update();

});

These should also be deleted.

[Colin Holgate]

Yes, I removed those in my later version.