Main timeline preloader

How to organize the movie

In order to have a functional preloader, we need at least 2 frames. The first frame will be empty. However, using the preloader script we show TextFields and a loaderbar or loader-animation. The preloader script will be located in the Document class, which also will create a reference to the root of the movie. All other classes will be called in frames 2 or later depending on how many frames we have. The loaderbar in our example is a simple MovieClip with a class script associated. When you test your movie, it will not work, because "bytesTotal" will be always 0. You need to publish the movie and test it in a browser.

The LoaderBar class

This class is very simple and contains the properties of the loaderbar, so that we can position it.

package
{
	import flash.display.MovieClip;
	public class LoaderBar extends MovieClip
	{
	       public function LoaderBar (xpos:int, ypos:int)
	       {
	               this.x = xpos;
	               this.y = ypos;
	       }
	}
}

The Document class

The Document class has to extend the MovieClip class, because otherwise we cannot use frames and frame methods. We import several classes and declare some variables, mainly for TextFields and the loaderbar. We also declare a public static variable, "_root", as reference for the main timeline. We can later always refer to the static variable from other parts of the movie.

package
{
	import flash.display.MovieClip;
	import flash.events.*
	import flash.text.TextField;
	public class Root extends MovieClip
	{
	       public static var _root:MovieClip;
	       private var t:TextField;
	       private var l:TextField;
	       private var tl:TextField;
	       private var lBar:LoaderBar;

All our functions are located in the constructor. First we declare a root for the movie. We can use the former "_root" word as variable, because in AS3 it is not defined any more. Then we create all the TextFields instances and position them. We also put the loaderbar on the main timeline.

	       public function Root ()
	       {
	               _root = this;
	               t = new TextField();
	               this.addChild(t);
	               l = new TextField();
	               this.addChild(l);
	               l.x = 150;
	               tl = new TextField();
	               this.addChild(tl);
	               tl.x = 300;
	               var lBar:LoaderBar = new LoaderBar (100, 100);
	               this.addChild(lBar);

previous  |  next