1 Reply Latest reply on Feb 5, 2010 12:45 AM by Shongrunden

    3D Perspective and Rotation Issues


      I've ran into 2 issues recently.


      1.) Perpective projection within a flash movieclip

      This one may be an error on my part. I was atttemping to use a flash movie clip with animated gears as a preloader. The gears have a 3d rotation applied in flash.  To lock the perspective I am manually setting perspectiveProjection within flex when I add the movieclip:

      public function init():void
                      var uiComponent:UIComponent = new UIComponent();
                uiComponent.width = this.width;
                uiComponent.height = this.height;
                uiComponent.x = 0;
                uiComponent.y = 0;
                      customProgressBar = new CustomPreloader();
                      var startX:Number = Math.round((uiComponent.width - customProgressBar.width) / 2);
                      var startY:Number = Math.round((uiComponent.height - customProgressBar.height) / 2);
                      customProgressBar.x = startX;
                      customProgressBar.y = startY;
                      var customProjection:PerspectiveProjection = new PerspectiveProjection;
                      customProjection.fieldOfView = 125;
                      customProjection.projectionCenter = new Point(85, 45);
                      customProgressBar.gears.transform.perspectiveProjection = customProjection;


      This worked in most instances except in a custom module loader were it displayed the following:






      2.) 3D rotations and Scroller issues

      While testing the preloader I ran into another issue.  Objects with a 3d rotation are being offset by their sibling's scroll bar. This also affects the rotate3d effect.


      Screen cast of the issue: http://screencast.com/t/NjU0NTM2N

      Screen shot:


      Simplified code without preloader MCs:

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
                <!-- Place non-visual elements (e.g., services, value objects) here -->
                <s:Rotate3D id="rotateObject" angleYFrom="0" angleYTo="360" duration="500" />
           <s:Scroller height="300" width="200">
                          <s:VerticalLayout />
                     <mx:Canvas height="100%" width="100%">
                          <mx:Canvas height="500" width="400" backgroundColor="#ffdd00" />
                     <s:Group height="100%" width="100%">
                          <s:Rect height="100%" width="100%">
                                    <s:SolidColor color="#000000" />
                          <s:Rect height="50" width="80" rotationX="25">
                                    <s:SolidColor color="#ffdd00" />
                          <s:Button height="50" width="80" rotationX="25" x="50" y="50" />
                     <s:Group height="100%" width="100%">
                          <s:Rect height="100%" width="100%">
                                    <s:SolidColor color="#000000" />
                          <s:Button id="rotateBtn" label="Rotate 3D" height="50" width="100" verticalCenter="0" horizontalCenter="0" click="rotateObject.play([rotateBtn]);" />





      The complete flex project and preloader fla are attached.