domingo, 20 de mayo de 2007

Reproductor de Música en Flash

Que tal a todos, esta vez pongo a disposición un pequeño reproductor de música que realice en Flash, lo hice debido a que un compañero de salón me pidió ayuda porque no le salía, es decir, no le reproducía la canción, el que inicio realizando fue uno que incluyera dos procesos o sea Play y Pausa, me di a la tarea de agrandarlo un poquito más e incluirle procesos next, preview, stop y volumen, aunque no está del todo terminado le faltan varios detalles, espero completarlo en estos días.

Primero que nada definimos la interfaz que tendrá, utilice 3 capas una para el logo, líneas y palabras, otra para el marco y la ultima para los botones, las dos primeras se pueden utilizar en una sola capa solo que lo hice asi por que estaba iniciándolo sin saber cómo quedaría y preferí que se quedara asi, luego en una hoja en blanco de flash presionaremos Ctrl + F8 o F8 dependiendo de cómo aparesca en nuestra determinada versión, eso lo haremos para crear un símbolo nuevo y le ponemos tipo Movie Clip o Clip de Pelicula, en el momento se hara como un zoom pero en si es como otra hoja, ahí dibujaremos lo que serán nuestros botones, recomiendo hacer botón por botón y nombrarlo, luego que se tienen los botones ya listos se regresa a la hoja principal y se abre la biblioteca y ahí aparecerán todos nuestros botones, se arrastran a la hoja central y se le coloca un nombre diferente a cada uno en mi caso utilice Boton_btn, utilice hasta el 7 y listo, para el sonido, seleccionaremos el menú archivo e importaremos la opción es Import to Stage o Importar a la Etapa u Hoja, luego aparecerá en nuestra biblioteca, le damos clic secundario y seleccionamos la opción linkage como se muestra en la figura y activamos la primera casilla que dice export for actionscritp en ese momento se activaran los campos de texto y la tercera casilla, en el primer campo de texto escribiremos el nombre con el cual lo buscaremos en la biblioteca, de ahí pasando al código iniciaremos con mis variables a utilizar, las cuales tendrán cambios durante el funcionamiento del reproductor.

ControlM1

ControlM2

ControlM3

ControlM4

ControlM5

ControlM9

ControlM6

ControlM7

var pausa:Number = 0;

var estado:Number = 0;

/*-----------------------------Declaro las 2 variables que tendrán los dos sonidos y de ahí asigno el valor del sonido que se encontrara en la librería el cual importaremos y nombraremos con el nombre que este dentro de las comillas en este caso le puse Sonido y Sonido2------------------------------*/

_root.onLoad = function(){

misonido = new Sound();

misonido2 = new Sound();

misonido.attachSound("Sonido");

misonido2.attachSound("Sonido2");

}

Boton_btn2.enabled=false;

Boton_btn3.enabled=false;

Boton_btn4.enabled=false;

Boton_btn5.enabled=false;

/*---------------Para iniciar el proceso play lo manejaremos con las dos primeras variables que definimos “pausa” y “estado”, al ejecutar el reproductor no iniciara con nada entonces el estado se encontrara en 0 al presionarlo se comparara la condición con la variable y eso dara inicio al sonido, de ahí agregamos la función onSoundComplete que esto se activa cuando el sonido haya finalizado, en ese momento realizara lo que se encuentre dentro de el, en este caso agregue una impresión de sonido completo y de ahí le di detener al sonido y que a la vez me active el botón de play, esto lo hice porque al reproducirse el sonido cuando termina me desactiva el botón, asi que por eso lo activo, de ahí cuando quise reproducirla de nuevo ya no la iniciaba asi que dentro del mismo onSoundComplete agregue un onPress para que al cliquearlo después de terminado me la vuelva a iniciar, lo mismo puse para el sonido2, de ahí el estado lo iguale a 1 por que ya hay reproducción, el botón de play lo desactive, el de pausa lo active y el de stop lo active, de ahí desactivo los botones de pausa, stop, preview y next por que solo debería estar activado el play, y después de haber presionado el botón de play activo todos los demás botones y desactivo el play--------------*/

Boton_btn.onPress = function (){

if (estado == 0){

misonido.start(pausa/1000);

misonido.onSoundComplete = function() {

trace("Sonido Completo");

misonido.stop();

Boton_btn.enabled=true;

Boton_btn.onPress = function (){

misonido.start(pausa/1000);

}

}

misonido2.onSoundComplete = function() {

trace("Sonido Completo");

misonido2.stop();

Boton_btn.enabled=true;

Boton_btn.onPress = function (){

misonido2.start(pausa/1000);

}

}

estado = 1;

Boton_btn.enabled=false;

Boton_btn2.enabled=true;

Boton_btn3.enabled=true;

Boton_btn4.enabled=true;

Boton_btn5.enabled=true;

}

}

PAUSA

/* Este botón solo detendrá el sonido y mantendrá la posición de donde se quedo para volver a reproducirla en determinado momento

Boton Pausa ---------------------------------------*/

Boton_btn2.onPress = function (){

if (estado == 1){

pausa = misonido.position;

misonido.stop();

estado = 0;

Boton_btn.enabled=true;

Boton_btn2.enabled=false;

}

}

/* Aquí maneje la variable pausa para almacenar la posición del sonido, de ahí lo detengo y el estado lo regreso a 0 por que ya no hay nada reproduciéndose en el momento de presionar el botón, como toque extra activo el botón de play y desactivo el botón de pausa esto porque una vez que se presione pausa pues no debería volver a utilizarse pausa en ese momento */

STOP

/*--------Ahora con el Stop trate de darle la función de detener total, y ciertos puntos de validación sobre los botones en su manera de funcionar Boton Stop --------------------------------------------------*/

Boton_btn3.onPress = function (){

if (estado == 1){

misonido.stop();

misonido2.stop();

pausa = 0;

estado = 0;

Boton_btn.enabled=true;

Boton_btn2.enabled=false;

}

}

/*-------------------------- Lo que hice fue condicionar con la variable “estado” indicando que 1 está en reproducción y 0 esta sin reproducción, si se encuentra reproduciéndose me detendrá el sonido 1 o el sonido 2, literalmente estoy deteniendo los dos jejeje, pero bueno de ahí utilice de nuevo la variable pausa la cual contiene la posición del sonido en reproducción y lo que hice fue igualarla a 0 para que se resetee el sonido, regrese el estado a 0 el botón de play lo activo y el de pausa lo desactivo ya que presionando stop no debe poder pausarse. ---------------------------------------*/

/*Boton Preview utilice de nuevo el estado de reproducción, de ahí puse otra condición si el sonido2 se encuentra en reproducion, lo detendrá desactivara el botón de play para no iniciar otra canción e iniciara la canción 1 y si no es la 2 la que se está reproduciendo detendrá la uno e iniciara la 2---------------------------------------*/

Boton_btn4.onPress = function (){

if(estado == 1){

if(misonido2 == 1){

misonido2.stop();

Boton_btn.enabled=false;

misonido.start();

}

else

{

misonido.stop();

Boton_btn.enabled=false;

misonido2.start();

}

}

}

/*Boton Next Aquí hice lo mismo que en el preview solo invertido funciona de la misma manera---------------------------------------*/

Boton_btn5.onPress = function (){

if(estado == 1){

if(misonido == 1){

misonido.stop();

Boton_btn.enabled=false;

misonido2.start();

}

else

{

misonido2.stop();

Boton_btn.enabled=false;

misonido.start();

}

}

}

Pasando al Volumen

/*-------------Declaro el valor más alto que tendrá el volumen y sobre el cual trabajare tanto para bajar como para subir bueno ahora iniciaremos Boton Bajar Volumen ----------------------------------*/

vol = 100;

Boton_btn6.onPress = function (){

if(vol>0)

{

vol = vol - 10;

misonido.setVolume(vol);

trace(vol);

}

}

/*--------------------------Lo que indico con el código de arriba es que al presionar el botón de disminuir volumen tiene la condición de que si el volumen es más alto que cero detalle que es muy cierto, pasara a restarle 10 de los 100 y luego asignara el nuevo valor al sonido que se está reproduciendo y la última línea solo se encarga de imprimirme el valor que tiene el volumen cuando se presiono esta acción se repetirá las 10 veces que se puede presionar ahora pasaremos a Boton Subir Volumen ---------------------------------------*/

Boton_btn7.onPress = function (){

if(vol<=90)

{

vol = vol + 10;

misonido.setVolume(vol);

trace(vol);

}

}

/* -----------------------------Tiene un gran parecido con el bajar volumen lo único que cambia es la condición que indica que mientras el volumen sea menor o igual a 90, le sumara 10 al volumen, se lo asignara al sonido en reproducción y de ahí me imprimirá el valor de volumen----------------------*/

Asi deberia de quedar al final y aqui les dejo el link para descargarlo dan clic y esperan unos segundos a que se active la descarga no pude subir el archivo FLA debido a que mide 45 megas y pues es muy pesado: Control Musica

ControlM8

El reproductor tienes varios errores, pero por algo se empieza sé que hay errores básicos pero fueron las primeras ideas que se me ocurrieron que corregiré más adelante decidí publicarlo para ver qué opinan sobre él, que sería bueno agregarle o quitarle, como ven el diseño? que no les gusta y que si, estaré esperando sus comentarios, para ir mejorándolo mas, tambien quisiera comentarles que no soy experto en esto ni en como redactar un programa, asi que perdonen si no me explico bien en el mismo, pero agradeceria a la gente que me diga en que estoy mal para corregirlo.

3 comentarios:

DaHouseCat dijo...

Ahí va! toca pasarse a Flash CS3 tiene muuuy buenas funciones! hay una clase que analiza el espectro de la canción y te da los valores, así puedes hacer una animación que siga el ritmo ahí vamos probado ^^

Anónimo dijo...

muy buen post el UNICO problemita es que no puedo realizarlo en mi flash, y el .swf que tienes ahi no puedo importarlo a flash para conocer el .fla, es que todo el action sobre las funciones del boton como que si funcionan bien, el problema es que NO SE ESCUCHA NADA y ya le puse a las dos rolas las instancias de "sonido y sonido2" tal cual está en tu tutorial, y escribi todo ese action en el frame de los BOTONES, pero no se escucha el audio cuando lo reproduzco, no se si me puedes ayudar!

Grunin Oh dijo...

Buenas!
Estava buscando hace tiempo como hacer un reproductor en flash y gracias a ti lo he podido hacer, muchas gracias, ahora ya voy mejorando^^
Ademas esta todo muy bien explicado, sobretodo en el código, weno que felicidades por el tuto^^