Cómo crear un Player MP3 con Flash

03 de noviembre de 2011
Valoración del artículo:
En este tutorial os vamos a mostrar como crear un player MP3 con el programa flash.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

Para crear el player mp3 en flash, tendremos que realizar 3 pasos:

Primero crear una carpeta que se llame música, y dentro insertar las canciones que queramos reproducir.

Segundo, crear un archivo XML, para ello lo que debemos hacer es abrir un documento de texto en el bloc de notas, aquí lo que debemos hacer es escribir los títulos exactos de las canciones que queremos que se reproduzcan en nuestro archivo de mp3, esto debe ir escrito entre etiquetas, de la siguiente manera.

<lista>
<cancion>Tema1.mp3</cancion>
<cancion>Tema1.mp3</cancion>
</lista>

Debemos guardar este archivo con el nombre de lista.xml en la misma raíz donde tengamos la carpeta música, (no olvidéis poner la extensión .xml).

El Tercer paso que debemos realizar es abrir nuestro programa Flash, una vez abierto debemos ir a Menú/Archivo/Nuevo, nos aparecerá una ventana emergente y tendremos que seleccionar la opción Documento de Flash. Una vez abierto el nuevo documento debemos ir a Menú/Modificar/Documento (Ctrl + J), nos aparecerá una nueva ventana en la cual debemos poner las dimensiones con las que queremos trabajar, en nuestro caso las dimensiones que hemos decidido poner han sido 550 x 202 px.

Una vez hecho esto debemos ir a Menú/Ventana/Componentes, y seleccionamos esta opción, nos aparecerá una nueva ventana con varias opciones.

En la ventana componentes, desplegamos la opción Media Player, y una vez dentro de este apartado debemos arrastrar la opción Media PlayBack a la escena.

El siguiente paso será clickar en Menú/Ventana/Inspector de componentes, nos aparecerá automáticamente una ventana, en la cual debemos cambiar algunos valores, tenemos que seleccionar la opción Mp3 y en la opción de control de visibilidad debemos darle a "ON".

A continuación debemos ir a propiedades, y donde pone "nombre de instancia" escribimos la palabra player, ya que posteriormente cuando apliquemos el código JavaScript lo asociaremos con ese nombre de instancia.

Lo siguiente será ir a la ventana de Componentes que se nos abrio antes, desplegamos la pestaña User Interface y arrastramos la opción List hacia la escena.

Después de esto debemos cambiar de nuevo el nombre de instancia, para ello volvemos a ir a propiedades y añadir el nombre de "lista".

Por ultimo lo que debemos hacer será copiar el siguiente código en el primer fotograma, para ello seleccionamos el fotograma y pinchamos en acciones (F9). Nos aparecerá una ventana en blanco donde debemos pegar el código que os dejamos a continuación;

import mx.controls.List;
import mx.controls.MediaPlayback;
//Cargamos el XML
canciones = new XML();
canciones.ignoreWhite = true;
canciones.onLoad = function(success) {
if (success) {
//Shortcuts
cancion = canciones.firstChild;
num_total = canciones.firstChild.childNodes.length;
//Creamos y llenamos la lista
crearLista();
//Creamos el reproductor
crearPlayer();
} else {
trace
("No se pudo cargar la lista de canciones");
}
};
canciones.load("lista.xml");
///////////////////////////////////////////////////////////////////
/////////////////////////// LISTENERS ///////////////////////////
///////////////////////////////////////////////////////////////////

lista.addEventListener("change", alCambiar);
///////////////////////////////////////////////////////////////////
/////////////////////////// FUNCIONES ///////////////////////////
///////////////////////////////////////////////////////////////////

function crearLista() {
//Posicionamos la lista de las canciones
lista.setSize(180, 200);
lista._x = 220;
lista._y = 0;
//Llenamos la lista con las canciones
misDatos = new Array();
lista.dataProvider = misDatos;
for (var i = 0; i<num_total; i++) {
misDatos.addItem({label:cancion.childNodes[i].firstChild,
data:cancion.childNodes[i].firstChild});
}
}
function crearPlayer() {
//Posicionamos el reproductor
player.setSize(200, 200);
player._x = 0;
player._y = 0;
//Propiedades del reproductor
player.controllerPolicy = "on";
player.mediaType = "MP3";
}
//Cuando cambiamos la canción seleccionada en la lista... cargamos la nueva canción, y ejecutamos
function alCambiar(evento) {
if (evento.type == "change") {
player.setMedia("musica/"+lista.selectedItem.data, "MP3");
player.play();
}
}

Después de esto debemos guardar el archivo .flash y posteriormente publicarlo, (Menú/Archivo/Publicar), para obtener el archivo .swf, que colocaremos en la misma carpeta donde tengamos el xml y la carpeta música, con nuestras canciones.

Pincha aquí para descargar las Fuentes.

Comentarios

Los comentarios de los visitantes son para ampliar la
información del artículo. Cualquiera puede participar.

Añadir un comentario al artículo Publicar un comentario del artículo

Mostrando 2 comentarios revisados

 Componentes
24/11/11 

Comentario de Arturo Córdoba:

En primer lugar BUEN TRABAJO, me ha servido de mucho para entender algunos razonamientos de Flash y AS. No se si estoy equivocado pero el componente Media solo está disponible si abrimos el documento en modo Action Script 2. Un saludo


 pregunta?
17/11/11 

Comentario de android:

oigan haber si alguien me ayuda estaba realizando el ejercicio todo iba bien hasta cuando hay q abrir los componentes para seleccionar el media playback lo q sucede q no me aparece ese complemento como le hago para visualizarlo ,porque solo aparecen los de video y es no


Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 2 comentarios sin revisar




El autor
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...