Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Flash MP3 Player

Flash MP3 Player


This tutorial demonstrates how to load and play MP3 sound with Flash Designer.

Download source project t1061.zip (2 kb)

You can use the source file with your own projects.

To view the code choose "Frame" > "ActionScript". To load you own sound change the path in the ActionScript code. This tutorial is advanced. Only general description is provided.

Launch Flash Designer and set frame size at 400 x 64, set Frame 1 to Stop.

Draw the background rectangle on entire frame and fill it with vertical gradient

image 1

Create buttons as 2 circles filled with gray gradients 39x39 pixels and 35x35 pixels

image 2

Align both circles and duplicate 3 times

Draw button icons with the line tool and fill them with gradients

image 3

Group each of the buttons

image 4

Draw the display: black rectangle with gray 3 px line

Add 2 edit fields and name them "playedtime" and "totaltime" (Vairable anem field), use white font

Draw the progress bar 110x10, no line, green vertical gradient.

Convert it to sprite and name it "sndbar", check actionscript target

Add "/" between "playedtime" and "totaltime"

image 5

Create volume control, add down and up trianlges from the gallery and make them smaller. Copy speaker icon from the original project (optional). Add gray vertical gradient rectangle 19x47.

Flash MP3 Player

Set the actionscript code for Frame 1

mySnd = new Sound(); // create sound object
sndbar._visible = false; // hide the sound bar initally


// onLoad executed when the sound completes to load
mySnd.onLoad = function(){
// set total time in seconds on the display instead of percentage
totalseconds = Math.floor(mySnd.duration/1000);
totaltime=Math.floor(totalseconds/60) + ":" + totalseconds%60;
// show sound bar for playback
sndbar._visible = true;

}

// to load your own sound put it on the web
// and change the path below
mySnd.loadSound("http:// www.flashdesignerzone.com /tutorials/sound.mp3",true);



volume = 100;
pause=0;


function f1()
{
// percent loaded
buffered=Math.floor((mySnd.getBytesLoaded() / mySnd.getBytesTotal())*100);

// display progress on the display
if(buffered<100) { totaltime=buffered; totaltime = totaltime+"%"; }

// resize sound playing bar
sndbar._xscale=(mySnd.position/mySnd.duration)*100;

// display how many seconds played
playedseconds=Math.floor(mySnd.position/1000);
playedtime=Math.floor(playedseconds/60) + ":" + playedseconds%60;

// if stopped remove sound bar
if(action=="stop"){ sndbar._xscale=0; }

if(pause==1){
pausepos=mySnd.position;
mySnd.stop();
}

}

setInterval(f1,100); // trigger f1 every 0.1 second

Set the code for Play button onClick

mySnd.start(0,100);
pause=0;
action="play";

Set the code for Stop button onClick

mySnd.stop();
action="stop";

Set the code for Pause button onClick

if(pause==1){
pause=0;
mySnd.start(pausepos/1000);
} else {
pause=1;
}

Hit F9 for preview



Author's URL: Selteco.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website. More Flash Tutorials: Featured Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Reader's comments
comments DSFSDF July 10, 2011 says:
DS@FDG.COM
Reply
comments Name July 10, 2011 says:
Your comment...
Reply
comments Name July 10, 2011 says:
Your comment...
Reply
comments Name July 10, 2011 says:
Your comment...
Reply
Add comments to "Flash MP3 Player"

Captcha