6 Replies Latest reply on Nov 10, 2009 2:39 AM by nikos101

    3d effect to datagrid

    nikos101 Level 2

      I can't apply an effect like this to a datagrid:

       

      <s:Rotate3D id="rotator" angleYFrom="0" angleYTo="360"
                          autoCenterTransform="true"
                          effectEnd="effectEndHandler(event)"/>



      <s:Button label="Flip grid" mouseDown="animateRotate(adg1)">
                 
              </s:Button>
              <mx:AdvancedDataGrid id="adg1" designViewDataType="tree" width="353" height="100%">
                  <mx:columns>
                      <mx:AdvancedDataGridColumn headerText="Column 1" dataField="col1"/>
                      <mx:AdvancedDataGridColumn headerText="Column 2" dataField="col2"/>
                      <mx:AdvancedDataGridColumn headerText="Column 3" dataField="col3"/>
                  </mx:columns>
              </mx:AdvancedDataGrid>


      private function animateRotate(target:Object):void
                  {
                      if (animatingTargets[target.id] === undefined)
                      {
                          var effect:Effect;               
                         
                          effect = rotator;
                          effect.target = target;
                          animatingTargets[target.id] = effect;
                          effect.play();
                      }
                  }

        • 1. Re: 3d effect to datagrid
          SrinivasAnnam Adobe Employee

          This looks like a bug. It works fine with DataGrid. But, not with AdvancedDataGrid. So, you can use DataGrid instead of AdvancedDataGrid if it serves your purpose.

           

          I have logged below bug for this issue which should be fixed in Flex 4.0

           

          http://bugs.adobe.com/jira/browse/FLEXDMV-2247

           

          Regards

          Srinivas Annam

          http://srinivasannam.wordpress.com

          1 person found this helpful
          • 2. Re: 3d effect to datagrid
            nikos101 Level 2

            Thanks, for me

             

            <s:Rotate3D id="rotator" angleYFrom="0" angleYTo="-90"
                                    repeatBehavior="{RepeatBehavior.REVERSE}"
                                    effectEnd="effectEndHandler(event)"/>

             

             

            doesn't rotate the full amount or do the   repeatBehavior for datagrid

            • 3. Re: 3d effect to datagrid
              Chet Haase Level 3

              Not sure if you just left something out of your snippet below, but repeatBehavior only kicks in if the effect actually repeats. By default, repeatCount is 1, so it only plays once. If you want to repeat indefinitely, set repeatCount to 0, or to repeat a specific number of times set that value instead (repeatCount=2 will play twice, etc.)

               

              Chet.

              • 4. Re: 3d effect to datagrid
                nikos101 Level 2

                awsome thanks,

                 

                still not sure why the angle is not reaching 90.

                • 5. Re: 3d effect to datagrid
                  Chet Haase Level 3

                  It is rotating the full -90 degrees; it just doesn't look like it.

                   

                  It's because of the combination of the transform center and the 3D projection point.

                   

                  By default, transform effects work on the origin of the target object, typically (0, 0). So in the case of your datagrid, it will do the rotation around the left edge of the object.

                   

                  Meanwhile, 3D projection happens by default around the center of the object, which means that you'll see that object rotated -90 that is positioned to the left of the projection point, just because that's how perspective projection works (blah blah view frustum blah blah blah).

                   

                  To make the object "disappear" when it's at a 90 degree rotation, you need the object to rotate around the same point as the projection point. This means either you should set autoCenterTransform="true", which will flip the grid around its center:

                          <s:Rotate3D id="rotator" angleYFrom="0" angleYTo="-90"

                                      repeatBehavior="{RepeatBehavior.REVERSE}"

                                      repeatCount="2" autoCenterTransform="true"

                                      effectEnd="effectEndHandler(event)"/>

                   

                  or set the projection point to the left edge of the object:

                          <s:Rotate3D id="rotator" angleYFrom="0" angleYTo="-90"

                                      repeatBehavior="{RepeatBehavior.REVERSE}"

                                      repeatCount="2"

                                      projectionX="0" projectionY="0" autoCenterProjection="false"

                                      effectEnd="effectEndHandler(event)"/>

                   

                  Chet.

                  1 person found this helpful
                  • 6. Re: 3d effect to datagrid
                    nikos101 Level 2

                    Many thanks makes sense. My datagrid was 3000+pixels wide and I was looking at the left edge