Main timeline preloader

The preloading events

Since the loaderbar is longer than 100 pixel, we need to create a variable, "corFactor", which will adjust the width.

	               var corFactor:int = lBar.width/100;

We are now ready to add the events. For this preloader we add only three event listeners, for starting the loading, for its progress and when loading is completed. "loaderInfo" is a object associated with the movie, in our case the main timeline.

	               this.loaderInfo.addEventListener(Event.INIT, onRootLoaderInit);
	               this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onRootLoaderProgress);
	               this.loaderInfo.addEventListener(Event.COMPLETE, onRootLoaderComplete);

We now come to the individual functions for the listeners. We create various local variables for the loaded and the total bytes as well as for their ratios. We size the loaderbar to a small size to start with.

	               function onRootLoaderInit (event:Event):void
	               {
	                       var lb:int = event.target.bytesLoaded;
	                       var ltl:int = event.target.bytesTotal;
	                       var ratio:int = lb/ltl*100;
	                       t.text = "init: "+String(lb);
	                       l.text = "TOTAL: "+String(ltl);
	                       tl.text = "LOADED: "+String(ratio)+"%";
	                       trace(event.target.bytesLoaded);        
	                       trace("Loading initiated");
	                       lBar.width = 1*corFactor;
	                       
	               }

When loading progresses it is very similar except that we let the loaderbar size according to the ratio of the loaded versus total bytes.

	               function onRootLoaderProgress (event:ProgressEvent):void
	               {
	                       trace(event.bytesLoaded);
	                       trace(event.bytesTotal);
	                       var lb:int = event.bytesLoaded;
	                       var ltl:int = event.bytesTotal;
	                       var ratio:int = lb/ltl*100;
	                       t.text = "PROGRESS: "+String(lb);
	                       l.text = "TOTAL: "+String(ltl);
	                       tl.text = "LOADED: "+String(ratio)+"%";
	                       trace("Loading in progress");
	                       lBar.width = ratio*corFactor;
	               }

When the loading is completed we move the timeline to the next frame and eliminate all objects, which we used for loading. We need to use the variable "_root" here, since the "this" word refers to the listener object.

	               function onRootLoaderComplete (event:Event):void
	               {
	                       trace("Loaded: "+event.target.bytesLoaded);
	                       trace("Total: "+event.target.bytesTotal);
	                       var lb:int = event.target.bytesLoaded;
	                       var ltl:int = event.target.bytesTotal;
	                       var ratio:int = lb/ltl*100;
	                       t.text = "COMPLETE: "+String(lb);
	                       l.text = "TOTAL: "+String(ltl);
	                       tl.text = "LOADED: "+String(ratio)+"%";
	                       trace(event.target.bytesLoaded/event.target.bytesTotal);
	                       trace("Loading completed");
	                       lBar.width = ratio*corFactor;
	                       if(ratio>=100)
	                       {
	                               _root.gotoAndStop("frame2");
	                               _root.removeChild(lBar);
	                               _root.removeChild(t);
	                               _root.removeChild(l);
	                               _root.removeChild(tl);
	                       }
	               }
	       }
	}
}

And that brings us to the conclusion of this tutorial.

previous