Preloader process bar

[Sibel Ozcubukcu]

Hello there, I am working on a very simple preloader process bar. It looks working. However, when you jump to the next/previous image before the content (current image) is loaded completely, the process bar keeps running and getting out of the frame. It seems like the value of loaded bytes of the contents are accumulating.

Could someone help me.

Thanks,

Sibel

Here is the source code. I attached the XML files.

// --------------------------------------------------------------------------------------------------------------------------------------------------------------

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.events.ProgressEvent;

var myFrame:BGFrame = new BGFrame();
var leftBtn:BtnLeft = new BtnLeft();
var rightBtn:BtnRight = new BtnRight();
var percent:int;

var imgLoader:Loader  = new Loader();

// ----- listener events for the imgLoader
imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, doProgress);
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,done);
// ------
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("slideShow.xml"));
var pathList:XMLList;
var textList:XMLList;
var imgPtr:int = 0; //
var myText:TextField = new TextField();
var myTxtFmt:TextFormat = new TextFormat();
xmlLoader.addEventListener(Event.COMPLETE, onComplete);

leftBtn.addEventListener(MouseEvent.CLICK, goBack);
rightBtn.addEventListener(MouseEvent.CLICK, goFwd);

addChild(myText);
addChild(myFrame);
addChild(leftBtn);
addChild(rightBtn);
myFrame.x =stage.stageWidth/2;
myFrame.y = stage.stageHeight/2;
leftBtn.x   = 223.3;
leftBtn.y   = 378.3;
rightBtn.x = 319.3;
rightBtn.y = 378.3;
myTxtFmt.font = "Arial";
myTxtFmt.size = 20;
myTxtFmt.bold = true;
myText.autoSize = TextFieldAutoSize.CENTER;
myText.x = stage.stageWidth/2 - myText.textWidth/2;

function onComplete(evt:Event):void {
    var xmlData:XML = new XML(evt.target.data);
    pathList = xmlData.slide.@path;
    textList = xmlData.slide.*;
    imgLoader.load(new URLRequest(pathList[imgPtr]));
    addChild(imgLoader);
    imgLoader.x = 80;
    imgLoader.y = 42;
    new Tween(imgLoader,"alpha",Strong.easeOut,0,1,2,true);
    myText.text = textList[imgPtr];
    myText.setTextFormat(myTxtFmt);
}

function doProgress(evt:ProgressEvent):void{
    //trace("loaded: " + evt.bytesLoaded +" total: "+evt.bytesTotal+"  percent: "+ percent);
    loadTxt.visible = true;
    loaderBar.visible = true;
    barOutline.visible = true;
    percent = Math.ceil((evt.bytesLoaded/evt.bytesTotal)  * 100);
    loadTxt.text = percent + "%";
    loaderBar.width = percent;
}

function done(evt:Event):void{
    loadTxt.visible = false;
    loaderBar.width = 1;
    loaderBar.visible = false;
    barOutline.visible = false;
}

function goBack(evt:MouseEvent):void {
    if (imgPtr>0) {
        imgPtr -= 1;
        imgLoader.load(new URLRequest(pathList[imgPtr]));
        new Tween(imgLoader,"alpha",Strong.easeOut,0,1,2,true);
        myText.text = textList[imgPtr];
        myText.setTextFormat(myTxtFmt);
    }
}

function goFwd(evt:MouseEvent):void {
    if (imgPtr<pathList.length() - 1) {
        imgPtr += 1;
        imgLoader.load(new URLRequest(pathList[imgPtr]));
        new Tween(imgLoader,"alpha",Strong.easeOut,0,1,2,true);
        myText.text = textList[imgPtr];
        myText.setTextFormat(myTxtFmt);
    }
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------

[kglad]

i don't see a close() method being applied anywhere so why wouldn't your loader continue downloading whatever else is loading when the new image is added to the download list?

[Sibel Ozcubukcu]

Thanks for your reply, Kglad. When I add the close() method into the button functions, it doesn't make any change. How am I supposed to add it?

I added it like this;

function goFwd(evt:MouseEvent):void {
    imgLoader.close();
    if (imgPtr<pathList.length() - 1) {
        imgPtr += 1;
        imgLoader.load(new URLRequest(pathList[imgPtr]));
        new Tween(imgLoader,"alpha",Strong.easeOut,0,1,2,true);
        myText.text = textList[imgPtr];
        myText.setTextFormat(myTxtFmt);
    }
}

[kglad]

that looks good.  test online.

[Sibel Ozcubukcu]

I did, but nothing has changed. I have the same problem. The bar keeps running.

[kglad]

what do you mean by, "the bar keeps running"?

[Sibel Ozcubukcu]

[kglad]

url?

[Sibel Ozcubukcu]

It is not published, running on my machine.

[kglad]

that looks good.  test online.

[Sibel Ozcubukcu]

thank you for your effort to help me. When you test online, it might look okay. If you test it in "simulate download" mode, you can see the problem. Anyway thanks again. If I figure out how to solve the problem, I will post it.

[kglad]

the close() method doesn't work in the test environment.  that's why i suggested you test online.

[Sibel Ozcubukcu]

When I add the close(); method to the forward/back button functions, I have the error message below (in test environment)

     Error: Error #2029: This URLStream object does not have a stream opened.
         at flash.display::Loader/close()
         at slideShow_workOn_fla::MainTimeline/goFwd()

[kglad]

the close() method would be applied to a loaded.  and you can't apply it until some loads (or starts to load).

[Sibel Ozcubukcu]

that is what my problem is. While an image is loading (not loeded yet), if I want to load the new image the percentage exceeds 100%.

[kglad]

are you now testing online?