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.
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.
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.
Step 4
Double-click "Ipod" movieclip symbol to enter its timeline. Be sure you’re inside the movieclip and not "Scene 1".
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.
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:
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:
Step 8
Give the "prev" Button Symbol an Instance Name. I’ve named it "prevBtn" and changed the Color Style to Alpha with 0%.
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".
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%.
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.
Step 12
Insert a new layer above "Buttons Layer" and name it "Text".
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.
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.
Step 15
Insert a new layer above the "Text" layer and name it "Color Changer".
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".
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.
Step 18
Insert a new layer above the "Color Changer" layer and name it "ActionScript Layer".
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.
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.
var musicReq: URLRequest;
var thumbReq: URLRequest;
var music:Sound = new Sound();
var sndC:SoundChannel;
var currentSnd:Sound = music;
var position:Number;
var currentIndex:Number = 0;
var songPaused:Boolean;
var songStopped:Boolean;
var lineClr:uint;
var changeClr:Boolean;
var xml:XML;
var songList:XMLList;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, Loaded);
loader.load(new URLRequest("musiclist.xml"));
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.
var thumbHd:MovieClip = new MovieClip(); thumbHd.x = 50; thumbHd.y = 70; addChild(thumbHd);
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.
function Loaded(e:Event):void{
xml = new XML(e.target.data);
songList = xml.song;
musicReq = new URLRequest(songList[0].url);
thumbReq = new URLRequest(songList[0].thumb);
music.load(musicReq);
sndC = music.play();
titleTxt.text = songList[0].title;
artistTxt.text = songList[0].artist;
loadThumb();
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
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.
function loadThumb():void{
var thumbLoader:Loader = new Loader();
thumbReq = new URLRequest(songList[currentIndex].thumb);
thumbLoader.load(thumbReq);
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
}
function thumbLoaded(e:Event):void {
var thumb:Bitmap = (Bitmap)(e.target.content);
var holder:MovieClip = thumbHd;
holder.addChild(thumb);
}
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.
prevBtn.addEventListener(MouseEvent.CLICK, prevSong); nextBtn.addEventListener(MouseEvent.CLICK, nextSong); playBtn.addEventListener(MouseEvent.CLICK, playSong); pauseBtn.addEventListener(MouseEvent.CLICK, pauseSong); stopBtn.addEventListener(MouseEvent.CLICK, stopSong);
Step 25 – Define the "prevSong" Function
"prevBtn" (Previous button) function, define "prevSong":
function prevSong(e:Event):void{
if(currentIndex > 0){
currentIndex--;
}
else{
currentIndex = songList.length() - 1;
}
var prevReq:URLRequest = new URLRequest(songList[currentIndex].url);
var prevPlay:Sound = new Sound(prevReq);
sndC.stop();
titleTxt.text = songList[currentIndex].title;
artistTxt.text = songList[currentIndex].artist;
sndC = prevPlay.play();
currentSnd = prevPlay;
songPaused = false;
loadThumb();
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
Step 26 – Define the "nextSong" Function
"nextBtn" (Next button) function, define "nextSong":
function nextSong(e:Event):void {
if(currentIndex < (songList.length() - 1)){
currentIndex++;
}
else {
currentIndex = 0;
}
var nextReq:URLRequest = new URLRequest(songList[currentIndex].url);
var nextPlay:Sound = new Sound(nextReq);
sndC.stop();
titleTxt.text = songList[currentIndex].title;
artistTxt.text = songList[currentIndex].artist;
sndC = nextPlay.play();
currentSnd = nextPlay;
songPaused = false;
loadThumb();
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
Step 27 - Define the "playSong" Function
"playBtn" (Play button) function, define "playSong":
function playSong(e:Event):void{
if(songPaused){
sndC = currentSnd.play(position);
songPaused = false;
}
else if(songStopped){
sndC = currentSnd.play(position);
songStopped = false;
}
else if(!sndC){
sndC = currentSnd.play(position);
}
}
Step 28 - Define the "pauseSong" Function
"pauseBtn" (Pause button) function, define "pauseSong":
function pauseSong(e:Event):void{
if(sndC){
position = sndC.position;
sndC.stop();
songPaused = true;
}
}
Step 29 - Define the "stopSong" Function
"stopBtn" (Stop button) function, define "stopSong":
function stopSong(e:Event):void{
sndC.stop();
position = 0;
songStopped = true;
}
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:
redBtn.addEventListener(MouseEvent.CLICK, changeRed); yellowBtn.addEventListener(MouseEvent.CLICK, changeYellow); blueBtn.addEventListener(MouseEvent.CLICK, changeBlue);
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.
function changeRed(e:Event):void{
lineClr = 0xFF0000;
changeClr = true;
redBtn.alpha = 1;
yellowBtn.alpha = 0.5;
blueBtn.alpha = 0.5;
}
function changeYellow(e:Event):void{
lineClr = 0xFFFF00;
changeClr = true;
redBtn.alpha = 0.5;
yellowBtn.alpha = 1;
blueBtn.alpha = 0.5;
}
function changeBlue(e:Event):void{
lineClr = 0x66CCFF;
changeClr = true;
redBtn.alpha = 0.5;
yellowBtn.alpha = 0.5;
blueBtn.alpha = 1;
}
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.
if(!changeClr){
lineClr = 0xFF0000;
redBtn.alpha = 1;
yellowBtn.alpha = 0.5;
blueBtn.alpha = 0.5;
}
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.
var ba:ByteArray = new ByteArray();
addEventListener(Event.ENTER_FRAME, drawl);
function drawl(e:Event):void
{
graphics.clear();
graphics.lineStyle(1, lineClr, 0.5);
graphics.moveTo(30, 150);
SoundMixer.computeSpectrum(ba);
for(var i:uint=30; i<280; i++)
{
var num:Number = ba.readFloat()*50 + 170;
graphics.lineTo(i, num);
}
}
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.
<musiclist> <song> <title>The Mass</title> <artist>Era</artist> <thumb>pics/era.jpg</thumb> <url>songs/themass.mp3</url> </song> <song> <title>Dr.No theme</title> <artist> - </artist> <thumb>pics/drno.jpg</thumb> <url>songs/drno.mp3</url> </song> </musiclist>
Step 35 - Create Album Art
Create album art for the songs. Recommended size is 65px x 65px; it will fit nicely in the screen.
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Vampvess
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Good job, thanks for share, would be better if used the document class, but it´s working good, congratulations!!
Now I know how to do a spectrum! Thanks a lot!
I get an actionscript error, FF on Vista
If you open more than one tab with sound in the same browser, the SoundMixer.computeSpectrum give an error, because of the security sandbox, shound use try and catch for the SoundMixer.computeSpectrum, them if you have more than one tab with sound open with different hosts, the spectrum just doesnt work, but dont show the error…
Thanks man!
Simple and thanks for sharing!
dammit, i was just setting up a tutorial for something very similar…
Give it a unique twist, teach something new and let me see the idea! There’s plenty of room for play here – anyone want to see anything specific regarding XML MP3 players?
the computeSpectrum area is fascinating, in this example it is a very simple lineTo, but if you play around you can get some fantastic effects
Yes please Ian. XML tutorials are so fun!
Cool thanks for sharing!
By the way I would like to learn Action Script seriously. Do you guys have a suggestion on an actionscript book for for beginners?
I know C# and javascript very well. It should help, shouldn’t it?
One book that’s pretty thorough, beginning to advanced, is Learning Actionscript 3.0 by Rich Shupe and Zevan Rosser otherwise Essential Actionscript 3.0 (O’Reilly)
This is great. Thanks for sharing :))))
Great Great Great Guys…
thanx alot 4 this,
Flashtuts is really a great addition 4 the envato team
best of luck…
very useful… thanks
there is a little bug.. clicking server times on play cause the generation of multiples music..
thanks for sharing!
on button play put an stop before a play…
I’d like to see a section on how to pick to the music from a list instead of only being able to skip through them.
Great Walkthrough!
Thanks for article
Very useful !!! thank you so much !!
Great Tutorial.
I did this once,
Something is not right in mine.
Hey man thanks for this wonderful tut
Damn thanks man I am gonna use this for a website.
I got all the way through the tutorial, then tested it and nothing showed up. Just a blank black background. I went through the tutorial again and I did everything right. What happened?
Check whether you are using ActionScript 3.0 or 2.0.
That maybe the problem occur here. Or you put the ActionScript at the wrong keyframe?
Great tutorial thanks
Great turorial – just one thing, does anyone know how to make the names of the songs scroll?
I’ve created my player but some of the stuff I want on there has really long titles and it’s frustrating me that it’s getting cut off.
any help greatly appreciated.
It‘s a interesting work ,thx for sharing .I want make friends with u .I come
from Hei Longjiang province in China .
My Email is ofdata.z@gmail.com,lol ,waiting for you !
There is no .fla file? what man? is it good?
All other tutorial has a .fla file..
What Flash version does this use?
was getting the tutorials initially but along the line when it got to the Action Script part, I went blank and the source file doesn’t open in my Flash, I use Flash 8. Cud anybody please help???
where do you put the music list.xml?
How can I set the album image an other place?
-Aleex
I liked the spectrum code, thanks for the tut
How would you or could you add in a playlist, using a listbox component?
I have finally got the stupid thing to play the audio…but the problem lies within the
need to add in a playlist.
I have play, pause, and stop on stage (buttons) (I commented the others out for now in the code)
I also have a listobox (instance name: lb) on stage….
What I need to do is figure out how to first populate the list box with the title from the xml file (listed below)
and then have the lb.selectedIndex equal 0 and have it play the first one in the list..
But it needs to have the ability to allow for people to click other audio files in the list and play them…
HELP WOULD BE GREAT!!!!!
Thanks in advance, I have put my as3 script below then the xml file follows that.
Here is the as3 code
var musicReq: URLRequest;
// var thumbReq: URLRequest;
var music:Sound = new Sound();
var sndC:SoundChannel;
var currentSnd:Sound = music;
var position:Number;
var currentIndex:Number = 0;
var songPaused:Boolean;
var songStopped:Boolean;
var lineClr:uint;
var changeClr:Boolean;
var xml:XML;
var songList:XMLList;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, Loaded);
loader.load(new URLRequest(“http://www.cbcnlr.org/script/grabSermonsxml.php”));
// LOADED FUNCTION
function Loaded(e:Event):void
{
xml = new XML(e.target.data);
songList = xml.sermon;
trace(xml);
musicReq = new URLRequest(songList[0].sermonFile);
//thumbReq = new URLRequest(songList[0].thumb);
music.load(musicReq);
sndC = music.play();
//titleTxt.text = songList[0].title;
//artistTxt.text = songList[0].artist;
//loadThumb();
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
// LOAD THUMB FUNCTION
//function loadThumb():void
//{
// var thumbLoader:Loader = new Loader();
// thumbReq = new URLRequest(songList[currentIndex].thumb);
// thumbLoader.load(thumbReq);
// thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
//}
//function thumbLoaded(e:Event):void {
// var thumb:Bitmap = (Bitmap)(e.target.content);
// var holder:MovieClip = thumbHd;
// holder.addChild(thumb);
//}
// EVENT LISTENER OF BUTTONS
// prevBtn.addEventListener(MouseEvent.CLICK, prevSong);
// nextBtn.addEventListener(MouseEvent.CLICK, nextSong);
playBtn.addEventListener(MouseEvent.CLICK, playSong);
pauseBtn.addEventListener(MouseEvent.CLICK, pauseSong);
stopBtn.addEventListener(MouseEvent.CLICK, stopSong);
// PREVIOUS SONG FUNCTION
//function prevSong(e:Event):void
//{
// if(currentIndex > 0){
// currentIndex–;
//}
// else{
// currentIndex = songList.length() – 1;
//}
// var prevReq:URLRequest = new URLRequest(songList[currentIndex].url);
// var prevPlay:Sound = new Sound(prevReq);
// sndC.stop();
// titleTxt.text = songList[currentIndex].title;
// artistTxt.text = songList[currentIndex].artist;
// sndC = prevPlay.play();
// currentSnd = prevPlay;
// songPaused = false;
// loadThumb();
// sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
//}
// NEXT SONG FUNCTION
function nextSong(e:Event):void
{
if(currentIndex < (songList.length() – 1)){
currentIndex++;
}
else {
currentIndex = 0;
}
var nextReq:URLRequest = new URLRequest(songList[currentIndex].url);
var nextPlay:Sound = new Sound(nextReq);
sndC.stop();
//titleTxt.text = songList[currentIndex].title;
//artistTxt.text = songList[currentIndex].artist;
sndC = nextPlay.play();
currentSnd = nextPlay;
songPaused = false;
//loadThumb();
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
// PLAY SONG FUNCTION
function playSong(e:Event):void
{
if(songPaused){
sndC = currentSnd.play(position);
songPaused = false;
}
else if(songStopped){
sndC = currentSnd.play(position);
songStopped = false;
}
else if(!sndC){
sndC = currentSnd.play(position);
}
}
// PAUSE SONG FUNCTION
function pauseSong(e:Event):void
{
if(sndC){
position = sndC.position;
sndC.stop();
songPaused = true;
}
}
// STOP FUNCTION
function stopSong(e:Event):void{
sndC.stop();
position = 0;
songStopped = true;
}
XML CODE IS BELOW
Pastor Steven Kyle
To Make Him Known Pt2
3/29/2009
http://www.cbcnlr.org/uploads/Sermons/09-03-29_PM_Audio.mp3
This is the second part of this series.
Pastor Steven Kyle
To Make Him Known Pt2
3/29/2009
http://www.cbcnlr.org/uploads/Sermons/09-03-29_PM_Audio.mp3
Sunday Evening Service, talking about the importance of making Christ known.
Pastor Steven Kyle
To Make Him Known – Luke 14:16-24
3/29/2009 – AM Service
http://www.cbcnlr.org/uploads/Sermons/09-03-29_AM_Audio.mp3
Teaching on the importance of making Christ Known.
Hi there, I have a small problem – when I go to check that it’s all working it comes up with 14 “compiler errors”, they all say the same thing in the description field “1120: Access of undefined property songList.” I’ve been through and checked the code and can’t find any errors, and I’ve checked the syntax with the built in checker.
Do you have any thoughts on what might be wrong?
thanks
look for something in the code referring to ‘songlist’ its probably a list box component or something in the code trying to create a playlist…also you could run the flash debugger…it usually helps me.
Hi,
I’ve now got the code all working, but does anyone know how I can get it working within another fla file (ie my website) I can’t seem to import it so that it all loads when my ‘audio’ page is opened?
Love this tutorial its brilliant though when i go through it i get this error message up..
Error #2044: Unhandled IOErrorEvent:. text=Error #2032: Stream Error.
at player_fla::MainTimeline/frame1()
any suggestions as what it could be and how it would be fixed?
Can someone please help me figure out what I need to do to make the songs play in a random order whenever the page is visited? I have tried searching for a code that will work, but haven’t had any luck yet. I just get errors when I paste the code into my Actionscript. I also don’t know enough about Flash to even understand what people are talking about on forums and what not. I just need a simple code that works and I need to know where to put it, what to replace, what to change, etc. Thanks.
I will tell you that a lot of the designers who will be using this guys tutorial know enough about flash / action script to edit it and make it their own. The best thing I could tell you what to do is simply do what I did. Start searching for other players that do what you need it to do and look through their code to see if you can figure it out. Its the only way your going to learn anything.
Dude thank you so much! I havent spent the last two weeks googling nearly everyday for code for a basic as3 mps player that actually works! saviour =D
question though, how i can change the code so the first song DOES NOT automatically play when the movie starts? i’ve tried stripping out most things and changing true/false values but i only end up getting errors…
And what about volume controls?
I’d like to know about adding a volume slider too. I’ve been trying with a variety of other tutorials on the subject, tweeking the AS to match the player, but with absolutely no luck whatsoever!
Flash MX 2004 did not open the file. Too bad…the player looks pretty cool though.
yeh. make it stop playing auto..
HOW?
im new to this. where do i put the script, and does it all goes together.
I have got the player showing on my website but it is not working…but works when i play it locally on my hard disk? any help
I have that same problem. Do u know if there is a way to stop it from playing automatically?
Hey got the same problem too. Locally it works perfect but when i put it online it doesn’t seem to load up any music. And yes, the music has been uploaded too. I’d also like to know how to stop it from playing automatically
Hey guys, i got the same problem. Local it all works fine but it doesn’t work online. I also would like to know how I can disable the auto-play feature.
Have you figured out how to stop it from auto-playing?
Did anyone figure out how to get it to not auto play?
I seem to have lost my self in these steps. I can’t get this mp3 player to work. I’m new to flash and i lack the knowledge in programing and the patience. I ended up using this one http://www.flashxml.net/mp3-player.html . It’s free and it looks good. Thanks for the tutorial.
Best regards,
Rob
Hey Rob, don’t be ashamed, I’m in the same situation as you. I find your link very useful, you saved my day.
I was looking for a mp3 player and that one fits my requirements, it’s easy to install and very customizable. So, all I want to say is THANK YOU.