Flash MX Sound Object Tutorial - Page 20

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.

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.
   

Fig. 21: Example of dynamic text box, showing variable name location

4. 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.
   
5. 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.
   
6. Place the move clip containing the load bar on frame one of the _root timeline.
   
7. 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.
   

8. 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.