All about preloader

Part I: What is a preloader?

…(a preloader) consists of a quickly-loaded smaller movie, image or text with a message that tells the viewer to wait while the rest of the larger object is loaded. - Wikipedia

According to the definition, a preloader should be a small message that indicates a large object is loading. A good preloader follows the definition closely, small, quick load and informative. A simple looping animation works, pure text works and line in the stage is pretty neat too.

A common mistake is called "preloading the preloader", which means that the preloader makes up the majority of the file size and it is too big to be loaded quickly. It may sound silly but you do spot it from time to time. Unfortunately, there isn't an exact figure to measure whether the preloader is too big or not. It's up to the designer or developer's judgment.

Fortunately, preloader is getting less and less important nowadays. One reason is because bandwidth is getting bigger so the preloading time is much shorter. But more importantly, people realized more time should be spent in developing the content rather than a stunning preloader.

Part II: Preparation for preloading

Before building a preloader, let's take a look at how SWF files loads.

SWF files are displayed in a streaming manner. Frames in the main timeline are loaded from 1 to the end (from left to right in Flash IDE). The user will be able to see a frame once it is loaded, without loading the whole SWF file. Because of the streaming nature, a SWF file with only one frame in the main timeline will only show up until everything is loaded. A preloader is not needed in such situation. In order to make a preloader visible during the preloading phase, preloader should be placed in the first frame and the contents should be placed in some frames behind it.

Generally, a 2-keyframes structure is used for a Flash file with a preloader.The first keyframe holds the assets related to preloader and the real contents are in the 2nd keyframe. When the preloader detects the file is fully loaded, a gotoAndStop is called to jump to the "main" frame.
preloader_timeline.gif

One thing to take note is that the amount of assets in the 1st frame is more than what are visible on the stage. Actioncript classes, MovieClips /Images/Sound with linkages in the library are automatically exported into the 1st frame. There's a trick to solve the problem.

library-linkage.png

First, un-check the "Export in first frame" option in linkage properties panel. Then, place the item into some frame between the "preloader" frame and the "main" frame to make sure it's available for use when arriving at the "main" frame. It becomes a 3-keyframes structure. However, this trick doesn't solve the problem if the 1st frame is bloated by ActionScript classes. (There's an option to export ActionScript classes into later frames in Preferences panel but it's not very reliable).

3keyframe.png

Bandwidth Profiler is a very handy tool when working on preloaders. In Flash IDE, Bandwidth Profiler is available in testing mode (F12 or Ctrl+Enter). It's a very useful tool to check whether the SWF file will prelload properly or not. Here's an example of how bandwidth profiler looks like. On the left, it's a summary of the SWF file and file size of the current frame (49KB for the 1st frame). On the right, it's a graph of file sizes of all frames (>64KB on the 10th frame). Be careful that the Y axis (KB) increase exponentially not linearly. In this example, the 10th frame is actually 111 KB which looks like 70/80 KB if estimating from human eyes.

bandwidth-profiler1.png

Most of the preloaders don't start from 0% and the reason is obvious. A preloader contributes to the total SWF file size and once the preloader is loaded this means the SWF file is loaded for some percentage also. Using the screenshot as an example, the preloader is 49KB and the rest of the content is 111 KB. Therefore, the preloader will start from 49/(49+111)=30%

Part III: Preloader in AS2

The most important information for a preloader is the number of bytes loaded and the total number of bytes of the file (file size). In ActionScript 2, getBytesLoaded and getBytesTotal functions serve the purpose. The most basic implementation is like this:

stop();
function preload() {
    var l:Number = getBytesLoaded();// loaded bytes of the swf file
    var t:Number = getBytesTotal();// total bytes of the swf file
    var p:Number = l/t;// percentage loaded of the swf file, value range from 0-1
    updatePreloader(l,t,p);
    if (p == 1) {
        onEnterFrame = null;// remove onEnterFrame loop
        gotoAndStop("main");// go to the main frame
    }
}
function updatePreloader(l:Number,t:Number,p:Number){
    //most of the time l and t are not used, but just in case you need it there's no harm to keep them
    trace("bytesLoaded: "+l+"  bytesTotal: "+t+"  percentage: "+p);
}
onEnterFrame = preload;

Based on Part II’s 2 keyframes structure, the codes above should be placed in the “preloader” key frame and core codes should be placed in “main” key frame.

Visuals for indicating the loading progress can be easily extended from the basic codes shown above. All we need to do is to play around with updatePreloader function. Here’s a list of simple visuals:

Simple Text
as2_preloader_text.jpg

Simpy Bar
as2_preloader_bar.jpg

Simple Text with Simple Bar
as2_preloader_bar_text.jpg

Simple Animation
as2_preloader_animation.jpg

Simple ActionScript
as2_preloader_script.jpg

In Part II, we talked about using bandwidth profiler to prepare files. Here, we’ll need to use a tool called Simulate Download to test a preloader. In Flash IDE testing mode (Ctrl/Apple+Enter), you can choose to simulate download from View->Simulate Download or press Ctrl/Apple + Enter again. The Download Settings menu has default options for various internet speed and it also allows customisation.

download-simulater.jpg

Part IV: Preloader in AS3

Based on Part III’s codes, converting AS2 preloaders into AS3 is pretty simple.

Simple Text
as2_preloader_text.jpg

Simpy Bar
as2_preloader_bar.jpg

Simple Text with Simple Bar
as2_preloader_bar_text.jpg

Simple Animation
as2_preloader_animation.jpg

Simple ActionScript
as2_preloader_script.jpg


I agree with you, that the preloader should be small in size,

I myself, have come across situations where a designer would like to enhance the preloader, by adding something that helps improve the messaging of the website,

often we have to compromise on what will be displayed, during the preloading phase.

Designers and Art Directors, will always want to provide the best overall experience possible, but it is times like these, that trade offs must be made.

The problem of course is coming to an agreement about what is the “acceptable” tradeoff, as well as what is would provide the “best” overall experiance.

On the point of the preloader getting less important, I disagree on that point

I agree with you that higher bandwidth, allows microsites to load faster, but I also notice the fact, microsites increase in file size and richness with the bandwidth as well, which in turn make the preloading “longer” =P.

As long as we keep trying to give the best possible experiance within a reasonable waiting time, then I think the sight of the preloader is here to stay.

Another reason, comes from the best argument, I have heard from an Art Director, regarding putting additional content into the preloader.

His point was that a preloader is often the very first thing you see on a website, as such it should help to sell whatever the Microsite is trying to say.

As its value is akin to the front page headline of a newspaper.

I have to agree with him on that point and in that context. and as you can guess, I had a long an interesting discussion with him before we came to an agreement for that project.

I think that no one is against adding content that enhances the experiance or messaging of a website, the problem arises, when you trade off too much for too little.

If the additional content has a strong messaging element, I would try to engage the Creative to see if a compromise can be made.

But if the preloaders additional size, is increased beyond what is reasonable like in your case, loading of a preloader, just to make it more beautiful,

then I would strongly argue against it, as the increased filesize would drag down the experiance of the website. without adding an equal or greater value to the experiance/messaging of the website.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License