Creating a Sound Bar
         by Reed Morse

Now a-days, clients and visitors are looking for more in a Flash website. One way to add an entire new dimension to your website is to add sound. This tutorial will show you how to build a one song sound controller for your website.

For an example of what you will be creating, press the Play button in the animation below:

 sound example

[ press 'play' ]

Supplied in this tutorial are a sound clip, various ActionScript, and two finished FLA files. Since cutting and pasting ActionScript does not aid much in the learning process, an explanation of the ActionScript is provided at the end. For more detailed explanations, please refer to the KirupaForum, and/or your ActionScript Dictionary (in Flash: Help > ActionScript Dictionary)

Steps to Create Animation
The following steps will guide you in creating the above sound animation:

  1. First of all, you will need a sound loop to play. While generally it’s better to use a longer loop (say fifteen to thirty seconds), I have included a very short audio clip for you to play with.

    Download it and unzip it. Please keep in mind that I didn’t make this clip, it came free with FruityLoops: Download Sound Loop Here.
     

  2. Now that you have your audio file, fire up Flash. Create a new document (File > New) and change the dimensions of the movie to 700 pixels (width) by 15 pixels (height). You can modify the movie by pointing to Modify > Document.
     

  3. We will begin by creating the play button. In the main timeline, name the current layer “buttons” (without quotes). On the stage, create some text. Type something descriptive like “Play” (without quotes) in the textbox.
     

  4. Make sure the text type is Static Text. Select the text and make it into a button (F8 or Insert > Convert to Symbol…). Modify the button for your desired aspects.
     

  5. In the main timeline, create a new layer. Name the layer “Actions” (without quotes). Click the first frame of this layer and bring up the Actions panel. Copy the following code in (code will be explained at the end of the tutorial):

stop();

  1. Save the document (File > Save) as “sound” (without quotes).
     

  2. Now click on the button we made back in step c. Bring up the Actions panel again (right-click on the button and select Actions), and copy the following code:


 

  1. Replace [absolute location of movie] with the path of the directory where you saved the movie.

    1. Example: C:/Program Files/Macromedia/Flash MX/kirupa

    2. Example: http://www.yourwebsite.com/flash
       

  2. Save the document again, and publish it.
     

  3. We will now begin creating the playing sound and the stop button. With sound.fla still open, point to File > Save As…, and re-save the movie as “sound1” (without quotes).
     

  4. After you have re-saved your movie (see above step), change the descriptive button on the stage to something like “Stop” (again without quotes). Add the following ActionScript to the button


 

  1. Excellent, we’re almost done. Create a new layer below the Actions one. Name this new layer “loading” or something of this sort. Throw some text up there and a small animation to indicate that your movie is loading. Don’t make it too complex; you want this to load as soon as possible.
     

  2. Select the second frame of the loading layer, and press F5 (or point to Insert > Frame). Find the fourth frame of the buttons layer and again press F5 or point to Insert > Frame.
     

  3. Try to stick with me here, it’s not that confusing. In the Actions layer, select the first frame. Bring up the actions panel. Copy and paste the following code:


 

  1. Ok, now select the second frame of the Actions layer. In the actions panel, paste this code:

gotoAndPlay(1);

  1. Lastly, select the fourth frame of the Actions layer. This frame’s action should be a single stop() command:


 

  1. Close the action panel and point to File > Import... Find the audio file you downloaded and unzipped earlier. Import it. Select the third frame of the Actions layer, and in the properties window find the sound dropdown box. In this box select the sound file you just imported. Set the loop to 9999. You may also want to add a fade in for grins.

 

Code Explanation
The following section explains the reasons behind the code added:
  • stop()
    Stops the movie’s play head
     
  • on (release) {
    Calls the following action when a button is released
     
  • loadMovie("[absolute location of movie]/sound1.swf", this);
    Loads an external swf file into the current one.
     
  • }
    Closes the action that will execute when the button is released
     
    •
  • totalb = _root.getBytesTotal();
    Declares the variable “totalb” and assigns it the value of the total size, in bytes, of the movie clip
     
  • loadedb = _root.getBytesLoaded();
    Declares the variable “loadedb” and assigns it the value of the number of bytes loaded so far
     
  • if (loadedb == totalb) {
    If statement, saying that if the two values of “loadedb” and “totalb” are the same, the enclosed action is to be executed
     
  • _root.gotoAndPlay(3);
    The action to be executed if the if statement returns true

     
  • gotoAndPlay(1);
    Tells the timeline’s play head to return back to, and play from, the first frame

Also, I have provided the final FLA files for your perusal:

 download zip

If you have any questions, please do not hesitate to post on the forums at: kirupaForum.

Reed Morse

 

 



SUPPORTERS:
kirupa.com's fast and reliable hosting provided by Media Temple.