Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/09/2005, 00:45
Avatar de jahepi
jahepi
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Querétaro
Mensajes: 1.124
Antigüedad: 15 años, 11 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 11:17