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 [...]

A designer wanna be who wants to quit day job to become a full time blogger and web designer I also like to watch TV and movies a lot

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

Tags: action script, media, mp3, player