Skip to main content
K
KeelyM
Inspiring
September 7, 2017
Answered

Rotating a movieclip with javascript - pressmove method

  • September 7, 2017
  • 1 reply
  • 4087 views

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!

Correct answer Colin Holgate

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

});

1 reply

Colin Holgate
Colin Holgate
Inspiring
September 7, 2017

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

});

K
KeelyMAuthor
Inspiring
September 7, 2017

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
Colin HolgateCorrect answer
Inspiring
September 7, 2017

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

});

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices