Views transitions on iOS devices

[Luis_Pedro_Ferreira]

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...

[Innovatology]

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-packaging-wor...

[Luis_Pedro_Ferreira]

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.

[Innovatology]

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

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

[Luis_Pedro_Ferreira]

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

[Innovatology · Accepted solution]

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!

[Luis_Pedro_Ferreira]

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

[Luis_Pedro_Ferreira]

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.