Crear Reproductor Mp3 En Flash

Hola que tal a los que visitan mi blog, bueno en esta ocasión les traigo un tutorial de como crear un reproductor de mp3 en Macromedia Flash en vista que la mayoría me preguntaron como hacer uno para su pagina Web, bueno en este tutorial les are un simple demostración de como se hace uno, en si solo es lo básico para que tengan una idea de como hacerlo, ahí les dejo a su creatividad este reproductor funciona con un código action script que también se los dejo para
que lo copien.
1.- Bueno comenzare creare un documento flash con las medidas de un aproximado de 500 de acho x 300 pixeles de alto con un fondo de colore negro, creamos una nueva capa a la cual le pondremos el nombre de script.

2.- Seleccionamos la capa script, presionamos F9 y pegamos el siguiente código action script.

Código Action Script Para Copiar:

//Comienzo De Codigo Action Script -->
function barra_boton_objeto_mascara(barra, btn, objeto, mascara){ mover = false;
_root[barra][btn].onPress = function() {
_root[barra][btn].startDrag(false, 0, 0, 0, _root[barra]._height-_root[barra][btn]._height);
mover = true;};
_root[barra][btn].onRelease = _root[barra][btn].onReleaseOutside=function () {
_root[barra][btn].stopDrag(); mover = false;};
_root[barra][btn].onMouseMove = function() {if (mover) {
_root[objeto]._y = _root[mascara]._y-(_root[barra][btn]._y/(_root[barra]._height-_root[barra][btn]._height))*(_root[objeto]._height-_root[mascara]._height);}};
_root[objeto].setMask([mascara]);} volume = 100;
robney_xml = new XML();
robney_xml.ignoreWhite = true;
robney_xml.onLoad = LeerDatos;
robney_xml.load("lista.xml");
function LeerDatos(DatosCompletos){
if (DatosCompletos){ un_Sonido = new Array(); titulo_sonido = new Array();
lista_audio = new Array();
lista_audio = this.firstChild.childNodes;
lista_total = lista_audio.length;
for (var i = 0; i<lista_total; i++){
un_Sonido.push(lista_audio[i].attributes.lista);
titulo_sonido.push(lista_audio[i].attributes.titulo);
inferior.Lista_de_audio.boton.duplicateMovieClip("boton"+i, i);
inferior.Lista_de_audio["boton"+i]._y = inferior.Lista_de_audio.boton._y+i*int(inferior.Lista_de_audio.boton._height) +i;
inferior.Lista_de_audio["boton"+i].txt = checkDigits(i+1)+". "+titulo_sonido[i];
inferior.Lista_de_audio["boton"+i].cancion_boton.onPress = function(){
click_en_la_lista(this._parent.getDepth()+1);}}if(lista_total > 14){
barra_boton_objeto_mascara("mi_scroll", "btn", "inferior", "mmmm");}
lista_de_sonidos = Math.floor(Math.random() * lista_total)+1; ReproducirSonido();}}
function click_en_la_lista(Robney) {
lista_de_sonidos = Robney; Mi_Sonido.stop(); ReproducirSonido();}
function ReproducirSonido() {
musica = un_Sonido[lista_de_sonidos-1]; if (pausePos>0){
Mi_Sonido.start(pausePos, 0);pausePos = 0;}else{
Mi_Sonido = new Sound();
Mi_Sonido.loadSound(musica, true);
Mi_Sonido.setVolume(100);
Mi_Sonido.setVolume(volume);
Mi_Sonido.onSoundComplete = function(){
lista_de_sonidos = Math.floor(Math.random() * lista_total)+1;ReproducirSonido(); }
barra.track_load.onEnterFrame = function(){
total = this._parent._parent.Mi_Sonido.getBytesTotal();
geladen = this._parent._parent.Mi_Sonido.getBytesLoaded(); if (geladen != total){
this._parent.load_display = Math.round((geladen*100/total))+"% Loaded";
this._xscale = Math.round((geladen*100/total));}else{
this._xscale = 100;display.indicador._visible = 1;
delete this.onEnterFrame;
delete this._parent.load_display; }}}}this.onEnterFrame = function() {
dur = int(Mi_Sonido.duration/1000);
pos = int(Mi_Sonido.position/1000);
playTime = {};
playTime.minutes = int((pos)/60);
playTime.seconds = int((pos)%60);
playTime.total = checkDigits(playTime.minutes)+":"+checkDigits(playTime.seconds);
trackTime = {};
trackTime.minutes = int(dur/60);
trackTime.seconds = int(dur%60);
trackTime.total = checkDigits(trackTime.minutes)+":"+checkDigits(trackTime.seconds);
if (tiempo.load_display == undefined) {
tiempo.display = playTime.total+" - "+trackTime.total;} else {
barra.display = barra.load_display; }
if (barra.trackDrag != true) {
prozent = pos*100/dur;
barra.track_play._xscale = prozent; } };
function checkDigits(toCheck){
return (toCheck<10) ? toCheck="0"+toCheck : toCheck; }
display.btn_play.onRelease = function() {
ReproducirSonido(); };
display.btn_pause.onRelease = function() {
if (pausePos>0){
Mi_Sonido.start(pausePos, 0);
pausePos = 0;}else{
pausePos = Mi_Sonido.position/1000;
Mi_Sonido.stop();}};
display.btn_siguiente.onRelease = function() {
lista_de_sonidos == lista_total ? lista_de_sonidos = 1: lista_de_sonidos++;
Mi_Sonido.stop();
ReproducirSonido(); };
display.btn_atras.onRelease = function() {
lista_de_sonidos == 1 ? lista_de_sonidos = lista_total: lista_de_sonidos--;
Mi_Sonido.stop();
ReproducirSonido();};
function marquesina_titulo() {
titulo.texto_del_titulo.autoSize = true;
i = checkDigits(lista_de_sonidos) +". "+ titulo_sonido[lista_de_sonidos-1]+" ";
titulo.texto_del_titulo.text =
i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i; titulo._x + titulo._width /2 + 8 < mascara_de_marquesina._x ? titulo._x =
mascara_de_marquesina._x : titulo._x--; }
titulo.setMask(mascara_de_marquesina);
setInterval(marquesina_titulo, 40);
//Fin De Codigo Action Script --->


3.- Minimizamos Acciones para luego pasar a crear un nuevo símbolo.

4.- Al cual le pondremos el nombre de display, tipo: Clip de película y aceptar.

5.- Una ves localizados en el clip de película display pasamos a dibujar un rectángulo con un degrado de negro a granate y con un borde personalizado bueno eso es al gusto para dar un simple diseño a nuestro reproductor de mp3.

6.- Bueno ahora pasaremos a bloquear nuestra Capa 1 con el candadito, para luego crear una nueva capa con el nombre de Botones.

7.- Seleccionamos la capa botones y dibujamos nuestro botón play con la herramienta pluma haciendo 3 puntos, para luego convertirlo en botón presionando F8 con el nombre de play.

8.- Nos dirigimos al botón play ya creado en nuestra biblioteca, para luego insertar un fotograma clave en el estado de sobre.

9.- Cambiamos el color del botón del estado Sobre a un color rojo o cualquier otro color que deseas que se diferente al del estado Reposo

10.- Regresamos al Clip de Película display que lo encontramos en nuestra Biblioteca, para luego dibujar nuestro botón play insertando dos rectángulos del mismo tamaño y seleccionar los dos juntos para luego convertirlo en botón presionando F8 y hacer los mismo pasos como el del botón play. ( Guardar el botón con el nombre de Pause )
11.- Creamos nuestros botones siguiente y atrás, para eso solo insertaremos dos textos y lo convertimos en botón a cada uno( seleccionamos el texto y presionamos F8 para convertirlo en botón a cada uno le damos el nombre del texto siguiente y atrás.)
12.- Ahora daremos nombre de instancia a cada uno de nuestros botones creados.

13 Color a cada botón un nombre de instancia.

Botón Play = btn_play
Botón Pause = btn_pause
Botón Siguiente = btn_siguiente
Botón Atrás = btn_atras

14.- Buena ves insertado a todo los botones el nombre de instancia correspondiente pasamos a regresar a la escena 1 en el cual arrastraremos el clip de película display que se encuentra en nuestra biblioteca

15.- Una ves arrastrado el clip de película hacia el fondo de igual forma colocaremos un nombre de distancia a nuestro clip de película display le pondremos nombre de instancia display.

14.- Ahora pasaremos a crear nuestro tiempo, insertamos un texto dinámico de color blanco con el nombre de instancia de tiempo y var: display sombree el clip de película display en la escena 1.

Nombre de Instancia: tiempo
Var: display

15.- Seleccionamos el texto dinámico creado y convertirlo en clip de película con la tecla F8 y con el nombre de tiempo, para luego ponerle un nombre de instancia de tiempo

16.- Perfecto ahora solo nos queda probar si funciona para eso agarramos un blog de notas y agregamos nuestra xml escribiendo este código en el blog de notas


17.- Guardamos el blog de notas con el nombre de lista.xml y en tipo todo los archivos

18.- Editamos la lista.xml con un blog de notas de igual forma, agregare una música que tengo en mi pc lo pegare en el escritorio es la música de Sandoval - A Quien Tu Decidiste Amar copio el nombre del mp3 y lo agrego en la lista.xml de esta manera lista="Sandoval - A Quien Tu Decidiste Amar.mp3" y en titulo pongo el nombre que deseas puede ser el de la misma canción normal cosa que nos quedaría de esta manera.


(OJO EL MP3 Y EL ARCHIVO .FLA TIENEN QUE ESTAR JUNTOS EN EL ESCRITORIO)

19.- Bueno paso a guardar ahora pasare a probar si funciona presiono Control + Enter para probar mi reproductor flash.

20.- Para ver si esta funcionando bien tiene que corre el tiempo como ves en la imagen de arriba, ahora si quieres agregar mas música a tu lista xml solo tienes que hacer copia no mas de esta manera.

VER VIDEO ( Parte 1 )

VER VIDEO ( Parte 2 )