Preloader overlaps first frame of website

Hi there, my Flash (CS4/AS3) website has turned out to be pretty huge- it's my first site and I'm ok with it taking a while to load at this time.. planning to clean things up later but need it running in the meantime. I needed a preloader at the beginning, but as so many actions in the site were tied to frame numbers, I decided to make the index.html a swf containing only the preloader and a UI loader, which loads the main site. This works ok, except the site appears to load before the preloader is finished, so the loading bar overlaps the site and the site is only half functional during these few seconds. Anyone have any advice to keep the site from loading until the preloader finishes? The website is www.bespokeglasstile.com and the code I'm using for the preloader is below.
Thanks!!!


var imageURL:String = "bespoke_glass_tile.swf";
var request:URLRequest = new URLRequest(imageURL);
bgtUI.load(request);

progressBar.source = bgtUI;
progressBar.addEventListener(ProgressEvent.PROGRES S, progressHandler);
progressBar.addEventListener(Event.COMPLETE, completeHandler);

function progressHandler (event:ProgressEvent):void {
status_txt.text = int(event.currentTarget.percentComplete) + "%";
}

function completeHandler (event:Event): void {
progressBar.removeEventListener(ProgressEvent.PROG RESS, progressHandler);
progressBar.removeEventListener(Event.COMPLETE, completeHandler);
removeChild(progressBar);
status_txt.text = "";
}

Try this. Make bgtUI alpha=0. In the completeHandler function you make bgtUI alpha=100.

No luck, the site still appears under the loader bar when the preloader is less than half done. This is how I added the alpha in, in case I've written it wrong...

var imageURL:String = "bespoke_glass_tile.swf";
var request:URLRequest = new URLRequest(imageURL);
bgtUI.load(request);
bgtUI.alpha = 0;

progressBar.source = bgtUI;
progressBar.addEventListener(ProgressEvent.PROGRES S, progressHandler);
progressBar.addEventListener(Event.COMPLETE, completeHandler);

function progressHandler (event:ProgressEvent):void {
status_txt.text = int(event.currentTarget.percentComplete) + "%";
}

function completeHandler (event:Event): void {
progressBar.removeEventListener(ProgressEvent.PROG RESS, progressHandler);
progressBar.removeEventListener(Event.COMPLETE, completeHandler);
removeChild(progressBar);
status_txt.text = "";
bgtUI.alpha = 100;
}

Actionscript Code:

progressBar.parent.removeChild(progressBar);

arkitx

The problem is that whilst your preloader bar is showing 10%, it should actually be showing 100% as the loading has completed.

Change your code to the following and see what happens. What you should see happen is that once your SWF appears the textbox should also be shown in the top left saying "Preloader fully complete at 10 (or 100)". If this is indeed what happens then take the second bit of code and replace your current code with it.

var textBox:textfield = new textfield() // we'll use this to bug catch
var imageURL:String = "bespoke_glass_tile.swf";
var request:URLRequest = new URLRequest(imageURL);
bgtUI.load(request);
bgtUI.alpha = 0;

progressBar.source = bgtUI;
progressBar.addEventListener(ProgressEvent.PROGRES S, progressHandler);
progressBar.addEventListener(Event.COMPLETE, completeHandler);

function progressHandler (event:ProgressEvent):void {
status_txt.text = int(event.currentTarget.percentComplete) + "%";
}

function completeHandler (event:Event): void {
addChild(textBox); // adding textbox to top left
textBox.text = "Preloader fully complete at "+event.currentTarget.percentComplete // tracing where we're at when the complete handler is given
progressBar.removeEventListener(ProgressEvent.PROG RESS, progressHandler);
progressBar.removeEventListener(Event.COMPLETE, completeHandler);
removeChild(progressBar);
status_txt.text = "";
bgtUI.alpha = 100;
}

---

If the above showed the textbox at "10%", then:

var imageURL:String = "bespoke_glass_tile.swf";
var request:URLRequest = new URLRequest(imageURL);
bgtUI.load(request);
bgtUI.alpha = 0;

progressBar.source = bgtUI;
progressBar.addEventListener(ProgressEvent.PROGRES S, progressHandler);
progressBar.addEventListener(Event.COMPLETE, completeHandler);

function progressHandler (event:ProgressEvent):void {
status_txt.text = int((event.currentTarget.percentComplete)*10) + "%";
}

function completeHandler (event:Event): void {
progressBar.removeEventListener(ProgressEvent.PROG RESS, progressHandler);
progressBar.removeEventListener(Event.COMPLETE, completeHandler);
removeChild(progressBar);
this.parent.removeChild(status_txt); // if this doesnt work, use "status_txt" instead of "this", but "this" should work
this.parent.removeChild(progressBar); // if this doesnt work, use "progressBar" instead of "this", but "this" should work
status_txt.text = "";
bgtUI.alpha = 100;
}

I hope that helps.

_______________________
Regards,
Kevin
Flash Game Developer

function progressHandler (event:ProgressEvent):void {
status_txt.text = int((event.currentTarget.percentComplete)*10) + "%";
}

function completeHandler (event:Event): void {
progressBar.removeEventListener(ProgressEvent.PROG RESS, progressHandler);
progressBar.removeEventListener(Event.COMPLETE, completeHandler);
removeChild(progressBar);
this.parent.removeChild(status_txt);
this.parent.removeChild(progressBar);
bgtUI.alpha = 100;
}