Sign in to follow this  
Followers 0
jefinho

Direction of rotation (clockwise / counterclockwise)

  • 9 posts in this topic

9 posts in this topic

Hi there!

 

If have a basic question about the way I should handle rotation within TweenMax.

I'm making an animation that looks like a clock with many pointers.

The pointers can move in diferent directions; clockwise and counterclockwise.

 

This pointer should go to the same position

var twM1:TweenMax = new TweenMax(myPointer,5,{rotation:180,repeat:0,ease:Linear.easeNone});

as this pointer:

var twM2:TweenMax = new TweenMax(myPointer,5,{rotation:-180,repeat:0,ease:Linear.easeNone});

 

The direction of tween 1 is clockwise, and the direction of tween 2 is counterclockwise.

Of course, this will not happen, because the values are different now (180 and -180).

 

I'm working with an XML-database that gives me a negative number when a pointer needs to go counterclockwise,

and a positive number when a pointer needs to go clockwise.

 

I looked to the TransitionManager of Adobe. Here I can turn "ccw" on or off:

TransitionManager.start(img1_mc, {type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:720});

 

Can this be realized in TweenLite/Max?

 

Thanks!

Share this post


Link to post
Share on other sites

By the way, I looked to the CirclePath2D Plugin.

My objects need to rotate like real clock pointers into the left- and right direction.

With the CirclePath2D plugin, the pointers are following the Circle path as a whole, instead of just the top (with the pivot point at the bottom).

I hope I can get a little help...

Share this post


Link to post
Share on other sites

Are you saying that the negative values go in the clockwise direction? Help me understand what exactly is happening for you that you need to fix.

 

You can use relative values if you want - negative values will always travel counter-clockwise and positive values will go clockwise. To define a value as relative, you simply cast it as a String by either putting it in quotes or wrapping it with String(). You could use a function like this to convert an absolute value to a relative value based on the current rotation of an object:

function getRotationChange(mc:DisplayObject, newRotation:Number, clockwise:Boolean):String {
   var dif:Number = newRotation - mc.rotation;
   if (Boolean(dif > 0) != clockwise) {
       dif += (clockwise) ? 360 : -360;
   }
   return String(dif);
}

 

Then you could use it with TweenLite/Max, like:

 

var twM1:TweenMax = new TweenMax(myPointer, 5, {rotation:getRotationChange(myPointer, 180, true), ease:Linear.easeNone});

Share this post


Link to post
Share on other sites

Fist of all: Thanks for trying to help!

 

I made a little sketch to visualize what I am trying to accomplish.

The blue line must rotate to 90 degrees in counter clockwise direction. The green line is at the correct end position. The red line is the incorrect end position.

 

As you can see; the lines must move in relation to the circle in the back.

 

example.jpg

 

Somehow I can't get this to work with a simple function.

Maybe something like this:

private function getRotationChange(currRot:Number, clockwise:Boolean):Number
	{
		if (!clockwise)
		{
			currRot = -360 - currRot;
		}
		return currRot;
	}

 

I hope you can give an advise.

Share this post


Link to post
Share on other sites

Did you read my last response? Did you try that code? I believe I solved all of this for you already.

Share this post


Link to post
Share on other sites

Yes, I read your last response.

I also tried the function, but somehow I didn't get the results I wanted.

However, I will look into it once again.

 

Thanks!

Share this post


Link to post
Share on other sites

Yeah, if you're still running into trouble, please post a simple example FLA that demonstrates the problem so that we can see exactly what's going on and test the code.

Share this post


Link to post
Share on other sites

Are you saying that the negative values go in the clockwise direction? Help me understand what exactly is happening for you that you need to fix.

 

You can use relative values if you want - negative values will always travel counter-clockwise and positive values will go clockwise. To define a value as relative, you simply cast it as a String by either putting it in quotes or wrapping it with String(). You could use a function like this to convert an absolute value to a relative value based on the current rotation of an object:

function getRotationchange(mc:DisplayObject, newRotation:Number, clockwise:Boolean):String {
var dif:Number = newRotation - mc.rotation;
if (Boolean(dif > 0) != clockwise) {
dif += (clockwise) ? 360 : -360;
}
return String(dif);
}

 

Then you could use it with TweenLite/Max, like:

 

var twM1:TweenMax = new TweenMax(myPointer, 5, {rotation:getRotationchange(myPointer, 180, true), ease:Linear.easeNone});

 

 

THANK you ..! You solved my question too..! You are ALWAYS right on target.. Thanks for sharing... !!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.