8 Replies Latest reply on Apr 5, 2011 2:15 PM by jmandawg

    Spark rotate effect and bad performance & high CPU usage

    jmandawg Level 1

      Hi all,

       

      i'm trying to apply a rotate effect on a skinnable component, and it's resulting in pretty high CPU usage.  It basically runs like crap on older systems.  Any way to improve the performance?  Here is the code:

       

                      rotate = new Rotate(hand);
                      rotate.angleFrom = 0;
                      rotate.angleTo = 360;
                      rotate.duration = 10000;
                      rotate.repeatBehavior = RepeatBehavior.LOOP;
                      rotate.repeatCount = 0;
                      rotate.repeatDelay = 0;
                      rotate.easer = new Linear(0,0);

                      rotate.play();

        • 1. Re: Spark rotate effect and bad performance & high CPU usage
          jmandawg Level 1

          By high CPU i mean, 78% CPU on an Intel i5 cpu.

          • 2. Re: Spark rotate effect and bad performance & high CPU usage
            Shongrunden Adobe Employee

            Can you provide a simple sample application that demonstrates this?

            • 3. Re: Spark rotate effect and bad performance & high CPU usage
              jmandawg Level 1

              The issue is the result of having a somewhat complicated FXG as the background.  I can send you the fxg if you give me your email address.  Then just rotate any png over it.

               

              Here is the code:

               

              <?xml version="1.0" encoding="utf-8"?>
              <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/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" xmlns:backgrounds="com.rtn.jccFlex.fxg.backgrounds.*" xmlns:components="com.rtn.jccFlex.components.*" xmlns:CI="com.rtn.jccFlex.fxg.CI.*" xmlns:flags="com.rtn.jccFlex.fxg.flags.*">
                  <fx:Script>
                      <![CDATA[
                          import mx.events.FlexEvent;
                         
                          import spark.effects.Rotate;
                          import spark.effects.animation.RepeatBehavior;
                          import spark.effects.easing.Linear;
                         
                 
                          [Bindable]public var gridColor:uint = 0x068306;
                         
                          var rotate:Rotate;
                          protected function application1_creationCompleteHandler(event:FlexEvent):void
                          {
                              rotate = new Rotate(hand);
                              rotate.angleBy = 360;
                              rotate.duration = 7000;
                              rotate.repeatBehavior = RepeatBehavior.LOOP;
                              rotate.repeatCount = 0;
                              rotate.repeatDelay = 0;
                              rotate.easer = new Linear(0,0);
                              rotate.play();
                          }

                      ]]>
                  </fx:Script>
                 
                  <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                  </fx:Declarations>
                  <s:Group left="0" right="0" top="0" bottom="0">
                      <backgrounds:CorrelationIndex left="0" right="0" top="0" bottom="0"/>
                  </s:Group>
                 
                  <s:Group top="0" bottom="0" left="0" right="0">
                      <mx:Image source="http://www.openclipart.org/image/800px/svg_to_png/yves_guillou_sport_car_2.png" x="{this.width/2}" y="{this.height/2}" id="hand"/>
                  </s:Group>
              </s:Application>

               

              Send me your email address and i can attach the .fxg file, it's 1.5MB

              • 4. Re: Spark rotate effect and bad performance & high CPU usage
                jmandawg Level 1

                I emailed you the fxg file.  Let me know if you don't get it.

                • 5. Re: Spark rotate effect and bad performance & high CPU usage
                  Shongrunden Adobe Employee

                  I'm seeing about 25% CPU usage on an older MacBook Pro with Flash Player 10.2 and Flex 4.0.0.

                   

                  What SDK version are you using?  What Flash Player version are you using?  Are you on Windows or Mac?

                  • 6. Re: Spark rotate effect and bad performance & high CPU usage
                    jmandawg Level 1

                    Windows XP

                    Flash Builder 4.0.1 build 277662

                    SDK 4.1.0

                    Flash Player version: 10,2,153,1

                     

                     

                    screenshot.39.jpg

                    • 7. Re: Spark rotate effect and bad performance & high CPU usage
                      Shongrunden Adobe Employee

                      I can reproduce it now on Windows XP.

                       

                      Setting cacheAsBitmap on the FXG object brings down the CPU to the expected level.  Here is a slightly simpler repro case with a Rect and a drop shadow:

                       

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

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

                                     xmlns:fxg="*"

                                     creationComplete="rotater.play()">

                       

                          <fx:Declarations>

                              <s:Rotate id="rotater" target="{hand}" angleBy="360" duration="7000"

                                        repeatBehavior="loop" repeatCount="0" repeatDelay="0">

                                  <s:easer>

                                      <s:Linear />

                                  </s:easer>

                              </s:Rotate>

                          </fx:Declarations>

                       

                          <!-- ~80% CPU usage -->

                          <fxg:CorrelationIndex left="0" right="0" top="0" bottom="0" />

                       

                          <!-- ~10% CPU usage when using cacheAsBitmap -->

                          <!--<fxg:CorrelationIndex left="0" right="0" top="0" bottom="0" cacheAsBitmap="true" />-->

                       

                          <!-- ~10% CPU usage when not using FXG -->

                          <!--<s:BitmapImage source="@Embed('bg.png')" left="0" right="0" top="0" bottom="0" />-->

                       

                          <!-- ~7% CPU usage when no background is shown -->

                          <s:Group id="hand" width="100" height="75" x="200" y="200">

                              <s:Rect top="0" left="0" right="0" bottom="0">

                                  <s:fill>

                                      <s:SolidColor color="red" />

                                  </s:fill>

                                  <s:filters>

                                      <s:DropShadowFilter />

                                  </s:filters>

                              </s:Rect>   

                          </s:Group>

                       

                      </s:Application>

                       

                       

                      Do you mind filing a bug for this?  Or if you would rather I can file it for you (assuming it's ok that your FXG file is publicly available).

                      • 8. Re: Spark rotate effect and bad performance & high CPU usage
                        jmandawg Level 1

                        YOu can go ahead and file the bug.  I don't care if you post the .fxg either, but i don't own the copyright to it, it was bought from a clipart website.