Question

I’m working on a little project in Flex that’s an application to upload images to a server. Since it’s a pretty lightweight application (~40 kb in release version), I would like it to display instantly when the html page is loaded. But somehow there’s a delay of up to 1-2 seconds before it shows up. I think it is a delay actually between the load and the display of the application, and I believe it could be removed.

However, I couldn’t find a solution on how to shorten/remove the delay. First, I tried to disable the preloader, but this did nothing. There’s actually a delay between a preloader shuts and the application displays (it is around 500 ms – 1 sec). My next guess was to write a custom preloader class to display at least an image of the application (even though it wouldn’t be clickable, but at least something).

Any advice would be greatly appreciated.

Answer 1

Well i actually managed to get the desired behavior. Your comments were useful though.

Here’s how. I implemented a custom preloader for my application, and in the constructor of the preloader I loaded an image (read: screenshot) of my application in a disabled state (so that user won’t want to interact with it). I used the SnapShot Demo from this link – http://blogs.adobe.com/aharui/2010/01/custom_preloader_downloadprogr.html

Here’s the code that I wrote for the preloader (most of is is from the link below, a cut version):

package
{

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
import flash.utils.ByteArray;
import mx.events.FlexEvent;
import mx.events.RSLEvent;
import mx.preloaders.IPreloaderDisplay;

public class SSPreloader extends Sprite implements IPreloaderDisplay
{        
    [ Embed(source="startup.png", mimeType="application/octet-stream") ]
    public var WelcomeScreenGraphic:Class;

    private var loader:Loader;
    public function SSPreloader() 
    {
        super();

        loader = new Loader();
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderBytesLoaded);
        loader.loadBytes(new WelcomeScreenGraphic() as ByteArray);
    }

    public function onLoaderBytesLoaded(event : Event) : void
    {
        loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoaderBytesLoaded);
        if (event.target.content != null)
        {
            var image:DisplayObject = event.target.content as DisplayObject; 
            addChildAt(image,0);
        }
    }


    private var _backgroundAlpha:Number = 1;
    public function get backgroundAlpha():Number
    {
        if (!isNaN(_backgroundAlpha))
            return _backgroundAlpha;
        else
            return 1;
    }

    public function set backgroundAlpha(value:Number):void
    {
        _backgroundAlpha = value;
    }

    //----------------------------------
    //  backgroundColor
    //----------------------------------

    private var _backgroundColor:uint;
    public function get backgroundColor():uint
    {
        return _backgroundColor;
    }
    public function set backgroundColor(value:uint):void
    {
        _backgroundColor = value;
    }

    //----------------------------------
    //  backgroundImage
    //----------------------------------

    private var _backgroundImage:Object;
    public function get backgroundImage():Object
    {
        return _backgroundImage;
    }
    public function set backgroundImage(value:Object):void
    {
        _backgroundImage = value;
    }

    //----------------------------------
    //  backgroundSize
    //----------------------------------

    private var _backgroundSize:String = "";
    public function get backgroundSize():String
    {
        return _backgroundSize;
    }
    public function set backgroundSize(value:String):void
    {
        _backgroundSize = value;
    }

    //----------------------------------
    //  preloader
    //----------------------------------

    private var _preloader:Sprite;         
    public function set preloader(value:Sprite):void
    {
        _preloader = value;

        value.addEventListener(ProgressEvent.PROGRESS, progressHandler);    
        value.addEventListener(Event.COMPLETE, completeHandler);

        value.addEventListener(RSLEvent.RSL_ERROR, rslErrorHandler);

        value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
        value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
    }

    //----------------------------------
    //  stageHeight
    //----------------------------------

    private var _stageHeight:Number = 375;
    public function get stageHeight():Number 
    {
        return _stageHeight;
    }
    public function set stageHeight(value:Number):void 
    {
        _stageHeight = value;
    }

    //----------------------------------
    //  stageWidth
    //----------------------------------

    private var _stageWidth:Number = 500;
    public function get stageWidth():Number 
    {
        return _stageWidth;
    }
    public function set stageWidth(value:Number):void 
    {
        _stageWidth = value;
    }

    //--------------------------------------------------------------------------
    //
    //  Methods:IPreloaderDisplay
    //
    //--------------------------------------------------------------------------

    public function initialize():void
    {
    }

    //--------------------------------------------------------------------------
    //
    //  Methods
    //
    //--------------------------------------------------------------------------

    private var lastBarWidth:Number = 0;
    protected function setDownloadProgress(completed:Number, total:Number):void
    {
    }

    protected function setInitProgress(completed:Number, total:Number):void
    {
    }

    protected function showDisplayForDownloading(elapsedTime:int,
                                                 event:ProgressEvent):Boolean
    {
        return false;
    }

    protected function showDisplayForInit(elapsedTime:int, count:int):Boolean
    {
        return false;
    }

    //--------------------------------------------------------------------------
    //
    //  Event handlers
    //
    //--------------------------------------------------------------------------

    protected function progressHandler(event:ProgressEvent):void
    {
    }

    protected function completeHandler(event:Event):void
    {
    }

    protected function rslErrorHandler(event:RSLEvent):void
    {
        _preloader.removeEventListener(ProgressEvent.PROGRESS,
            progressHandler);    

        _preloader.removeEventListener(Event.COMPLETE,
            completeHandler);

        _preloader.removeEventListener(RSLEvent.RSL_ERROR,
            rslErrorHandler);

        _preloader.removeEventListener(FlexEvent.INIT_PROGRESS,
            initProgressHandler);

        _preloader.removeEventListener(FlexEvent.INIT_COMPLETE,
            initCompleteHandler);
    }

    protected function initProgressHandler(event:Event):void
    {
    }

    protected function initCompleteHandler(event:Event):void
    {
        dispatchEvent(new Event(Event.COMPLETE)); 
    }
}    

}

I got a huge class eventually, but it does what its supposed to. Any comments on the code would be appreciated.