Jump to content
xisto Community
Sign in to follow this  
andreip

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

Recommended Posts

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.

 

Posted Image

 

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 :

 

Posted Image

 

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.

 

Posted Image

 

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

After that add 2 dynamic textboxes to the stage.

 

Posted Image

 

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 :

 

Posted Image

 

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

 

this :

 

Posted Image

 

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 :

 

Posted Image

 

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 :

 

Posted Image

 

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :D!

Share this post


Link to post
Share on other sites

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 :D! I'm planning to do custom video player tutorial, which plays videos trough xml :D. 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 :D.
Cheers!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.