Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Rotating a movieclip with javascript - pressmove method

Engaged ,
Sep 07, 2017 Sep 07, 2017

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!

3.9K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 07, 2017 Sep 07, 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);

};

va

...
Translate
LEGEND ,
Sep 07, 2017 Sep 07, 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);

});

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 07, 2017 Sep 07, 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 07, 2017 Sep 07, 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);

});

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 07, 2017 Sep 07, 2017

Thank you! This is awesome, I appreciate it!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 20, 2025 Jan 20, 2025
LATEST

This code is almost exactly what I require... almost. What I need to be able to do is make the symbol (e.g: leftyoke) rotate only when I click and drag directly on the symbol, and not outside of the symbol. At the moment, when I try the code the symbol rotates wherever I click and drag on the stage. Is this possible?

I'm sure it's a simple fix, but my limited knowledge isn't up to solving it! 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 07, 2017 Sep 07, 2017

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

createjs.Ticker.setFPS(60);

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

  stage.update();

});

These should also be deleted.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 07, 2017 Sep 07, 2017

Yes, I removed those in my later version.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines