Advertisement
  1. Code
  2. XML
Code

Create a Jazzy XML Driven MP3 Player

by
Difficulty:IntermediateLength:MediumLanguages:

ActionScript 3.0 allows Flash Developers and Designers to make all manner of things in Flash with relative ease. This tutorial will teach you how to create your own ActionScript 3.0 MP3 Player with sound spectrum, album art, color changer and song information display.

Step 1

Begin by creating a new ActionScript 3.0 document. Set the Stage size to 600px x 600px and 30 FPS. I've chosen #333333 as my background color.

Flash MP3 Player

Step 2

Go to File > Import > Import to Library... and import an image (I've modified part of an iPod from free4illustrator.com for this example. You should use a .png format instead .jpg format to take advantage of the transparency for your object.). After having imported the image, open your Library ( Ctrl + L ) and drag the .png to the stage.

Flash MP3 Player

Step 3

Select the image and convert it to a Movie Clip symbol(F8). Name it "Ipod" or another name if you prefer. I've chosen the top left corner as registration point.

Flash MP3 Player

Step 4

Double-click "Ipod" movieclip symbol to enter its timeline. Be sure you're inside the movieclip and not "Scene 1".

Flash MP3 Player

Step 5

In the Timeline bar, insert a New Layer above the "IpodBody" layer and name it "Buttons Layer". We'll put all our button symbols in this layer.

Flash MP3 Player

Step 6

Use the Rectangle Tool, #00ff00 as the fill color and colorless as the stroke color. We don't need a stroke here and in fact, the fill color can be any color you like, it won't be shown in the end result. Draw a shape above the previous icon, similar to the picture below:

Flash MP3 Player

Step 7

Convert the shape which you've just drawn into a Button Symbol(F8) and name it "prev" as shown in the picture below:

Flash MP3 Player

Step 8

Give the "prev" Button Symbol an Instance Name. I've named it "prevBtn" and changed the Color Style to Alpha with 0%.

Flash MP3 Player

Step 9

The following steps will need the same Button symbol as the "prev" button symbol. Copy the "prev" Button symbol and paste it onto the "Next" icon on your bitmap. To duplicate this symbol, go to Properties Bar and click "Swap". A Swap Symbol window will pop out, at which point you need to click the "Duplicate Symbol" (be sure that you are choosing the "prev" button symbol.). Name it "next".

Flash MP3 Player

Step 10

Now we have a new symbol which is similar to the "prev" button symbol, but named "next". Give this symbol an Instance name of "nextBtn". The Color Style remains alpha 0%.

Flash MP3 Player

Step 11

Repeat Step 9 - 10 by duplicating "prev" symbol to make "play", "pause" and "stop" button symbols. Assign Instance names of "playBtn", "pauseBtn" and "stopBtn" respectively.

Flash MP3 Player

Step 12

Insert a new layer above "Buttons Layer" and name it "Text".

Flash MP3 Player

Step 13

Draw a text box similar to the picture shown below in the "Text" Layer. Set "Dynamic Text" as the Text Type, assign the Instance name "titleTxt", Arial font face, Font size set to 12px and Bold, white color(#ffffff) and aligned to center.

Flash MP3 Player

Step 14

Create another text box just below the "titleTxt" text box. Set this new text box as Dynamic Text, give it an Instance name of "artistTxt", with Arial font face, Font size set to 10px, white color(#ffffff) and, again, aligned to center.

Flash MP3 Player

Step 15

Insert a new layer above the "Text" layer and name it "Color Changer".

Flash MP3 Player

Step 16

Use the Rectangle Tool and set #ff0000 as the fill color. Draw a small square of 14px X 14px on the right top corner of the ipod screen and convert it to a Button symbol( F8) with a name of "red". Give it a Instance name of "redBtn".

Flash MP3 Player

Step 17

Repeat Step 16 and make two more squares. Fill one square with #ffff00, name it "yellow" and assign an Instance name of "yellowBtn". Fill the other square with #66ccff, name it "blue" with an Instance name of "blueBtn". You can set this to any color you like, it will allow the user to change the sound spectrum color.

Flash MP3 Player

Step 18

Insert a new layer above the "Color Changer" layer and name it "ActionScript Layer".

Flash MP3 Player

Step 19 - Begin the Script

From this moment on, we will be playing with ActionScript 3.0. On the first Keyframe of "Actionscript Layer" press F9. An Action window will pop out. We'll input our script into this window later.

Flash MP3 Player

Step 20 - Setting Variables

First, we need to tell Flash what what the ipod Player contains and its properties. There are several variables we need. When the Flash has loaded completely, we need it to start running. The "Loaded" function will start immediately. The loader will load an XML file, the path of which is stated in "URLRequest" of the "loader". We'll create the "musiclist.xml" file for this iPod Player later.

Step 21 - Album Art Holder

Later, we'll create album art which displays on the screen of the iPod Player. The following script states the coordinates of the album art, which will be held in a Movie Clip Symbol.

Step 22 - Define the "Loaded" Function

Now let's define the "Loaded" function. We want it go to the XML and retrieve the Song URL to be played in the Player. When the song is loaded, it will play immediately and the album art for the song will load simultaneously. When the song has finished playing, it will start to play next song.

Step 23 - Define the "loadThumb" Function

Now we'll define the "loadThumb" function. When the thumb is loaded, it will tell Flash to start the "thumbLoaded" function. This function will add a Movie Clip containing the album art.

Step 24 - State "EventListener" of Buttons

Here I've stated that the Buttons we created have their respective functions. To allow users to click on the button and execute the function, we use "MouseEvent.CLICK". All the functions of respective buttons will be mentioned in the next few steps.

Step 25 - Define the "prevSong" Function

"prevBtn" (Previous button) function, define "prevSong":

Step 26 - Define the "nextSong" Function

"nextBtn" (Next button) function, define "nextSong":

Step 27 - Define the "playSong" Function

"playBtn" (Play button) function, define "playSong":

Step 28 - Define the "pauseSong" Function

"pauseBtn" (Pause button) function, define "pauseSong":

Step 29 - Define the "stopSong" Function

"stopBtn" (Stop button) function, define "stopSong":

We have now built the player controls.

Step 30 - State "EventListener" of Colored Buttons

The buttons we created in steps 15-17 are not useless. We now have to tell Flash what their role is within the Player:

Step 31 - Define Colored Button FunctionsS

Each colored button has its respective function. "changeRed" will set the line of the spectrum to "0xFF0000" (Red). "changeYellow" will set it to "0xFFFF00" (Yellow) and "changeBlue" will set "0x66CCFF" (Cyan). We also want Flash to know that when we click on Red color, it will inherit 100% opacity while the others will be given 50% opacity

Note: In ActionScript 3.0, 100% = 1, 10% = 0.1 and so on.

All colored buttons will have this function, so we must state the opacity of the button in each function.

Step 32 - Set Default Color of the Spectrum

Now let's set the default color of the line. I choose Red as default, you can use whichever color you like.

Step 33 - Draw the Spectrum

The last part of our Actionscript; we want Flash to draw out the spectrum of the song. "lineClr" in "lineStyle" is a variable within the colour button in step 31. "for(var i:uint=30; i<280; i++)" stated the starting x coordinate of the line and the end coordinate of the line.

In "var num:Number = ba.readFloat()*50 + 170;" the 50 allows Flash to multiply the Float in the song and 170 is the y coordinate of the spectrum.

Step 34 - Create the XML

Title and Artist will be shown in our player later. "<thumb>" and "<url>" are the paths of the album art and the song. XML can be created easily (you can use Notepad to type the following code and Save as .XML file). You must save it as "musiclist.xml" as that's how we've referred to it within the Actionscript of the Player.

Step 35 - Create Album Art

Create album art for the songs. Recommended size is 65px x 65px; it will fit nicely in the screen.

Flash MP3 Player

Conclusion

Test your movie (Ctrl + Enter) to check the outcome. You will have your own flash iPod Player! You can use it as music player for your website; edit the music list as you wish. It's up to you. Go ahead and experiment, if you have any cool results be sure to share them with us.

I hope you liked this tutorial, thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.