Simple XML MP3 Player in Flash CS3

There are many types of players out there, but most are so crammed with features and functions, that it's difficult for the newbie to understand and customize. So here is a player that is easily customizable and very easy to understand and use.

This will be a two part tutorial that covers the creation and implementation of the player and then how to use it in a Flash wrapper, calling it externally. The reason I'm going to use the loadMovie method is because there is an important aspect of calling external movie clips that many miss and most tutorials don't cover.

First off, make sure you are using Actionscript 2 (AS2), this will work with any version of Flash, but let's hope you at least have CS3. If you don't have the latest version of Flash (CS5), you can download it here.

So let's begin:

1. Create a new file (CTRL+N) or FILE>NEW, select Actionscript 2 and click OK, the stage can be any size you wish, but for now let's just leave it at default.

2. Add a new layer to the Timeline and call it components. Open the components window (CTRL+F7) or WINDOW>COMPONENTS and under USER INTERFACE, select the LIST component and drag it onto the stage. Position the component at X:17 and Y:15. Resize it to W:138 and H:335.

3. Go back to the components window and select the CHECKBOX component and drag it onto the stage. Place it under the LIST component at X:17 and Y:360 and give it an Instance name of "continuous_comp" Under the Parameters for the Checkbox, give it a Label name of Continuous Play, Label Placement should be RIGHT, and Selected should be TRUE.

4. Add a new layer and name it TITLES. Select the Text Tool (T) and create three Static Text fields in a verticle row, beginning at X:224 and Y:84. The first text field will be ARTIST, the second, ALBUM and the third, TITLE. Next to each of those text fields on the right, create three more Dynamic Text fields, respectively in a verticle row. The top text field should have an instance name of ARTIST_TXT, the middle, ALBUM_TXT and the bottom, TITLE_TXT. If you are going to use any special fonts, make sure you embed them. Leave all the settings for these text fields at default.

5. Add a new layer and call it CONTROLS. With the Text Tool and using the Webdings font, type the number 4 in the middle of the stage. You should have a character that looks like this 4
Hit the F8 key and select Button to make it a button symbol. Name the symbol PLAY_BTN and give it an instance name PLAY_BTN. On the same timeline, with the Text Tool and Webdings font again, type a Semicolon, you should have a character that looks like this:; Press F8 and make it a button symbol and name it PAUSE_BTN and give it the same Instance name (pause_btn). Now select both symbols on the stage and press F8 and make both buttons into a single Movie Symbol named CONTROLBAR_MC and give it the same instance name (controlbar_mc).

6. On the main timeline on the CONTROLS layer, create a grey square with a width of 200 pixels and a height of 5 pixels. press F8 and make it a Movie Symbol, naming it downloadbar_mc, give it the same instance name (downloadbar_mc). Now create a shape that looks like a triangle pointing up and create a movie symbol out of it and name it PLAYBACK_MC. Place the playback_mc at position X:0.2 and Y:3.5 - make sure your downloadbar is at position X:0 and Y:0. If all is correct the playback movieClip will be at the left end of the download bar. Now select both movie clips and press F8 and make a movie symbol called PROGRESSBARS_MC and give it an instance name of the same name.

Onto the fun part! The Actionscript.

7. Add a new layer on the main timeline and name it AS. Open the ACTIONS dialog window and insert the following code:

this._lockroot = true;

//make textfields autosize
album_txt.autoSize = "left";
artist_txt.autoSize =
"left";
title_txt.autoSize = "left";

//create sound object
var songInterval:Number;
var
amountLoaded:Number;
var mySound:Sound;
var nextTrack:Number;

//this will contain all the track details from the xml file
var
tracks_array:Array = new Array();
var totalTracks:Number;

//create the XML object and populate with track details
var
jukebox_xml:XML = new XML();
jukebox_xml.ignoreWhite = true;
var
RootNode:XMLNode;

jukebox_xml.onLoad = function(success:Boolean) {
if (success) {
RootNode = this.firstChild;
totalTracks =
RootNode.childNodes.length;
populateTracksArray();
} else {
trace("error loading xml file");

}
};

jukebox_xml.load("tracks.xml");

function
populateTracksArray():Void{
for(var i:Number=0; i < source =" RootNode.childNodes[i].attributes.source;" artist =" RootNode.childNodes[i].attributes.artist;" album =" RootNode.childNodes[i].attributes.album;" title =" RootNode.childNodes[i].attributes.title;" text =" artist;" text =" album;" text =" title;" mysound =" new" onsoundcomplete =" function():Void{" selectedindex =" 0;" songinterval =" setInterval(songProgress,100);" number="0;" selectedindex="0;">

//create a listener for the list component
var compListener:Object =
new Object();
list_comp.addEventListener("change", compListener);
compListener.change = function(info:Object):Void{
playTrack(info.target.value,tracks_array[list_comp.selectedIndex].artist,tracks_array[list_comp.selectedIndex].album,tracks_array[list_comp.selectedIndex].title,
true);
}

//this controls download bar and playback
function
songProgress():Void{
amountLoaded =
(mySound.getBytesLoaded()/mySound.getBytesTotal());
progressbars_mc.downloadbar_mc._width = amountLoaded * 200;
progressbars_mc.playback_mc._x =
(mySound.position/mySound.duration)*amountLoaded * 200;
position_txt.text =
mySound.position;
duration_txt.text = mySound.duration;
playback_txt.text = progressbars_mc.playback_mc._x;
}

//controls
var soundPosition:Number;
var paused:Boolean = false;
controlbar_mc.pause_btn.onRelease = function():Void{
soundPosition =
mySound.position;
paused = true; mySound.stop();
}
controlbar_mc.play_btn.onRelease = function():Void{
if(paused){
mySound.start(soundPosition/1000);
paused = false;
}
}

Creating the XML file:

1. Open an XML editor, Notepad will work, but Dreamweaver would be ideal. Make a new XML file and put in the following code:

Now you can have as many songs as you like, just copy and paste the same line and change the names respectively.

Now your XML file needs to be in the same root folder as your SWF in order for this to work. If you change the directory that the XML file is going to reside then you need to change that path in your AS respectively.

If you are going to call this player into another Flash movie (SWF), lets say you wanted to load it into a website