How to Create an MP3 Player from Design to Finish
Finally, it is time for another tutorial and this time I want to show you how to create a sleek black mp3 player from design to a finished functional utility. Here is a look at the final product:
view demo mp3_player you can download the final mp3_player here.
Creating mp3 Player Body
Start Flash (I’m using flash CS3 and ActionScript 3.0) and create a new file any size you wish, just make it wide enough for 400px wide rectangle. Mine is the default size. In a new layer called body create a black rectangle with a black stroke that is 400px wide and 28px high, we will adjust the width later if necessary, and add the following style colors:
Please note the black and gray color positions this will give our rectangle a nice effect. Then use the gradient transform tool to rotate the gradient in the rectangle so that the highlighted area is on top similar to the image here:
When done convert it a symbol and give it a name of mcBody and make sure you selected Enables guide for 9-slice scaling. This will be handy for resizing the rectangle later.
Creating the Player Buttons
We want to make our file size as small as possible so we are going to create two backgrounds states for our buttons using one movie clip. First, we will create the normal state background and this similar to body background. So grab your rectangle tool and draw a small rectangle with 28px width and 18px height. Set the fill color gradient and stroke color gradient as shown.
Then rotate the gradient for the fill 90 degrees anti-clockwise and the opposite for the stroke to give this effect:
Then press F8 to convert the shape to a movie clip called mcButtonBg and enable the guide for 9-slice scaling. Delete the movie clip from the stage we will use later when adding more shapes to the buttons. The same movie clip will be used for the pressed state of the button by just rotating our movie clip.
Adding Play, Stop, Next, Prev, Pause buttons
First we will create a play shape and this is easily done with font of webdings and size 14px color #FF9933. Select the Text tool and write 4 and will get this shape:
Break it apart go to Modify > Break Apart then convert your new arrow to a movie clip symbol by pressing F8. Name the symbol mcArrow and this is the only movie we will use for almost all of our buttons. Cool ahh.
Erase the shape, don’t worry it is saved in the library for later use. Now create a line with the height of 8.3px and same orange color and convert it to a symbol named mcLine. Erase the symbol for the stage and now we create our buttons.
Press Ctrl + F8 and enter btnPlayfor the name, select Button and press enter. In the button edit mode, name the first layer bg and create another layer and call arrow.
While in the first layer and the up state bring the mcButtonBg to the stage then move your cursor to down state and press F6 now you will have the background duplicated. In the down state and using the transform tool flip the background 180 degrees this will create the illusion of pressed button when done.
In the arrow layer just place the mcArrow movie clip we created and duplicated in the down state as well and nudge it 6 or 10 pixels to the right. the final image should look something like this:
Now we have a complete play button and we will do exactly the same for the rest of the buttons. However, the shapes will be different.
Creating the other button will be a simple task achieved by duplicating our play button and adding more arrows and lines and sometimes rotating the shapes.
For example, to create the fast forward button we duplicate the btnPlay and name it btnFForward and in the editing mode we duplicate the arrow shape and end up with this:
The same can be done for the next button, but we will use btnFForward this time. So duplicate the btnFForward and call the new created symbol btnNextand and the mcLine to the two arrows as shown:
The previous and rewind buttons are just rotation of the next and fast forward we created, respectively.
The pause button is just a button with two mcLines instead of arrow as shown. The stop button is even simpler it is just a square shape that can be achieved by many means.
The final images you created should resemble the following:
Now we will just take the created buttons and place them where they belong on our earlier created background. But remember to place the buttons on separate layers and name the symbols accordingly. I named mine prev_mc, rewind_mc, stop_mc, pause_mc, play_mc, ffwrd_mc and next_mc. Your complete task should look something like this:
If you test the movie now you will be able to see that the buttons work perfectly and there is a nice effect of a pressed button on each one of them.
Information Screen
Create a new layer named info panel and select the rectangle tool and create a rectangle that is 140px wide and 18px high with fill color #FF9933 and black stroke. Select the fill only and convert it to a symbol and name it mcRectangle. Then select both the fill and stroke and convert the selected shape to a new movie clip symbol called mcInfoPanel. Double click mcInfoPanel and select the fill symbol and give it a dropshadow as shown:
Now go back to the main scene and align the info panel with the buttons and your mp3 player is complete and ready to be coded to become a full functional device. The circled area is left for the player spectrum which we will add during our coding stage.
In our next tutorial we take you through the coding phase and we will show how using actionscrip 3.0 the player will come to life. Thank you for following and hope you have enjoyed the learned from this tutorial. Please leave your comments if you find this learning experience good and even if you feel it wasn’t that good please leave your comments. We need to know where we get it right and where it isn’t. Thank you for your time.
Go to How to Code a Full Functional mp3 Player using ActionScript 3.0 to continue this tutorial for a complete code.
Want to find out more about my resources follow me on twitter 
So how did everyone think about this tutorial. Was it clear and useful?
Cool but yes how do you code it and can you make it so my site can be like http://hypem.com/ where the player is at the bottom and doesnt move and connects to the links in the body of the site??
Thank you for stoping Muse Lick we are working on the coding tutorial now it should be ready by tomorrow and I checked the link you sent where the mp3 player is stationary in the bottom I don’t know how to do that yet I’m new myself to CSS but if I find out I will let you know
[...] How to Create an MP3 Player from Design to Finish [...]
The overall effect is really nice, well done.
I’d think it might look even nicer in blue.
Thank Stephen for stopping by I will try to make one with blue color and see how it turns out. I’m happy to meet a designer like yourself.
Nice design man. I can’t wait for the coding part (seriously i can’t wait, hurry up!). lol. I am doing a personal portfolio in flash as part of my degree in game programming and simulation. And i need an audio player on my page, so i’ll be checking back when you finish part two.
P.S. hurry! lol, jk. Genius takes time. I understand
The source file is now available and can be downloaded here http://flashjourney.com/2009/08/30/how-to-code-a-full-functional-mp3-player-using-actionscript-3-0/ thanks for your patience
Hey Dark Wolf patience my friend any way the new tutorial is ready and being reviewed now for technical elements. We don’t want our readers do get unexplained and full of error code. Check again late tonight and good luck with your assignment.
This is my favourite part … writing ActionScript 3 … I just love and can’t wait to get my hand on a Flash CS3/CS4. Bring it on.
Nice design of mp3 i really like it … but this is not complete .. it should be with script as well
Hey Design Dazzling, thanks for stopping by. Check the second tutorial which complements this one http://flashjourney.com/2009/08/30/how-to-code-a-full-functional-mp3-player-using-actionscript-3-0/
does this work with Flash Media Server 3????
I really wouldn’t know I’ll have to check
hi jooo .
you are awesome man .
i dont know any thing in designing . but i want to learn what all the things
required to design and make it to work ( designing & programming / scripting part ) .
i dont know where to start . No one is there to help me .
is it easy to learn all these . is flash scripting easy to learn ?
can you help with this , so that i can organise the things better to learn all the things required to design and programme ( scripting ) ?
you can also email me .
thank you in advance .
I LOVE THE TUTORIAL !
please reply
Hey Naresh
Thanks for the delightful comment. I’m new to design and the world of programming myself in fact I have no design or programming background and decided to take this challenge because I love the idea of creating something that make others say “wow how did he do that” of course I’m yet to reach that level
Ok you asked me where to start. I think for me I started with learning how to use Adobe Photoshop and then try to follow every tutorial that I can find online in regards to design. But I also love Flash so every now and then I try to learn actionscripting and it is not that hard to learn but needs dedicated time.
A good point to start are these links
http://flashjourney.com/category/books/
http://flashjourney.com/2009/07/28/the-journey-2/
We will try to keep this blog alive and start blogging again we have so much that we want to share, take care and thanks for visiting
J000
Hey, just came here when i did a good google search. Nice post you got here! Keep it up!
some truly interesting details you have written.
hi jooo
Thanks for the tutorial, scripting has been a journey to me for a very long time. this tutorial helped alot though i have to ask if you can update it to include a clikable playlist in ActionScript 3. An element that i could really appreciate if it was included in my site’s player.