Following a circular guide layer with a classic tween

[Red Naxela]

Hi All,

I am trying to figure out how to force my classic tweened objects to follow a circular guide layer all the same direction counter clockwise. The Rotate setting in the Tweening panel spins the object unless set to 0 and that does seem to work sometimes, but is inconsistent. It really get bad after following the path past 180 degrees. It always wants to take the shortest path to the destination. How do I get the items at 2 o'clock to got the short way and the items at 10 o'clock to got he long way round, or all items moving counter clockwise along the circular guide path?

Also I don't want the items to Orient to Path, they should stay top-up the whole way round.

Please help. Thanks!

Dan

[kglad]

inserting an intermediate keyframe can help animate to understand what you want.

[Red Naxela]

That won't work it messes up my easing. I should say that there are 6 objects following the same path and they need to do it at the same time with the same easing. Think of a Ferris wheel where the objects rotate along the path but stay straight up.

[Colin Holgate]

Ferris wheels don't have much easing, other than when they start up and stop, the rest of the time they're rotating at a constant speed I think.

Can you show what you're working on? I have ideas of a solution, but it may not apply to what you're doing.

[Red Naxela]

This Ferris wheel is starting and stopping a lot. When you click a cab ti moves that cab to the top of the wheel... here it is work-in-progress ... http://www.emiwip.com/m4m2017/brand-experience/

Click the cabs, to see it work.

I have it working sort of. I would like the cabs at 8 and 10 o'clock to go around counter clockwise.

[Colin Holgate]

Nothing to do with your problem, but if you could use normal easing, and don't customize it, your performance will improve. You could also try 60 fps, that would look nicer.

[Red Naxela]

Thanks for the advice.

[ClayUUID]

You can do this without a guide layer. It just takes some nesting.

First create the symbol you want to animate (I'm assuming this is already done).

Then place the base symbol inside another graphic symbol with a classic tween set to Rotate: CW x 1.

Then place the above spinner symbol inside another graphic symbol, offset from the center point by the radius of the circular motion you want. There's no tweening in this symbol, but you still need to set its number of frames equal to the number of frames in the spinner graphic symbol so its tween animation will play. You can even put multiple instances of the spinner symbol in this clip.

Finally, put the above symbol on a timeline with a classic tween set to Rotate: CCW x 1. Same number of frames as all the other tweens.

Long story short, it's just tweening some shapes in a circle as if they were stuck to a bicycle wheel, but their embedded counter-rotation causes them to remain visually upright. It's a very mechanical approach to the problem.

[Red Naxela]

ClayUUID,

Doing it that way would require 60 MCs 10 each of 6 different lengths of timeline, so the speed would be consistent when going from 2, 4, 6, 8 or 10 o'clock to the top (12 o'clock), from each starting position.

I think I'll just compromise and have some of the transitions go clockwise. I just thought there was a way to tell AA which way to follow the path. I guess not. Thanks.

[ClayUUID]

You should have mentioned in the first place that this will be a dynamic animation. In that case you should be using the tween library to control rotation. It's pretty easy, almost the same as my previously described setup, except instead of tweens for spinning you just use code. That lets you rotate from and to any arbitrary point.

[Red Naxela]

Hi Clay,

I have never heard of the Tween Library. I Googled it and i got this page ... CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5 ... I this where I start?

[Colin Holgate]

Yes. Most of the example code they give can be used in Animate. They will at times include code that an Animate user wouldn't need, because the library itself can be used without Animate at all. Some of the code will be things that Animate does for you when you publish.

[ClayUUID · Accepted solution]

If you're working in a Canvas document, then yes. That is the same library that Animate internally uses itself for most tweens.

So for example if you had a movieclip on your stage named thing, and three buttons named btn1, btn2, btn3 (optionally arranged around it in a triangle pattern), this code would make it spin by clicking the buttons:

var root = this;
this.btn1.on("click", doBtn1);
this.btn2.on("click", doBtn2);
this.btn3.on("click", doBtn3);
function doBtn1() {
    spinTo(root.thing, 0);
}
function doBtn2() {
    spinTo(root.thing, 120);
}
function doBtn3() {
    spinTo(root.thing, 240);
}
function spinTo(clip, angle) {
    createjs.Tween.get(clip).to({"rotation": angle}, 500, createjs.Ease.backInOut);
}

Note that this example doesn't optimize the spin direction, meaning if you try to rotate from 350 to 0, it will take the long way around. This is pretty easy to fix, but does take more code.

Well okay, it takes exactly this much more code:

function spinTo(clip, angle) {
    if (Math.abs(clip.rotation - angle) > 180) {
        angle += clip.rotation > angle ? 360 : -360;
    }
    createjs.Tween.get(clip, {override:true}).to({"rotation": angle}, 750, createjs.Ease.backOut).call(spinDone);
}
function spinDone(evt) {
    evt.target.rotation = evt.target.rotation % 360;
}

[Red Naxela]

Wow. Thanks! I'll need to look at this in the morning to see if I can get my head around it. My brain is mush right now.

[Red Naxela]

Hi Clay,

That is pretty cool, but it still doesn't do what I need. I did follow your example and created a simple FLA file, and changed the number of buttons to 6. I have a MC on the stage on it's own layer called "thing" then on another layer I have 6 buttons arranged at 12, 2, 4, 6, 8, and 10 o'clock, these are named "btn1" "btn2" etc. With the following code on the first frame (see code) it spins the "thing" not the buttons. Here is the result  http://www.emiwip.com/m4m2017/brand-experience/tween-library-test.html . compare to this one ... http://www.emiwip.com/m4m2017/brand-experience/

Also I'm attaching my FLA file for you. (oops, sorry, I guess there's no attachments button here)

Here's the code ...

var root = this; 

this.btn1.on("click", doBtn1); 

this.btn2.on("click", doBtn2); 

this.btn3.on("click", doBtn3);

this.btn4.on("click", doBtn4); 

this.btn5.on("click", doBtn5); 

this.btn6.on("click", doBtn6);

function doBtn1() { 

    spinTo(root.thing, 0); 

} 

function doBtn2() { 

    spinTo(root.thing, 60); 

} 

function doBtn3() { 

    spinTo(root.thing, 120); 

} 

function doBtn4() { 

    spinTo(root.thing, 180); 

} 

function doBtn5() { 

    spinTo(root.thing, 240); 

} 

function doBtn6() { 

    spinTo(root.thing, 300); 

} 

function spinTo(clip, angle) { 

    createjs.Tween.get(clip).to({"rotation": angle}, 500, createjs.Ease.backInOut); 

}

function spinTo(clip, angle) { 

    if (Math.abs(clip.rotation - angle) > 180) { 

        angle += clip.rotation > angle ? 360 : -360; 

    } 

    createjs.Tween.get(clip, {override:true}).to({"rotation": angle}, 750, createjs.Ease.backOut).call(spinDone); 

} 

function spinDone(evt) { 

    evt.target.rotation = evt.target.rotation % 360; 

};

[ClayUUID]

Yes, the expectation was that given an example of how to spin things with code you'd be able to take it from there.

Though I notice you have the same function twice in your code.

[Red Naxela]

I do appreciate your help. I learned a lot from your example. Thanks.

But, I guess I'll just do it the hard way, manually on the timeline. There's no way I will figure figure out how to make the buttons stay straight up with code.

Thanks again.

[ClayUUID]

Learned helplessness is so irritating. Look, all you have to do to make the buttons stay upright when being spun is spin them in the opposite direction. That's it.

To get the final effect you're after, just move your buttons inside the "thing" clip so they spin along with it. Then use this code:

var root = this;
var angles = [0, 120, 240]; // where each  button is placed around the center (clockwise)
var numBtns = angles.length;
// assign button event listeners
for (i = 1; i <= numBtns; i++) {
    root.thing["btn" + i].on("click", doBtn, null, false, i);
}
// handle buttons being clicked
function doBtn(evt, data) {
    var i;
    var angle = angles[data - 1];
    // make sure all buttons stay upright
    for (i = 1; i <= numBtns; i++) {
        spinTo(root.thing["btn" + i], angle);
    }
    // spin the big wheel so clicked button goes to the top
    spinTo(root.thing, -angle);
}
// do spinning things
function spinTo(clip, angle) {
    if (Math.abs(clip.rotation - angle) > 180) {
        angle += clip.rotation > angle ? 360 : -360;
    }
    createjs.Tween.get(clip, {override:true}).to({"rotation": angle}, 1000, createjs.Ease.backOut).call(spinDone);
}
// normalize final rotation values to 0 - 360 range
function spinDone(evt) {
    evt.target.rotation = evt.target.rotation % 360;
}