0 Replies Latest reply on Aug 8, 2011 10:47 PM by KaiNeuhaus

    3D Rotation moves Component to left border of container


      Hi folks,


      i've read many tutorials and searched already in forums, but i can't get it done.


      First i've got a component which loads an image from an url and fits this to its borders ok, working fine.

      Now i build an 3D-Container Element which has a box (Hbox) and within my imagedisplay-component.


      The ImageDisplayComponent throws an event when finished loading. Catching this event from my 3D-Container i process following code:


      private function rotateOuterRight(val:UIComponent, degree:int):void {
           val.transform.matrix3D = new Matrix3D();

           var perspective:PerspectiveProjection = new PerspectiveProjection();
           perspective.fieldOfView = 30;
           perspective.focalLength = 500;
           perspective.projectionCenter = new Point(val.width, -80);
           val.transform.perspectiveProjection = perspective;
           val.transform.matrix3D.appendTranslation(-val.width, -val.height / 2, 0);
           val.transform.matrix3D.appendRotation(degree, Vector3D.Y_AXIS);
           val.transform.matrix3D.appendTranslation(val.width, val.height / 2, 0);


      The ImageDisplay-Component (val:UIComponent) should turn it's left border 3D beveled to the back.

      So you see i translate the rotation point to the right side and half of it's height, rotating it and translate back.


      This first works, but in most cases (not every time) it moves to the the left border of my 3D-Container. From the normal View it gets smaller (in case of the 3D-Rotation) and than moving to the left.


      I'm using the same component-array for turing another imagecontainer (with another (same) 3D-Container) in 3D - turning the right side beveled into the back.

      My 3D-Container has also an alignment right, so i'm really getting confused why it moves to the left.


      When rendering happens i see the "jump" to the left, as i said sometimes it won't move and keeps it's x-position on the right side.


      I tried to start a timer when the imageloading-complete event is thrown, waiting some ms and applying the 3D Rotation after timer is expired.


      I think any other event is thrown and moving my image-display-container to the left.


      Any Ideas ???

      I'm working with flex 3.5.0 and target Player is 10.x