The following is a step-by-step tutorial on how to build a Flash media player with a spectrum-analyzer animation. In order to make this work, you will need to use SwiftMP3, which is an inexpensive piece of software that will analyze your MP3 and create the variables needed to make the animation work.

This tutorial will cover the following:

• How to Create a Spectrum Analyzer for You Media Player
• Preparing Your MP3 to Stream in Flash
• Using SwiftMP3 to Convert Your MP3's
• Using the SwiftMP3 Variables to Create Spectrum Analyzer
• Building a Complete Media Player with Spectrum Animation
• Creating Start, Stop, and Pause Buttons
• Displaying the MP3 ID3 Tag Information
• Building an Animation Based on the s0 to s17 Data
• Use This Player as a Template and Add Artwork
• Using SwiftMP3 to Create an XML Playlist for Your Player

SwiftMP3 will convert your MP3 (for example, song.mp3) to a streaming SWF file (for example, song.swf). The variables will be embedded into song.swf, and can be accessed from the same timeline where song.swf is loaded in your main movie.

There are sample players included with SwiftMP3, and you will be able to test your streaming file immediately using those sample players. This tutorial explains how to build your own streaming player and how to use the embedded variables to create your own unique animations that are based on the spectrum data. The animation in the simple player to the right was made possible using SwiftMP3 (also see the player at the bottom).

If you are already comfortable with using SwiftMP3, and you just want to jump to creating the spectrum animation for your media player, click here.

Tip: If you do not have software for compressing MP3's, and you need something for free, take a look at Audacity. It's free. I've never used it, but it was recommended to me. You do have to install the MP3 encoder separately (it uses the LAME MP3 Encoder, installed separately). All of the links are at the following website:

http://audacity.sourceforge.net

• Compression rates
• MP3 ID Tags

Compression Rates
Before you begin, you should make sure that your audio complies with the sampling rates allowed by Flash streaming audio, which are: 44.1, 22 and 11kHz. These numbers refer to the number of samples per second.

Normally, when you save an mp3 out of audio editing software, you are allowed to select the amount of compression to be used. There are three main choices: Sampling rate, bitrate (described in kbs or kilobytes per second) and stereo versus mono. You should select the greatest amount of compression that will provide the quality you need. I recommend that you start with the following compression settings when you save your MP3:

Sample Rate: 22 kHz
Bitrate: 40 kbs
Stereo or mono: Stereo (unless stereo is not needed).

If you determine that more quality is required, increase these settings. If your audio editing software does not allow you to select this level of compression, there are numerous software packages with which to experiment. Search your favorite shareware site.

Keep in mind that if you increase the quality settings too high, you may actually decrease the perceived quality due to stuttering and drop outs that may occur if the user's bandwidth cannot keep up with the streaming sound.

Tip: A good, free MP3 ID3 tag editor and viewer is MP3-Info Extension. It allows you to hover over the MP3 with your mouse curser and see the ID3 tag information. If you want to edit the ID3 tag information, you then can right-click the MP3, select properties, and there you will be able to edit the ID3 tag information. To obtain this free software, visit the following website:

http://www.mutschler.de/mp3ext

MP3 ID Tags
SwiftMP3 will use three MP3 ID3 tags, artist, album and song title, to generate XML playlists. The information can also be accessed as a variable from the timeline. If you want to use this information in your player, you need to make sure that your MP3 tags are configured in the MP3 file before it is converted. I use MusicMatch Jukebox to configure my MP3 ID3 tags. However, nearly all audio editing software provides support for MP3 ID3 tag editing.

Download the demo or purchase SwiftMP3 from the link at the top of this page.

When you start SwiftMP3, you will see something similar to the following:

To the left are menu options within SwiftMP3, and the following describes their function:

• A - File, Generate and Help. With the file drop-down menu you can add, remove or listen to files (basically, the same functions as B.
• B - Click the plus sign to browse for MP3 files to add. Clicking the minus sign will remove the highlighted MP3 file from the right-side pane, and the speaker icon will allow you to listen to the file.
• C - Generate spectrum data. When the box is checked, the variables needed to create the spectrum animation are added to the SWF file that is created when you select the convert icon F.
• D - Frame rate. The movie that imports the streaming SWF for playing will take on whatever frame rate you select here. Flash allows a maximum of 16,000 frames for any single movie. Therefore, the maximum duration of your streaming sound is calculated as (16,000 / frame rate) / 60. This determines the maximum duration of your streaming audio. Item D shows a frame rate of 20, which allows for a maximum streaming sound duration of 13 minutes and 39 seconds. Most commonly, you will want to change the frame rate in item D to match the frame rate of your main movie.
• E - Truncate. If you have a 5-minute MP3 and you only need 10 seconds of it, this allows you to automatically truncate the audio to the amount desired.
• F - Convert icon. This allows you to convert a single MP3 or all MP3's in the right-side pane. It is important to note that using this button to convert the MP3 to a streaming SWF, such as song.swf, does not create the XML, create the web file or copy the sample players to your destination folder. You will select Generate Web Files to accomplish this.
• G - Stop. With no box selected, the sound will start immediately and will loop continuously. Selecting stop at the beginning will require that you instruct the file to start after it has been loaded into your main movie. If only "at End" is selected, the sound will start automatically, but it will not loop.

• H - If you want to use items I through K, you must specify a destination folder. Otherwise, leaving this box unchecked will place the converted file in the same folder as the original MP3.
• I - Flash MP3 Player. Here, you can select one of the included players to test your streaming audio.
• J - Generate XML Playlist file. This section provides the following options:
  • Generate XML Playlist file - All MP3's listed in the right-side pane will be included in the file called playlist.xml. All MP3's are included whether or not they have been converted. The file names of the MP3's in playlist.xml will appear as filename.swf, whether they have been converted or not. The assumption is that - if you want the file in the playlist, you will eventually convert it.
  • Playlist only contains converted files. Just as the name implies, only files that have been converted (and which are showing in the right-side pane) will be added to the playlist.xml file.
  • Selection only. Only the highlighted file in the right-side pane will be included in the playlist.xml file.
• K - HTML. This will generate an index.html file with the selected sample Flash MP3 player (as selected at item I) embedded into the HTML page.

SwiftMP3 examines the MP3 during the conversion process and generates spectrum values that can be used to create the spectrum analyzer animation. There are 18 variables: s0 to s17. Each variable has a range from 0 to 31. As the music changes in your movie, the value of s0, s1, s2, s3, etc. changes relative to changes in the audio.

For example, if you wanted to create an animated tiny guitar (as shown to the right) which rose or lowered depending on the value of s0 to S17, your code might appear as the following:

The above works when the external converted MP3, such as song.swf, gets loaded into level1 of your movie. This code would be placed on each of the animated guitar movie clips (or whatever you chose to animate). The 148 equals the Y-axis location where you wanted your animation to start. In s0*5, the 5 equals the amount of jump each change in s0 would generate. Remember, that s0 to s17 can equal anything from 0 to 31. However, most MP3's of average amplitude rarely range higher than 20.

For example, when s0 equals 12, the Y-axis location of the first guitar would be 148 plus by 12 multiplied by 5. This value is then multiplied -1 because we want the guitar to move up (versus down).

You should trace the values of s0 to s17 to determine the range of your audio before starting your animation creation.

Creating a media player that uses an XML playlist will be covered later. For this player, loadMovie will be used to load a single external audio file. The external audio file can be loaded into a level, such as _level1, or into a movie clip. In this example, the external audio file will be loaded into a movie clip called "musicHolder".

To begin, we will not concentrate on the artwork or look of the player. Our first goal is functionality. Once all the player parts are functioning correctly, the artwork will be added.

1. Convert your MP3 as described previously.
2. Create a new flash movie and save it.
3. Place the converted MP3 into the same folder with the saved FLA you just created. For this example, the external audio file will be called songName.swf, but, of course, you can name yours whatever you wish.
4. In the new Flash file, create a layer called "musicHolder".
5. Press CTRL-F8 to insert a new movie. Name the movie emptyMC.
6. With the "musicHolder" layer highlighted, drag the new movie clip out from the library and place it any place - even off stage. I usually place it off stage in the upper left corner.
7. Select the movie clip instance, and, in the properties box, give the movie clip instance the instance name of "musicHolder" (without the quotes).
8. Lock the musicHolder layer.
9. Create a new layer and name it "Actions", and lock it.
10. Place the following code on frame 1 of the Actions layer:
    
    

    _root.musicHolder.loadMovie("songName.swf"); stop();

Save your FLA. At this point, if you publish your movie, the external song will load into the empty movie clip with the instance name of musicHolder. If you have chosen not to stop the audio at the beginning of the file, it will start playing. If you have chosen for the audio to stop at the beginning, then you need to create a way to start and stop the audio.

Either create appropriate artwork or use the stock buttons that are included with Flash. I usually use the stock buttons during the programming phase, and later replace them with new artwork.

Below is a sample media player as it would appear in Flash at this point. The text "musicHolder" was typed next to the empty movie clip (instance name "musicHolder") that is just outside of the stage area in the upper left corner. Obviously, we still need to add artwork for the player, and the buttons will eventually move to a new location.

1. Click on the play button, and give it the instance name of "playButton" (without quotes).
2. Click on the pause button, and give it the instance name of "pauseButton".
3. Click on the stop button, and give it the instance name of "stopButton".
4. Previously, in step 5 above, we created an empty movie clip and named it emptyMC. Drag another instance of it out of the library, and place it under the musicHolder movie clip. You will use the clip events of this movie clip to control the buttons.
5. Give the new movie clip the instance name of "buttonsMC" (without quotes).
   
   
6. Click on buttonsMC. If it is properly selected, you should be able to see its instance name in the properties box.
7. If the Actions pane is not showing, press F9 to access the actions pane.
8. Paste the following code into the actions pane for buttonsMC (not on a frame, but directly on the movie clip).
   
   

   onClipEvent(enterFrame) { // Play Button _root.playButton.onPress = function () { _root.musicHolder.play(); }; // Pause Button _root.pauseButton.onPress = function () { _root.musicHolder.stop(); }; // Stop Button _root.stopButton.onPress = function () { _root.musicHolder.gotoAndStop(1); }; }//END

   
   Save your FLA, and then test your movie. If it does not work, double check that you have given the buttons and movie clips their proper (case sensitive) instance names. If you get the following error: "Clip events are permitted only for movie clip instances", you may have placed the above code on a frame instead of on the movie clip.
   

1. Create a new layer, and name it "Text boxes".
2. With this new layer highlighted, place 3 dynamic text boxes on stage that are wide enough to contain the Artist, Title and Album information respectively.
4. If you decide to use a font that may not be installed on everyone computer, make sure you embed the font by selecting the Character button in the properties menu of the text box (as shown to the right).
6. Name the text box that will contain the artist information "artist" (without quotes and case sensitive).
8. Name the text box that will contain the title information "title" (without quotes and case sensitive).

9. Name the text box that will contain the album information "album" (without quotes and case sensitive).

10. Position each box so that its X and Y axis is on a whole number. If you reposition the boxes later, remember to keep the boxes positioned on whole number coordinates (to keep the font from appearing blurry).
11. Add the following code to the movie instance called buttonMC (in its actions pane):
    
    

    _root.title = _root.musicHolder.Title; _root.artist = _root.musicHolder.Artist; _root.album = _root.musicHolder.Album;

    
    The above code should be added just above the line that starts with }// END.

There are countless ways to use the spectrum information to create unique animations. In the blue player at the beginning of the SwiftMP3 tutorial, each cell is either green or gray depending on the value of the "s" variable. In the guitar animation, the Y-axis location of the guitar responds to the "s" variable. In the following animation, the amount of Y scale for each bar of the spectrum animation will scale relative to the value of s0 to s17.

Before I created this animation, I traced the "s" values and determined the range used in my audio file. I saw that they never went above 15, though the range could be as high as 31.

1. Using the rectangle tool, draw a thin rectangle that will equal the maximum height that you want the spectrum animation. The dimensions of the bar I created was 6.6 wide by 100 pixels tall.
   
   
   
2. Double click the edge of the bar to select the rectangle's outline, and press delete to delete the outline of the rectangle.
3. Select the rectangle with the mouse, and press F8 to convert the symbol to a movie clip. Name it "bar".
4. Below is the script that will be added to the bar movie instance. With the actions pane showing for the bar movie clip instance, paste that code into bar's actions window.
   
   

   onClipEvent(load) { if (_root.startHeight==nul) {_root.startHeight=10;} this._yscale=_root.startHeight; } // onClipEvent(enterFrame) { if (_root.jumpAmount==nul) {_root.jumpAmount=7;} scaleAmount=_root.musicHolder.s0 * _root.jumpAmount; if (scaleAmount>100) {scaleAmount=100;} this._yscale = scaleAmount; } // END

   Paste the above script into the actions widow for the instance of the bar movie clip.

   
   
5. In frame one of the Actions layers, add the following lines of code:
   
   

   _root.startHeight=10; // Percent of original bar height _root.jumpAmount=7; // Increases jump of bar relative to s0 to s17

   
   This will allow you to make changes to the starting height and the height of the animated bars without having to change the code on each of the 18 bars.
6. Duplicate the bar on stage, and paste another instance of the bar next to the original. Repeat this until you have 18 copies of the bar on stage.
7. Save your FLA.
8. Align and distribute the widths of the bars using CTRL-ALT-6 and CTRL-ALT-7.
9. Save your FLA.
10. Currently, the script on each bar only responds to the value of s0. Edit each bar respectively until each bar represents a unique "s" value. For example, click on the second bar, and change the line of code that reads "scaleAmount=_root.musicHolder.s0 * _root.jumpAmount;" to "scaleAmount=_root.musicHolder.s1 * _root.jumpAmount;". The next bar will be changed to .s2, and so on. Continue until each bar has been properly modified. The last bar should be "scaleAmount=_root.musicHolder.s17 * _root.jumpAmount;". Once complete, your movie should look similar to the following:
    
    
    
11. Test and save your movie.