gmg tutorials - reusable flash preloader

Yet another Flash MX loader

An in depth look at building a reusable preloader for Flash MX.

01 Introduction
02 What should the loader do?
03 How should the preloader work? / What should it look like?
04 Useful reading / Designing the loader movie
05 What have we got so far? / Getting it to stop and play its parent
06 Setting a preload amount / Sync the loader movie with the download amount / Adding text feedback
07 Setting a maximum loader play rate / Setting a maximum load rate
08 Using the loader
09 Conclusion / About the authors / Copyright

Previous << What have we got so far? / Getting it to stop and play its parent

Setting a preload amount

Now, we don't always want to load the whole file before playing the movie (in fact loading it all is usually the exception – not the rule). So let's define what percentage we want to pre-load before we start playing the movie again.

Here's the code:

onClipEvent (load) {
        preLoad = (_parent.getBytesTotal() * 0.75);  //percent to preload
        _parent.stop();
}

onClipEvent (enterFrame) {
        if (_parent.getBytesLoaded() >= preLoad) {
                _parent.play();
        }
}

preLoad is a variable that is attached to our loader movie. It contains the number of bytes that we want to load before playing the parent movie. I picked a value of 75% for starters. It can be changed at any time as required. We set it in the load event of the loader so that it is computed only once because function calls (such as the getBytesLoaded function) and instructions to multiply numbers can slow down your ActionScript code – especially if called every frame.

The enterFrame event now gets the number of bytes loaded so far and compares it to the amount that we want to pre-load. If we have enough, it starts the parent movie playing again.

Sync the loader movie with the download amount

Okay. So we have it starting and stopping without much effort from us and it displays our looping loader movie. Great for some preloaders but we have bigger plans.

We are now going to add a function to our movie that tells us what frame we should be displaying when a certain amount of the file has downloaded. We will move the playhead of our loader movie to a point that corresponds to the percent downloaded. The function is hidden in the loader movie because once we have finished with it, we won't need to change it unless we are changing our loader animation.

Let's do it. Open your loader movie and click in your functions layer. The code to add is:

function loadedIndicatorFrame() {
        var newFrame = int((_parent.getBytesLoaded() / _parent.getBytesTotal()) * 65) + 2;
        return newFrame;
}

And back in our test movie on our loader movie clip we now have:

onClipEvent (load) {
        preLoad = (_parent.getBytesTotal() * 0.75);  //percent to preload
        _parent.stop();
}

onClipEvent (enterFrame) {
        gotoAndStop(loadedIndicatorFrame());
        if (_parent.getBytesLoaded() >= preLoad) {
                _parent.play();
        }
}

The function calculates the fraction of the parent movie that has been downloaded, stretches it over the 65 frames that I have as my progress bar animation (ranging from frame 2 to 67), and adds in an offset of 2 (for frame 2 – which is where my animation starts). That value is then returned to the calling script and is used in a gotoAndStop function call for our loader clip.

The enterFrame clip event has been changed to move the playhead of my loader movie to the frame that corresponds to the amount of the parent movie that has been downloaded.

Alright, done! Stream-preview your loader (Ctrl+Enter, Ctrl+Enter). The loader animation should crawl along with the download.

Adding text feedback

Time to add some text feedback. Given that we have all the info in our loadedIndicatorFrame function, I'm going to break a programming rule that says I should put the update text commands in its own function. My way will give us a slightly smaller loader and the script is small enough to not cause too many problems.

Here's our new function:

function loadedIndicatorFrame() {
        var newFrame = int((_parent.getBytesLoaded() / _parent.getBytesTotal()) * 65) + 2;
        loadedText = int(_parent.getBytesLoaded() / 1024) + "kb of " + int(_parent.getBytesTotal() / 1024) + "kb";
        return newFrame;
}

No other changes here. Time to test it. You should see the numbers ticking up until the parent movie starts to play.

Divide bytes by 1024 to get kb. The int function gets rid of all the screwy decimal places caused by the division.

Now how does that get into the text box in our loader? Remember that we set the Var field for the Dynamic Text object to be loadedText? That creates a variable called loadedText and links it to the Dynamic Text object so that any changes to the variable will appear in the object automagically.

By now, we have met requirements 1-6, 9, 12, and 14. We only have 10 and 13 to go. Seven and eight are still debatable, and I will leave 11 as an exercise (have a look at the getTimer function for some inspiration), but I still think it's a waste of time.

Next >> Setting a maximum loader play rate / Setting a maximum load rate