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

    Wheel of Fortune

    Francisc Level 3

      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
          archemedia Level 4

          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

          1 person found this helpful
          • 2. Re: Wheel of Fortune
            Francisc Level 3

            Insightful, thanks!

             

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

            • 3. Re: Wheel of Fortune
              archemedia Level 4

              Yep!

               

              this.addEventListener(FlexEvent.ENTER_FRAME, functionName);

               

              Dany

              1 person found this helpful
              • 4. Re: Wheel of Fortune
                archemedia Level 4

                FUN!

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
                   
                    <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;
                                w.addEventListener("enterFrame", updateWheel);
                            }
                        ]]>
                    </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>

                 

                 

                wheel.png

                • 5. Re: Wheel of Fortune
                  Francisc Level 3

                  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
                    archemedia Level 4

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

                     

                    D

                    • 7. Re: Wheel of Fortune
                      Francisc Level 3

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

                       

                      • 8. Re: Wheel of Fortune
                        Francisc Level 3

                        How does enterFrame event work?

                        • 9. Re: Wheel of Fortune
                          archemedia Level 4

                          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
                            Francisc Level 3

                            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
                              archemedia Level 4

                              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
                                Francisc Level 3

                                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!