Create a Jazzy XML Driven MP3 Player

ActionScript 3.0 allows Flash Developers and Designers to make all manner of things in Flash with relative ease. This tutorial will teach you how to create your own ActionScript 3.0 MP3 Player with sound spectrum, album art, color changer and song information display.

Step 1

Begin by creating a new ActionScript 3.0 document. Set the Stage size to 600px x 600px and 30 FPS. I've chosen #333333 as my background color.

Step 2

Go to File > Import > Import to Library... and import an image (I've modified part of an iPod from free4illustrator.com for this example. You should use a .png format instead .jpg format to take advantage of the transparency for your object.). After having imported the image, open your Library ( Ctrl + L ) and drag the .png to the stage.

Step 3

Select the image and convert it to a Movie Clip symbol(F8). Name it "Ipod" or another name if you prefer. I've chosen the top left corner as registration point.

Step 4

Double-click "Ipod" movieclip symbol to enter its timeline. Be sure you're inside the movieclip and not "Scene 1".

Step 5

In the Timeline bar, insert a New Layer above the "IpodBody" layer and name it "Buttons Layer". We'll put all our button symbols in this layer.

Step 6

Use the Rectangle Tool, #00ff00 as the fill color and colorless as the stroke color. We don't need a stroke here and in fact, the fill color can be any color you like, it won't be shown in the end result. Draw a shape above the previous icon, similar to the picture below:

Step 7

Convert the shape which you've just drawn into a Button Symbol(F8) and name it "prev" as shown in the picture below:

Step 8

Give the "prev" Button Symbol an Instance Name. I've named it "prevBtn" and changed the Color Style to Alpha with 0%.

Step 9

The following steps will need the same Button symbol as the "prev" button symbol. Copy the "prev" Button symbol and paste it onto the "Next" icon on your bitmap. To duplicate this symbol, go to Properties Bar and click "Swap". A Swap Symbol window will pop out, at which point you need to click the "Duplicate Symbol" (be sure that you are choosing the "prev" button symbol.). Name it "next".

Step 10

Now we have a new symbol which is similar to the "prev" button symbol, but named "next". Give this symbol an Instance name of "nextBtn". The Color Style remains alpha 0%.

Step 11

Repeat Step 9 - 10 by duplicating "prev" symbol to make "play", "pause" and "stop" button symbols. Assign Instance names of "playBtn", "pauseBtn" and "stopBtn" respectively.

Step 12

Insert a new layer above "Buttons Layer" and name it "Text".

Step 13

Draw a text box similar to the picture shown below in the "Text" Layer. Set "Dynamic Text" as the Text Type, assign the Instance name "titleTxt", Arial font face, Font size set to 12px and Bold, white color(#ffffff) and aligned to center.

Step 14

Create another text box just below the "titleTxt" text box. Set this new text box as Dynamic Text, give it an Instance name of "artistTxt", with Arial font face, Font size set to 10px, white color(#ffffff) and, again, aligned to center.

Step 15

Insert a new layer above the "Text" layer and name it "Color Changer".

Step 16

Use the Rectangle Tool and set #ff0000 as the fill color. Draw a small square of 14px X 14px on the right top corner of the ipod screen and convert it to a Button symbol( F8) with a name of "red". Give it a Instance name of "redBtn".

Step 17

Repeat Step 16 and make two more squares. Fill one square with #ffff00, name it "yellow" and assign an Instance name of "yellowBtn". Fill the other square with #66ccff, name it "blue" with an Instance name of "blueBtn". You can set this to any color you like, it will allow the user to change the sound spectrum color.

Step 18

Insert a new layer above the "Color Changer" layer and name it "ActionScript Layer".

Step 19 - Begin the Script

From this moment on, we will be playing with ActionScript 3.0. On the first Keyframe of "Actionscript Layer" press F9. An Action window will pop out. We'll input our script into this window later.

Step 20 - Setting Variables

First, we need to tell Flash what what the ipod Player contains and its properties. There are several variables we need. When the Flash has loaded completely, we need it to start running. The "Loaded" function will start immediately. The loader will load an XML file, the path of which is stated in "URLRequest" of the "loader". We'll create the "musiclist.xml" file for this iPod Player later.


var musicReq: URLRequest;
var thumbReq: URLRequest;
var music:Sound = new Sound();
var sndC:SoundChannel;
var currentSnd:Sound = music;
var position:Number;
var currentIndex:Number = 0;
var songPaused:Boolean;
var songStopped:Boolean;
var lineClr:uint;
var changeClr:Boolean;
var xml:XML;
var songList:XMLList;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, Loaded);

loader.load(new URLRequest("musiclist.xml"));

Step 21 - Album Art Holder

Later, we'll create album art which displays on the screen of the iPod Player. The following script states the coordinates of the album art, which will be held in a Movie Clip Symbol.


var thumbHd:MovieClip = new MovieClip();
thumbHd.x = 50;
thumbHd.y = 70;
addChild(thumbHd);

Step 22 - Define the "Loaded" Function

Now let's define the "Loaded" function. We want it go to the XML and retrieve the Song URL to be played in the Player. When the song is loaded, it will play immediately and the album art for the song will load simultaneously. When the song has finished playing, it will start to play next song.


function Loaded(e:Event):void{
	xml = new XML(e.target.data);
	songList = xml.song;
	musicReq = new URLRequest(songList[0].url);
	thumbReq = new URLRequest(songList[0].thumb);
	music.load(musicReq);
	sndC = music.play();
	titleTxt.text = songList[0].title;
	artistTxt.text = songList[0].artist;
	loadThumb();
	sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}

Step 23 - Define the "loadThumb" Function

Now we'll define the "loadThumb" function. When the thumb is loaded, it will tell Flash to start the "thumbLoaded" function. This function will add a Movie Clip containing the album art.


function loadThumb():void{
	var thumbLoader:Loader = new Loader();
	thumbReq = new URLRequest(songList[currentIndex].thumb);
	thumbLoader.load(thumbReq);
	thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
}

function thumbLoaded(e:Event):void {
	var thumb:Bitmap = (Bitmap)(e.target.content);
	var holder:MovieClip = thumbHd;
	holder.addChild(thumb);
}

Step 24 - State "EventListener" of Buttons

Here I've stated that the Buttons we created have their respective functions. To allow users to click on the button and execute the function, we use "MouseEvent.CLICK". All the functions of respective buttons will be mentioned in the next few steps.


prevBtn.addEventListener(MouseEvent.CLICK, prevSong);
nextBtn.addEventListener(MouseEvent.CLICK, nextSong);
playBtn.addEventListener(MouseEvent.CLICK, playSong);
pauseBtn.addEventListener(MouseEvent.CLICK, pauseSong);
stopBtn.addEventListener(MouseEvent.CLICK, stopSong);

Step 25 - Define the "prevSong" Function

"prevBtn" (Previous button) function, define "prevSong":


function prevSong(e:Event):void{
	if(currentIndex > 0){
		currentIndex--;
	}
	else{
		currentIndex = songList.length() - 1;
	}
	
	var prevReq:URLRequest = new URLRequest(songList[currentIndex].url);
	var prevPlay:Sound = new Sound(prevReq);
	sndC.stop();
	titleTxt.text = songList[currentIndex].title;
	artistTxt.text = songList[currentIndex].artist;
	sndC = prevPlay.play();
	currentSnd = prevPlay;
	songPaused = false;
	loadThumb();
	sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}

Step 26 - Define the "nextSong" Function

"nextBtn" (Next button) function, define "nextSong":


function nextSong(e:Event):void {
	if(currentIndex < (songList.length() - 1)){
		currentIndex++;
	}
	else {
		currentIndex = 0;
	}
	
	var nextReq:URLRequest = new URLRequest(songList[currentIndex].url);
	var nextPlay:Sound = new Sound(nextReq);
	sndC.stop();
	titleTxt.text = songList[currentIndex].title;
	artistTxt.text = songList[currentIndex].artist;
	sndC = nextPlay.play();
	currentSnd = nextPlay;
	songPaused = false;
	loadThumb();
	sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}

Step 27 - Define the "playSong" Function

"playBtn" (Play button) function, define "playSong":


function playSong(e:Event):void{
	if(songPaused){
		sndC = currentSnd.play(position);
		songPaused = false;
	}
	else if(songStopped){
		sndC = currentSnd.play(position);
		songStopped = false;
	}
	else if(!sndC){
		sndC = currentSnd.play(position);
	}
}

Step 28 - Define the "pauseSong" Function

"pauseBtn" (Pause button) function, define "pauseSong":


function pauseSong(e:Event):void{
	if(sndC){
		position = sndC.position;
		sndC.stop();
		songPaused = true;
	}
}

Step 29 - Define the "stopSong" Function

"stopBtn" (Stop button) function, define "stopSong":


function stopSong(e:Event):void{
	sndC.stop();
	position = 0;
	songStopped = true;
}

We have now built the player controls.

Step 30 - State "EventListener" of Colored Buttons

The buttons we created in steps 15-17 are not useless. We now have to tell Flash what their role is within the Player:

1
2	redBtn.addEventListener(MouseEvent.CLICK, changeRed);
3	yellowBtn.addEventListener(MouseEvent.CLICK, changeYellow);
4	blueBtn.addEventListener(MouseEvent.CLICK, changeBlue);

Step 31 - Define Colored Button FunctionsS

Each colored button has its respective function. "changeRed" will set the line of the spectrum to "0xFF0000" (Red). "changeYellow" will set it to "0xFFFF00" (Yellow) and "changeBlue" will set "0x66CCFF" (Cyan). We also want Flash to know that when we click on Red color, it will inherit 100% opacity while the others will be given 50% opacity

Note: In ActionScript 3.0, 100% = 1, 10% = 0.1 and so on.

All colored buttons will have this function, so we must state the opacity of the button in each function.


function changeRed(e:Event):void{
	lineClr = 0xFF0000;
	changeClr = true;
	redBtn.alpha = 1;
	yellowBtn.alpha = 0.5;
	blueBtn.alpha = 0.5;
}

function changeYellow(e:Event):void{
	lineClr = 0xFFFF00;
	changeClr = true;
	redBtn.alpha = 0.5;
	yellowBtn.alpha = 1;
	blueBtn.alpha = 0.5;
}

function changeBlue(e:Event):void{
	lineClr = 0x66CCFF;
	changeClr = true;
	redBtn.alpha = 0.5;
	yellowBtn.alpha = 0.5;
	blueBtn.alpha = 1;
}

Step 32 - Set Default Color of the Spectrum

Now let's set the default color of the line. I choose Red as default, you can use whichever color you like.


if(!changeClr){
	lineClr = 0xFF0000;
	redBtn.alpha = 1;
	yellowBtn.alpha = 0.5;
	blueBtn.alpha = 0.5;
}

Step 33 - Draw the Spectrum

The last part of our Actionscript; we want Flash to draw out the spectrum of the song. "lineClr" in "lineStyle" is a variable within the colour button in step 31. "for(var i:uint=30; i<280; i++)" stated the starting x coordinate of the line and the end coordinate of the line.

In "var num:Number = ba.readFloat()*50 + 170;" the 50 allows Flash to multiply the Float in the song and 170 is the y coordinate of the spectrum.


var ba:ByteArray = new ByteArray();
addEventListener(Event.ENTER_FRAME, drawl);
function drawl(e:Event):void
{
	graphics.clear();
	graphics.lineStyle(1, lineClr, 0.5);
	graphics.moveTo(30, 150);
	SoundMixer.computeSpectrum(ba);
	for(var i:uint=30; i<280; i++)
	{
		var num:Number = ba.readFloat()*50 + 170;
		graphics.lineTo(i, num);
	}
}

Step 34 - Create the XML

Title and Artist will be shown in our player later. "<thumb>" and "<url>" are the paths of the album art and the song. XML can be created easily (you can use Notepad to type the following code and Save as .XML file). You must save it as "musiclist.xml" as that's how we've referred to it within the Actionscript of the Player.


<musiclist>

	<song>
		<title>The Mass</title>
		<artist>Era</artist>
		<thumb>pics/era.jpg</thumb>
		<url>songs/themass.mp3</url>
	</song>
	<song>
		<title>Dr.No theme</title>
		<artist> - </artist>
		<thumb>pics/drno.jpg</thumb>
		<url>songs/drno.mp3</url>
	</song>

</musiclist>

Step 35 - Create Album Art

Create album art for the songs. Recommended size is 65px x 65px; it will fit nicely in the screen.

Conclusion

Test your movie (Ctrl + Enter) to check the outcome. You will have your own flash iPod Player! You can use it as music player for your website; edit the music list as you wish. It's up to you. Go ahead and experiment, if you have any cool results be sure to share them with us.

I hope you liked this tutorial, thanks for reading!