12 Replies Latest reply on Feb 24, 2010 10:57 AM by Francisc

# Wheel of Fortune

Hello!

I need some help with concept more than implentation in this one.

I have a circle that I want to give interactivity similar to a Wheel of Fortune.

By that I mean that I want it to rotate in respect to mouse over speed.

So! If the mouse moves fast, spin 360 degrees, otherwise less.

Dany - you described how I can calculate speed so I have that.

But how do I give the impression of momentum? Like the user is spinning the wheel in real life?

Thanks!

• ###### 1. Re: Wheel of Fortune

Hi again mash,

I'd go for this:

1. When user clicks and holds the mouse on the wheel, the rotation of the wheel is 'locked' to the mouseX.

2. Then, without releasing the mouse button, the user slides the mouse to the right. This is where your speed calculation begins. This behavior gives the user the impression that they are actually holding the wheel!

3. Finally, the user releases the mouse button. You then have a speed calculated, right? Now, an enterFrame handler is activated. You set a speed property to the value that was calculated in step 2. In every enterFrame execution, you rotate the wheel by an amount based on the speed property. Then you mulitply this property with a 'factor' variable which value is less than 1 so the value decreases. Now the next enterFrame execution will cause the wheel to rotate a little less and so on, until the speed property is almost 0 so the wheel stop spinning. Playing around with starting speed and the factor variable will give you a momentum impression.

This should get you going I hope.

Have fun!

Dany

• ###### 2. Re: Wheel of Fortune

Insightful, thanks!

What is the enterFrame event you wrote about? Is it in Flex as well?

• ###### 3. Re: Wheel of Fortune

Yep!

Dany

• ###### 4. Re: Wheel of Fortune

FUN!

<?xml version="1.0" encoding="utf-8"?>

<mx:Script>
<![CDATA[
import mx.events.FlexEvent;

private var acceleration:Number = 1.01;
private var startingSpeed:Number = 5;
private var currentSpeed:Number = 0;
private var maxSpeed:Number = 150;

private function init():void
{

}

private function updateWheel(evt:Event):void
{
if (currentSpeed > maxSpeed)
{
currentSpeed = maxSpeed;
acceleration = 1/acceleration;
}

if (currentSpeed < 1)
{
w.removeEventListener("enterFrame", updateWheel);
acceleration = 1/acceleration;
}
w.rotation += currentSpeed;
currentSpeed *= acceleration;
}

private function handleStart():void
{
currentSpeed = startingSpeed;
}
]]>
</mx:Script>
<mx:Spacer height="300"/>
<mx:Canvas id="w" clipContent="false">
<mx:Image
width="400" height="400" x="-200" y="-200" source="images/wheel.png"/>
</mx:Canvas>

<mx:Button label="start" click="handleStart()"/>
</mx:Application>

• ###### 5. Re: Wheel of Fortune

Thank you ever so much, Dany! I hope you didn't waste too much time with this, I wish there was a way to repay you.

• ###### 6. Re: Wheel of Fortune

Call again if your Wheel of fortune site gained a fortune!!

D

• ###### 7. Re: Wheel of Fortune

Haha! It's not that. It's a flower head that needs to spin... nothing more.

• ###### 8. Re: Wheel of Fortune

How does enterFrame event work?

• ###### 9. Re: Wheel of Fortune

Flash Player runs at a certain frame rate. Every screen refresh, an enterFrame event is fired by the flash player.

Dany

• ###### 10. Re: Wheel of Fortune

I've used that event many a times, but in the Flash IDE, when Flex was but a myth.

So basically, everytime the displayList gets updated, this event is fired?

• ###### 11. Re: Wheel of Fortune

I think it's the other way around but I don't know that. You should ask Greg or FlexHarui if you really want to know

Dany

• ###### 12. Re: Wheel of Fortune

I sometimes get the impression they are brothers! Ha-ha!

Thank you Dany, sadly I ran out of award points, but... you have my gratitude!