Hi everyone to celebrate my membership to the userpage design club, I decided to
share one of the things a lot of people would like on MT, customize their
userpage content, I'm going to show you how to make a flash mp3 player/jukebox
that can play multiple quality mp3s all in a convient swf file. The reason embed
tag is not good is because many browser don't recognize it and also it only
plays one song and no repeating plus looking ugly hehe
The advantage of this method is that it's fully custmizble and you can keep the
mp3 files at relative small size (mine usually around 300 kb each) also you can
have multiple songs in the jukebox, you can have the display of the song
name/band, even the timeline, volume control, etc etc. and most of all you get
to design your own music panel hehe.
For most part of the tutorial please excuse me if my English is not most correct
it is my second language after all.
I have merely explained everything better because his tutorial took me about 8
hours to complete, a lot of trial and error process, I'm going to explain
everything so a lot of people will understand.
Requirement for this tutorial
-Basic/Intermediate Flash knowledge, (know what actionscript is, symobols,
etc.)
-Have a copy of Macromedia Flash (the newer the better I used v7.0)
-Know basic coding/html
-Have a mp3 conveter or compress (if you don't have one don't worry, I provided
one for you , click
here to download.
-Finally you need a hosting space, (IE. geocities.com freewebs.com, etc etc
etc. I used geocities.com I don't know if others will work.
If you find any trouble during the process of this tutorial, please refer back
to the original tutorial at pixel2life.com because I am a flash noob as well I'm
only trying to make it easier and cut a couple hours in the making
process.
Parts of the tutorial
1. Creating buttons
2. Import/Compress mp3 files
3. Actionscript coding in flash
4. upload and html code editing
I know it looks a lot so lets get started shall we?
Ok 1. Button creation
Ok this part is very simple I'm not good say much about it, all you need is 4
buttons in jpeg or other web image format (play/stop/next/previous) in case you
don't know what next and previous button look like it kinda look like these
>> and << so with your graphic skills make those 4 buttons. Also
as an option you can also make a screen for song name display, refer to
[url=xcf33.minitokyo.net]my userpage[/url] to get a general idea of what it
should look like, it doesn't have to be fancy, the 4 buttons are all you
need.
After you finish the 4 buttons, store all of them in a folder (name it whatever)
and create a flash file inside that folder, once you are in flash, import those
images by go to file >> import >> import to stage to import all four
of them onto the stage.
The next step you will want to convert them into symbols so right click on one
of the images on stage and choose "convert into symbols". After that
Name the play button "play_btn" without the "" and set the
instance name to "btn_play". Name the stop button "stop_btn"
and instance name to "btn_stop". Name the previous button
"rev_button" and instance name "button_rev" and lastly name
the next button "fw_btn" instance name "btn_fwd" (The
instance name can be changed in the "Property box" and the symbol name
can be change in the library "Ctrl + L")
Ok save your flash file and leave it for now. MAKE SURE YOU SAVE IT IN THE SAME
FOLDER AS YOUR button images!!!!!
2. Import/Compressing mp3s
In this step you will be needing the mp3 converter which I have provided above,
choose 2 songs (mp3) you want to be on your flash jukebox, use the mp3 conveter
to convert them into 16kb quality at 44k frequencey (i think it's 4410) and must
be MONO (not stero or dual channel). The reason we are doing this is because we
want to make the mp3 files smaller so people it will actually load on webpages
because generally mp3s are over 3 mbs, after the conversion it should come down
around 500 kb in most cases. Also if you ask why not import the mp3s into
flash?? I will anwser that question later. For know this step is done.
Ok after the mp3 conversions copy the converted mp3s in the same folder as your
flash file and your button images. Now open a textpad or wordpad and copy the
following in there:
<?xml version='1.0' encoding='utf-8'?>
<songs>
<song name="Chemistry- Wings of Words"
file="Wings_of_Words.mp3"/>
<song name="Kimi Wa Boku Niteiru"
file="Kimi_Wa_Boku_Ni_Niteiru.mp3"/>
</songs>
the file="Wings_of_words.mp3" and
"Kimi_Wa_Boku_Ni_Niteiru.mp3" are the file names of my mp3s, since
they are in the same folder as my flash file, there's no path needed to add, we
will need to edit that later. For now, change the mp3 file name to the one you
have and save the file to "playlist.xml" without the
""
This will be your playlist file, if you wish to add another song simply insert
another
<song name="Kimi Wa Boku Niteiru"
file="Kimi_Wa_Boku_Ni_Niteiru.mp3"/> line
3. Coding in Flash
Ok so far we have done all the prepartions now let's start coding, YAY (not
really lol), but i made it simple so here we go.
open up your flash file back again, create a new layer, let's call it
"action" without the "" make sure the layer stays in frame
one now go to the "action panel" if you don't have it then hit F9 or
go to window >> development panel >> action. Now insert all the
following:
Quote: stop();
playlist = new XML();
playlist.ignoreWhite=true;
playlist.onLoad = function (success) {
if(success) {
after you inserted the code, if you have done everything correctly until now,
hit CTRL + ENTER you should be able to hear music and use the
controls........... (Make sure your symbol and instance names are
right!!!!!)
If everything works out good go to file >> publish settings >> make
sure under flash check the "override sound settings" box and set both
audio even and audio stream to 16kbps and mono so it corrsponds to our mp3
formats. hit publish!!!! Now you should have a swf file and a html file in that
folder and you can open either of them to see what you have done.
4. Uploading, html editing
Ok if you got it to work then it's great but we want it ultimately on our MT
page right?? ok let's get to work, first of all, upload the mp3s to your
webhost, for example in this case I uploaded mine to www.geocities.com/xcf33/
Ok next we got to do some editing before other stuff can be uploaded, first open
"playlist.xml" and change the path of the mp3 files for example the
original playlist.xml has
<song name="Chemistry- Wings of Words"
file="Wings_of_Words.mp3"/>
I changed the path to
<song name="Chemistry- Wings of Words"
file="http://www.geocities.com/xcf33/Wings_of_Words.mp3"/>
because that's where my mp3 is located online now do
the same for the other one.
After you done that upload your playlist.xml in the same path as your
mp3s
Now we want to go back to the flash file, open it and go back to "action
layer" and go to action panel, in the actionscript box at the very bottom
there should be this line...
playlist.load("playlist.xml");
it's telling us where our playlist file is at so change it to
playlist.load("http://www.geocities.com/xcf33/playlist.xml");
because that's where I uploaded my playlist file to, use your own path.
Save the change in the flash file and publish it again with the same settings
previously mentioned. Now you can upload the published swf file onto the same
path as your mp3s and playlist.xml
Last step, the html file that came with the swf file after you published should
look like this (of course the id, height, width are gonna be different for
different people)
because those lines tells the server this swf file can only be accessed wehre
it's stored so we can't put it on MT. after you delete that parameter you should
have something look like this
and put that code start with <object> end with </object> under
"Customize Userpage: Content"
YOU ARE DONE!!!
ZzZzZzZzZzZz
Sorry but most likely I will not be able to anwser your questions because im
such a noob but if you like for me to make it for you I prolly can just p.m. me
or go to the Userpage design group and request one I'll probably be able to do 1
a week.
Maybe next time I can show more like volume control and time of songs, equalizer
visualization and stuff to make it even look cooler but for now that's it, you
have completed the multi-song jukebox on your userpage, if you done it please
let me know so I can check it out.
Later I hope this is a little userful although it's quite complex I hope I
explained everything ok maybe I'll put some picture on it in the future but for
now I am out
If you have any comments on the Twodded tutorial to improve it, post them on the
P2L forums, otherwise do NOT steal tutorials from Twodded or i'll be forced to
take severe action.
Remove this tutorial now, as a site you should really know better but if your
showing support for the ripping of tutorials and taking of content theres no
choice but to push this futher.. message me when this is removed please
Hi everyone to celebrate my membership to the userpage design club, I decided to share one of the things a lot of people would like on MT, customize their userpage content, I'm going to show you how to make a flash mp3 player/jukebox that can play multiple quality mp3s all in a convient swf file. The reason embed tag is not good is because many browser don't recognize it and also it only plays one song and no repeating plus looking ugly hehe
The advantage of this method is that it's fully custmizble and you can keep the mp3 files at relative small size (mine usually around 300 kb each) also you can have multiple songs in the jukebox, you can have the display of the song name/band, even the timeline, volume control, etc etc. and most of all you get to design your own music panel hehe.
For most part of the tutorial please excuse me if my English is not most correct it is my second language after all.
Anyways first of all I just want to state this is not my original tutorial, i did not come up with this, im a flash noob like many of you guys too so for the original tutorial, go here
http://www.pixel2life.com/twodded/t_create_a_full_streaming_flash_mp3_player_using_xml_/page1/
I have merely explained everything better because his tutorial took me about 8 hours to complete, a lot of trial and error process, I'm going to explain everything so a lot of people will understand.
Requirement for this tutorial
-Basic/Intermediate Flash knowledge, (know what actionscript is, symobols, etc.)
-Have a copy of Macromedia Flash (the newer the better I used v7.0)
-Know basic coding/html
-Have a mp3 conveter or compress (if you don't have one don't worry, I provided one for you , click here to download.
-Finally you need a hosting space, (IE. geocities.com freewebs.com, etc etc etc. I used geocities.com I don't know if others will work.
If you find any trouble during the process of this tutorial, please refer back to the original tutorial at pixel2life.com because I am a flash noob as well I'm only trying to make it easier and cut a couple hours in the making process.
Parts of the tutorial
1. Creating buttons
2. Import/Compress mp3 files
3. Actionscript coding in flash
4. upload and html code editing
I know it looks a lot so lets get started shall we?
Ok
1. Button creation
Ok this part is very simple I'm not good say much about it, all you need is 4 buttons in jpeg or other web image format (play/stop/next/previous) in case you don't know what next and previous button look like it kinda look like these >> and << so with your graphic skills make those 4 buttons. Also as an option you can also make a screen for song name display, refer to [url=xcf33.minitokyo.net]my userpage[/url] to get a general idea of what it should look like, it doesn't have to be fancy, the 4 buttons are all you need.
After you finish the 4 buttons, store all of them in a folder (name it whatever) and create a flash file inside that folder, once you are in flash, import those images by go to file >> import >> import to stage to import all four of them onto the stage.
The next step you will want to convert them into symbols so right click on one of the images on stage and choose "convert into symbols". After that Name the play button "play_btn" without the "" and set the instance name to "btn_play". Name the stop button "stop_btn" and instance name to "btn_stop". Name the previous button "rev_button" and instance name "button_rev" and lastly name the next button "fw_btn" instance name "btn_fwd" (The instance name can be changed in the "Property box" and the symbol name can be change in the library "Ctrl + L")
Ok save your flash file and leave it for now. MAKE SURE YOU SAVE IT IN THE SAME FOLDER AS YOUR button images!!!!!
2. Import/Compressing mp3s
In this step you will be needing the mp3 converter which I have provided above, choose 2 songs (mp3) you want to be on your flash jukebox, use the mp3 conveter to convert them into 16kb quality at 44k frequencey (i think it's 4410) and must be MONO (not stero or dual channel). The reason we are doing this is because we want to make the mp3 files smaller so people it will actually load on webpages because generally mp3s are over 3 mbs, after the conversion it should come down around 500 kb in most cases. Also if you ask why not import the mp3s into flash?? I will anwser that question later. For know this step is done.
Ok after the mp3 conversions copy the converted mp3s in the same folder as your flash file and your button images. Now open a textpad or wordpad and copy the following in there:
<?xml version='1.0' encoding='utf-8'?>
<songs>
<song name="Chemistry- Wings of Words" file="Wings_of_Words.mp3"/>
<song name="Kimi Wa Boku Niteiru" file="Kimi_Wa_Boku_Ni_Niteiru.mp3"/>
</songs>
the file="Wings_of_words.mp3" and "Kimi_Wa_Boku_Ni_Niteiru.mp3" are the file names of my mp3s, since they are in the same folder as my flash file, there's no path needed to add, we will need to edit that later. For now, change the mp3 file name to the one you have and save the file to "playlist.xml" without the ""
This will be your playlist file, if you wish to add another song simply insert another
<song name="Kimi Wa Boku Niteiru" file="Kimi_Wa_Boku_Ni_Niteiru.mp3"/> line
3. Coding in Flash
Ok so far we have done all the prepartions now let's start coding, YAY (not really lol), but i made it simple so here we go.
open up your flash file back again, create a new layer, let's call it "action" without the "" make sure the layer stays in frame one now go to the "action panel" if you don't have it then hit F9 or go to window >> development panel >> action. Now insert all the following:
after you inserted the code, if you have done everything correctly until now, hit CTRL + ENTER you should be able to hear music and use the controls........... (Make sure your symbol and instance names are right!!!!!)
If everything works out good go to file >> publish settings >> make sure under flash check the "override sound settings" box and set both audio even and audio stream to 16kbps and mono so it corrsponds to our mp3 formats. hit publish!!!! Now you should have a swf file and a html file in that folder and you can open either of them to see what you have done.
4. Uploading, html editing
Ok if you got it to work then it's great but we want it ultimately on our MT page right?? ok let's get to work, first of all, upload the mp3s to your webhost, for example in this case I uploaded mine to www.geocities.com/xcf33/
so my files are located at http://www.geocities.com/xcf33/Wings_of_Words.mp3
and http://www.geocities.com/xcf33/Kimi_Wa_Boku_Ni_Niteiru.mp3
Ok next we got to do some editing before other stuff can be uploaded, first open "playlist.xml" and change the path of the mp3 files for example the original playlist.xml has
<song name="Chemistry- Wings of Words" file="Wings_of_Words.mp3"/>
I changed the path to
<song name="Chemistry- Wings of Words" file="http://www.geocities.com/xcf33/Wings_of_Words.mp3"/>
because that's where my mp3 is located online now
do
the same for the other one.
After you done that upload your playlist.xml in the same path as your mp3s
Now we want to go back to the flash file, open it and go back to "action layer" and go to action panel, in the actionscript box at the very bottom there should be this line...
playlist.load("playlist.xml");
it's telling us where our playlist file is at so change it to
playlist.load("http://www.geocities.com/xcf33/playlist.xml");
because that's where I uploaded my playlist file to, use your own path.
Save the change in the flash file and publish it again with the same settings previously mentioned. Now you can upload the published swf file onto the same path as your mp3s and playlist.xml
Last step, the html file that came with the swf file after you published should look like this (of course the id, height, width are gonna be different for different people)
That's what mine looks like here a couple of important things you have to change, first of all you MUST delete
<param name="allowScriptAccess" value="sameDomain" /> and also
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
because those lines tells the server this swf file can only be accessed wehre it's stored so we can't put it on MT. after you delete that parameter you should have something look like this
last thing you need to do is to change these lines
<param name="movie" value="mp3.swf" />
<embed src="mp3.swf"
to where your swf file is located at in my case i changed it to
<param name="movie" value="http://www.geocities.com/xcf33/mp3.swf" />
and
<embed src="http://www.geocities.com/xcf33/mp3.swf"
so finally my code look like this:
and put that code start with <object> end with </object> under "Customize Userpage: Content"
YOU ARE DONE!!!
ZzZzZzZzZzZz
Sorry but most likely I will not be able to anwser your questions because im such a noob but if you like for me to make it for you I prolly can just p.m. me or go to the Userpage design group and request one I'll probably be able to do 1 a week.
Maybe next time I can show more like volume control and time of songs, equalizer visualization and stuff to make it even look cooler but for now that's it, you have completed the multi-song jukebox on your userpage, if you done it please let me know so I can check it out.
To see mine simply visit my user page or here
Later I hope this is a little userful although it's quite complex I hope I explained everything ok maybe I'll put some picture on it in the future but for now I am out
If you have any comments on the Twodded tutorial to improve it, post them on the P2L forums, otherwise do NOT steal tutorials from Twodded or i'll be forced to take severe action.
Remove this tutorial now, as a site you should really know better but if your showing support for the ripping of tutorials and taking of content theres no choice but to push this futher.. message me when this is removed please
HEY HOW DO YOU GET A signature image