Tutorial:Preloaders (AS3)

From Anipedia

Ugh. This was the messiest bit of code + FLA I've ever made. A bastardization of dynamic and sloppy flash.

Preloaders are a way to draw in the audience before the leave the page. They create anticipation if done correctly.

var box:Shape = new Shape();
box.graphics.beginFill(0x0000FF);
box.graphics.drawRect(0, stage.stageHeight/2 - (12.5), 550, 25);
box.graphics.endFill();
addChild(box);

var masker:Shape = new Shape();
masker.graphics.beginFill(0x00FF00);
masker.graphics.drawRect(0, 75, 550, 50);
masker.graphics.endFill();
addChild(masker);

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,  onProgress);
function onProgress (evt:ProgressEvent):void{
	var loaded:Number = evt.target.bytesLoaded;
	var total:Number = evt.target.bytesTotal;
	var pct:Number = loaded/total;
	var ipct:Number = 100 - (pct * 100);
	var bites:String ="" + total + " total bytes";
	var looded:String = "" + loaded + " bytes loaded";
	box.scaleX = pct;
	masker.scaleX = pct;
	circles.mask = masker;
	
	var bytes:TextField = new TextField;
	bytes.width = 200;
	bytes.height = 25;
	bytes.x = 200;
	bytes.y = 350;
	bytes.text = bites;
	addChild(bytes);
	loadedb.text = looded;
	perct.text = Math.round(pct * 100) + "%";
	perctg.text = "" + Math.round(ipct);
	
}

this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
function onComplete (evt:Event):void{
	nextFrame();
}

stop();

I used about 5 different variations of preloader.

var box:Shape = new Shape();
box.graphics.beginFill(0x0000FF);
box.graphics.drawRect(0, stage.stageHeight/2 - (12.5), 550, 25);
box.graphics.endFill();
addChild(box);


this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,  onProgress);
function onProgress (evt:ProgressEvent):void{
	var loaded:Number = evt.target.bytesLoaded;
	var total:Number = evt.target.bytesTotal;
	var pct:Number = loaded/total;
	box.scaleX = pct;
	
}

this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
function onComplete (evt:Event):void{
	nextFrame();
}
stop();

The first was the simple horizontal bar scaling to 100% width. I centered it in the middle on the stage and gave it a width of the stage width. The listeners and functions aren't anything you haven't seen before if you've read my other tutorials.

var loaded:Number = evt.target.bytesLoaded;
	var total:Number = evt.target.bytesTotal;
	var pct:Number = loaded/total;
	box.scaleX = pct;

These are new. Commonly, you'll see "e.target", etc. It all depends on what you put for the function info "(evt:xxxEvent)". Pct just takes the two variables and divides them to create a decimals, that once multiplied by 100, creates a percentage. I've set the box to scale on the x-axis based on the percentage that the movie is loaded. Once it hits 100%, the box will reach across the whole screen.

var bites:String ="" + total + " total bytes";

var bytes:TextField = new TextField;
	bytes.width = 200;
	bytes.height = 25;
	bytes.x = 200;
	bytes.y = 350;
	bytes.text = bites;
	addChild(bytes);

Next, I made a textfield that will display the total bytes in the movie. You'll notice there's no accompanying field for the loaded bytes. That's because I couldn't figure out a way to make one dynamically without Flash creating a new field every time the number of bytes loaded changed. I ended up just making that one on the stage.

As for the bites var, here's a little lesson. Flash is very picky about the types of data you put in. You're only allowed to put strings in for text. That means they have to be in these "". If a certain variable you want to put in isn't a String, well Flash is going to tell you. That's why you have to trick it. Put in a closed set of quotations and then add in your variable. Don't forget to do the javascript trick of adding a + sign to what you want to add. Also make sure to type in " total bytes" exactly as I did. That space at the beginning adds a space to the textfield.

var looded:String = "" + loaded + " bytes loaded";

.............

loadedb.text = looded;

I named it "loadedb" and edited the new variable to record the number of bytes loaded. Same as last time.

perct.text = Math.round(pct * 100) + "%";

I added another textfield onto the stage and made the next nice and big. This is the big text that shows the % loaded. You'll notice I used a little rounding the ensure whole numbers.

Math.round() rounds off the number you get from the variable into an integer (positive or negative whole number).

var ipct:Number = 100 - (pct * 100);

....................

perctg.text = "" + Math.round(ipct);

Ugh. I struggled with this formula for about half an hour. Anyways, I created another new textfield on the stage and named it "perctg". I took the formula from "pct" and reversed it. If you paid attention to my BEDMAS lesson back a few tutorials ago, you'll know hoe this works. Flash first calculates the % of the movie loaded by multiplying pct by 100. Then, it takes that number and minuses it from 100. This creates a reverse countdown effect that is kind of cool and minimalistic.

var masker:Shape = new Shape();
masker.graphics.beginFill(0x00FF00);
masker.graphics.drawRect(0, 75, 550, 50);
masker.graphics.endFill();
addChild(masker);

.......

masker.scaleX = pct;
	circles.mask = masker;

For my last preloader effect, I took about 5 circles and put them on a line, evenly space. I've seen this done before, so this shouldn't be new to you visually.

Then, I made masker, which is a box that has the exact same height as the circles are each in diameter (50). Just like the box, I made it as wide as the stage. All I did after that was tell Flash through actionscript to make masker the mask for the circles.

As far as weighing down the swf goes, I just tossed a big stock image twice full size in the second frame. When you test your movie, you can go to "Simulate download" and tweak the settings from horse delivering a baby speed to HOLYMFT-4500FIBREOPTICSPEED. This helps you preview how long it will take users to download the swf, and just how god-awful America Online was back in the 90's.

Here's the fla, since this isn't all code-based.

preloader.fla Remember to right-click and hit "Save Target As".