Flex HD picture animation

Question

I have a set of high resolution pictures. Each of these pictures shows a car on a different angle. The idea is to switch from one picture to the next so it gives the user the impression the car is turning.

Flex takes to much time to render the picture. Therefore the switch happens with a lagging effect instead of smooth like its suppose to.

First I add the images on a View calling initLeftRightModel onCreateChildren:

        protected function initLeftRightModel():void
        {
            if(containerLeftRight && definitionLeftRight)
            {
                for(var i:int = 0; i<36;i++)
                {
                    var img:Image = new Image();
                    img.height = 1068 * scaleFactor;
                    img.width = 2048 * scaleFactor;
                    img.contentLoader = ldr;
                    img.contentLoaderGrouping = 'gr1';
                    if(i < 10 ) img.source = modelPath+'/0'+i.toString()+'.png';
                    else img.source = modelPath+'/'+i.toString()+'.png';
                    containerLeftRight.addElement(img);
                    if(i>0)img.visible=false;
                }
        }

I call the function turnModelTo to switche the visibility of the last picture to false and the next to true:

        /**Turns the model in the direction of the finger according to the variation of X.**/
        protected function turnModelTo(newX:Number):void
        {           
            var val:int = 0;
            direction = (oldX != newX)?oldX - newX:direction;
            if(oldX > newX) val =  (oldValue+1<36)?oldValue+1:0;
            else if(oldX < newX) val = (oldValue-1>0)?oldValue-1:35;
            else if(oldX == newX) val = oldValue;
            oldX = newX;

            containerLeftRight.getElementAt(oldValue).visible = false;
            oldValue = val;
            containerLeftRight.getElementAt(val).visible =  true;
        }

The images are loaded only one time and I am using caching. The problem is with the rendering of images.

The resolution of the images is 2048x1068. This is a mobile project and I am currently testing on iPad Air. I appreciate any help or ideas about how to best code this functionality.

Thanks

Answer 1

This is a clear case where doing the computations on the GPU would make things a lot better. You should first of all switch renderMode to GPU. Go to application.xml, and edit the following:

<initialWindow>
<renderMode>gpu</renderMode>
</initialWindow>

You should also use the Bitmap class instead of the Image class. This will upload your png files as textures to the GPU. Here is how you do it How do you load a bitmap file into a BitmapData object?

Answer 2

Using so many and so large pictures on mobile, with Flex... it's not surprising you have performance problems.

First thing, you should adapt the images size to the device, on server side, if it's possible. Loading 36 HD images with a 3G connection will take a rather long time. And if it's to reduce their size on the device, it's a loss of time.

Then ensure you use a spark.components.Image and not the old Image class.

Last but not least, use a cache. It's not clear in the code in your question if you defined one, because the way the variable ldr is initialised is not shown. It should be something like:

var ldr = new ContentCache();
ldr.enableCaching = true;
ldr.enableQueueing = true; 

Alternatively, if the images aren't supposed to change, you can embedd them in the application, instead of loading them, and use BitmapImage components to display them. The app will be heavier, but you won't have any loading time.