Copy link to clipboard
Copied
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!
1 Correct answer
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
...Copy link to clipboard
Copied
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);
});
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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);
});
Copy link to clipboard
Copied
Thank you! This is awesome, I appreciate it!
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
https://forums.adobe.com/people/Colin+Holgate wrote
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function(){
stage.update();
});
These should also be deleted.
Copy link to clipboard
Copied
Yes, I removed those in my later version.

