[flash]as3&xml Mp3 Player Simple, Customizable and Fine Explaine

[andreip 0]

Firstly, we will create a new Action Script 3 document.

We will create 2 layers, a layer named "Content" where all the

buttons and design stuff will go and a layer named "Actions" where the actions will be

placed.

 

 

We will start by creating the buttons we need. There will be a play button, a pause button,

a stop button, a next song button and finnaly a previous button. We also need a volume

control system and 2 textboxes.Let's start creating our buttons designs.

I played with the tools and came up with this design :

 

 

Now select all the shape and right click on it and than chlick on "Convert to Symbol", and

 

select button and name how you want.

 

 

Do the same with the other buttons. Design them and transform them into buttons.

After that add 2 dynamic textboxes to the stage.

 

 

Finnaly the last component is volume system. Well I'm sure it sounds complicated but it's

 

really easy.

first make a line/rectangle 50px length, or about that. Select it, right click, convert to

 

symbol and select movie clip and select the registration point to middle right.Like I did

 

in the image :

 

 

Now double click the new made movie clip and inside it we will made another movie clip like

 

this :

 

 

We are close to finish this project guys! We have to give instace names to our created

 

buttons and movie clips.

 

Ok so write the following instances :

 

play button - play_btn

pause button - pause_btn

stop button - stop_btn

next song button - next_btn

previous song button - prev_btn

first volume movie clip - volume_mc

second (inside the first one) volume movie clip - slider_mc

 

If you are new to flash here is how you put instances. You find the box the same as in the

 

picture :

 

 

Now we finnaly can add our code. Unfortunetly I can not explain all the code to you if you

 

are new to flash because you have to learn some basics at first. If you know the basics of

 

Action Script 3 it will be really simple to understand and modify. Now click on the action

 

layer and right click on the first frame, select Actions, copy and paste the code I will

 

give you.

 

volume_mc.slider_mc.useHandCursor = true;  var musicReq:URLRequest; var music:Sound = new Sound(); var sc:SoundChannel; var currentSound:Sound = music; var pos:Number;  var xml:XML; var songlist:XMLList; var currentIndex:Number = 0;  var loader:URLLoader = new URLLoader(); loader.addEventListener(Event.COMPLETE, whenLoaded);  function whenLoaded(e:Event):void {	 xml = new XML(e.target.data);	 songlist = xml.song;	 musicReq = new URLRequest(songlist[0].url);	 music.load(musicReq);	 sc = music.play();	 title_txt.text = songlist[0].title;	 artist_txt.text = songlist[0].artist;	 sc.addEventListener(Event.SOUND_COMPLETE, nextSong); }  loader.load(new URLRequest("playlist.xml"));  next_btn.addEventListener(MouseEvent.CLICK, nextSong); prev_btn.addEventListener(MouseEvent.CLICK, prevSong); pause_btn.addEventListener(MouseEvent.CLICK,pauseSong); play_btn.addEventListener(MouseEvent.CLICK,playSong); stop_btn.addEventListener(MouseEvent.CLICK,stopSong);  function nextSong(e:Event):void {	 if (currentIndex < (songlist.length() - 1))	 {		 currentIndex++;	 }	 else	 {		 currentIndex = 0;	 }			 var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);	 var nextTitle:Sound = new Sound(nextReq);	 sc.stop();	 title_txt.text = songlist[currentIndex].title;	 artist_txt.text = songlist[currentIndex].artist;	 sc = nextTitle.play();	 currentSound = nextTitle;	 sc.addEventListener(Event.SOUND_COMPLETE, nextSong); }  function prevSong(e:Event):void {	 if (currentIndex > 0)	 {		 currentIndex--;	 }	 else	 {		 currentIndex = songlist.length() - 1;	 }			 var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);	 var prevTitle:Sound = new Sound(nextReq);	 sc.stop();	 title_txt.text = songlist[currentIndex].title;	 artist_txt.text = songlist[currentIndex].artist;	 sc = prevTitle.play();	 currentSound = prevTitle;	 sc.addEventListener(Event.SOUND_COMPLETE, nextSong); }  function pauseSong(e:Event):void {	 pos = sc.position;	 sc.stop(); }  function playSong(e:Event):void {	 sc = currentSound.play(pos); }  function stopSong(e:Event):void {	 sc.stop();	 pos = 0; }   var rect:Rectangle = new Rectangle(0,0,50,0); volume_mc.slider_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragIt); volume_mc.slider_mc.addEventListener(MouseEvent.MOUSE_UP,dropIt); stage.addEventListener(MouseEvent.MOUSE_UP,dropIt);  function dragIt(e:Event):void {	 e.target.startDrag(false,rect);	 e.target.addEventListener(MouseEvent.MOUSE_MOVE, adjustVolume); }  function dropIt(e:Event):void {	 var vol:Number = volume_mc.slider_mc.x * .02;	 var st:SoundTransform = new SoundTransform(vol,0);	 sc.soundTransform = st;	 volume_mc.slider_mc.stopDrag();	 volume_mc.slider_mc.removeEventListener(MouseEvent.MOUSE_MOVE, adjustVolume); }  function adjustVolume(e:Event):void {	 var vol:Number = volume_mc.slider_mc.x * .02;	 var st:SoundTransform = new SoundTransform(vol,0);	 sc.soundTransform = st; }

Now you finished your own AS3&XML Mp3 player in Flash.

 

Now I should explain the XML part which is very simple. All you need is to modify the file

 

I just gave you. You can do this with notepad or any text hyper processor you've got.

Also here is the generic code for the xml so that you have an idea about it :

 

<jukebox>	 <song>		 <title></title>		 <artist></artist>		 <url></url>	 </song> </jukebox

Thank You for reading and don't hesitate to ask me any question or any problem you have.

Cheers!

 

Final Preview :

 

 

Notes : Here are the project files for you guys!

 

mp3trap17.rar - 12.3 Mb]CLICK TO DOWNLOAD THE FILES

 

Also I will try to explain the code for the ones that don't have the basics or any kind of

 

knowledge in flash.

[Draxx 0]

This is the worst tutorial i ever seen.

Kidding ^^

Well Andrei i gotta say you made one hell of a good job explaining this.

Oh and change that background color, will you? You overused it xD

[andreip 0]

This is the worst tutorial i ever seen.Kidding ^^
Well Andrei i gotta say you made one hell of a good job explaining this.
Oh and change that background color, will you? You overused it xD

Thank you for your support. And if you have any question please don't hesitate. Yes, I will have to perfect the tutorial but it will be in time. And also I'm planning to make more flash tutorials !

[fadillzzz 0]

nice design, and so is this tutorial, i love it!please post more flash tutorial, cause i'm currently trying to learn how to build a flash website

Edited March 14, 2009 by truefusion (see edit history)

[andreip 0]

nice design, and so is this tutorial, i love it!please post more flash tutorial, cause i'm currently trying to learn how to build a flash website

Many more coming soon mate ! I'm planning to do custom video player tutorial, which plays videos trough xml . I've been just caught with the school last week and didn't have time to do it but I'll do them. Thank you for your appreciation .
Cheers!

[Ash-Bash 0]

Nice tutorial, This really helped me for the website I am making for some one, Thanks and Keep up the fantastic work .

[Tramposch 1]

you should make the streaming true instead of false, im too lazy to look through it and find the point to change... just a suggestion, because it seems as if you have to load the song first.

[andreip 0]

you should make the streaming true instead of false, im too lazy to look through it and find the point to change... just a suggestion, because it seems as if you have to load the song first.

Actually the order in coding doesn't matter, I can tell you.

 

Ash?- Thank you ! I will be making a flv playe tutorial soon. But currently I don't have so much time xD!