Dial Rotation divided in 6 segments and stop at spesific segment

[Illie 1 Likes (Newbie)]

Hi all

 

I am using the throwprops tween and want I want to achieve is that when the dial is spinned that it ease out to the closes segment of my dial on the 12 o clock position that is in 30 deg segments. Then also if I just press on the 3 o clock segment it should rotate to the 12 o clock position.

 

Is this possible with the throwprops tween? Any help would be highly appriciated.

[Carl 11,053 Likes (Superhero)]

Hi that can be a fairly tricky endeavor. Fortunately the concepts needed to accomplish this have been explained in great detail in other forum posts.

 

Please first read this post:

http://forums.greens...7932#entry17932

 

In short, the trick is to

 

1: figure out where the throw would normally land

2: force that value to snap to the nearest 30 degree increment

3: create a ThrowProps tween that uses your desired ending value as the min and max value.

 

Below is the code for forcing the dial to land on the nearest 90 degree value (for easy testing purposes)

 

 

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.display.*;
trace(TweenLite.version);
TweenPlugin.activate([ThrowPropsPlugin]);

var RAD2DEG:Number = 180 / Math.PI;
var t1:uint, t2:uint, r1:Number, r2:Number, offset:Number;

dial.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
TweenLite.killTweensOf(dial);
offset = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
r1 = r2 = dial.rotation;
t1 = t2 = getTimer();
dial.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
dial.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function enterFrameHandler(event:Event):void {
r2 = r1;
t2 = t1;
var newOffset:Number = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
dial.rotation += (offset - newOffset) * RAD2DEG;
offset = newOffset;
r1 = dial.rotation;
t1 = getTimer();
}

function mouseUpHandler(event:MouseEvent):void {
dial.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
dial.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
var time:Number = (getTimer() - t2) / 1000;
var dif:Number = dial.rotation - r2;
if (dif != dif % 180) {
dif += (dif < 0) ? 360 : -360;
}
var rVelocity:Number = dif / time;

var duration:Number = ThrowPropsPlugin.calculateTweenDuration(dial, {throwProps:{rotation:rVelocity, resistance:250}, ease:Strong.easeOut}, 10, 0.25, 2);
  //figure out where it'll land normally
  var landingValue:Number = dial.rotation + ThrowPropsPlugin.calculateChange(rVelocity, Strong.easeOut, duration);

trace("landingValue = " + landingValue);

//normalize the landingValue to the nearest 90 degree increment
//change to 30 or whatever you want
landingValue = snapTo(landingValue, 90);

trace("landingValue snapped to nearest 90 = " + landingValue);

//do a throwProps tween but force it to land on the landing value by setting min/max values
ThrowPropsPlugin.to(dial, {throwProps:{rotation:{velocity:rVelocity, min:landingValue, max:landingValue}, resistance:250}, ease:Strong.easeOut}, 10, 0.25, 0);


}


function snapTo(myNum:Number, increment:Number):Number{
return (((myNum + (increment / 2)) / increment) >> 0) * increment;
}

 

CS5 Fla attached

Or you can just paste the code into the CS4 rotation example from the ThrowProps Page

In either case use your own GreenSock bonus files that include ThrowPropsPlugin.as

throwProps_rotation_snap.zip

[Illie 1 Likes (Newbie)]

Hi all

 

I am using the throwprops tween and want I want to achieve is that when the dial is spinned that it ease out to the closes segment of my dial on the 12 o clock position that is in 30 deg segments. Then also if I just press on the 3 o clock segment it should rotate to the 12 o clock position.

 

Is this possible with the throwprops tween? Any help would be highly appriciated.

 

Carl

 

Thanks, this is excatly what I needed, I see you like challanges and you are exeptional in helping.

 

I have looked at your web site and saw one of your challanges with the Ferris wheel. Great.

 

Here is my challange. Can I add 6 x MC on the throwprop like you did with the bucket(ferriswheel) and use the dial with the six buckets as mc at the 30 deg interval so it always stays at a 90 deg angle?

 

I looked at your code and the problem I am having is to take the rotation variable from the throwprop to add it to the 6 buckets to calculate the dial rotation that is added onto the dial mc frame.

 

The second thing with your first solution it allways rotates clock wise when I press on te dial to move only to the next 30 deg position, it needs to if I press on the 9 o clock position move towards the 12 o clock and vice versa if I press on the 3 o clock position it needs to go back counter clock wise to the 12 o clock position. (A good example of this is the Britanica dial on their mobile app)

[Carl 11,053 Likes (Superhero)]

Hi,

 

For making sure the dial always spins in the shortest direction when you press the various buttons take a look at the shortRotation plugin in the Plugin Explorer in the demo_swfs folder or online at http://www.greensock.com/tweenmax

 

I looked at your code and the problem I am having is to take the rotation variable from the throwprop to add it to the 6 buckets to calculate the dial rotation that is added onto the dial mc frame.

 

 

That is a bit more complex than the ferris wheel challenge. I really don't have time at the moment to dive into that:( Have you looked at the source code of the challenge submissions?

http://www.snorkl.tv...llenge-results/

 

I would start by getting just 1 bucket to rotate properly and then try to figure out what type of offset needs to be applied to each additional bucket.

[Illie 1 Likes (Newbie)]

Hi,

 

For making sure the dial always spins in the shortest direction when you press the various buttons take a look at the shortRotation plugin in the Plugin Explorer in the demo_swfs folder or online at http://www.greensock.com/tweenmax

 

 

 

 

That is a bit more complex than the ferris wheel challenge. I really don't have time at the moment to dive into that:( Have you looked at the source code of the challenge submissions?

http://www.snorkl.tv...llenge-results/

 

I would start by getting just 1 bucket to rotate properly and then try to figure out what type of offset needs to be applied to each additional bucket.

 

Hi Carl

 

Thanks for the reply. Yes I looked at the code for the challange. The problem I know is more complex, since the ferris wheel has a constant rotation, where as with the throwprop I need to be able to use its rotation value, but on a child instance.

 

The question maybe is, how can I get this rotation value from the throwprop in my child as a veriable I can use?

 

I will look at the shortRotation plugin in the mean time and see if I can get that resolved.

 

Thanks again.

[Carl 11,053 Likes (Superhero)]

I regret that I don't have time to experiment with this.

You can always get the dial's rotation through dial.rotation

 

It may not be the most elegant way, but you can have those child buckets run an ENTER_FRAME function that says

 

this.rotation = this.parent.dial.rotation - someOffsetValue

 

Maybe start with just 1 or 2 buckets and hopefully some sort of pattern will emerge and you can just loop through all of them and assign the proper rotation offset based on their location.

-c