Hi guys, im back with a new flash actionscript 3.0 tutorial, this time we will be making a mp3 player with a volume slider, I must admit, I tried making one some month ago, it didnt work out that well, but I promis you, this works great so just follow along or download the source code at the bottom.
Before we get all excited and start working with actionscript, first we need to do some preperations, make a few buttons and graphics to make our mp3 player look good. So try to follow along, you can make your own graphic buttons, so I wont guide you through how I made mine, only the structure.
So on the visual part, lets make a play, pause and stop button, convert them all into movie clips and give them the following instance names by going to the properties panel. play_btn, pause_btn and stop_btn.
Now we need to make the volume slider, the volume slider consist of a stroke 100 px wide, (its important that its excacly 100 px). Convert it into a movie clip and name it volume_mc. Inside this volume slider movie clip make a handle graphic, convert it into a movie clip and name it mySlider_mc, and place it at the right end of the stroke like below.
Now we are ready to do some actionscript, so go to the main stage and hit f9 or what ever you do to open up the actionscript panel.
To make things easier for both you and me I commented the code inline with the actionscripting, so everything should be explained line by line, and you should be able to copy and past the code directly into your own project.
And here is the source code:
- //attatch/import the music file.
- var musicPiece:Sound = new Sound(new URLRequest _
- ("http://blog.0tutor.com/JeffWofford_Trouble.mp3"));
- // Make a sound channel to change sound configurations.
- var mySoundChannel:SoundChannel;
- // This variable is checking if the music is playing
- var isPlaying:Boolean = false;
- // to remember the position of the music playing when we pause, _
- to start at the same place
- var pos:Number = 0;
- // First button we will make is a play button, add an eventlistener.
- play_btn.addEventListener(MouseEvent.CLICK, play_);
- function play_(event:Event):void {
- //Check if the music is NOT playing, then make it start.
- if (!isPlaying) {
- mySoundChannel = musicPiece.play(pos);
- isPlaying = true;
- }
- }
- // The pause button, here we will use the pos variable we made earlier.
- pause_btn.addEventListener(MouseEvent.CLICK, pause_);
- function pause_(event:Event):void {
- // if the music is player, save the current time and stop the playing.
- if (isPlaying) {
- pos = mySoundChannel.position;
- mySoundChannel.stop();
- isPlaying = false;
- }
- }
- // Now the final button is the stop button, allmost thet same as pause
- stop_btn.addEventListener(MouseEvent.CLICK, stop_);
- function stop_(event:Event):void {
- // First we check if there is anything to stop then make it stop, and reset the pos variable to 0 (start time)
- if (mySoundChannel != null) {
- mySoundChannel.stop();
- pos = 0;
- isPlaying = false;
- }
- }
- // this is a bit complicated, but I will try to explain anyway.
- // first we make a rectangle and set its width to 100.
- var rectangle:Rectangle = new Rectangle(0,0,100,0);
- // then we need a varible to check if the handle is being dragged.
- var dragging:Boolean = false;
- // the eventlistener for startdragging
- volume_mc.mySlider_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
- function startDragging(event:Event):void {
- // here we tell flash the margin on where it should be able to drag, (remember 100 pixels back and forth)
- volume_mc.mySlider_mc.startDrag(false,rectangle);
- dragging = true;
- // This is very important, an eventlistener so we can change the volume, not only make it look good.
- volume_mc.mySlider_mc.addEventListener(Event.ENTER_FRAME, adjustVolume);
- }
- // well here is the adjust volume function, its not that complicated
- function adjustVolume(event:Event):void {
- // we make a variable to calculate the volume from the slider handle position and divide it by 100
- var myVol:Number = volume_mc.mySlider_mc.x / 100;
- // then we set it with the mySoundTransform
- var mySoundTransform:SoundTransform = new SoundTransform(myVol);
- if (mySoundChannel != null) {
- mySoundChannel.soundTransform = mySoundTransform;
- }
- }
- // and of cause the stop draggin function, I dont feel the need to explain it.
- stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
- function stopDragging(event:Event):void {
- if (dragging) {
- dragging = false;
- volume_mc.mySlider_mc.stopDrag();
- }
- }
//attatch/import the music file.
var musicPiece:Sound = new Sound(new URLRequest _
("http://blog.0tutor.com/JeffWofford_Trouble.mp3"));
// Make a sound channel to change sound configurations.
var mySoundChannel:SoundChannel;
// This variable is checking if the music is playing
var isPlaying:Boolean = false;
// to remember the position of the music playing when we pause, _
to start at the same place
var pos:Number = 0;
// First button we will make is a play button, add an eventlistener.
play_btn.addEventListener(MouseEvent.CLICK, play_);
function play_(event:Event):void {
//Check if the music is NOT playing, then make it start.
if (!isPlaying) {
mySoundChannel = musicPiece.play(pos);
isPlaying = true;
}
}
// The pause button, here we will use the pos variable we made earlier.
pause_btn.addEventListener(MouseEvent.CLICK, pause_);
function pause_(event:Event):void {
// if the music is player, save the current time and stop the playing.
if (isPlaying) {
pos = mySoundChannel.position;
mySoundChannel.stop();
isPlaying = false;
}
}
// Now the final button is the stop button, allmost thet same as pause
stop_btn.addEventListener(MouseEvent.CLICK, stop_);
function stop_(event:Event):void {
// First we check if there is anything to stop then make it stop, and reset the pos variable to 0 (start time)
if (mySoundChannel != null) {
mySoundChannel.stop();
pos = 0;
isPlaying = false;
}
}
// this is a bit complicated, but I will try to explain anyway.
// first we make a rectangle and set its width to 100.
var rectangle:Rectangle = new Rectangle(0,0,100,0);
// then we need a varible to check if the handle is being dragged.
var dragging:Boolean = false;
// the eventlistener for startdragging
volume_mc.mySlider_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
function startDragging(event:Event):void {
// here we tell flash the margin on where it should be able to drag, (remember 100 pixels back and forth)
volume_mc.mySlider_mc.startDrag(false,rectangle);
dragging = true;
// This is very important, an eventlistener so we can change the volume, not only make it look good.
volume_mc.mySlider_mc.addEventListener(Event.ENTER_FRAME, adjustVolume);
}
// well here is the adjust volume function, its not that complicated
function adjustVolume(event:Event):void {
// we make a variable to calculate the volume from the slider handle position and divide it by 100
var myVol:Number = volume_mc.mySlider_mc.x / 100;
// then we set it with the mySoundTransform
var mySoundTransform:SoundTransform = new SoundTransform(myVol);
if (mySoundChannel != null) {
mySoundChannel.soundTransform = mySoundTransform;
}
}
// and of cause the stop draggin function, I dont feel the need to explain it.
stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function stopDragging(event:Event):void {
if (dragging) {
dragging = false;
volume_mc.mySlider_mc.stopDrag();
}
}
Yah I know that was a lot of code, and it might look a bit confusing, but I promis you, if you try to put it into your own flash file, maybe event delete the comments I made, you will see kind of a paddern, how and why stuff works and how you made a simple mp3 player with actionscript 3.0 :-)
Best of luck to you all.
discuss this topic to forum
