Do pre-loaders actually help in Flash?

Question

I have noticed the use of "pre-loaders" on many sites that heavily use Flash. This is supposed to make the user feel as if the site is loading while the app is downloads and initializes. I have a few questions about this practice.

1. Does this really help? From what I can see, there seems to be a fair amount of graphics in the pre-loader itself many times. This seems to defeat the purpose of having a pre-loader to begin with. Heavy graphics only add to the overall size of the SWF file, which means that it will take longer to download.

2. How do I determine the right amount of graphics to use in a pre-loader?

Answer 1

1. Preloaders are solely for user experience. Most sites will experience high bounce rates if users are looking at a blank screen for the first 5 seconds wondering if the site is broken. A preloader simply lets them know that the site is indeed working and how much longer they have to wait.

2. Most preloaders use vector graphics which are much more efficient than the bitmap images the browser is usually loading in the background.

Answer 2

1. Yes they do help. Plus they often serve as an extra space for ads.
2. They're not big. Look at this 4kb large one They have to be small enough to be loaded in the 1st frame

Answer 3

Preloader shows the progress using the progress bar. Its usually needed since swfs are a little bit bigger and user will experience blank screen even if he is on a fast connection. But the prelaoder must be minimal. You use vector graphics to make them. Also you should show a determinate progress bar. (Means you should show how much percent its loaded, i.e there must be an indication of the progress).

Answer 4

Some look graphically "big" but under the hood they can sometimes pull it off at a relatively small filesize by using programmatic approaches to draw their shapes and create motion, just like you can easily create a very light preloader in your SWF file by putting some progress bar code like:

var thickness:int = 30;
var sWidth:Number = stage.stageWidth
var sHeight:Number = stage.stageHeight
var g:Graphics = root.graphics;
g.clear();
g.beginFill(0x0000ff, 1);
g.drawRect(0, sHeight-thickness, sWidth * yourProgressPercent, thickness);
g.endFill();

Slip that in an ENTER_FRAME executing while your content is loading, provide the progress percentage variable, and that code shouldn't take any more than a kilobyte for ya (not tested, but assuming :P)