Jump to content


Calculating Turn Count of ThrowProps Dial

Moderator Tag

Recommended Posts


I'm using the throwProps dial code from the Greensock example.


I need to calculate which turn of the dial the user is on eg. turn 2 of 10


How would I do this?


At the moment I am trying to calculate whether the user is turning the dial clockwise or anti-clockwise.


Then either

adding 1 to the turn count if the turn is clockwise and the rotation value equals 359º


subtracting 1 from the turn count if the turn is anti-clockwise and the rotation value equals 0º


Is this the correct way or is there another way by adjusting the original sample code?



Here's my code in addition to the throwProps sample code.

The calculateDialDirection is wrong, so I need a delay of some sort when grabbing the old and the new rotation values. Maybe with an array.

    // Calculate Direction of Dial (Clockwise or anti-clockwise)
    // ---------------------------
    var oldDialRotation:Number;
    var newDialRotation:Number;
    var calculateDialDirection:Number;
    var dialRotationDirection:uint;
    // Grab first rotation value
     oldDialRotation = degFromDeg(dial.rotation); // i.e. 5º

    // Grab second rotation value
    newDialRotation = degFromDeg(dial.rotation); // i.e. 10º

    calculateDialDirection = newDialRotation - oldDialRotation;

    if (calculateDialDirection > 0 ){
        dialRotationDirection = 1; // Clockwise
    else if (calculateDialDirection < 0 ){
        dialRotationDirection = 0; // Anti-Clockwise
    else {
        // No Change

    // Count How Many Times Dial Has Turned
    var wheelTurnNumber:int = 0;
    if (dialRotAFTERdegFromDeg == 359 && dialRotationDirection == 1){ // Clockwise
        wheelTurnNumber ++;
        else if (dialRotAFTERdegFromDeg == 0 && dialRotationDirection == 0){ // Anti-Clockwise
        wheelTurnNumber --;
Link to comment
Share on other sites

I wonder if you're using a really old version of Draggable. 


The "rotation" value will be in degrees and it should continue to increase as you turn more times (or decrease). So if you spin it two times around completely, rotation would be 720. If you went the other way, it'd be -720. See what I mean? That should make it pretty easy for you (not need for all that conditional logic). 

var numberOfRotations = Math.floor(draggable.rotation / 360);

Or maybe I misunderstood your question. Just please make sure you've got the latest version. 

Link to comment
Share on other sites

Hi Jack,


I'm using Greensock 12 Beta with the throwProps code below.


I knew there would be an easier way than my ott code.


How would the numberofRotations code be applied to the throwProps code?

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.*;


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 {
    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;
    ThrowPropsPlugin.to(dial, {throwProps:{rotation:rVelocity, resistance:250}, ease:Strong.easeOut}, 10, 0.25, 2);
Link to comment
Share on other sites

Sorry about that - I totally thought you were using the JavaScript version with Draggable. My bad. 


I have attached a new FLA that demonstrates the concept of using a proxy object to accomplish this task, plus I'm leveraging the new version of ThrowPropsPlugin that can track the velocity for you. So in the example, you can easily check the proxy.rotation anytime to get the total number of degrees (including full rotations). 


Is that what you were looking for? 


  • Like 1
Link to comment
Share on other sites

Hi Jack,


That's just what I was looking for, a big thanks. The dial shows 10 rotations as 3600º


I've had a go at linking some rotation snap code I received from another post of mine.



Is it possible to take a look as I can't seem figure it out. I'm getting

'ERROR: No velocity was defined in the throwProps tween of [object Object] property: end'


It amends the following code to the bottom of the original AS3 throwProps example.

It uses 
 in throwPropsPlugin.to() after the line
var rVelocity:Number = dif / time;
//New line of code below
ThrowPropsPlugin.to(dial, {throwProps:{rotation:{velocity:rVelocity, resistance:250, end:getEnd}}, ease:Strong.easeOut}, 10, 0.25, 2);

//New Function
function getEnd(endValue) {
var rotationSnap = 90; //Flash needs degrees. No need to convert to radians
return Math.round(endValue / rotationSnap) * rotationSnap;
Link to comment
Share on other sites

What version of ThrowPropsPlugin are you using? It sounds like you might have a very old version (before it recognized the "end" special property)

Link to comment
Share on other sites

I'm using Greensock 12 Beta, throwProps v12.0.9, what's the newest version of Greensock?


The snapping code works with the example code, just not in your new throwProps_rotation_demo.fla.zip

 * VERSION: 12.0.9
 * DATE: 2013-06-25
 * AS3
 * UPDATES AND DOCS AT: http://www.greensock.com
Link to comment
Share on other sites

Ah yes, that's the problem. That's a pretty stale version. We've made some pretty nice feature additions and enhancements since then, like adding a VelocityTracker and that "end" special property, and fine-tuning a few other things under the hood. I'd definitely recommend updating. 

Link to comment
Share on other sites

Hi Jack,


I can't update to the new version at the moment as my subscription has run out.

Could you add the rotation snap code to your throwProps_rotation_demo.fla anyway

and I'll update at a later date.



Link to comment
Share on other sites

Sure, I updated the FLA in the above post. It has the snapping code in place now. 

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.