27 diciembre 2008

Lista de reproducción de MP3s



Vamos a ver, paso a paso, cómo crear un reproductor de mp3s, similar a éste con el programa Flash.

01.- Creamos en nuestro servidor una carpeta para colocar los archivos. Con el nombre que queramos. En mi caso, la he llamado lista_mp3_flash.
02.- Creamos dentro de esa carpeta, una subcarpeta con el nombre mp3.
03.- Alojamos dentro de esa subcarpeta todos los archivos mp3 que queramos que se oigan en nuestro reproductor. En mi caso, he colocado cinco romances.
04.- Abrimos nuestro Flash Professional, en mi caso Adobe Flash Professional CS4 y creamos un nuevo documento compatible con AS2 (Action Script 2).
05.- Arrastramos al escenario un componente MediaPlayback y le ponemos como nombre de la instancia reproductor.

Y, teniendo seleccionado el componente, configuramos sus parámetros (Ventana > Inspector de componentes) según la imagen:
06.- Arrastramos un componente de tipo lista ( User Interface > List). Lo colocamos encima del reproductor y le ponemos como nombre de instancia temas_list.

07.- Arrastramos dos componentes de tipo etiqueta (User Interface > Label) y les ponemos como nombre de instancia total_lb (pondrá dinámicamente el número de temas musicales) y titulo_lb (pondrá dinámicamente el nombre del tema, el autor...). Los colocamos en el sitio que deseemos.
08.- En el fotograma primero de la línea de tiempo, escribimos este código:
stop();
System.useCodepage = true;
XML.prototype.ignoreWhite = true;
_global.style.setStyle("fontSize",10);
temas_list.vScrollPolicy = "off";
var array_temp:Array = new Array();
var lista_xml:XML = new XML();
lista_xml.onLoad = cargarLista;
function cargarLista():Void {
array_temp = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
total_lb.text = array_temp.length+" temas";
for (var k:Number = 0; array_temp[k]; k++) {
temas_list.addItem(array_temp[k].attributes.tema);
}
cargarMP3(0);
}
}
function cargarMP3(indice:Number):Void {
_root.tema_actual = indice;
titulo_lb.text = array_temp[indice].attributes.title;
reproductor.setMedia("mp3/"+array_temp[indice].attributes.tema,"MP3");
reproductor.play(0);
}
var listenerObject:Object = new Object();
listenerObject.complete = function(eventObj:Object) {
_root.tema_actual++;
if (_root.tema_actual>=array_temp.length) {
_root.tema_actual = 0;
}
cargarMP3(_root.tema_actual);
};
reproductor.addEventListener("complete",listenerObject);
lista_xml.load("lista.xml");
09.- Seleccionamos el componente lista (el temas_list) y le colocamos este código:
on (change) {
_root.cargarMP3(this.selectedIndex);
}

10.- Hacemos los ajustes de tamaño correspondientes entre el escenario y el componente.
Yo también he creado un botón para impedir la reproducción automática. La forma de hacer esto ya se ha explicado en este blog...
Guardamos y exportamos como película swf. Le ponemos como nombre, por ejemplo, reproductor.swf.
11.- Por otro lado, tenemos que crear un documento xml con la lista de reproducción y los parámetros de tema y title que queremos que se muestren.
En mi caso, éste es el contenido del documento xml que hay que guardar con el nombre lista.xml
12.- Subimos a nuestra carpeta del servidor, a la lista_mp3_flash, el reproductor.swf y la lista.xml.
13.- Publicamos en nuestro blog por medio de un iframe.
Averiguamos primero la URL del archivo reproductor.swf e insertamos el iframe:

<iframe src="http://_loquesea_reproductor.swf" width="300" height="250" frameborder="0"></iframe>

Este artículo se lo debo a tutoriales-flash.com donde podrás encontrar muchos otros tutoriales.

16 diciembre 2008

Reproductor de audio de Jeroen Wijering personalizado




Seguramente muchos de los lectores de este blog conozcan mi Antología Poética Multimedia.
Allí tengo un reproductor múltiple de mp3s obra de Jeroen Wijering.
En un momento determinado, Jeroen puso a disposición de todos los internautas el archivo editable, el .fla
Esto permite hacer personalizaciones a dicho reproductor.
Entre otras, introducir una imagen.
En este ejemplo, he colocado una imagen de Federico García Lorca en concordancia con las poesías musicadas que se han elegido.
La imagen (340 x 200) se importa a la biblioteca.
Después la arrastramos al escenario para convertirla en símbolo gráfico.
Una vez como símbolo la colocamos en la capa que nos vaya bien y reducimos su visibilidad, el alfa, hasta un límite que nos guste.

Gracias a César Poyatos.
Descargar archivos comprimido con el .fla editable (para Windows y MAC).

07 agosto 2008

Reproductor de un clip de vídeo flv


Los formatos flv (flash vídeo) son los más comunes en internet.
Casi todos los servidores de vídeo (YouTube, Dailymotion,...) transforman el vídeo original, del formato en que los usuarios lo hayan creado (avi, wmv,...), al formato flv. Después, para poder ser leído, el equipo deberá tener el Flash Player instalado.
Pues bien, vamos a crear en Flash un reproductor de vídeo en formato flv.
Para ello deberemos tener el vídeo, en primer lugar, y subirlo a un servidor que nos proporcione la URL limpia.
Una vez hecho esto, procedemos de forma muy similar al reproductor de mp3 que hemos visto en la entrada anterior.
Creamos un nuevo archivo de flash y añadimos el componente MediaPlayback. Ventana > Componentes:



Una vez hecho esto, seleccionamos la instancia que se habrá colocado en nuestro escenario y vamos a Ventana > Inspector de componentes:



Allí elegimos algunas de las opciones. Por ejemplo, que es un FLV, pegamos la URL, desactivamos la opción de reproducción automática y el Control Visibility lo ponemos en On.
Por último ajustaremos el tamaño de nuestro escenario al tamaño del reproductor en el panel de propiedades:



Éste es el resultado:

26 julio 2008

Reproductor de un mp3


Retomamos la edición de nuevas entradas.
Ya no va a ser con una película...
Hemos madurado un poco ;-)
Veamos cómo crear un reproductor.
Estamos en Macromedia Flash 8.
Creamos un nuevo documento de flash.
Modificamos el documento a una medida de 300.1 x 80 píxeles.
Le damos a Ventana > Componentes y allí elegimos (con doble clic) el MediaPlayback:



Modificamos el tamaño de la altura que viene por defecto (200) a 80 píxeles:



Arrastramos el componente hasta hacerlo coincidir con el escenario. O, si lo prefieres, colocas las coordenadas a 0:



Ahora le damos a Ventana > Inspector de componentes. Elegimos MP3, colocamos la URL en la que se encuentra nuestro archivo mp3, deseleccionamos el Autoplay y el Control Visibility lo ponemos en On.



Guardamos nuestro .fla con el nombre que queramos y exportamos la película con los parámetros que vienen por defecto.
Éste es el resultado:


"Que no se despierte" de Agustín García Calvo interpretado por Amancio Prada.

04 mayo 2008

De momento, a salvo


Parece que CastPost ha resucitado.
De momento pues, estamos salvados.
Me ha dado tiempo a recuperar a mi disco duro los archivos alojados en este servidor y que forman el grueso de los materiales enlazados desde el blog.
En caso de nueva catástrofe, no es demasiado difícil la recuperación.
Por otro lado, he actualizado el blog a la nueva versión de Blogger.
La versión en la que se creó este blog hacía tiempo que ya no estaba operativa y se producían algunos problemillas que ahora, creo, ya están resueltos.
A la espera de un poco más de tiempo para poder ir creando nuevas entradas (ya con la versión nueva de Flash, el Adobe Flash CS3), podéis echar un vistazo a alguna de las explicaciones que he hecho sobre el lenguaje ActionScript en mis materiales publicados en El Observatorio Tecnológico del CNICE.
Gracias a todos por vuestra atención.

06 mayo 2007

Problemas en el blog


Todos (la mayoría de) los archivos de flash que se muestran en cada una de las entradas de este blog, están alojados en CASTPOST. Este servidor no ha funcionado bien nunca. Pero lo que está pasando ahora es nuevo. Parece que se ha caído completamente.
Espero que se resuelvan los problemas en breve.
La solución pasa por alojar los archivos .swf en otro servidor.
Lo que ocurre es que no hay tantos... que permitan subir archivos de más de 10 MB , pero, lo más grave, es que no guardo copia de ninguna de las películas originales...
Cruzaremos, pues, los dedos...

29 enero 2006

Paso_012. Texto completándose



En este paso hemos querido explicar, fundamentalmente, la forma de conseguir que un determinado texto se vaya completando. La clave está en escribir el texto completo, copiarlo en los fotogramas claves y, posteriormente, separarlo. Así conseguimos poder eliminar las letras que sean necesarias para conseguir este efecto de escritura. Por debajo de este texto hemos colocado imágenes que se visualizan una detrás de otra. Podría ser considerado el ejercicio como un Visor de imágenes. Se ha añadido un stop en el primer fotograma para que la acción no empiece hasta que pulsemos el botón, editado como invisible, aunque se ha colocado un texto que se visualiza al colocar el cursor sobre él. El botón ocupa todo el escenario. Ver película explicativa.