Question

In my Flash File I have a wheel. The user is able to rotate the wheel by using arrows to jump to the next “segment” (think 20 images attached to each other forming the circumference of the wheel).

Clicking the arrows initiates this code:

protected function rotate():void
        {
            var rotateTo:Number = (-360 / numItems) * currentItem + 90;
            TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );
        }

However, what I want to be able to do is, click and drag to spin the wheel, complete with acceleration and deceleration and even settling on the nearest image when the wheel reduces to a certain speed. I have no idea how to go about doing this: I’ll need to kinda detect a before and after position of the cursor and translate this into a speed for the wheel which then decelerates over time and also detect which image is closest at a certain speed and “snap” it, both scrolling up and down. (it’ll only affect the Y-axis)

Any help would be appreciated

Answer 1

While the mouse is down, in an Enter_frame check for the current offset to the previous position:

private function enterFrameHandler(e:Event)
{
  offset = oldy - oldMousePosition;
  oldy = oldMousePosition
}

This should give you the current velocity. (obivously, for the wheel it’s “wheel.rotation += offset / some_value_to_slow_it_down” in an enterFrame again).

to introduce “easing” you can use a friction variable.

again, in the enterFrame event:

offset *= .8;

and then in order to snap to the next image, check how fast your current velocity is; if it’s below a certain tolerance set the velocity to 0 and ease it to the nearest value. (you guessed it, in an enterFrame event again

if(offset < 1)
{
  offset = 0;
  //calculate the nearest value of the wheel
  //tweenlite right over there
}