How to Use Flash MX Sound Objects

This document copyright © 2004 by Kenny Bellew of Cowfly.Com Design, kennybellew@hotmail.com
How to Build a Preloader for Dynamically Loaded MP3's Return to Index Do you want all FLA's used for this tutorial? Do you have a question?

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 load the MP3's dynamically, it becomes a decision between loading the sound as an event or as a streaming sound. Event sounds sometimes sound better than streaming sounds, as streaming sounds can 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 is 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 method's 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 soundObject.getBytesLoaded() and soundObject.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 have 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 (scale) 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
  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}
}//

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.
 

  1. 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()
}
}
}

In the above example, the x-axis scale of the load bar (_xscale) is set to zero on initial load, causing it to be 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.

If you wanted to preload one sound and have it play as soon as it loads, you could also use the onLoad handler. Here is an example using the onLoad handler.

Fig. 21b: Using the onLoad handler to start play.

For the above player, all of the code to define, load, preload and play the sound is placed in the Action pane (press F9 to see actions pane) an empty movie clip with an instance name of myMusicMc. Here is the script that was used:

onClipEvent(load) {
myMusic = new Sound();
myMusic.loadSound("Cool_Loo-Karthik.mp3");
_root.loadBar._xscale=0;
myMusic.onLoad = function() {
myMusic.start();
_root.playing=1;
_root.paused=1;
}
}
//
onClipEvent(enterFrame) {
mySoundBytesTotal = myMusic.getBytesTotal();
mySoundBytesLoaded= myMusic.getBytesLoaded();
mySoundLoading=Math.round((mySoundBytesLoaded/mySoundBytesTotal)*100);

// Update text box with percent loaded
if (mySoundLoading!=null) {
_root.percentLoadedText=mySoundLoading+"%";
}

// Scales load bar
_root.loadBar._xscale=mySoundLoading;

//
_root.myMusicDurationText=myMusic.duration/1000;
_root.myMusicPositionText=myMusic.position/1000;
//
if (_root.playing==1) { // Becomes true when play button pressed
_root.paused=0;
_root.playButton._visible=0;
_root.pauseButton._visible=1;
}
if (_root.paused==1) {
_root.playing=0;
_root.playButton._visible=1;
_root.pauseButton._visible=0;
}
}

Previous Next
How to Load an External MP3 from a Text Input Box How to Preload Multiple Dynamic Sound Objects using the loadSound Method
Return to Index Do you want all FLA's used for this tutorial? Do you have a question?

This document copyright © 2004 by Kenny Bellew of Cowfly.Com Design, kennybellew@hotmail.com