AS3 External Preloader working in Flash CS5 but not in browser (chrome, Ff or IE) - sticks at 100%

Question

I have seen a couple of questions that have been resolved but none are specific to the code i'm using so i was wondering if anybody could help.

I am using an external preloader (loader.swf) to load the movie (ayproj.swf). The preloader works fine when running the .swf file in flash player and when simulating a download in flash cs5 but when i upload it to the internet and open the index.html in which the flash is in a 100% frame it either sticks on 100% (Ff and IE) or just says "pl" (chrome) - the initial text in the dynamic percentage text box.

The code for the preloader is:

stop();

import flash.net.URLRequest;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.display.Loader;
import com.greensock.TweenNano;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, onStageResize);
addEventListener(Event.ENTER_FRAME, onFrame);

var barcomp:Number = stage.stageWidth;
percentContainer.x = stage.stageWidth/2 - percentContainer.width/2;
percentContainer.y = stage.stageHeight/2 - percentContainer.height/2;

function onStageResize(evt:Event):void {

    bar_mc.x = 0;
    bar_mc.y = (stage.stageHeight) - 3;
    bar_mc.height = 20;
    barcomp = stage.stageWidth;

    percentContainer.x = stage.stageWidth/2 - percentContainer.width/2;
    percentContainer.y = stage.stageHeight/2 - percentContainer.height/2;

}



function onFrame(evt:Event):void {

    bar_mc.x = 0;
    bar_mc.y = (stage.stageHeight) - 3;
    bar_mc.height = 20;
    barcomp = stage.stageWidth;

    percentContainer.x = stage.stageWidth/2 - percentContainer.width/2;
    percentContainer.y = stage.stageHeight/2 - percentContainer.height/2;   
}

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
loader.load(new URLRequest("ayproj.swf"));
loader.visible = false;

function loop(e:ProgressEvent):void {

    var perc:Number = e.bytesLoaded / e.bytesTotal;
    var s:String = Math.ceil(perc*100).toString()+"%";
    percentContainer.percent.text = s
    bar_mc.width = perc * barcomp;
}

function done(e:Event):void { 

    removeChildAt(getChildIndex(percentContainer)); 
    removeChildAt(getChildIndex(bar_mc));

    percentContainer.percent = null; 

    stage.addChild(loader);

    TweenNano.delayedCall(0.5, fadeInAyproj);
}

function fadeInAyproj():void {

    loader.visible = true;
    TweenNano.to(loader, 0.8, {alpha:0});
    TweenNano.from(loader, 0.8, {alpha:0});
}

I would be extremely grateful if anybody could help.

Answer 1

You have to check for 100% loaded in the ProgressEvent handler, as well. The complete event sometimes does not fire.

function loop(e:ProgressEvent):void {

    var perc:Number = e.bytesLoaded / e.bytesTotal;
    if (perc >= 100) done (e);

//...more code
}

Also, make sure ayproj.swf is located in the same folder as index.html, or make the request url relative to index.html's path.