Question

I have a dial that rotates 120 degrees clockwise and 120 degrees anti clockwise using the rotate TransformGestureEvent.

When rotating this dial I want it to control a movie clip. Dragging through the movieclip as you rotate the dial clockwise then reversing the movieclip when rotating the dial anticlockwise. I want the movieclip to follow the drag of the dial, stopping and starting as and when you drag the dial.

Here is what I have so far but it only seems to turn the movieclip to the last frame then stops?

    import flash.display.MovieClip;
    var dial_mc:MovieClip;
    var knobs_mc:MovieClip;
    var maxRotation:Number = 120;

    var knobFrame:int = knobs_mc.currentFrame;
    var offset:Number = 0;
    var percent:Number = 0;


    knobs_mc.stop();

    Multitouch.inputMode = MultitouchInputMode.GESTURE;

    dial_mc.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotateDial);

    function rotateDial(e:TransformGestureEvent):void
    {
dial_mc.rotation +=  e.rotation;
if (dial_mc.rotation > maxRotation)
{
    dial_mc.rotation = maxRotation;
}
if (dial_mc.rotation < 0)
{
    dial_mc.rotation = 0;
}
dial_mc.addEventListener(TransformGestureEvent.GESTURE_ROTATE, drag);
offset = e.rotation;
if (e.phase == GesturePhase.END)
{
    knobFrame = knobs_mc.currentFrame;

}


function drag(e:TransformGestureEvent):void
{

    percent =  (e.rotation - offset)/knobs_mc.rotation;

    var frame:int = Math.round(percent * knobs_mc.totalFrames) + knobFrame;

    while (frame > knobs_mc.totalFrames)
    {
        frame -=  knobs_mc.totalFrames;
    }

    while (frame <= 0)
    {
        frame +=  knobs_mc.totalFrames;
    }

    knobs_mc.gotoAndStop(frame);
}
    }

Answer 1

You have to adjust your math to map the angles from -120 to 120 to 0 to 240. That way when you try to go to a frame you can get the full range. I’m assuming that frame 1 – 120 have the dial pointing on the left.

One other approach would be to ditch the frames altogether and work with rotating the dial directly using the angle.