How Do I Reference a Dynamically Instantiated Object in AS3? (Added a Moviclip to the Stage)

Question

This is something that has been bugging me since I took up AS3 a year ago.

Example. I make a class that extends a Movie Clip and call it "LoaderBar" all it is is some text that says "Loading" and below it another movie clip that is a plain rectangle that I call "lBar"

When I call a function to load my image I add the Loader to the stage as such..

function imageLoader(URL:String):void

{

     var loader:Loader = new Loader(new URLRequest(URL));
     loader.contentLoaderInfo.addEventListner(ProgressEvent.PROGRESS, progressHandler);

      var loadBar:Loader Bar = new LoaderBar();
      addChild(loadBar);
}


function progressHandler(e:Event):void

{

    var pcent:Number = e.getBytesLoaded / e.getBytesTotal;
    // HERE IS WHERE I'D LIKE TO MAKE DIRECT REFERENCE TO MY LOADBAR;
   loadBar.lBar.width = pcent*100;



}

Essentially I just want to tell the lBar in the loadBar Movie Clip to be the width of the percent *100. (so that when the clip is loaded the loader bar is 100 pixels wide).

My problem is this. When I add the loadBar to the stage inside of a function, I cannot make reference to it inside of another function without doing some hack making a global variable outside of my function like...

var loadBarClip:MovieClip;

and inside the load function assigning the loadBar to the loadBarclip as such

loadBarClip = loadBar.

I feel like this is redundant. Does anyone know of anyway of accessing my loadBar without making a reference variable?

Answer 1

I don't see a major problem in having the variable declared outside of the imageLoader function. If you were writing this in a class instead of the timeline then it would just be a class member variable and there is nothing wrong with that. They exist for this very reason.

If your deadset wanting to keep the loadBar variable local then you could always do this:

in the imageLoader function:

var loadBar:Loader Bar = new LoaderBar();    
loadBar.name = "loadBar";  
addChild(loadBar);

in the progressHandler function:

getChildByName("loadBar");

Answer 2

Since lBar (or loadBar for that matter) is an element that you need to manage at a class level, you should indeed make it a class member. There is nothing wrong with it ;)

Answer 3

If it's just for that handler, you could make the handler anonymous and keep in inside the current scope.

var loadBar = new LoaderBar();
var loader:Loader = new Loader(new URLRequest(URL));
loader.contentLoaderInfo.addEventListner(
    ProgressEvent.PROGRESS, function (e:Event):void {
      var pcent:Number = e.getBytesLoaded / e.getBytesTotal;
      loadBar.lBar.width = pcent*100; //Here you are making a direct reference.
    }
);

If you really want to encapsulate your scopes you could use closures:

returnFromEncapulatingClosure = function(){
    var loadBar = new LoaderBar();
    var loader:Loader = new Loader(new URLRequest(URL));
    return {
        loadBar: loadBar,
        loader: loader
    };
}();

That allows you to bundle together some references so they won't clobber other parts of code, and you could refer to it with:

returnFromEncapulatingClosure.loader.contentLoaderInfo.addEventListner(ProgressEvent.PROGRESS, progressHandler);
function progressHandler(e:Event):void {
  var pcent:Number = e.getBytesLoaded / e.getBytesTotal;
 returnFromEncapulatingClosure.loadBar.lBar.width = pcent*100;
}

As a footnote, when you extend the Movie Clip, add a method that sets the lBar.width. Something like:

loadbar.setLBarWidth = function (w:number) {
  this.lBar.width = w;
}