First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Kenny Bellew

How to Build a Preloader for Dynamically Loaded MP3's

When building a Flash movie that will contain MP3's, often the MP3's are dynamically loaded (versus being embedded in the SWF) to keep the initial Flash movie size smaller. Once the decision is made to dynamically load the MP3's, it becomes a decision between loading the sound as an event or as a streaming sound. Event sounds sound better than streaming sounds, as streaming sounds often omit samples of the sound within the stream in order to play the sound as soon as possible.

Fig. 20: Example of preloader for dynamically loaded MP3 sound object

For example, if you opt to play a large-file-sized sound as an event associated with a button press and do not include a preloader, the user will be confused. He or she will press the button and it will appear that nothing is happening. Actually, the sound is loading in the background.

The preloader described here will work for event and streaming MP3's. However, it's not logical to build a preloader for a streaming sound, as it will start playing before the preloader reaches 100 percent.

Preloading a dynamically loaded MP3 sound object is very similar to creating a preloader for an entire movie. The sound object methods include methods for getting the total number of bytes contained in the file and comparing this against the number of bytes being loaded. These methods are getBytesLoaded() and getBytesTotal(). They are commonly used as follows:


One important thing to keep in mind when using these methods is that the information these methods report back is not available until the sound actually begins to load using the mySoundObject.loadSound method. Even though the sound object has been defined, the sound must start to load before the information is accessible. If you've ever seen a preloader reporting "NaN" (Not a Number), it may be because the ActionScript is attempting to calculate data that is not yet available.

The preloader approach presented here will use a load bar that will increase in size along the x-axis corresponding to the percentage of the file that has loaded. A push button will be used to begin loading the sound.

  1. Define the sound object as: mySound = new Sound(mySoundMc)
  2. Place the start and stop buttons on frame one of the _root timeline.
  3. Create a dynamic text box with the variable name of "percentLoadedText" - also on frame one.
  4. Fig. 21: Example of dynamic text box, showing variable name location
  5. Create a new movie symbol and, inside this movie, draw a horizontal rectangle the size that you want the loading bar to be when the sound has loaded 100 percent.
  6. Position the load bar graphic within its movie clip to be exactly at the x-axis pixel position of 0.0, and, similarly, at the y-axis pixel position of 0.0. This is so that, when the movie clip containing the load bar is scaled using the moveClip._xscale call, it will scale from left to right.
  7. Place the move clip containing the load bar on frame one of the _root timeline.
  8. Place the following code on the "load sound" button:

    on(press) {
    if (playing!=true) {
    mySound.onSoundComplete = function() {playing=false}

    In the above example, two variables are set. The variable "playing" is set to true to keep the file from loading multiple copies of the MP3 file - one for each press. Of course, this works because the first if-statement basically asks, "If playing does not equal true, then do the following". The playing variable is reset to "false" when the sound completes, allowing the user to press the play button again. You could add an additional conditional test to see if the sound had already been loaded once, which would then only start the sound. However, this is a judgment call. Because the sound is cached on the user system, the sound will load much more quickly.

    The call to start the sound is not included in the above button code. It will be added to a conditional statement which allows the sound to start once it is fully loaded.

  9. Create a layer on the root timeline called something like "actions", and place the following code on frame one:

    this.onLoad = function () { 
    }//END onLoad
    this.onEnterFrame = function () {
    mySoundBytesTotal =_root.mySound.getBytesTotal();
    if (preloadNow==1 && mySoundBytesLoaded>0) {
    mySoundLoading=Math.round((mySoundBytesLoaded/mySoundBytesTotal)*100); _root.percentLoadedText=mySoundLoading+"%";
    if (mySoundLoading==100) {
    }//END onEnterFrame

    In the above example, the x-axis scale of the load bar (_xscale) is set to zero on initial load, causing it to be nearly completely compressed at start. The variables mySoundBytesTotal and mySoundBytesLoaded are set to equal the the total bytes of the loading sound object "mySound". When the user presses the load-sound button, "preloadNow" will equal 1 and the sound will start to load. When "preloadNow" equals 1 on button press and mySoundBytesLoaded is greater than zero, the load bar's _xscale will begin to equal the growing percentage of the loading MP3. Once the percentage reaches 100, "preloadNow" is reset to zero, which will stop the code from continuing to run unnecessarily. The sound object is instructed to start once the percentage loaded equals 100. While all this is happening, the dynamic text box is continually updated to reflect the percentage loaded.

» Level Intermediate

Added: 2002-08-13
Rating: 8.98 Votes: 664
» Author
Kenny Bellew is a technical writer in Minneapolis, MN. He's currently interested in becoming involved in other writing-related Flash projects.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.