Flex Mobile, Slow image loading when switching screens

Question

I'm building an app with Flex 4.6 and AIR. It will be published on Android and iPhone but for now I'm testing on an Android device.

I've got the basic flow working with different screens and even a flash component.

However, when switching between screens, all of my s:Image objects take a long time to load, even when deployed to an actual device. By long time I only mean about a half a second. This normally wouldn't be so bad, but the text on the screen shows up immediately, while all of the images remain white for half a second and then they load.

Is this just an AIR/Flex thing? Has anyone else run in to this, hopefully with a solution?

Answer 1

Images tend to load quicker if you embed them in the Flex App. More info on that here. The code behind this would look like this:

[Embed(source="logo.gif")] 
[Bindable] 
public var imgCls:Class;

Then you can use that class like this:

 <s:Image id="myImageRaw" source="{imgCls}"/>

[code copied from docs]

If you need to use the same image multiple times, you should look into using the BitMapImage class; and cloning the bitMapData of the first image. Here is a quick utility class I "Borrowed and modified" for getting the BitMapData from a sprite, and vice versa. [The Flex Image class class extends sprite, so you should be able to send an image in as the input]

package com.natejc.utils.display
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.DisplayObject;
    import flash.display.Sprite;


    // **********************************************************************************
    // **********************************************************************************
    // borrowed from http://www.natejc.com/source/com/natejc/utils/display/DisplayConverter.as

    /**
     * Provides convenience conversion methods for Sprites and Bitmaps.
     * 
     * Open source. Free to use. Licensed under the MIT License.
     * 
     * @author  Nate Chatellier
     * @see     http://blog.natejc.com
     */
    public class DisplayConverter
    {


        // **********************************************************************************


        /**
         * Constructs the DisplayConverter object.
         */
        public function DisplayConverter()
        {
            trace("DisplayConverter is a static class and should not be instantiated");

        } // END CONSTRUCTOR



        // **********************************************************************************


        /**
         * Converts a Bitmap to a Sprite.
         *
         * @param   bitmap      The Bitmap that should be converted.
         * @param   smoothing   Whether or not the bitmap is smoothed when scaled.
         * @return              The converted Sprite object.
         * 
         * @see                 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Bitmap.html#smoothing
         */
        public static function bitmapToSprite(bitmap:Bitmap, smoothing:Boolean = false):Sprite
        {
            var sprite:Sprite = new Sprite();
            sprite.addChild( new Bitmap(bitmap.bitmapData.clone(), "auto", smoothing) );
            return sprite;

        } // END FUNCTION bitmapToSprite


        // **********************************************************************************


        /**
         * Converts a Sprite to a Bitmap.
         *
         * @param   sprite      The Sprite that should be converted.
         * @param   smoothing   Whether or not the bitmap is smoothed when scaled.
         * @return              The converted Bitmap object.
         * 
         * @see                 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html#draw()
         */
        public static function spriteToBitmap(sprite:Sprite, smoothing:Boolean = false):Bitmap
        {
            var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);
            bitmapData.draw(sprite);

            return new Bitmap(bitmapData, "auto", smoothing);

        } // END FUNCTION spriteToBitmap



        /**
         * JH DotComIT added 11/19/2011
         * Converts a Sprite to a BitmapData.
         *
         * @param   sprite      The Sprite that should be converted.
         * @return              The converted Bitmap object.
         * 
         * @see                 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html#draw()
         */
        public static function spriteToBitmapData(sprite:Sprite):BitmapData
        {
            var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);
            bitmapData.draw(sprite);

            return bitmapData;

        } // END FUNCTION spriteToBitmapData

        /**
         * Converts BitmapData to a Sprite.
         *
         * @param   bitmap      The Bitmap that should be converted.
         * @param   smoothing   Whether or not the bitmap is smoothed when scaled.
         * @return              The converted Sprite object.
         * 
         * @see                 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Bitmap.html#smoothing
         */
        public static function bitmapDataToSprite(bitmapData:BitmapData, smoothing:Boolean = false):Sprite
        {
            var sprite:Sprite = new Sprite();
            sprite.addChild( new Bitmap(bitmapData.clone(), "auto", smoothing) );
            return sprite;

        } // END FUNCTION bitmapToSprite


        // **********************************************************************************
        // **********************************************************************************


    } // END CLASS DisplayConverter
} // END PACKAGE

Once you have the BitMapData you can call clone to get a copy of it and create multiple instances of the same image. [Do some research into blitting; a technique used by game developers]. The Spark Image tag will also accept BitMapData as the source.