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

    3D Perspective and Rotation Issues

    nathanbie

      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;
                      this.addChild(uiComponent);
                          
                      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;
                          
                      uiComponent.addChild(customProgressBar);
                  }
      

       

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

      flash_preloader.png

       

       

       

       

      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:

      flex_3d_bug.png

      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">
      
           <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
                <s:Rotate3D id="rotateObject" angleYFrom="0" angleYTo="360" duration="500" />
           </fx:Declarations>
      
           <s:Scroller height="300" width="200">
                <s:Group>
                     <s:layout>
                          <s:VerticalLayout />
                     </s:layout>
                     <mx:Canvas height="100%" width="100%">
                          <mx:Canvas height="500" width="400" backgroundColor="#ffdd00" />
                     </mx:Canvas>
                     <s:Group height="100%" width="100%">
                          <s:Rect height="100%" width="100%">
                               <s:fill>
                                    <s:SolidColor color="#000000" />
                               </s:fill>
                          </s:Rect>
                          <s:Rect height="50" width="80" rotationX="25">
                               <s:fill>
                                    <s:SolidColor color="#ffdd00" />
                               </s:fill>
                          </s:Rect>
                          <s:Button height="50" width="80" rotationX="25" x="50" y="50" />
                     </s:Group>
                     <s:Group height="100%" width="100%">
                          <s:Rect height="100%" width="100%">
                               <s:fill>
                                    <s:SolidColor color="#000000" />
                               </s:fill>
                          </s:Rect>
                          <s:Button id="rotateBtn" label="Rotate 3D" height="50" width="100" verticalCenter="0" horizontalCenter="0" click="rotateObject.play([rotateBtn]);" />
                     </s:Group>
                </s:Group>
           </s:Scroller>
      </s:Application>
      

       

       

       

       

      The complete flex project and preloader fla are attached.