14 Replies Latest reply on Aug 8, 2011 10:53 PM by Shongrunden

    Slow Transition on the ipad

    reefkeysoftware

      Greetings,

       

      I've been writing an app in AIR  2.7 for the ipad.  I've run into a performance problem when transitioning from one view to another.  It takes about 4 seconds before the animation start.  The target view has about 15 elements (a mix if list/images and textareas).  I believe the problem is in the creation of the elements before the animation starts.

       

      Has anyone else run into this situation?  If so...suggestings?

       

       

      --Klee

        • 1. Re: Slow Transition on the ipad
          Shongrunden Adobe Employee

          Make sure you are exporting a release build with ipa-app-store packaging type to get the best performance.

          • 2. Re: Slow Transition on the ipad
            reefkeysoftware Level 1

            Shongruden,

             

              Is that the same as setting my run configuration to "On Device" -> "Standard"?  If so that is what I'm doing.

             

              I'm trying another version which sets the creation policy to "all".

             

            --Keith

            • 3. Re: Slow Transition on the ipad
              reefkeysoftware Level 1

              Shongrunden,

               

                This is sovled and you were exactly right.  I ended up taking the long path to fully understand what you meant.  By that, I mean I downloaded the AIR SDK and compiled my project on the command line.  Not until I used the ipa-app-store setting did the application perform better.  Im guessing the equivalent in the Flash Builder IDE is to export the Release Build.

               

              Thanks for pointing me in the right direction.

               

              --Keith

              • 4. Re: Slow Transition on the ipad
                Shongrunden Adobe Employee

                Yes export release build should do ipa-app-store.  That is the most optimized packaging type and is what you need to use in order to submit an IPA to the Apple app store.

                • 5. Re: Slow Transition on the ipad
                  reefkeysoftware Level 1

                  Shongrunden,

                    Just a note, I think the performance is still a bit too slow.  I am building an magazine app and the rending time leaves the user wondering if they really touched the button.  Perhaps AIR is not as mature as I thought it would be for iPad apps.
                  Thanks for your help.
                  --Keith

                  • 6. Re: Slow Transition on the ipad
                    Shongrunden Adobe Employee

                    Does the actual transition animation look smooth, but the time it takes to start it is what is taking too long?

                    • 7. Re: Slow Transition on the ipad
                      reefkeysoftware Level 1

                      Shongruden,

                       

                        The animation its smooth.  As you said, the problem is in the time before

                      the animation starts.  There seems to be about 2-3 seconds of waiting before

                      the transition starts.   This of shorter now that I'm compiling  with the

                      best setting.  I guess I could put up a loading indicator, but id rather

                      have the performance.

                       

                      Klee

                      • 8. Re: Slow Transition on the ipad
                        Shongrunden Adobe Employee

                        It sounds like the creation time of the view you are transitioning to is large.  Can you post the code of that View?  Maybe there are some obvious optimizations we can do.

                        • 9. Re: Slow Transition on the ipad
                          drkstr_1 Level 4

                          You need to optomize your app better. Our app transitions some fairly complex views, but still provides a smooth user experience.

                           

                          What optomization techniques have you tried so far?

                          • 10. Re: Slow Transition on the ipad
                            reefkeysoftware Level 1

                            Shongruden,

                             

                              So here is the bulk of the mxml.  I didnt paste the contents of the script tag because I dont think it is relevant at this point.  If you think it is, let me know and I'll post it as well.  This is really a prototype with static data.

                             

                            -----------------------------------------------------------------------------------

                             

                             

                            <s:states>

                              <s:State name="landscape"/>

                              <s:State name="portrait"/>

                            </s:states>

                             

                             

                             

                             

                            <fx:Declarations>

                              <!-- Place non-visual elements (e.g., services, value objects) here -->

                              <fx:XML id="body" xmlns="">

                              <body><b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  <br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.  <br/><br/> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</body>

                            </fx:XML>

                             

                             

                             

                            <fx:Array id="articles">

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                              <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                            </fx:Array>

                             

                             

                            </fx:Declarations>

                             

                             

                            <fx:Style>

                            @namespace s "library://ns.adobe.com/flex/spark";

                             

                             

                             

                            .labelStyle {

                            color: #0000ff;

                            alpha:.4

                            }

                             

                            .messageStyle {

                            color: #000000;

                            alpha:.4;

                            fontSize:10;

                            }

                             

                            #articleHeader{

                            fontSize:30;

                            color:black;

                            borderVisible:false;

                            contentBackgroundColor:white;

                            editable:false;

                            }

                             

                            #articleBody{

                            fontSize:16;

                            color:black;

                            borderVisible:false;

                            contentBackgroundColor:white;

                            editable:false;

                            }

                             

                            #categoryName{

                            paddingTop:10;

                            fontSize:25;

                            paddingLeft:5;

                            backgroundColor:#cecece;

                             

                            }

                             

                             

                             

                            </fx:Style>

                             

                             

                            <s:List id="categoryList" left="0" top="95" width="320" height="647" click="list1_clickHandler(event)" includeIn="landscape">

                              <s:itemRenderer>

                                <fx:Component>

                                  <s:IconItemRenderer labelField="label" messageStyleName="messageStyle" messageField="shortDescription" iconField="icon" />

                                </fx:Component>

                              </s:itemRenderer>

                            </s:List>

                             

                             

                             

                            <s:TextArea id="articleHeader" x="328" y="43" width="528" height="127" editable="false" selectable="false" text="Title" x.landscape="328" y.landscape="53" width.landscape="516" x.portrait="5" y.portrait="52"/>

                             

                             

                            <s:Line x="0" y="199" width="687" xFrom="330" xTo="400" yFrom="10" yTo="10" x.landscape="0" y.landscape="224" x.portrait="-323" y.portrait="208">

                              <s:stroke>

                                <s:SolidColorStroke color="0x000000" weight="1"/>

                              </s:stroke>

                            </s:Line>

                             

                             

                            <s:Line includeIn="portrait" x="135" y="42" xFrom="400" xTo="400" yFrom="10" yTo="170">

                              <s:stroke>

                                <s:SolidColorStroke color="0x000000" weight="1"/>

                               </s:stroke>

                            </s:Line>

                             

                             

                            <s:Line x="-80" y="38" height="694" xFrom="400" xTo="400" yFrom="10" yTo="724" includeIn="landscape">

                              <s:stroke>

                                <s:SolidColorStroke color="0x000000" weight="1"/>

                              </s:stroke>

                            </s:Line>

                             

                             

                             

                            <s:Image includeIn="portrait" x="541" y="52" width="50" cacheAsBitmap="true" source="@Embed('/assets/my headshot.png')"/>

                            <s:Image includeIn="portrait" x="589" y="162" width="40" cacheAsBitmap="true" source="@Embed('/assets/Google-icon.png')"/

                            <s:Image includeIn="portrait" x="541" y="114" width="40" cacheAsBitmap="true" source="@Embed('/assets/Facebook-icon.png')"/>

                            <s:Image includeIn="portrait" x="589" y="114" width="40" cacheAsBitmap="true" source="@Embed('/assets/Digg-icon.png')"/>

                            <s:Image includeIn="portrait" x="633" y="114" width="40" cacheAsBitmap="true" source="@Embed('/assets/Linked-In-icon.png')"/>

                            <s:Image includeIn="portrait" x="541" y="162" width="40" cacheAsBitmap="true" source="@Embed('/assets/Google-icon.png')"/>

                            <s:Image includeIn="portrait" x="634" y="162" width="40" cacheAsBitmap="true" source="@Embed('/assets/Share-icon.png')"/>

                            <s:Image x="810" y="180" width="39" height="22" cacheAsBitmap="true" source="@Embed('/assets/Actions-bookmark-new-icon.png')" x.landscape="323" y.landscape="203" x.portrait="487" y.portrait="189"/>

                             

                             

                            <!-- Gold Starts -->

                            <s:Image x="474" y="178" width="20" height="20" cacheAsBitmap="true" source="@Embed('/assets/star_gold.png')" x.portrait="151" y.portrait="187"/>

                            <s:Image x="527" y="178" width="20" height="20" cacheAsBitmap="true" source="@Embed('/assets/star_gold.png')" x.portrait="204" y.portrait="187"/>

                            <s:Image x="500" y="178" width="20" height="20" cacheAsBitmap="true" source="@Embed('/assets/star_gold.png')" x.portrait="177" y.portrait="187"/>

                             

                            <s:TextArea id="articleBody" right="0" bottom="42" width="696" height="486" editable="false" selectable="false" text="" right.landscape="0" bottom.landscape="42" height.landscape="469" right.portrait="10" bottom.portrait="50" width.portrait="753" height.portrait="739"/>

                             

                             

                            <s:Label includeIn="portrait" x="597" y="60" width="94" text="Don Reisinger"/>

                            <s:Label x="332" y="183" width="183" fontSize="12" text="Publish Date: 7/27/2011"

                            x.portrait="9" y.portrait="192"/>

                             

                             

                             

                            <components:actionBar id="header" x="0" y="0" cacheAsBitmap="true"/>

                            <components:CategorySelector id="cats" visible="false" x="452" y="39"/>

                            <s:Label id="categoryName" x="0" y="50" width="320" height="46" color="#08254C" fontWeight="bold" text="Security" includeIn="landscape"/>

                            <components:MyStuffSelector id="myStuff" visible="false" x="578" y="40"/>

                            <s:Button x="857" y="714" width="75" height="30" label="ad" click="showAd()" x.portrait="683" y.portrait="962"/>

                             

                             

                            <s:Rect id="layover" visible="true" left="0" right="0" top="0" bottom="0" left.portrait="0" right.portrait="0" top.portrait="0" bottom.portrait="0">

                              <s:stroke>

                                <s:SolidColorStroke color="0x000000" weight="1"/>

                              </s:stroke>

                              <s:fill>

                                <s:SolidColor color="0x000000" alpha=".5"/>

                              </s:fill>

                            </s:Rect>

                             

                             

                            <s:Image id="large_ad" visible="true" cacheAsBitmap="true" click="hideAd()" horizontalCenter.landscape="0" source="/assets/layover_ad.png"

                            verticalCenter.landscape="0" horizontalCenter.portrait="0" verticalCenter.portrait="0"/>

                            <components:publishShareBlock includeIn="landscape" x="852" y="51">

                            </components:publishShareBlock>

                            • 11. Re: Slow Transition on the ipad
                              reefkeysoftware Level 1

                              drkstr_1,

                               

                                The only optimizations I've tried so far are placing cacheAsBitmap=true on some of the images I use.  Im using spark components and spark primitives.  Is there something else you can recommend?

                               

                              --Keith

                              • 12. Re: Slow Transition on the ipad
                                Shongrunden Adobe Employee

                                First try changing your s:Image into s:BitmapImage and don't set cacheAsBitmap on it.

                                • 13. Re: Slow Transition on the ipad
                                  reefkeysoftware Level 1

                                  Shongrunden,

                                   

                                    That does improve the performance.  I think the time is closer to 2 seconds now. Are there any other optimizations you can see?

                                   

                                  Thanks for the tip.

                                   

                                  --Keith

                                  • 14. Re: Slow Transition on the ipad
                                    Shongrunden Adobe Employee

                                    Is there a reason you embed the same assets over and over again?  Try embedding them at most once each and see if that helps.

                                     

                                    So for example turn this:

                                     

                                    <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                                      <fx:Object label="This is the title" icon="@Embed('/assets/article_icon.png')" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                                    ...

                                     

                                    Into something like this:

                                     

                                    <fx:Script>

                                    [Embed(source="/assets/article_icon.png")]

                                    [Bindable]

                                    public var myIcon:Class;

                                    </fx:Script>

                                    ...

                                    <fx:Object label="This is the title" icon="{myIcon}" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                                      <fx:Object label="This is the title" icon="{myIcon}" shortDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>

                                     

                                    Be careful with cacheAsBitmap.  Make sure you know how to use it, if you don't it can lead to performance decreases.

                                     

                                    After that I would need to see the code in your custom components to see if they can also be optimized.

                                     

                                    You might find this presentation useful: http://flexponential.com/2011/04/20/flex-performance-tips-tricks/