as3 loading screen

Question

How do you create these "loading, please wait" splash screens with a loading bar and percentage for your swf? Does as3 have some built-in methods or should it be designed from scratch?

I mean, how do you detect that your swf file is being loaded into client's browser?

Oh and I have all my content stored in one frame only. pure as3 code.

Answer 1

If all of your code is on the timeline, then the easiest way is to make a second swf that is only used for loading your main swf. If your main swf is called main.swf, the code in your loading swf would be something like this:

//make a loader
var loader:Loader = new Loader()

//listen for loading progress
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);

//listen for when the load is finished
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

//load begins...
loader.load(new URLRequest("main.swf"));

function onProgress(event:ProgressEvent):void
{
    //calculate how much has been loaded
    var percentageLoader:Number = event.bytesLoaded / e.bytesTotal;
    
    //use your percentage number here to drive a loader bar graphic
}

function onComplete(event:Event):void
{
    //remove listeners now that loading is done
    loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
    loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete);
    
    //add loaded swf to the stage
    addChild(loader.content);
}

As an aside, externalizing your assets opens up new preloading possibilities. Instead of having everything in your main swf, you can have your main swf load external assets, and preload those assets. Since your main swf would then be small, there would be no need to have a second swf just for loading your main swf.