Welcome To MyFreeWebTemplates.info Flash Tutorials Area - Making a simple Mediaplayer

One of the most frequently asked questions down in the forum is how to make a media player. This is done pretty easily in Flash. In this tutorial, we'll start with a simple player, and then make it more and more advanced. So, let's begin!
In this tutorial I assume you use Flash MX

So, before you start any project, you need to make yourself some goals. This is what we're going to do in this tutorial.

- Our mediaplayer is going to get a button for each track that needs to be played. In the button is the number of the track.
- Our mediaplayer needs a stop button if the visitor doesn't want any music.
- Our mediaplayer is going to be in one single movieclip so we can copy it to other projects without having to change anything.
- The sounds will be loaded externally to keep the initial filesize small.
- To conclude the tutorial we will put in a preloader for the tracks so the user knows that something is happening.

So, without further delay... let's get coding. First, make a folder in your libary called 'mediaplayer'. All the symbols that the mediaplayer uses will be stored in this folder (this is only to order the symbols. You don't have to change anything when using folders).
Now, we create the MovieClip that will be the mediaplayer. Don't put this in the folder. The folder is only for other symbols. Give it the name media_mc.
Now, let's make the button which the user uses to change the track. Draw your button (like a square) on the stage and convert it into a MovieClip symbol with the name button_mc. We're using a movieclip as button because it has many more options. Edit the button and create a second layer. Then create a dynamic textfield and place it in the middle of the button on the new layer. Give it the instance name number_txt. Now create a second frame. This will be what the button looks like when the mouse goes over the button. The third frame will be what it looks like when pressed. Now put this code in the first frame:

So, I owe you a bit of explenation. This code makes the movieclip work like a button. The on... statements set the button to a certain frame when the user clicks or rolls the mouse over the button. In the onRelease statement a function called switchTrack is executed. That function will change the playing track. You need to put _parent in front of the name, because the function is defined in the mediaplayer movieclip. And because these buttons are made to be put in that movieclip, _parent will point to the mediaplayer mc. When your done, delete the button of the stage. It's in the libary and that's just where we want it.
With that sorted, we can start to code the actual mediaplayer.

Now that we have the buttons fixed, we can start with the actual mediaplayer. We set as one of our goals that we want the sounds to be loaded from a external, so they don't have to be kept inside the swf, thus keeping the filesize low.
Now drag your media_mc movieclip onto the stage and edit it. We're only testing the code, so we'll put only one loop in the mediaplayer. Drag a button_mc into the mediaplayer and give it the instance name btn1.
Go to the first frame in your media player and give it this code:

First we define an array to hold the url's of our tracks. In my case, the first one is called 'loop1.mp3'. Then we set the label and number of our button. We need to set the number so the button can pass it on to the switchTrack function to change the track into the correct one.
Now we create a sound object which will hold and control the playing sound. Then the onLoad event handler is defined. The onLoad event passes a parameter on to the handling function. It contains if the file is loaded succesfully or not. If it is succesful it contains true, if not, it contains false. If succes is true, the sound starts playing. If it's false, it will trace an error message. The sound.start() function takes two parameters. The first is the offset, the number of seconds at which the sound starts to play, and the second is the times the sound keeps looping. I think 999 times is enough.
Finally we define the switchTrack function that will be called by the buttons when clicked. This function changes the track to the track the user wants. First it stops the current playing sound and then it loads the one from the url taken out of the array soundUrls.

Now, if this works, we can start putting in more options. Add more url's to the array and put just as much buttons on the stage. Edit the code accordingly:

Now for the stop button. Just create a button in the way you want it to look like, and then give it the same actions as the track choose button only the onRelease function has _parent.snd.stop() instead of the other actions.
The highlighted code is the code that's changed. The buttons get the instance names btn2 and btn3. Now test your code and if it works lean back on your chair with a content smile because you just created a media player! (if it doesn't work, try again).

We've completed these goals:
- Single MovieClip
- External mp3 files
- Stop button
- Button for each track.
It looks like we've completed all the goals but the preloader. Well, it isn't over that quick. Because who wants to keep programming the buttons? Why cant we let the computer do that? Well, the answer is... we can! So let's add a little goal:
- The mediaplayer needs to be fully dynamic. So you only have to add the url's to the array, and the rest goes automaticly.

It seems tricky, but it isn't that hard. Most of the code stays the same. So what we need to do, is make a system that takes the symbols out of the libary ans places them on the stage with a - let's say - 10px spacing between them.
First delete all the buttons of the stage and go to the libary. Then right click on button_mc and choose linkage... Check the checkbox 'export for ActionScript'. Fill the identifier in as button_mc. Do the same stop_mc (only the identifier is stop_mc), your stop button.
Now go back to your mediaplayer and change the actions into:

Well, the bold area is what's changed. The code now looks into the array, sees how many elements there are, and then makes the buttons accordingly. First you define the starting x and y coordinates in the variables nextx and nexty. Then we make a loop that loops the same amount of times as the number of elements in the soundUrls array. In the loop we take the symbol button_mc out of the libary and stick it onto the stage with the function attachMovie. The first parameter is the linkage identifier and the second one the instance name on the stage. The third parameter is the depth (remember, NO two movieclips can have the same depth. If they do, neither of them will appear). Then we set the x and y coordinates of the newly created movieclip. After that we set the new x coordinate and the button number and text. When the loop is done iterating we finally set the stop button on the stage and then the code is the same as the last!

This is the last of our goals. To test your swf on a certain connection speed, press ctrl+enter (or just do Test Movie) and then view-Streaming Graph. And then view-Simulate download. Then you can take a look at how things will load.
Anyway, that aside we can start coding again. First make a rectangle that will be the loading bar in the media player movieclip. Convert it into a symbol and give it the instance name bar_mc. Make another rectangle without a fill with exactly the same dimentions and on the same place. Place a dynamic textfield in the middle of the bar with the instance name percent_txt. Now we edit the code again:

If you have ever written a preloader this code looks very familiar. It works in exactly the same way, it only works with the sound class instead of the movieclip. First we make a variable that holds the total number of bytes of the mp3 and then we create a onEnterFrame handler that calculates the percentage loaded and scales the bar accordingly. If it's done, it deletes the onEnterFrame again to spare processing power.

If you check your objectives, we've finished everything. You can hardly call this a simple mediaplayer anymore :) . But don't let this tutorial limit you. Keep learning and expand your reach. If there's anything you can do for me it's this: rate the tutorial by clicking on a square at the top of the page. If you click on the first square it's a low rating if you click on the last it's a high rating.

» get ZIP with FLA and SWF .