Countdown Loader

This is a countdown loader designed as a class so that you can easily apply it to any object that is loading content, MovieClips, LoadVars, XML as well as for the _root timeline. The class works by finding the average bytes loaded per second and determining how much time it will take to load the rest of the content. If you're new to classes, or have no idea what I'm talking about, don't worry, just skip to the Usage section. Otherwise here's at the class.

_global.CountDown = function(obj) {
	this.refobj = obj;
	this.startbytes = this.refobj.getBytesLoaded();
	this.lastbytes = this.refobj.getBytesLoaded();
	this.avgbytes = 0.1;
	this.nullchar = "-";
	this.secs = 0;
	this.runAvg = function() {
		this.secs++;
		this.loadedbytes = this.refobj.getBytesLoaded();
		this.avgbytes = (((this.loadedbytes-this.startbytes)/this.secs)*0.7)+((this.loadedbytes-this.lastbytes)*0.3);
		this.lastbytes = this.loadedbytes;
		if (this.loadedbytes>=this.refobj.getBytesTotal()) clearInterval(this.interv);
	};
	this.interv = setInterval(this, "runAvg", 1000);
};
CountDown.prototype.getSecondsLeft = function(finishbytes) {
	if (!finishbytes.length || finishbytes>this.refobj.getBytesTotal()) var finishbytes = this.refobj.getBytesTotal();
	var secsleft;
	var bytesleft = finishbytes-this.loadedbytes;
	if (this.secs == 0) {
		secsleft = this.nullchar;
	}else if (bytesleft>0) {
		secsleft = Math.ceil(bytesleft/this.avgbytes);		
	} else {
		secsleft = 0;
	}
	return secsleft;
};
CountDown.prototype.setDefault = function(char) {
	this.nullchar = char;
};

So when a new CountDown is created, a couple of necessary variables are set and then the averaging interval is started. The interval works by setting the time in seconds that has passed since created and the total bytes loaded in during that second. It then averages the total bytes loaded so far by the time that has passed and rations that as 70% of the overall speed. Then, the average bytes loaded in the past second are rationed as 30% of the overall speed. This process eliminates momentary speed reductions/spikes as well as recognizes the fact that speeds change drastically at the beginning of loading anything over the internet. This process continues until the object has completely loaded and the interval is cleared.

Now to find out how much time it takes to load we have to determine what the total bytes are. This value can be passed into the function getSecondsLeft as finishbytes. If you don't pass a value it defaults itself to getBytesTotal. This value is useful if you want to find out how long it will take to download half the movie before you play() it. The last part of getSecondsLeft determines (bytes left/average bytes per second) which returns the time left to download until finishedbytes.

The last prototype setDefault allows you to manage a "thinking" value. It takes one second before the class determines your connection speed and this value will be displayed during that time. I didn't like that it was displaying large numbers right off the bat, so I decided to stall it one second and simply display "-" while it was thinking.

Usage:

To use the CountDown class you will need to copy the above code into the first frame of your movie, or download the countdown.as file below and #include it in the first frame of your movie. To create a new timer use the following code

myCountDown = new CountDown(target)

Where "target" is the instance name of an object loading content.


To determine how many seconds remain until that object has loaded use the following code

myTimeLeft = myCountDown.getSecondsLeft(finishedbytes)

This will set "myTimeLeft" equal to the estimated time it will take to load the rest of the content. So passing getSecondsLeft(5000) will figure out how much time it will take to load 5000 bytes into the target object. If left blank, the method will assume "getBytesTotal" for the target object.


To change the default display of a "null" time use.

myCountDown.setDefault(char)

The countdown timer automatically displays "-" for the first second while it's determining download speed. Use this method to change this display.

Examples:

Example 1 - Countdown the _root timeline loading. 900 kb

#include "countdown.as"
mycounter = new CountDown(_root);
_root.onEnterFrame = function() {
	timeleft = mycounter.getSecondsLeft()+" seconds left";
};

Example 2 - Countdown loading an external file. 900 kb

#include "countdown.as"
_root.createEmptyMovieClip ("LoadingClip", 1)
LoadingClip.loadMovie("external.swf");

mycounter = new CountDown(LoadingClip);
mycounter.setDefault("--");

_root.onEnterFrame = function() {
	timeleft = mycounter.getSecondsLeft();
	if(timeleft < 10){
		timeleft = "0"+timeleft;
	}
};
Additional Notes:

This class uses the setInterval function to manage average speed values, thereby making it a Flash 6+ only class. If you need to port it for a Flash 5 project, you'll need to remove the interval functions and manage average speed values inside the getSecondsLeft() prototype. It may not be as accurate due to fps speed, but it'll get the job done.

Download

Example 1 Files: MLAB_flash_countdown.zip

Size: 684 kb

Last Updated: 2003-04-27


Example 2 Files: MLAB_flash_countdown_external.zip

Size: 679 kb

Last Updated: 2003-04-27


Actionscript Include File Only: countdown.as

Size: 2 kb

Last Updated: 2003-04-27