Event listener works on Stage but not on Movieclip (createjs, HTML5)

[KeelyM]

Hi,

I'm working on an HTML5 Canvas project in Adobe Animate CC and coding it in javascript. I have a movieclip that I would like to rotate and thanks to previous forum posts and users I was able to get my movieclip to rotate - however the event seems to be happening on the stage, which was fine for my other projects, but on this project I have multiple movieclips that need to move in different ways. So with my code as it is currently, the movieclip I want to rotate will rotate, however it will rotate no matter where you are clicking on the stage or on other movieclips.

The instance name of the movieclip I want to rotate is "collective" here is my code for rotating it currently (also I am not a coder by any means, so many thanks to forum users who have helped me get this far):

var middle = this.collective;
var mouseMoveTwo = function () {
var rads_two = Math.atan2(stage.mouseY - middle.y, stage.mouseX - middle.x);
var angle_two = rads_two * (180 / Math.PI) - offset_two;
middle.rotation = angle_two;
console.log("angle_two:" + angle_two);
} 
var offset_two = 10;
stage.addEventListener("stagemousedown", function(){
stage.addEventListener("stagemousemove",mouseMoveTwo);
var rads_two = Math.atan2(stage.mouseY - middle.y, stage.mouseX - middle.x);
offset_two = rads_two * (180 / Math.PI) - middle.rotation;
mouseMoveTwo();
});
stage.addEventListener("stagemouseup", function (){
stage.removeEventListener("stagemousemove",mouseMoveTwo);
});

This works, however I'd like to be able to move all my movieclips on the stage independently of one another. My attempt to make this event just fire off when press moving the mouse over "collective" didn't work - I'd click and drag on "collective" and nothing would happen - this was my attempt at that:

var middle = this.collective;
var mouseMoveTwo = function () {
var rads_two = Math.atan2(stage.mouseY - middle.y, stage.mouseX - middle.x);
var angle_two = rads_two * (180 / Math.PI) - offset_two;
middle.rotation = angle_two;
console.log("angle_two:" + angle_two);
} 
var offset_two = 10;
this.collective.addEventListener("mousedown", function(){
this.collective.addEventListener("mousemove", mouseMoveTwo);
var rads_two = Math.atan2(stage.mouseY - middle.y, stage.mouseX - middle.x);
offset_two = rads_two * (180 / Math.PI) - middle.rotation;
mouseMoveTwo();
});
this.collective.addEventListener("mouseup", function(){
this.collective.removeEventListener("mousemove",mouseMoveTwo);
});

I've tried a couple of other things too - but I have been unsuccessful at getting the "collective" movieclip to rotate just when the mouse is "press moving" (click and drag) on top of it.

Any help is much appreciated!

Thanks.

[marjantrajkovski]

As I see problem is in this.collective

[KeelyM]

How do you mean?

[KeelyM · Accepted solution]

In case anyone comes across this same issue - I believe I've figured it out. It took me WAAAAY longer than it probably should have, but I'm still learning javascript and Animate.

Here's the code I ended up with (I already have this rads/angle equation earlier in my project hence the _two naming convention):

var collective = this.collective;
this.collective.addEventListener("pressmove", pull.bind(this));
function pull(evt){
var rads_two = Math.atan2(stage.mouseY - collective.y, stage.mouseX - collective.x);
var angle_two = rads_two * (180 / Math.PI) - offset_two;
this.collective.rotation = angle_two;
}
var offset_two = -20;