In this tutorial, you’ll learn how to create a music player with ActionScript 3.0 and XML. In a step-by-step guide I will explain both designing and coding part of the creation process. You will also learn how to add some effects to the player buttons, as well as how to create a right-click menu and XML file which you can use to change and update your audio data at ease. By means of this tutorial you will be able to create a full-blown music player in a matter of minutes. So read on and enjoy!

Here is how it should looks like:

Getting Started

We’ll need Tween Effects to use them in our player. Click here to download TweenMax.
I’ll make the all ActionScript explanations in the code areas. All you need is following the tutorial carefully. I’m sure that even if you don’t know ActionScript, you’ll be able to create this player. Let’s start to create it!

Step 1 – Preparing The Folders

We must create a main folder to collect all folders and files. Create a new folder and apply the steps like the following:

1.Move “com” folder (from TweenMax) into the main folder.

2.Create a new folder called “musics”. Move your own songs into the this folder.

3.Create a ActionScript 3.0 Flash Project and XML Project (by using Dreamweaver or Notepad).

4.Save as them.

You should have had a folder like this:

Step 2 – Properties of The Canvas

Open the project you saved. Every element of the design can be changed. I used sample values. Your stage size must be about 300×200. Background Color (#191611 )

Step 3 – Creating The Background Of MusicBox

We’ll use a rectangle and square for background of MusicBox. Outline Color (#3E362D), Main Color (#2F2922). Fill the shapes like the following.

Step 4 – Importing Cover Image

Import (Ctrl + R) your cover image to the stage and embed it. Cover image must be small than cover background (95×95).

Step 5 – Creating Gradient

Create a new rectangle and crop it like the following. Reduce its alpha value to 10. You can use every color for making this effect.

Step 6 – Creating Player Elements

If you have any player icon set or like this, of course you can use it in your project. I used “Webdings” font set. We have 5 elements in the player. Now, we’ll give them their instance names. Pause Button: “PauseBtn”, Play Button: “PlayBtn”, Next Button “NextBtn”, Previous Button: “PrevBtn” and finally Mute Button “MuteBtn”.

Step 7 – The Name of The Song

Create a dynamic text on your main scene. Set its properties like the following.

Step 8 – Preview of The Design

We have just finished the design of the MusicBox. I’ll make the MusicBox “drag&drop”. So, it can be moved each folder easily. Also, I’ll add a drop shadow effect ( Blur X-Y: 8, Quality: High, Distance: 0 ) to my design. Select all items and covert them to the MovieClip.

Step 9 – Coding The Design

Now, we’ll write the codes of the design. I’ll use XML File for calling songs and titles. I want to start with defining the elements and variables of the player. Open MovieClip and write the following codes:

///Defining The Elements and Variables of the Music Player

var MusicLoading:URLRequest;//File Request

var music:Sound = new Sound();

var sc:SoundChannel;

var currentSound:Sound=music;

var CurrentPos:Number;//Current Position of the Song

var xml:XML;

var songlist:XMLList;//Music List from XML

var currentIndex:Number=0;//The Number of Index

var MuteFunc:SoundTransform = new SoundTransform();//Mute Functions

var XMLLoader:URLLoader = new URLLoader();//XML Loader

Step 10 – Coding The Design

We’re going on with XML Actions.

//If XML File Load successfully, it will be voided this actions:

XMLLoader.addEventListener(Event.COMPLETE, success);

function success(e:Event):void {

        xml=new XML(e.target.data);

        songlist=xml.song;//For adding a new song in XML File.

        MusicLoading=new URLRequest(songlist[0].file);

        music.load(MusicLoading);

        sc=music.play();

        MusicName.text=songlist[0].name;

        sc.addEventListener(Event.SOUND_COMPLETE, nextSong);

}

//The Name of the XML File.

XMLLoader.load(new URLRequest("playlist.xml"));

Step 11 – Coding The Design

Adding Event Listeners for the control buttons.

//Add Event Listeners for control buttons

PauseBtn.addEventListener(MouseEvent.CLICK,pauseSong);

PlayBtn.addEventListener(MouseEvent.CLICK,playSong);

NextBtn.addEventListener(MouseEvent.CLICK, nextSong);

PrevBtn.addEventListener(MouseEvent.CLICK, prevSong);

MuteBtn.addEventListener(MouseEvent.CLICK, Mute);

Step 12 – Coding The Design

Next Song Functions.

//Next Song Functions

function nextSong(e:Event):void {

        if (currentIndex < (songlist.length() +1)) {//Next Song(+1)

               currentIndex++;

        } else {

               currentIndex=0;

        }

        //New Request for Next Song

        var nextSongFunc:URLRequest=new URLRequest(songlist[currentIndex].file);

        var nextTitle:Sound=new Sound(nextSongFunc);

        sc.stop();

        MusicName.text=songlist[currentIndex].name;//Writing New Song's name

        sc=nextTitle.play();

        currentSound=nextTitle;

        sc.addEventListener(Event.SOUND_COMPLETE, nextSong);

}

Step 13 – Coding The Design

Prev Song Functions.

//Prev Song Functions

function prevSong(e:Event):void {

        if (currentIndex>0) {

               currentIndex--;

        } else {

               currentIndex=songlist.length()-1;//Prev Song(-1)

        }

        var prevSongFunc:URLRequest=new URLRequest(songlist[currentIndex].file);

        var prevTitle:Sound=new Sound(prevSongFunc);

        sc.stop();

        MusicName.text=songlist[currentIndex].name;

        sc=prevTitle.play();//Writing Prev Song's name

        currentSound=prevTitle;

        sc.addEventListener(Event.SOUND_COMPLETE, nextSong);

}

Step 14 – Coding The Design

Pause and Play Functions.

//Pause The Song (sc.stop)

function pauseSong(e:Event):void {

        CurrentPos=sc.position;

        sc.stop();

}

//Play The Song

function playSong(e:Event):void {

        sc=currentSound.play(CurrentPos);

}

Step 15 – Coding The Design

Mute Button Functions. Here, We must create a new dynamic text to show status of the mute button. Open “MuteButton” and create a dynamic text. Give it a instance name called “mute”.

MuteBtn.mute.text="VOLUME ON"; //First Text

//We'll use Sound Transform Actions For "Mute" and "Unmute"

function Mute(e:Event):void {

        MuteFunc.volume=0;//Close the volume of the music.

        SoundMixer.soundTransform=MuteFunc;

        MuteBtn.mute.text=String("VOLUME OFF");//When clicked to the "MUTE BUTTON"

        MuteBtn.mute.alpha=0.9;

        MuteBtn.addEventListener(MouseEvent.CLICK, UnMute);

        MuteBtn.removeEventListener(MouseEvent.CLICK, Mute);

}

//UnMute

function UnMute(e:Event):void {

        MuteFunc.volume=1;//Open The volume of the music.

        SoundMixer.soundTransform=MuteFunc;

        MuteBtn.mute.text=String("VOLUME ON");//When clicked to the "MUTE BUTTON" again"

        MuteBtn.addEventListener(MouseEvent.CLICK, Mute);

}

Step 16 – Effects on the Buttons

Finally, I want to add some effects to the control buttons. Now, We need TweenMax. So, Type these codes to the each button’s first frame.

//Import Tweens

import com.greensock.*;

import com.greensock.easing.*;

//Mouse Over & Out Functions

this.addEventListener(MouseEvent.MOUSE_OVER, MouseOverFunc);

this.addEventListener(MouseEvent.MOUSE_OUT, MouseOutFunc);

//Mouse Over Function

function MouseOverFunc(e:Event):void {

//Glow Effect

        TweenMax.to(this, 0.5, {glowFilter:{color:0xb0a295, alpha:1, blurX:4, blurY:4}});

}

//Mouse Out Function

function MouseOutFunc(e:Event):void {

        //Without Glow Effect

        TweenMax.to(this, 0.5, {glowFilter:{color:0xb0a295, alpha:0, blurX:4, blurY:4}});

}

Step 17 – Right Click Menu

Finally, We’ll add Right Click Menu to the MusicBox. When you click to the MusicPlayer, you’ll see a context menu with Pause Song Function.

//Right Click Menu Actions

var RightClickMenu:ContextMenu = new ContextMenu();//New Menu

RightClickMenu.hideBuiltInItems();//Zoom, Select ets. are hidden.

var menuItem1:ContextMenuItem=new ContextMenuItem("© 2010 - AS3 MusicBox");//The Name of The First Item

var menuItem2:ContextMenuItem=new ContextMenuItem("Pause The Song");//The Name of The Second Item

menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, pauseSongFunc);//Pause Song Event Listener

RightClickMenu.customItems.push(menuItem1);

RightClickMenu.customItems.push(menuItem2);

this.contextMenu=RightClickMenu;

function pauseSongFunc(e:ContextMenuEvent):void { //Same actions with "Pause Song"

        CurrentPos=sc.position;

        sc.stop();

}

Step 18 – Creating XML File

Open your XML File. Write these codes. “Name” is the title of the song. “File” is the path of the song with file format.

Final Step – Conclusion

Congratulations. You’re done! Test your movie and listen to the musics. You’ve created a MusicPlayer with ActionScript 3 and XML. The possibilities are endless. You can provide and use this project. If you have any question, please leave a reply here. I hope you enjoyed this tutorial and thanks for reading.

Follow FlashMint on Twitter for more awesome Flash Tutorials!
"Like" FlashMint FaceBook Page to stay in touch!