Foros del Web » Creando para Internet » Flash y Actionscript »

Como hacer tu propio reproductor Flash

Estas en el tema de Como hacer tu propio reproductor Flash en el foro de Flash y Actionscript en Foros del Web. Hola, primero que nada un grato saludo a toda la comunidad flashera. Lo que presento aquí es un pequeño y sencillo tutorial de cómo realizar ...
  #1 (permalink)  
Antiguo 24/09/2005, 23:45
Avatar de jahepi
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Querétaro
Mensajes: 1.124
Antigüedad: 15 años, 10 meses
Puntos: 43
Información Como hacer tu propio reproductor Flash

Hola, primero que nada un grato saludo a toda la comunidad flashera.

Lo que presento aquí es un pequeño y sencillo tutorial de cómo realizar un reproductor de flash propio, con las siguientes características.

a) Botones de volumen ajustables
b) Botones para retroceder y avanzar
c) Barra de progreso de la canción mp3
d) Precarga de la canción mp3
c) Botón de pausa


A continuación voy a explicar el código que conforma este reproductor con la finalidad de que no quede ninguna duda con respecto a su funcionamiento, y más adelante otras personas ajenas a este trabajo lo puedan incluso mejorar, lo cual sería genial!!!


Aquí dejo el enlace REPRODUCTOR del trabajo para que lo descarguen y sea más fácil seguir este pequeño tutorial.

Primero vamos a crear 2 arreglos que contendrán la ubicación de los mp3’s y los títulos, La variable rolas contiene todos los mp3´s a incluir y la variable titulos contiene los respectivo títulos de la canción.

Código PHP:
//Arreglo con los mp3's...
rolas = ['cancion1.mp3''cancion2.mp3'];
//Arreglo con los títulos de los mp3's...
titulos = ['Rock''Blues']; 
Ahora tenemos que especificar todas las variables de configuración inicial de nuestro reproductor, como ven, tendremos que crear 2 campos dinámicos con nombres estado y volumen_q, aparte de crear 4 movieclips llamadas arriba, abajo, atrás, parar.
Para cualquier duda, el enlace del fla esta arribita.

Código PHP:
//Volumen Inicial...
volumen 60;
//Desplegar el estado del mp3 en un campo dinámico...
this.estado.text "Cargando rola...";
//Desplegar el volumen del mp3 en un campo dinámico...
this.volumen_q.text volumen+" Vol.";
//Deshabilitar botonería...
this.arriba.useHandCursor false;
this.abajo.useHandCursor false;
this.atras.enabled false;
this.parar.enabled false;
//Variables con el número de canciones...
numeroDeCanciones rolas.length-1;
//la canción actual...
cancionActual 0
Ahora vamos a crear nuestro Objeto sound, lo llamaremos canciones.

Código PHP:
canciones = new Sound(); 
Agregamos 2 eventos muy importantes de nuestro objeto sound, el evento onLoad que se invocará cuando el mp3 se haya descargado completamente y el evento onSoundComplete que se invocará cuando el sonido haya terminado su reproducción.

Código PHP:
//Evento que se ejecuta al terminar la carga de un mp3...
canciones.onLoad = function(si) {
    if (
si) {
        
//Borra el evento que calcula el tamaño descargado del mp3...
        
delete (this.onEnterFrame);
        
//Variable que calcula el tamaño del archivo mp3...
        
total Math.round(canciones.getBytesTotal()/1024);
        
_root.bytes.text total+" kb cargados";
        
_root.estado.text titulos[cancionActual];
        
//Aplicar volumen inicial...
        
canciones.setVolume(volumen);
        
//Iniciar reproducción...
        
canciones.start(01);
        
//Habilitar boton de parado...
        
parar.enabled true;
        
//Elimina intervalo de la función que calcula la duración
        //de la música...
        
clearInterval(segundero);
        
//Resetear el tiempo a 0...
        
tiempoT 0;
        
//Empezar de nuevo el intervalo...
        
segundero setInterval(empezarTiempo1000);
    }
};
//Evento que se invoca al final de cada reproducción...
canciones.onSoundComplete = function() {
    
//Elimina intervalo de la función que calcula la duración
    //de la música...
    
clearInterval(segundero);
    
//Resetear el tiempo a 0...
    
tiempoT 0;
    
//Deshabilitar botón de stop...
    
_root.parar.enabled false;
    
//Lleva el control del siguiente mp3 a reproducir
    //Si la condición no se cumple se regresa al primer Mp3...
    
if (cancionActual<numeroDeCanciones) {
        
cancionActual += 1;
        
_root.estado.text "Cargando rola...";
    } else {
        
cancionActual 0;
    }
    
//Habilitar botón de atras...
    
_root.atras.enabled true;
    
//Se llama a la función precarga...
    
precargar();
}; 
Ahora vamos a añadir los eventos de nuestros botones de aumentar y reducir volumen.

Código PHP:
//Acción de los botones de volumen...
//Aumentar volumen...
this.arriba.onRollOver = function() {
    
this.onEnterFrame = function() {
        if (
volumen>=100) {
            
delete (this.onEnterFrame);
        } else {
            
volumen++;
            
canciones.setVolume(volumen);
            
_root.volumen_q.text volumen+" Vol.";
        }
    };
};
//Disminuir Volumen...
this.abajo.onRollOver = function() {
    
this.onEnterFrame = function() {
        if (
volumen<=1) {
            
delete (this.onEnterFrame);
        } else {
            
volumen--;
            
canciones.setVolume(volumen);
            
_root.volumen_q.text volumen+" Vol.";
        }
    };
};
this.arriba.onRollOut = function() {
    
delete (this.onEnterFrame);
};
this.abajo.onRollOut = function() {
    
delete (this.onEnterFrame);
}; 
Lo siguiente es especificar de nuevo los eventos de nuestros botones pero ahora el de adelante y atrás, para navegar a través de las canciones disponibles.

Código PHP:
//Acción de botones adelante y atras...
this.atras.onPress = function() {
    
_root.adelante.enabled true;



    if (
cancionActual == 0) {
        
this.enabled false;
    } else {
        
_root.parar.enabled false;
        
cancionActual -= 1;
        
_root.parar.gotoAndStop(1);
        
_root.estado.text "Cargando rola...";
        
precargar();
    }
};
this.adelante.onPress = function() {
    
_root.atras.enabled true;
    if (
cancionActual == numeroDeCanciones) {
        
this.enabled false;
    } else {
        
_root.parar.enabled false;
        
cancionActual += 1;
        
_root.parar.gotoAndStop(1);
        
_root.estado.text "Cargando rola...";
        
precargar();
    }
}; 
Falta especificar la acción del botón parar, es muy importante notar que dentro de este movieclip con el nombre de instacia parar, tiene otros 2 frames interiores, el primer frame tiene el siguiente código, que nos indica que la música no esta en pausa.

Código PHP:
stop();
parado false
El Segundo frame interno dentro del movieclip parar nos indica que la música esta en pausa.

Código PHP:
stop();
parado true
Ahora de Nuevo en nuestro script de la línea de tiempo principal, especificamos el evento del botón parar.

Código PHP:
//Acción de botones stop y start...
this.parar.onPress = function() {
    
//Si la propiedad parado es falsa...
    
if (!this.parado) {
        
//Cancelamos el intervalo del segundero...
        
clearInterval(segundero);
        
//Vamos al segundo frame del movieclip parar...
        
this.gotoAndStop(2);
        
//Paramos la reproducción del mp3 actual...
        
canciones.stop();
    } else {
        
//Iniciamos de nuevo el segundero...
        
segundero setInterval(empezarTiempo1000);
        
//Iniciamos la reproducción del mp3 actual en el último tiempo registrado 
        //en la variable tiempoT<-tiempo transcurrido...
        
_root.canciones.start(tiempoT-11);
        
//Vamos al primer frame del movieclip parar...
        
this.gotoAndStop(1);
    }
}; 
Ya casi para terminar, creamos una función que llevará el registro de la duración del mp3 y eso traducirlo al tamaño de una barra de progreso.

Código PHP:
function empezarTiempo() {
    
//Calculo de la duración del mp3 en segundos...
    
duracion Math.round(canciones.duration/1000);
    
//Tiempo transcurrido del mp3...
    
tiempoT++;
    
//Tamaño de la barra de progreso según el tiempo transcurrido...
    
_root.barra._xscale tiempoT*100/duracion;

Por ultimo creamos nuestra function que precargará nuestros mp3´s y la llamamos.

Código PHP:
//Funcion precargadora de canciones...
function precargar() {
    
this.onEnterFrame = function() {
        
//Cálculo del tamaño y los kilobytes descargados...
        
total Math.round(canciones.getBytesTotal()/1024);
        
loadC Math.round(canciones.getBytesLoaded()/1024);
        
//Mostrar estado del tamaño y kb descargados en el campo dinámico bytes...
        
_root.bytes.text loadC+"kb de "+total+"kb";
    };
    
//Carga mp3...
    
canciones.loadSound(rolas[cancionActual], false);
}
precargar(); 
Sale, eso sería todo, ojalá les haya gustado este humilde tutorial.

Un saludo a todos y…

Suerte!!!
__________________
Una contraseña es como la ropa interior. No deberías dejarlas afuera a la vista de otras personas, deberías cambiarla regularmente, y ni se te ocurra prestarla a extraños.

Última edición por jahepi; 25/09/2005 a las 10:17
  #2 (permalink)  
Antiguo 25/09/2005, 14:55
Avatar de SAPINTO  
Fecha de Ingreso: junio-2005
Ubicación: just another fucked up pl
Mensajes: 777
Antigüedad: 15 años, 4 meses
Puntos: 0
buena jahepi, excelente tutorial
__________________
if(user=="female" && user>="hot"){
user.gotoAndStop("sapinto's bed");
}
mi portafolio
  #3 (permalink)  
Antiguo 25/09/2005, 15:57
Avatar de jahepi
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Querétaro
Mensajes: 1.124
Antigüedad: 15 años, 10 meses
Puntos: 43
Hola Sapinto!!

Muchas gracias por el comentario
Retoque un poco el código del anterior que había posteado en el tema que llegaste a poner "Streaming...", porque tenía unas líneas de código que tenían otra finalidad , pero bueno ya esta modificado y listo para usarse y mejorarse

Suerte!!!
__________________
Una contraseña es como la ropa interior. No deberías dejarlas afuera a la vista de otras personas, deberías cambiarla regularmente, y ni se te ocurra prestarla a extraños.
  #4 (permalink)  
Antiguo 24/04/2008, 06:51
 
Fecha de Ingreso: abril-2008
Mensajes: 2
Antigüedad: 12 años, 5 meses
Puntos: 0
Re: Como hacer tu propio reproductor Flash

ke onda!!!

Oye tengo una duda referente al reproductor... Puedo hacer q reproduzca la musica que yo quiera al momento sin la necesidad de poner artistas o listas precargadas, por ejemplo tengo una pagina d entretenimiento y deseo ke el usuario cuando encuentre un artista especifico pueda reproducir su musik o la cancion exacta que el quiera, cómo lo puedo hacer??????????????????

AYUDAME POR FA ES URGENTE QUE HAGA ESTE REPRODUCTOR!!!!
  #5 (permalink)  
Antiguo 02/06/2008, 19:58
 
Fecha de Ingreso: mayo-2008
Mensajes: 2
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Como hacer tu propio reproductor Flash

Hola Yo tengo una radio web

RADIO LA RIOJA

http://radiolarioja.blogspot.com
Para escucharla en winamp es http://alekk.webhop.biz:8000/listen.pls

Lo que necesito es un reproductor para que cualquiera que entre en la página la pueda escuchar. Si saben me avisan. Que no sean los de Windows media player ni real player porque no los tengo.
  #6 (permalink)  
Antiguo 10/09/2008, 21:19
 
Fecha de Ingreso: septiembre-2008
Mensajes: 1
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Como hacer tu propio reproductor Flash

Amigo por alguna razon el link que pusiste para el reprouctor me manda a una pagina de yahoo que me dice que la pagina no fue encontrada, ojala puedas comentrame ocmo poder bajar el archivo y muchas gracias por este tuto que espero me funcione a la perfeccion
  #7 (permalink)  
Antiguo 16/06/2009, 13:38
 
Fecha de Ingreso: mayo-2008
Ubicación: Palamós
Mensajes: 26
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Como hacer tu propio reproductor Flash

Me haría mucha falta el archivo del reproductor ya que he seguido los pasos del tutorial y tengo algunos problemas. Podrías colgarlo en otro servidor?

Un saludo y gracias de antemano.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:08.