First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
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:

mySoundObject.getBytesTotal();
                                      
mySoundObject.getBytesLoaded();

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) {
    playing=true;
    preloadNow=1;
    mySound.loadSound("sample.mp3");
    }
    mySound.onSoundComplete = function() {playing=false}
    }//END

    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 () { 
    mySoundLoading=0;
    _root.loadBar._xscale=mySoundLoading;
    }//END onLoad
    this.onEnterFrame = function () {
    mySoundBytesTotal =_root.mySound.getBytesTotal();
    mySoundBytesLoaded=_root.mySound.getBytesLoaded();
    if (preloadNow==1 && mySoundBytesLoaded>0) {
    mySoundLoading=Math.round((mySoundBytesLoaded/mySoundBytesTotal)*100); _root.percentLoadedText=mySoundLoading+"%";
    _root.loadBar._xscale=mySoundLoading;
    if (mySoundLoading==100) {
    preloadNow=0;
    _root.mySound.start()
    }
    }
    }//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
(10 being the highest)
» 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!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.