5 Replies Latest reply on May 24, 2008 12:33 AM by mdmave

    Rotating with matrix transform

    mdmave Level 1
      Hi all,
      I am trying to rotate a subclass of UIComponent, but am running into some issues. I am using a matrix transform to rotate the object around the center, but I am noticing that my object trails up and to the left. Its not noticeable at first, but after a while, the object seems to anchor around the 0,0 point of the main application. My code is available here:

      http://flash.pastebin.com/m610b0f9f

      Would love some guidance!

      Thanks
        • 1. Rotating with matrix transform
          ZeDav Level 1
          Don't know
          • 2. Rotating with matrix transform
            VarioPegged Level 2
            I'm guessing that the creep you're seeing on the spinner might be due to some rounding errors, but I can't say for certain looking at it casually.

            I've posted a slightly different approach that doesn't make use of any matrix transforms, but has exactly the same effect, while using the bulk of your code logic. It basically adds a shape, draws your spinner on the shape's graphics property and then rotates the shape. It's clean and simple without having to mess with any matrix transforms. This solution is based on Peter Ent's article.

            Reworked solution: http://flash.pastebin.com/m2f47f787

            TS
            • 3. Re: Rotating with matrix transform
              mdmave Level 1
              Vario,
              Thanks so much for the reply! I ended up rewriting the component, and it seems to be working a lot better now. Check out the attached code.
              • 4. Re: Rotating with matrix transform
                VarioPegged Level 2
                Yes, it works fine for me now. Using the rotate effect is an elegant solution, however the only drawback currently is that the continuous rotation prevents it from behaving like a typical spinner. The rotation should be incremented by (360 / spokes) degrees resulting in a number of steps equal to the number of spokes.

                You'd be able to accomplish this by binding the angleFrom and angleTo properties of the rotate effect to a single bindable public property that you increment by (360 / spokes) degrees in an "enterframe" event handler. Something like this ...

                [Bindable] public var degrees:Number = 0;

                BindingUtils.bindProperty(rotate, "angleFrom", this, "degrees");
                BindingUtils.bindProperty(rotate, "angleTo", this, "degrees");

                ....
                private function handleEnterFrame(e:Event): void
                {
                rotate.end();
                degrees += 360 / spokes;
                rotate.play();
                }

                TS
                • 5. Re: Rotating with matrix transform
                  mdmave Level 1
                  Hey thanks again! My very first bindable property :P I was never really sure when those were used.

                  One thing I noticed, I had to add this in the handleEnterFrame function:

                  private function handleEnterFrame(event:Event):void {
                  rotate.end();
                  degrees += 360 / this.spokes;
                  degrees %= 360;
                  rotate.play();
                  }

                  Otherwise the spinner would spiral out of control after a minute or two. Everything is going along fine and then it jumps out of control..

                  Here is the full code