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

Comparing the rotation of an object to it's previous rotation value (and controlling a movieclip from it)

Engaged ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

Hi (it's me again),

I'm continuing work on a project which I posted previously about here - Rotating a movieclip with javascript - pressmove method  which helped me to get a movieclip to rotate. Now, however, I'm trying to control a movieclip based off of the rotation of rotating movieclip. So the name of the MC I'm rotating is 'yoke' and the name of the MC I'd like to control through it's timeline is called 'firstplane' This is what my code looks like so far -

this.stop();

var i = this.firstplane.currentFrame;

var shape = this.yoke;

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

};

alert (shape.rotation);

this.yoke.addEventListener("pressmove", planespin.bind(this));

function planespin(){

if (shape.rotation>=0) {

this.firstplane.gotoAndStop(++i/2);

} else {

this.firstplane.gotoAndStop(--i/2);

}

}

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

alert (shape.rotation);

});

The chunk I'm trying to write myself (and failing at) is the 'planespin' function added to the yoke movieclip. I'd like it, so that as the yoke MC rotates clockwise (increasing the rotations number) my other movieclip, firstplane, will travel forwards in it's timeline - and vice verse - when the yoke MC rotates counterclockwise I'd like my firstplane MC to move backwards in it's timeline.

How I have it set up works a little - but after rotating the yoke around a little bit the firstplane MC stops going through it's timeline completely. I imagine I have to somehow detect the yoke's current rotation value and compare it to it's previous value to see if it is increasing or decreasing? I'm not entirely sure how to do that. (I promise I try to figure these things out on my own before taking to the forums).

Any help would be much appreciated!

Views

455

Translate

Translate

Report

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 08, 2017 Sep 08, 2017

I would use another external variable to make it easy to talk to:

var thefirstplane = this.firstplane;

Don't use the pressmove/planespin approach, instead add some code to the mouseMove function. Don't just advance the current frame of firstplane, work out where it should be based on the rotation of shape.

It might be something like:

var f = Math.floor((shape.rotation + 360) % 360);

thefirstplane.gotoAndStop(f);

The + 360 % 360 will make the rotation value be 0-359, instead of perhaps -180 - +179. Ins

...

Votes

Translate

Translate
Contributor ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

You need a variable to store the previous rotation and then an if statement before that variable is updated.

// Variable for storing the previous rotation

var rotationPrevious = mc.rotation;

// Replace this with the function that you use

function Update () {

    // Optional variable to store the difference between the previous and current rotation

    var rotationDifference = mc.rotation - rotationPrevious;

    // Example if statements

    if (rotationDifference > 0) { // Greater than 0

          // Rotate clockwise

    } else if (rotationDifference < 0) { // Less than 0

          // Rotate counter clockwise

    }

    // Updated last

    rotationPrevious = mc.rotation;

}

Votes

Translate

Translate

Report

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 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

I would use another external variable to make it easy to talk to:

var thefirstplane = this.firstplane;

Don't use the pressmove/planespin approach, instead add some code to the mouseMove function. Don't just advance the current frame of firstplane, work out where it should be based on the rotation of shape.

It might be something like:

var f = Math.floor((shape.rotation + 360) % 360);

thefirstplane.gotoAndStop(f);

The + 360 % 360 will make the rotation value be 0-359, instead of perhaps -180 - +179. Inside the firstplane movieclip you would have 360 frames, that would be exactly what it needs to look like in order to match the rotation value of the yoke.

Votes

Translate

Translate

Report

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 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

Thank you for the response. Adding that code as is seems to be working! My firstplane MC only has 31 frames though, could I simply change it to something like -

thefirstplane.gotoAndStop(f/2);

(or some number to divide by) to make it go slower/match better?

Votes

Translate

Translate

Report

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 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

The rotation value will be 0-359, but you could scale that to any amount. You want 359 to be the same as 30 (your movieclip really goes from frame 0 to 30, even if it looks like 1 to 31), and you want 0 to be 0. So this should work:

var f = (shape.rotation + 360) % 360;

f = Math.floor(f / (360/thefirstplane.totalFrames));

thefirstplane.gotoAndStop(f);

Votes

Translate

Translate

Report

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 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

I don't know if I inputted this code wrong, but when I tried using that it seemed to break my project. (I checked it a couple of times for typos).

The code you provided earlier works well enough to suite my needs though I believe. Thank you!!

Votes

Translate

Translate

Report

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 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

Your movieclip isn't going to change the number of frames it has, so you could hard code the right value. This line:

var f = Math.floor((shape.rotation + 360) % 360);

would become:

var f = Math.floor(((shape.rotation + 360) % 360) * 0.086);

The 0.086 is 31/360.

Votes

Translate

Translate

Report

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 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

LATEST

That works wonderfully, thank you!

Votes

Translate

Translate

Report

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