7 Replies Latest reply on Jan 2, 2007 1:47 PM by TucsonJava

    smooth continuous rotation

    TucsonJava Level 1
      The desired effect is a smooth, continuous rotation while waiting for some action to complete. The code below works except that the image pauses slightly after each rotation. The code is quite simple. Does anyone have a suggestion?

      // set the target
      effect_rotate.target = image_busy;
      // start the rotation
      effect_rotate.repeatCount = 0;
      effect_rotate.play();

      // the effect definition
      <mx:Rotate id="effect_rotate" />

      // the image definition
      <mx:Image source="images/yinyang.png" id="image_busy" />
        • 1. smooth continuous rotation
          FlightGuy Level 1
          You might try setting the duration to a larger number (default is 500ms), so it rotates more slowly. It also depends what you're doing in the background (while it's busy). Because flash is single-threaded, processing events will stop your animation.
          • 2. Re: smooth continuous rotation
            TucsonJava Level 1
            Thanks for the suggestion but it does not seem to help. Here's what I added:

            effect_rotate.duration = 1000;
            effect_rotate.angleFrom = 0;
            effect_rotate.angleTo = 0;
            effect_rotate.repeatDelay = 0;

            Regardless of what I set the duration to, the rotation seem to always be the same, with the slight pause on each rotation.

            Nothing is going on in the background, just waiting for the server response.
            • 3. Re: smooth continuous rotation
              FlightGuy Level 1
              So do I understand correctly that you always get the pause at 0 degrees? or is it jerky movement during the rotation? You might try setting your angle from to 1, instead of zero. I don't know what the default step size is - you may be able to see by looking at the source.
              • 4. Re: smooth continuous rotation
                FlightGuy Level 1
                Oh - I tried a similar example and see what the problem is - it's using a non-linear easing function by default. Try setting the easingFunction="{Linear.easeNone}"

                You'll need to import mx.effects.easing.Linear
                • 5. Re: smooth continuous rotation
                  TucsonJava Level 1
                  Yes, the slight pause is at 0, at the end of each rotation.

                  I added the Linear.easeNone to the Rotate definition per your suggestion. However, I do not notice any difference in the effect. It still has the pause at the end of each rotation. The rotation is smooth, not jerky.

                  <mx:Rotate id="effect_rotate" easingFunction="{Linear.easeNone}"/>
                  • 6. Re: smooth continuous rotation
                    TucsonJava Level 1
                    I created a small test application to show you the pause in rotation. As it turns out, the test applications works perfectly. So I will examine the differences between the test app and my app to find out the problem.

                    FWIT, here is the test app. You will need to change the image to one of your own.

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                    <mx:Script>
                    <![CDATA[
                    import mx.effects.easing.Linear;
                    import flash.utils.setTimeout;
                    // handles clicks of all buttons
                    private function clickHandler(event:MouseEvent):void{
                    busyHandler("start")
                    setTimeout(stopIt,5000); // delay 5 seconds to view rotation
                    }
                    // stops the rotation
                    private function stopIt():void{
                    busyHandler("");
                    }

                    // busyHandler to give visual indicator of working on emailing/faxing/printing
                    private function busyHandler(message:String):void{
                    if(message == "start"){
                    effect_rotate.repeatCount = 0;
                    effect_rotate.duration = 200;
                    effect_rotate.angleFrom = 1;
                    effect_rotate.angleTo = 360;
                    effect_rotate.repeatDelay = 0;
                    effect_rotate.play();
                    }else{
                    effect_rotate.end();
                    }
                    }

                    ]]>
                    </mx:Script>
                    <!-- define effects -->
                    <mx:Rotate id="effect_rotate" easingFunction="{Linear.easeNone}" target="{image_busy}"/>
                    <mx:HBox>
                    <mx:Button label="Rotate" id="b_rotate" click="clickHandler(event)"/>
                    <mx:Image source="@Embed('/images/yinyang.png')" id="image_busy" />
                    </mx:HBox>

                    </mx:Application>
                    • 7. Re: smooth continuous rotation
                      TucsonJava Level 1
                      FlightGuy,

                      You answer about the easing function was the one that made the difference. I did not see that initially because I was testing the wrong part of my app.

                      Thanks for your help.