Tiago's Weblog

After endless nights, liters of coffeee and chats with some people with nice ideas, here the long awaited Part III of the streaming MP3 Player tutorial. There are still a lot of functions that could be implemented, but I leave that to you guys to extend it even further.

I must clear off as first, this tutorial is really advanced, so beginners that never went through part I or II by their own, will have difficulties, I will try to explain everything as accurate as possible.
So for those who didn’t read the previous tutorials here the link to them:

Part I: Creating the basic player
Part II: Extension of player

To get an overview of what will be covered on this tutorial, here the feature list:

Here the screenshot of our final result:

Scrolling Text
ok, there are different ways to create a scrolling text display, I’ve choosen this one, since it’s more controllable then others, and the result looks better.

First of all let’s us create a a new layer, name that layer “mask”, create a rectangle with any other color then white, with a width of 117px right on top of the “title_txt” textfield, that should fit right beneath the controls.

Now let us put the textfield “title_txt” on a separate layer, and name that new layer “title field”.
Move the text field to the far right of the mask, let’s say at a X position of 220, we’re doing this so that the text “scrolls” to our mask instead of just showing up.
As last step we need to tell our mask layer that it’s a mask for that just right-click on the mask layer and choose mask. lock those 2 layers, since we’re not doing anything more with them.
Everything will be now done controlled with actionscript and one movieclip.

Crete a new movieclip by pressing CTRL + F8, name that movieclip “scroller”, inside of the newly created movieclip, on frame 1 press F9 to get our action window.

Here the code we will be using, the explanation will follow below.

1
2
3
4
5
6

this.onEnterFrame = function() {
_root.title_txt._x -= 1;
if (_root.title_txt._x < (-100-_root.title_txt.width)) {
_root.title_txt._x = 219;
}
}

Explanation:

1

this.onEnterFrame = function(){

everytime the playhead enters this frame, depending on the framerate you defined, this function will be executed

1

_root.title_txt._x -= 1

Here we decrement the x value of our textfield by 1px everytime the function is being called.

1

if (_root.title_txt._x < (-100-_root.title_txt.width)) {

This one is pretty obvious, if the x value of our textfield is less then our textfieldwidth minus 100 then....

1

_root.title_txt._x = 220;

... set the textfield to the original x position.

Go back to our maintimeline, create a new layer named "controllers" and drag our scroller mc to the stage.
You will only see a small white circle on the stage, since the movieclip is empty.

One thing needs to be done still, before you test the movie, different tracks have a different name, with a different length, our textfield need to get an autosize otherwise it can look strage.
Go to our actions layer in the maintimeline and press F9 to open the actionspanel, and insert following line right after the stop action:

1

title_txt.autoSize = "left";

So what have we done? We are changing the position of our textfield by 1px everytime the function is being called, in our case with 15fps, meaning the textfield is being moved 15px per second. Since we've masked our textfield only that portion is viewable. Go on and test your movie! you should see the text moving from right to left and after a while starting again.

FadeIn at songstart

To achieve this function you have to again create a blank movieclip as a controller for the volume, so agan create a blank movieclip by pressing CTRL+F8 and give it a name of "fader"
Again on frame 1 of that newly movieclip open your actions panel with F9 and start typing this code

1
2
3
4
5
6
7

onEnterFrame = function(){
var CurrentVolume = _root.sound_mc.sound_obj.getVolume();
_root.toolTip.ttVolume.text = CurrentVolume;
if (CurrentVolume < = 99){
_level0.sound_mc.sound_obj.setVolume(CurrentVolume + 1);
}
}

Explanation:

1

onEnterFrame = function(){

Already explained before, every time the movie enters this frame, run this function.

1

var CurrentVolume = _root.sound_mc.sound_obj.getVolume();

Here we set the variable CurrentVolume the currentVolume of our sound with the getVolume() function

1

_root.toolTip.ttVolume.text = CurrentVolume

this is already a preparation for our volume display. basically we are just telling that the variable CurrentVolume should be displaying on the textfield inside ToolTip named ttVolume. " We will create that later".

1

if (CurrentVolume < = 99){

Here we check the currentvolume, if more or equal to 99 (why 99?, volume starts at 0 so 99 equals 100)

1

_level0.sound_mc.sound_obj.setVolume(CurrentVolume + 1);

And here we increment our variable CurrentVolume by 1 everytime the movie passes this frame (remember the 15fps on your movie)

Again go back to your main timeline and drag the newly created movieclip from the library to the controller layer.
you can also lock the layer "controller" we will not need it anymore.

One thing has gone forgotten.. Our volume is already sent to 100 by default!!
Let's change that on the actions layer of our main timeline.

Inside our prototype after the "this.sound_obj.loadSound(file, true);" line type this:

1

this.sound_obj.setVolume(0);

It NEEDS to be placed there, if you place it before the prototype nothing will happen, and if you place it after the prototype you will hear the sound for a short amount of time, till the script reached our line.

Go for it and test the movie, you will see that music starts with a volume of 0 and get's louder till it reaches 100% volume.
If you don't believe me, then put a trace action inside the fader movieclip

1

trace (CurrentVolume)

Let's make a break and go drink a coffee or whatever you like, the hardest part is still to come.

Volume Display

This is nothing that you really need, just came up my mind as I was playing around with the windows media player.
When you change the volume on WMP you see a small tooltip with the volume display. We will no re-attempt that function.

First of all we need to create a small movieclip that will act as our tooltip, so as usual press CTRL+F8 to create a new movieclip and give it the name tooltip.
Now let's create 2 layers one for the textfield and one for the graphic.
Here a screenshot of my tooltip (zoomed)

So as you see I've created a small rectangle as background of the tooltip, and on the top layer I've created a dynamic text field with enough space to hold 3 digits.
Before you go back to your main timeline, give the textfield an instance name of "ttVolume".
Do you remember our fader script? there was a line saying:

1

_root.toolTip.ttVolume.text = CurrentVolume;

Now you know for what we put that line of code in there

Now let's go back to our main timeline, drag our tooltip movie to the position you want, I've placed mine right underneath the volume dragger (like on WMP)

Give that newly created movieclip an instancename of "toolTip". Move on to our actionscript.

First of all we need to hide our toolTip, since it only needs to be shown when you drag the volumebar.
Type this code right after the stop action.

1

toolTip._visible = false;

This will hide our movieclip at the beginnning.

Now let's move down to our Volume Dragger function, right after the startdrag line type this code:

1
2
3
4
5

_root.toolTip._visible = true;
setInterval(draggableTip,100);
function draggableTip(){
_root.toolTip._x = _root._xmouse;
}

Explanation:

1

_root.toolTip._visible = true;

Here we make our tooltip visible

1

setInterval(draggableTip,100);

We set the interval to call the function draggableTip 100times a second.

1
2

function draggableTip(){
_root.toolTip._x = _root._xmouse;

This is our function, that controls the movieclip accordingly to the position of our mouse's X axis.
Now we need to hide the movieclip as soon as the user releases the button.
For that scroll down to our onReleaseOutside function and type this code to hide our movieclip

1

_root.toolTip._visible = false;

okay, test your movie to see if everything is working as it should.

ID3 Support

Do you remember on part I, where we built all those arrays to get the trackname and bandname on our display?
We just keep those arrays for our filename (location) and for a function that we will write soon.
We will change the way the songname is being extracted, for that we use the ID3 functions of flash.

Here a small list of which values you can extract.

Sound.id3.comment
Sound.id3.album
Sound.id3.genre
Sound.id3.songname
Sound.id3.artist
Sound.id3.track
Sound.id3.year

Here the code to achieve that.

1
2
3

track = this.sound_obj.id3.songname;
artist = this.sound_obj.id3.artist;
this._parent.title_txt.text =artist+" - "+track;

Explanation:

1

track = this.sound_obj.id3.songname;

Here we give the variable track the value of the id3.songname.

1

artist = this.sound_obj.id3.artist;

Here we give the variable artist the value of the id3.artist.

1

this._parent.title_txt.text =artist+" - "+track;

Like on part I we just tell our textfield to display those 2 variables separated by a -

Pretty clear or not? Sure you can put much more informations on the display, but hey.. What do you need else then those 2 values?

TotalTime Display

The CORRECT time will be displayed as soon as the whole song is "cached" since flash receives that information at the end. The result of this will be a constantly growing number till the song finishes loading.

We used on the last tutorial a function to show the position time of our song, we will use the same function for the totalTime just a bit different. I will not explain the whole function since it has already been explained before.
The only thing we change is the variable names since they're already being used by our first function, I just added a "d" to all variables. D for Duration and obviously the function is called duration.. d'oh

1
2
3
4
5
6
7

function duration (){
timed = _root.sound_mc.sound_obj.duration/1000;
mind = Math.floor(timed/60);
mind = (mind<10) ? "0"+mind : mind;
secd = Math.floor(timed%60);
secd = (secd<10) ? "0"+secd : secd;
totalDuration = mind+":"+secd;

This function needs to be called whenever a user presses a button or the track changes, so we will create a setInterval calling that function every 100ms. Place this code on the last line (after the xml.load)

1

setInterval(duration,100);

Now instead of making a second textfield for our duration, I've added it to the "timeDisplay_txt" that we already have.
So just go one function upwards (the timer function) and add the totalDuration to it.

1

timeDisplay_txt.text = min+":"+sec+"/"+totalDuration;

Now our textfield is too small for all our informations, we will add it dynamically with this line of code right after the stop action

1

timeDisplay_txt.autoSize = "left";

LoaderBar / ProgressBar

First of all you need to create a new layer let's name it loader. Then let's draw a rectangle with a dark-green stroke and a light-green fill. place it underneath your controls, and give it a size of 272px * 6px, convert this rectangle to a movieclip by pressing F8 and assign the name loaderto it.

Now let's select the loader movieclip, and go into edit mode, by double-clicking on it.
Then select the light-green fill and press F8 to convert it to a movieclip, assign the name loadbarto it.
I always like to keep things clean and tidy, so select the loadbar mc and press CTRL+X, create a new layer called loadbar and press CTRL+SHIFT+V to paste in place, don't forget to give the loaderbar an instancename since we are going to use it with actionscript. I've named mine loadbar.

Go back to the main stage, and what have we done till now? 2 MC's one with loadbar and one with the stroke, both together are our loader, assign this MC also a instance name, I've named mine loader

To finish it off create a movieclip with a nice playhead so we can show where the music is.
Give it an instancename of playHead

Let's move on to the actionscipt part!
ok, now let's get down with AS, this is always my favourite part of the whole thing..
There is one thing that we need to think about first:

The loadbar should scale itself by the amount of downloaded data, this can only be accomplished by setting an interval that calls the function every certain amount of time..

So let's create an interval using the setInterval function press F1 to get more informations about this function

First we create a variable holding the interval I've named it soundStatus, then we set the Interval to call up the function videoStatus, we will create it very soon, and we tell also that the function should be called every 100milliseconds, also every 0.1second, put this line right after the first setInterval we've created before.

1

setInterval(soundStatus,100);

Now it's time to create our function called soundStatus.

1
2
3
4
5
6
7

function soundStatus(){
var amountLoaded = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal();
_root.loader.loadBar._width = amountLoaded * 260;
duration = _root.sound_mc.sound_obj.duration;
position = _root.sound_mc.sound_obj.position;
_root.playHead._x = position / duration * 272 + 5;
}

Explanation:

1

var amountLoaded = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal();

The variable amountLoaded gets the result of the getBytesLoaded divided by the total amount of Bytes.

1

_root.loader.loadBar._width = amountLoaded * 260;

we will control the width of the loadbar via actionscript for that we need to point the script to the loader mc, that contains the loadbar mc, by multiplying the amountloaded value by 260 we get a loaderbar that we assign to the width property of our mc.

1

duration = _root.sound_mc.sound_obj.duration;

A variable holding the value of the current duration.

1

position= _root.sound_mc.sound_obj.position;

A variable holding the value of the current position.

1

_root.playHead._x = position / duration * 272 + 5;

This wil move our playHead inside our loaderbar accordingly to the position of the track.

Simulate the movie by pressing CTRL+ENTER twice to see how the bar grows

Playlist Display

This is the last bit you have to do for your player.. creating a nice playlist to see which tracks are available.
Since my layout of the player is very small I had to limit it to 6 songs, depending on your layout you need to change some values.

First of all I've created a movieclip with a nice graphic on the background. mine is just a square with a dot on the left side.
and a dynamic textField with the lenght of the graphic the textfield has an instancename of "but_txt".
Don't put the button on the stage, rather leave in the library and right-click on it, and choose linkage, give it an unique name, mine is called "butTemp".

type this code right after the last array is built, still inside of the for loop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

attachMovie("butTemp","but"+i,i+50);
eval("but"+i).id=i;
_root["but"+i]._x = 5;
_root["but"+i]._y = 40 + (i*15);
_root["but"+i].but_txt.text = songname[i];
if (i >= 3){
_root["but"+i]._x = 160
_root["but"+i]._y = -5 + (i*15);
}
_root["but"+i].onRelease = function(){
clearInterval(timeInterval);
_root.timeDisplay_txt.text = "00:00/00:00";
_root.sound_mc.songStarter(songfile[this.id]);
}

ok, what are we doing here?

1

attachMovie("butTemp","but"+i,i+50);

this attaches the movie butTemp, gives the naw name "but"+i, where I is a number, and using i+50 I set the depth of the button on top..

1

eval("but"+i).id=i;

Here we are giving each of our new buttons an id corresponding to the value of the array.

1
2

_root["but"+i]._x = 5;
_root["but"+i]._y = 40 + (i*15);

With this we position our buttons where we want.

1

_root["but"+i].but_txt.text = songname[i];

I think you should know what this means by now...

1
2
3

if (i >= 3){
_root["but"+i]._x = 160
_root["but"+i]._y = -5 + (i*15);

As mentioned before I had to split the display, since I don't have enough space on my layout.
Pretty obvious what this is does

1
2
3
4
5

_root["but"+i].onRelease = function(){
clearInterval(timeInterval);
_root.timeDisplay_txt.text = "00:00/00:00";
_root.sound_mc.songStarter(songfile[this.id]);
}

And this final function is just controlling the onRelease status of our buttons, clearing the interval, resetting the timedisplay and it play's the song that you've chosen.

HERE you can download a .zip file containing the .fla, .xml and 4 sample mp3's to play around.

For those who still work with Flash MX or Flash MX2004 here a compatible FLA file

Have Fun
Tiago Dias