Preloaders...

Making a Flash file for your website can add some interactivity such as games or animations. The problem is, a large file or people with slow connections will have to wait for the file to load before it can be viewed. Without a preloader this would just look like a blank screen, and could look like the page or content isn't loading. This is bad for your page making it less user friendly and less likely to be visited again.

So we need a preloader to show that the file is loading and keep people viewing your website. This can be as simple or complex as you like, though simple ones are the easiest and don't add too mush to your file size.

To begin, open up a new Flash File(actionscript 3) and create 2 or 3 blank keyframes on the first layer.

In the new frames add some large picture files from your computer, anything big will do. This is to increase the size of your file so when you test it, it has some size to it to show you that it works properly. Don't put anything on the first frame, this is where the preloader is going to sit and you don't want anything in the way on this frame.

In the first frame, draw a rectangle and make it 400 pixels wide and 15 pixels high with an outline and center it to the stage (ctrl+alt+2, ctrl+alt+5). The colour doesn't matter so long as it is different to the stage background so it can be seen. Select the inner(not the outline) rectangle and convert it to a movie clip(select it and press F8). In the options box that opens up: name the clip anything you want, select movieclip from the selection box( or list in CS3), make sure the registration point is in the top left hand box(the block of 9 squares to the right of the name box, the square that is blacked out is the selected one) and press OK.

In the properties inspector where it says Instance Name, type in loadBar. Now select the first frame in the timeline and open the actions panel(press F9). in the box that opens up, type:

!!!All code should be typed EXACTLY as it is seen, the capitals are important and the code will only work with them in the right place!!!

(anything green is code, that's what needs to be typed, anything else is just my explination of the code and should be left out of the actions panel)

stop();

This tells flash to stop on this frame, so it doesn't play through to your pictures which will cause problems.

function loader(preLoader:ProgressEvent):void
{
var percent:Number = Math.floor((preLoader.bytesLoaded*100)/preLoader.bytesTotal);

if(percent <=99)
{
loadBar.width = percent*4;
}
else if(percent == 100)
{
loadBar.width = 400;
loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loader);
}
}
loaderInfo.addEventListener(ProgressEvent.PROGRESS, loader);

Thats all the code needed to get it to work, now i will explain it a bit in case you don't quite understand it.

function: this tells flash that it should do something

loader: this is just the name i used to identify our function, this can be set to anything you like so long as it isn't a predefined keyword used by flash, like function, stage and class are.

(preLoader:ProgressEvent): This is the event type, for example if walk was a human function it would be the event type (event:MovementEvent)

:void : This tells flash that the function will be returning nothing so it doesn't expect it to

var percent:Number = Math.floor((preloader.bytesLoaded*100) /preloader.bytesTotal); : This is the most important part of the code... the maths.

var is telling flash that this is a variable, percent is just the name, same rules apply here as naming functions,

Number is the variable type.

Math.floor tells flash that the calculation inside its () part needs to be rounded down, this is important to make the number 0-100 not a 2.787469484 or anything like that as that would mess up our loading bar.

((preloader.bytesLoaded*100) /preloader.bytesTotal); This is the calculation, the current amount of the flash file that has loaded times 100 divided by the total size of the flash file to make a 0-100 number.

I think the if statements are pretty self explanatory.

loaderInfo.addEventListener(ProgressEvent.PROGRESS, loader); This tells flash to listen for the loading event and do the function loader when it hears the event.

loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loader); This tells flash to stop listening for the event, this has to be done or flash will produce errors when it no longer has anything to listen for.

I think that just about covers the simple preloader in flash. There are ways of making more impressive looking preloaders but this is functional and works so what else would you need?

To see some of my preloaders in action just play one of my games from the link at the bottom of the blog page.

Thanks for reading and i hope this helps you!