5 Replies Latest reply on Mar 25, 2011 9:04 AM by RoryAtUMN

    rotation behavior doesn't look properly in Flex Builder

    reggie.zhou

      hi,

       

      i did a simple test about rotating a cube. some behaviors looks strange.

      the cube has six sides: front,back,left,right,top and bottom.

      rotates Y axial, u will see:  front->right->back->right->front.

      rotates X axial, u will see:  front->top->back->bottom->front

      rotates Z axial:  u always see front side, but it turns cloclwise.

      these above 3 behaviors are proper.

      the funny thing is after you turn Y axail 90 degrees, Z axail doesn't work any more. if you turn Z axail, the behavior is same as turning X axail.

      here is my sample code, u will understand what i mean. i test it under sdk 4.1 and sdk 4.5, same problem.

       

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

      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx"

         width="600" height="600">

       

      <fx:Script>

      <![CDATA[

      import spark.effects.Animate;

      import spark.effects.animation.MotionPath;

      import spark.effects.animation.SimpleMotionPath;

       

       

      protected function rotateY(event:MouseEvent):void

      {

      var rotateHorizontalAnim:Animate = new Animate(cube);

      var rotateHorizontalMP:SimpleMotionPath = new SimpleMotionPath("rotationY", cube.rotationY, cube.rotationY + 90);

      rotateHorizontalAnim.motionPaths = Vector.<MotionPath>([rotateHorizontalMP]);

      rotateHorizontalAnim.play();

      }

       

      protected function rotateX(event:MouseEvent):void

      {

      var rotateHorizontalAnim:Animate = new Animate(cube);

      var rotateHorizontalMP:SimpleMotionPath = new SimpleMotionPath("rotationX", cube.rotationX, cube.rotationX + 90);

      rotateHorizontalAnim.motionPaths = Vector.<MotionPath>([rotateHorizontalMP]);

      rotateHorizontalAnim.play();

      }

       

       

      protected function rotateZ(event:MouseEvent):void

      {

      var rotateHorizontalAnim:Animate = new Animate(cube);

      var rotateHorizontalMP:SimpleMotionPath = new SimpleMotionPath("rotationZ", cube.rotationZ, cube.rotationZ + 90);

      rotateHorizontalAnim.motionPaths = Vector.<MotionPath>([rotateHorizontalMP]);

      rotateHorizontalAnim.play();

      }

      ]]>

      </fx:Script>

       

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

      <s:BorderContainer id="cube" x="100" y="100" height="300" width="300"

         transformX="150" transformY="150" transformZ="150"

         fontSize="30">

      <s:BorderContainer id="front" height="300" width="300" alpha="0.5">

      <s:Label text="Front" x="100" y="100"/>

      </s:BorderContainer>

      <s:BorderContainer id="left" height="300" width="300" z="300" rotationY="90" alpha="0.5">

      <s:Label text="Left" x="100" y="100"/>

      </s:BorderContainer>

      <s:BorderContainer id="right" height="300" width="300" x="300" rotationY="-90" alpha="0.5">

      <s:Label text="Right" x="100" y="100"/>

      </s:BorderContainer>

      <s:BorderContainer id="back" height="300" width="300" z="300" x="300" rotationY="180" alpha="0.5">

      <s:Label text="Back" x="100" y="100"/>

      </s:BorderContainer>

      <s:BorderContainer id="top" height="300" width="300" rotationX="-90" z="300" alpha="0.5">

      <s:Label text="Top" x="100" y="100"/>

      </s:BorderContainer>

      <s:BorderContainer id="bottom" height="300" width="300" rotationX="90" y="300" alpha="0.5">

      <s:Label text="Bottom" x="100" y="100"/>

      </s:BorderContainer>

      </s:BorderContainer>

      <s:Button label="rotate Y" x="10" y="500" click="rotateY(event)"/>

      <s:Button label="rotate X" x="100" y="500" click="rotateX(event)"/>

      <s:Button label="rotate Z" x="200" y="500" click="rotateZ(event)"/>

       

      </s:WindowedApplication>

      i'm wondering this is a bug or i did something wrong.
      appreciate any help.
      reggie

        • 1. Re: rotation behavior doesn't look properly in Flex Builder
          RoryAtUMN

          I am having the exact same issue! After rotating an object 90 degrees on the y axis, all further rotateX transformations act as if I'm setting rotateZ. If I set the initial  yrotation to 0 or 180, setting the rotateX parameter acts as expected. Does anyone have any ideas?

           

          Thanks,

          -Rory

          • 2. Re: rotation behavior doesn't look properly in Flex Builder
            Shongrunden Adobe Employee

            Here's a smaller example that demonstrates what you are running into:

             

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark">

             

                <s:controlBarContent>

                    <s:Button label="rotationY=30" click="btn.rotationY=30;rx.value=0;rz.value=0" />

                    <s:Button label="rotationY=80" click="btn.rotationY=80;rx.value=0;rz.value=0" />

                    <s:Button label="rotationY=90" click="btn.rotationY=90;rx.value=0;rz.value=0" />

             

                    <s:HSlider toolTip="rotate X" id="rx" minimum="-180" value="0" maximum="180"/>

                    <s:HSlider toolTip="rotate Z" id="rz" minimum="-180" value="0" maximum="180"/>

                </s:controlBarContent>

             

                <s:Button id="btn" label="A" x="100" y="100" width="100" height="100" rotationX="{rx.value}" rotationZ="{rz.value}" />

             

            </s:Application>

             

            1. Press rotationY=90

            2. Slide the first slider to the right

            3. Notice the rotation is counter clockwise

            4. Press rotationY=90

            5. Slide the second slider to the right

            6. Notice the rotation is clockwise

             

            You'll notice that changing rotationX and rotationZ don't quite act the same as the rotation is in opposite directions.  I haven't looked into the math involved here, but I believe that may be the expected behavior.  (I'm not a 3D expert so if someone else knows better please correct me)

             

            It looks like you might be trying to do things that are a little beyond Flash Player's "3D effects" which are also sometimes described as 2.5D or "postcards in space".  If you want true 3D abilities you will probably want to look into some 3D frameworks like Away3D or Papervision3D.  Also check out the "Molehill" API that is coming in a future release of Flash Player for more information.

             

             

            • 3. Re: rotation behavior doesn't look properly in Flex Builder
              reggie.zhou Level 1

              thanks Shongrunden, Your example is better to demostrate to problem.

              My point is, when rotationY is 90 degrees or -90 degrees, roationX and rotationZ are rotating around thes ame axail, but oppsite direction. the behavior is different wehn rotationY is 0 or 180 degrees.

              Now i'm pretty sure that's a flex problem, not my programing problem.

              thank you for your answer, i have to find a new solution.

              and i hope flex team can fix this in the formal sdk 4.5 release.

              • 4. Re: rotation behavior doesn't look properly in Flex Builder
                Shongrunden Adobe Employee

                Here's an even simpler ActionScript project example that demonstrates this isn't a bug in the Flex framework:

                package

                {

                    import flash.display.Shape;

                    import flash.display.Sprite;

                    import flash.events.Event;

                 

                    public class RotationExample extends Sprite

                    {

                        private var myShape1:Shape;

                        private var myShape2:Shape;

                 

                        public function RotationExample()

                        {

                            myShape1 = new Shape();

                            myShape1.x = 100;

                            myShape1.y = 100;

                            myShape1.graphics.beginFill(0xFF0000);

                            myShape1.graphics.drawRect(0, 0, 100, 100);

                            myShape1.graphics.endFill();

                            myShape1.rotationY = 90;

                            this.addChild(myShape1);

                 

                            myShape2 = new Shape();

                            myShape2.x = 100;

                            myShape2.y = 100;

                            myShape2.graphics.beginFill(0x00FF00);

                            myShape2.graphics.drawRect(0, 0, 100, 100);

                            myShape2.graphics.endFill();

                            myShape2.rotationY = 90;

                            this.addChild(myShape2);

                 

                            // animate on enterFrame

                            addEventListener(Event.ENTER_FRAME, handle);

                        }

                 

                        private function handle(e:Event):void {

                            myShape1.rotationX++;

                            myShape2.rotationZ++;

                        }

                    }

                }

                 

                (See attached RotationExample.swf)

                 

                I suspect that 90 degrees only seems special because of the projection.  You might want to try drawing out the axes on paper and visualizing what you would expect vs what you see in that example. I believe this is working as expected, but don't have an elegant mathematical explanation so I may be wrong.

                • 5. Re: rotation behavior doesn't look properly in Flex Builder
                  RoryAtUMN Level 1

                  Thanks Shongrunden,I think you're right that the the rotation acts as

                  expected, but only kind of. I think I figured out why behavior is troubling

                  to me and it's because I'm used to thinking about 3D objects as collections

                  of vertices that you can transform independently from the initial

                  orientation.

                   

                  So for example, if I was making a 3D cube in opengl i could do something

                  like this

                   

                  1) instantiate the object in it's initial position and rotation

                   

                  2) move the object vertices to world space and apply a rotation

                  transformation to that object centered at the translated 0,0,0 point for the

                  object in world space

                   

                  3) have an object the acts predictably in comparison to the axis in

                  worldspace

                   

                  I've so far bar been unsuccessful in applying worldspace transformations to

                  spark components, and I'm thinking it's because flash doesn't see my 3d

                  objects as a collection of vertices but as wholly integrated object that

                  can't be seperated in that way. So for now, I'm making a large ruleset for

                  animating cubes and if molehill ever gets released I may look into using

                  that (I assume it will be vertice based as well)

                  Thanks,

                  -Rory