7 Replies Latest reply on Jan 26, 2012 2:12 PM by Luis Pedro Ferreira

    Views transitions on iOS devices

    Luis Pedro Ferreira Level 1

      Hi all!!

       

      I've been looking everywhere for this problem, seams that some people have it an other don't, or at least don't mention it.

       

      I'm trying Flex (4.5.1 now) to do some tests and studies with the capability to biuls mobile applications that run either on Android and iPhone.

       

      I did a simple 2 View application with a button on eash one. The buttons have a click event that pushes and pops the second View.

       

      Everything works fine and it's very easy to do.

      On the simulator all transitions are run smooth but when I release an IPA file and install it on my iPhone (4 with 5.0 iOS) or iPad (1 with 5.0 iOS) the performanc of the app is realy bad. I mean, transitions looks like runing on 5 FPS.

       

      Already tried to change frameRate, cashAsBitmap and nothing seams to change the performance that views are sliding.

       

      Code is very simple:

      View 1:

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

                          xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" cacheAsBitmap="true">

       

        <fx:Script>

                          <![CDATA[

                                    protected function button1_clickHandler(event:MouseEvent):void

                                    {

        // TODO Auto-generated method stub

                                              navigator.pushView(View2);

                                    }

                          ]]>

        </fx:Script>

       

        <fx:Declarations>

        <s:SlideViewTransition id="slideTransition" duration="1000"/>

        </fx:Declarations>

                <s:Button x="157" y="52" label="Go to second View" click="button1_clickHandler(event)"/>

      </s:View>

       

      View 2:

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

                          xmlns:s="library://ns.adobe.com/flex/spark" title="View2" cacheAsBitmap="true">

       

        <fx:Script>

                          <![CDATA[

                                    protected function button1_clickHandler(event:MouseEvent):void

                                    {

        // TODO Auto-generated method stub

                                              navigator.popView();

                                    }

                          ]]>

        </fx:Script>

       

        <fx:Declarations>

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

        </fx:Declarations>

                <s:Button x="235" y="55" label="Go Back" click="button1_clickHandler(event)"/>

      </s:View>

       

      I'm I doing anything wrong? I'm I missing anything???

       

      Hopw you have the solution for this...


        • 1. Re: Views transitions on iOS devices
          Innovatology Level 3

          Are you using a Debug/Run configuration instead of the "Export release build" option? If so, make sure you are using "Standard packaging". That will compile the app to native code but will take a while to package. If you use "Fast packaging" it will package faster but run much slower because it is running in a non-optimized interpreted mode. That's often OK for quick debugging but can't be submitted to the App Store and has obvious performance limitations.

           

          This might help:

          http://gregsramblings.com/2011/06/13/video-interview-with-scott-petersen-about-how-ios-pac kaging-works/

          • 2. Re: Views transitions on iOS devices
            Luis Pedro Ferreira Level 1

            Hi Jon, first of all thank you for your reply.

             

            I already tried to Run/Debug with Standard Packaging, "Export release build" and nothing shows any improvment on performance.

            Now I downloaded the 4.6 and did a list wirh an ItemIconRender defining the label and a very simple messageFunction. This lis has its dataProvided from an ArrayCollection defined in MSML (for test purposes) and an embed chevron.

             

            Thant's the list code:

                                <s:List width="100%" height="100%" dataProvider="{requestArray}" opaqueBackground="0xFFFFFF">

              <s:itemRenderer>

              <fx:Component>

                                                              <s:IconItemRenderer label="{data.route}" messageFunction="getDutyTimes" decorator="{chevron}">

              <fx:Script>

                                                                                  <![CDATA[

             

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

                                                                                            private var chevron:Class;

             

                                                                                            private function getDutyTimes(item:Object):String

                                                                                            {

                                                                                                      return item.reportTime + " - " + item.offdutyTime;

                                                                                            }

             

                                                                                  ]]>

              </fx:Script>

              </s:IconItemRenderer>

              </fx:Component>

              </s:itemRenderer>

              </s:List>

             

            When I make a release build of this app and install it on my iPhone, the scroll performance it still a bit low looking like the list is scrolling every 5px up or down.

            I don't know how to explain but I think you get the picture.

             

            Does anyone knows why this happen?? Even on Flex 4.6?

            Tried both iPhone 4 and iPad 1.

            • 3. Re: Views transitions on iOS devices
              Innovatology Level 3

              Have you tried changing from CPU rendering to GPU or vice versa?

               

              Also, cacheAsBitmap could be problematic for interactive elements such as scrolling lists.

              1 person found this helpful
              • 4. Re: Views transitions on iOS devices
                Luis Pedro Ferreira Level 1

                Ya, I was thinking about that and actualy I already google about it but I couldn't find anything I could understand.

                 

                For example, cashAsBitmap, where should I use it? In the chevron? In the entire IconItemRender? In the entire view?

                 

                And never know how to change from CPU to GPU. If it's not asking too much, can you give me a quick tuto on that?

                Thanks in advance.

                 

                LP

                • 5. Re: Views transitions on iOS devices
                  Innovatology Level 3

                  To switch between CPU and GPU, open your xxxx-app.xml file, uncomment the <renderMode> tag and enter cpu or gpu.

                   

                  This article does a pretty good job of explaining cacheAsBitmap and cacheAsBitmapMatrix, but note that some things may have changed a little in Air 2.6 and newer:

                   

                  Contrary to what one would expect, CPU is often better than GPU on mobile. It depends what you are doing. If in doubt: measure and experiment!

                  • 6. Re: Views transitions on iOS devices
                    Luis Pedro Ferreira Level 1

                    Thank you Jon.

                     

                    In fact, using CPU made it a bit better, not excelent, but acceptable

                    You think there is any way to get it (scrolling and/or transitions) as smooth as the native iOS apps, or at least as smoth as the simulator?

                     

                    LP

                    • 7. Re: Views transitions on iOS devices
                      Luis Pedro Ferreira Level 1

                      I just created a custom ItemRender using AS and changed the render mode to GPU and now the view transitions are now smooth and list scrolling much better, however list scrolling could be a bit better, acceptable for the moment.