Simple MP3 Music Player with sliding volume controller in Actionscript 3

We will create a music player that will have the following :-

1. Play Button. 2. Stop Button. 3. Pause Button *4. Sliding Volume Controller
The mp3 file you want to play should be in the same folder as the flash file. Let's assume its name is myMusic.mp3.

1. Play Button:-
i> We first need to draw the button. Hit Ctrl+F8 and name the New Symbol as "play_mc" without the quotes. You can draw it to look like anything you like. I'll draw it like this.

If you are new to flash you might be wondering about how to draw a triangle. The easiest way is to draw a small square and then click outside it now select the Selection Tool(V) and move the mouse near a vertex of the square. You will notice an inverted L sign under the pointer. Press the left mouse button and drag the vertex up
do it on both sides
and you get you triangle


ii> Now drag the button on to the Stage and select it. Open the Properties Window and set the instance name as play_mc.

2. Stop Button:-
i> Make it in the same way as before and name it as "stop_mc" without the quotes.
ii> Drag it onto the stage and give it the instance name of "stop_mc" without the quotes.

3. Pause Button:-
Same as before just give the names as "pause_mc".

You should have the three buttons on stage and it should look like this



4. Sliding Volume Controller:-
i> Create a new Layer and drag it below the layer that has the three buttons. Now draw a line below the buttons and then go to the properties panel to set the width as 100. Make a note of the X and Y Coordinate of that line. Here it's 215 and 265 respectively.



ii>Now select the first frame of the layer that has the three buttons. Draw a small circle which will be the actual slider. Select it and Hit F8 and save it as slider_mc. Double click on it to edit it and centre the cicle. Return to the Main Stage and go to the properties panel and give the instance name as slider_mc and set its X and Y coordinate as 315 (215+100) and 265 respectively.


Now we'll make the buttons work! Create a new layer and name it Actions. Select the first frame and Hit F9 to bring up the actions Window. Copy the following piece of code:-


var isPlaying = 0;//flag denotes whether the music is playing(1) or has been stopped(0)
var pos=0;//denotes the position in which the music was paused var mySound:Sound = new Sound(new URLRequest("myMusic.mp3"));//load the mp3 file
/*define the area in which the slider will move the arguments are X, Y, width, height*/
var rect:Rectangle = new Rectangle(215,265,100,0);

/*define the sound channel*/
var myChannel:SoundChannel=new SoundChannel();

/*define mouse event listners for the buttons and the slider*/
play_mc.addEventListener(MouseEvent.CLICK,playMusic);
stop_mc.addEventListener(MouseEvent.CLICK,stopMusic);
pause_mc.addEventListener(MouseEvent.CLICK,pauseMusic);
slider_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
slider_mc.addEventListener(MouseEvent.MOUSE_UP,dragStop);
slider_mc.addEventListener(MouseEvent.MOUSE_OUT,dragStop);

/*the slider will invoke the "adjustVolume" function*/
slider_mc.addEventListener(Event.ENTER_FRAME,adjustVolume);

/*PLAY BUTTON*/
function playMusic(e:MouseEvent) {
if(isPlaying==0)
myChannel=mySound.play();
isPlaying=1;
}

/*--------------STOP BUTTON--------------*/
function stopMusic(e:MouseEvent) {
if(isPlaying==1)
myChannel.stop();
isPlaying=0;
pos=0;
}
/*----------------------------------------*/

/*--------------PAUSE BUTTON--------------*/
function pauseMusic(e:MouseEvent) {
/*if music is playing*/
if(isPlaying==1)
{
pos=myChannel.position;//record position
myChannel.stop();
isPlaying=0;
}
/*if music is paused*/
else
{
isPlaying=1;
myChannel=mySound.play(pos);
}
}
/*----------------------------------------*/

/*--------------SLIDING CONTROLLER--------------*/
function dragStart(e:MouseEvent) {
slider_mc.startDrag(true,rect);
}

function dragStop(e:MouseEvent){
slider_mc.stopDrag();
}

function adjustVolume(e:Event) {
var vol=(slider_mc.x-215)/100;
var volChange:SoundTransform = new SoundTransform(vol);
myChannel.soundTransform = volChange;
}
/*----------------------------------------*/

That's it. Hit Ctrl+Enter to check your own Music Player!!

The Tween Class in ActionScript 3

Today we'll learn about the Tween class and apply it to a practical example.


1. Open a new flash file. Hit Ctrl+J to bring up the Document Properties and change the background color to black.


2. Then press Ctrl+F8 to open the New Symbol window and name it as btn1_mc. We will make a button. Now select the Rectangle Tool(R) and change the Stroke color to #0066CC and the fill color to #0099CC. You can use any other color.
Go to the Properties Panel and set the stroke thickness as 4.


3. Draw a rectangle of the size you want you button to be. A width of 120 and a height of 40 should suffice. After drawing, select the rectangle and go to the align panel and centre the rectangle.


4. Create a new layerand select the Text Tool(T) and create a label for your button. I will name it "HOME". Go to the Align Panel and centre the text box too.


5. Now Click on Scene1 to return to the Stage.

6. Go to Window->Library and you will see the btn1_mc movie clip. Right Click on it and create two duplicates and name them btn1_mc and btn3_mc respectively. Change the color and the text labels on the duplicate if you want to. I will name them "Gallery" and "About Us". Changing the color will help us understand a particular issue we'll address later.
Now drag each button onto the stage and arrange them somewhat like this


7. Select each button and go to the Properties Panel button and give them instance name as btn1_mc, btn2_mc and btn3_mc

8. Create a new layer, name it Actions and select the first frame and hit F9 to bring up the Actions window. We are ready to write the script.

9. To script tweens we first need to import the Tween Class like so -

import fl.transitions.Tween; import fl.transitions.easing.*;

Now we'll implement the tween so that the button changes size when we RollOver and return back when we RollOut therefore for each button we must add RollOver and RollOut listeners.

btn1_mc.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); btn1_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler); btn2_mc.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); btn2_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler); btn3_mc.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); btn3_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);


These listeners will invoke the "mouseOverHandler" function on the RollOver Event and the "mouseOutHandler" function on the RollOut Event
Now we will define the two functions

function mouseOverHandler(e:MouseEvent) { e.currentTarget.alpha=.8;//altering alpha makes the change more prominent new Tween(e.currentTarget,"scaleX",Elastic.easeOut,e.currentTarget.scaleX,1.25,1,true); new Tween(e.currentTarget,"scaleY",Elastic.easeOut,e.currentTarget.scaleY,1.25,1,true); } function mouseOutHandler(e:MouseEvent) { e.currentTarget.alpha=1; new Tween(e.currentTarget,"scaleX",Elastic.easeOut,e.currentTarget.scaleX,1,1,true); new Tween(e.currentTarget,"scaleY",Elastic.easeOut,e.currentTarget.scaleY,1,1,true); }


"e.currentTarget" gives the child on which the Event has occured. The arguments of the Tween function is as follows :- 1. the object, 2. the property that has to be tweened, 3. Type of tween, 4. Start value, 5. End value, 6. Duration in Seconds, 7. Use Seconds(boolean).


10. if you have copied all of the code hit Ctrl+Enter to test your movie. Rollover your buttons you'll see them growing and shrinking but notice that we have a problem that is most apparent when we rollover the middle button.




The middle button grows over the first button but goes under the last button. That happens with the first button too

11. As you might have guessed, to solve this problem we have to change the depth of the button and bring it to the topmost layer. To do that add the following line of code to the "mouseOverHandler" function.

setChildIndex(getChildByName(e.currentTarget.name),numChildren-1);

"numChildren" give the total number of children present. Thus by setting the index to "numChildren-1" we actually swap the depths of the present child with that of the topmost child.
Hit Ctrl+Enter to test you movie. The problem is solved!!


So there you have it. The buttons look really good with the Tween. You can choose different kind of tweens. Instead of the Elastic easing used here you can choose from Back, Bounce, None, Regular, Strong and instead of easeOut you can use easeIn or easeInOut. Select the tween that suits your application the best.