7 Replies Latest reply on Dec 1, 2011 10:09 AM by Flex harUI

    Performance issues to 3d rotated  graphic in a spark DG    renderer

    nikos101 Level 2

      I tried animating a bunch of graphiccs in a spark dg, but its pretty much imposssible to get them to stay in sync with each other, why is the flash player so choppy at aninations?

       

       

      Im doing something like this, sorry if this idea of doing this in a renderer makes you cringe

       

      override protected function getCurrentRendererState():String
      {
      super.getCurrentRendererState();
      if(data){
      if(!data.dateAcknowledged){
      ct.animateRotateY360_CEN_INDEF_SLOW(iconCritical,100);
      return 'critical';
      }

       


       

      public function  animateRotateY360_CEN_INDEF_SLOW(target:Object):void{




      var effect:Effect;           







      effect = rotateY360_CEN;



      effect.target = target;



      effect.repeatCount = 0;



      effect.repeatDelay = 0;



      effect.duration = 5000;



      effect.play();
        • 1. Re: Performance issues to 3d rotated  graphic in a spark DG    renderer
          Flex harUI Adobe Employee

          Use the profiler to see what is taking so long, but I would suspect that the rotation causes the DG to refresh.  I would customize the renderer to block some of the invalidate*() methods from propagating up to the Grid and DataGrid.

          1 person found this helpful
          • 2. Re: Performance issues to 3d rotated  graphic in a spark DG    renderer
            nikos101 Level 2

            I don't see any memory issues,

             

            can you have a quick look at this code Flex harUI, im not really sure where to block these methods.

             

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

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

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

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

                                clipAndEnableScrolling="true">

               

                <fx:Script>

                    <![CDATA[

                        import utils.CustomTransitions;

                        import utils.UsefulConstants;

                        private var ct:CustomTransitions = new CustomTransitions;

                       

                       

                       

                       

                        override protected function getCurrentRendererState():String

                        {

                            super.getCurrentRendererState();

                            if(data){

                           

                                if(!data.dateAcknowledged){

                                    ct.animateRotateY360_CEN_INDEF_SLOW(iconCritical,100);

                                   

                                    return 'critical';

                                }

                           

                                else if(data.dateAcknowledged.time - data.dateReceived.time >= UsefulConstants.oneDay){

                                    return 'warning';

                                }

                                else if(data.dateAcknowledged.time - data.dateReceived.time < UsefulConstants.oneDay){

                                    return 'safe';

                                }

                                else if(data.status == 'CLOSED'){

                                    return 'safe';

                                }

                                else{

                                    throw new Error('Unforseen condtions for data.dateReceived.time - data.dateReceived.time');

                                   

                                }

                                trace(data.dateAcknowledged.time + ' ' + data.dateReceived.time + ' ' + UsefulConstants.oneDay);

                                trace(data.dateAcknowledged.time - data.dateReceived.time + ' ' + UsefulConstants.oneDay);

                            }

                            return null;

                        }

                       

                       

                       

                       

                       

                       

                        override public function set data(value:Object):void

                        {

                            // TODO Auto Generated method stub

                            super.data = value;

                           

                            if(data){

                               

                                if(!data.dateAcknowledged){

                                    ct.animateRotateY360_CEN_INDEF_SLOW(iconCritical,100);

                                   

                                    this.currentState = 'critical';

                                }

                                   

                                else if(data.dateAcknowledged.time - data.dateReceived.time >= UsefulConstants.oneDay){

                                    this.currentState =  'warning';

                                }

                                else if(data.dateAcknowledged.time - data.dateReceived.time < UsefulConstants.oneDay){

                                    this.currentState =  'safe';

                                }

                                else if(data.status == 'CLOSED'){

                                    this.currentState =  'safe';

                                }

                                else{

                                    throw new Error('Unforseen condtions for data.dateReceived.time - data.dateReceived.time');

                                   

                                }

                            }

                       

                        }

                       

                    ]]>

                </fx:Script>

                <s:states>

                    <s:State name="warning"/>

                    <s:State name="safe"/>

                    <s:State name="critical"/>

                </s:states>

                <s:HGroup  x="-1" y="-1" width="100%" height="100%"

                          horizontalAlign="center" verticalAlign="middle">

                   

                    <s:Graphic id="icon" includeIn="warning" x="-1" y="5" width="16" height="20"

                               version="2.0" viewHeight="600" viewWidth="200">

                        <s:filters>

                            <s:DropShadowFilter  blurX="0" blurY="0" distance="1"  strength="1" />

                        </s:filters>

                        <s:Ellipse x="58" y="37" width="88" height="401" horizontalCenter="0">

                            <s:fill>

                                <s:SolidColor alpha="1" color="#Ffaf45"/>

                            </s:fill>

                            <s:stroke>

                                <s:SolidColorStroke color="#FE3D44" alpha="1" weight="1"/>

                            </s:stroke>

                        </s:Ellipse>

                        <s:Ellipse width="51" height="97" x="79" y="478">

                            <s:fill>

                                <s:SolidColor alpha="1" color="#f69240"/>

                            </s:fill>

                            <s:stroke>

                                <s:SolidColorStroke color="#942EC8" alpha="0.62"/>

                            </s:stroke>

                           

                        </s:Ellipse>

                        <s:Ellipse width="31" height="147" x="72" y="122">

                            <s:fill>

                                <s:SolidColor alpha="1" color="#f69240"/>

                            </s:fill>

                            <s:stroke>

                                <s:SolidColorStroke color="#942EC8" alpha="0.62"/>

                            </s:stroke>

                        </s:Ellipse>

                   

                    </s:Graphic>

                   

                    <s:Graphic

                               includeIn="critical" width="20" height="20" version="2.0" id="iconCritical"

                              >

                        <s:filters>

                            <s:DropShadowFilter  blurX="0" blurY="0" distance="1"  strength="1" />

                        </s:filters>

                        <s:Path data="M3,0 L10,8 17,0 20,3 12,10 20,17 17,20 10,12 3,20 0,17 8,10 0,3Z ">

                            <s:fill>

                                <s:LinearGradient  rotation="45">

                                    <s:GradientEntry color="#ff3F66" ratio="0.3"/>

                                    <s:GradientEntry color="#ffff4A"/>

                                </s:LinearGradient>

                            </s:fill>

                       

                        </s:Path>

                    </s:Graphic>

                   

                    <s:Graphic

                               includeIn="safe" width="20" height="20" version="2.0"

                               viewHeight="600" viewWidth="600">

                        <s:filters>

                            <s:DropShadowFilter id="dsfSymbol" blurX="0" blurY="0" distance="1"  strength="1" />

                        </s:filters>

                        <s:Path data="M49,294 L245,410L551,116C551,116 259,519 257,516L49,294Z " winding="nonZero" x="-13.5" y="-57.3" scaleX="1.051689863204956" scaleY="1.122194528579712">

                            <s:fill>

                                <s:LinearGradient x="49" y="115.95" scaleX="402.4029386075604" rotation="18.660078428615776">

                                    <s:GradientEntry color="#359F66" ratio="0.006535947712418301"/>

                                    <s:GradientEntry color="#7EFA4A" ratio="0.9803921568627451"/>

                                </s:LinearGradient>

                            </s:fill>

                            <s:stroke>

                                <s:SolidColorStroke color="#C6A470" alpha="1" weight="1"/>

                            </s:stroke>

                        </s:Path>

                    </s:Graphic>

             

                   

                </s:HGroup>

            </s:GridItemRenderer>

            • 3. Re: Performance issues to 3d rotated  graphic in a spark DG    renderer
              Flex harUI Adobe Employee

              I would override the methods invalidateProperties, invalidateSize and invalidateDisplayList and just do an early exit if the transition is playing.

               

              I noticed that it looks like there is a chance that the animateRotate call can get called several times per renderer.  That could be a problem as well.

              1 person found this helpful
              • 4. Re: Performance issues to 3d rotated  graphic in a spark DG    renderer
                nikos101 Level 2

                yeah its always confused and bugged me how often these set data methods get called in the dg + its hard to tell when getCurrentRendererState gets called so I stuck the animate in both

                 

                override public function set data(value:Object):void

                 

                and

                 

                getCurrentRendererState

                • 5. Re: Performance issues to 3d rotated  graphic in a spark DG    renderer
                  Flex harUI Adobe Employee

                  That’s why I’d use the profiler to see if that is part of the problem.

                  • 6. Re: Performance issues to 3d rotated  graphic in a spark DG    renderer
                    nikos101 Level 2

                    Could you expain what I should do here within <s:GridItemRenderer to do what you are saying

                     

                    override public function invalidateProperties():void

                                {

                                    // TODO Auto Generated method stub

                                    super.invalidateProperties();

                                   

                                }

                     

                    The profiler is not helping me trouble shoot this issue, the memory usage is low for this renderer

                    cheers

                    • 7. Re: Performance issues to 3d rotated  graphic in a spark DG    renderer
                      Flex harUI Adobe Employee

                      The profiler has an option of doing performance profiling instead of memory profiling.

                       

                      I would have some flag to know when you are rotating and just not call super.invalidateProperties in that case.