Yet Another Flash MX Loader - Page 10

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() <%gt%>= 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.