Carga de sonidos y visualización del espectro en Actionscript 3.0

Etiquetas: SoundChannel Sound ByteArray computeSpectrum

Con AS3 podemos visualizar el espectro de sonido de un audio. Con unas pocas lineas de código, podemos hacer cosas impensables con anteriores versiones del lenguaje. Este es el resumen del código:

-Creo un objeto de tipo Sound() y cargo en él archivo mp3:

 
sonido = new Sound(); 
var request:URLRequest = new URLRequest(url); 
sonido.addEventListener(Event.COMPLETE, sonidoCargado);
sonido.load(request);
 

-Programo la carga para que cuando termine se ejecute la función sonidoCargado. En esta función reproduzco el sonido (canal = sonido.play(0,1000);) y añado un evento para que se pinte el espectro de sonido (addEventListener(Event.ENTER_FRAME,mover)).

-La función mover es la encargada de "Pintar" el espectro. El espectro se almacena en la variable arrayMixer en forma de matriz de bits. Los elementos de esta matriz pueden ser 1 o 0. Resumiendo, podemos decir que cuantos más 1 haya, más "alto suena el sonido". Recorro la matriz y sumo todos esos 1, para ver como de grande tengo que pintar la barra de volumen. Cuando tengo ese valor lo almaceno en la matriz de volúmenes. Depués de esto, recorro toda la matriz de volúmenes y pinto una barra para cada valor almacenado.

El código completo:

 
package {
	import flash.display.*;
	import flash.events.*;
	import flash.media.*;
	import flash.utils.ByteArray;
	import flash.net.*;
	public class CargadorSonidos extends Sprite {
		var url:String = "sonido.mp3";
		var canal:SoundChannel;
		var sonido:Sound;
		var fourierTransform:Boolean = false;
		var arrayMixer:ByteArray = new ByteArray();
		var volumenes:Array = new Array();
		public function CargadorSonidos():void {
			cargarSonido();
		}
		function cargarSonido():void {
			SoundMixer.stopAll();
			sonido = new Sound();
			var request:URLRequest = new URLRequest(url);
			sonido.addEventListener(Event.COMPLETE, sonidoCargado);
			sonido.load(request);
		}
		function sonidoCargado(event:Event):void {
			canal = sonido.play(0,1000);
			addEventListener(Event.ENTER_FRAME,mover);
		}
		function mover(e:Event):void {
			SoundMixer.computeSpectrum(arrayMixer, true);
			var c = 0;
			for (var i = 0; i < arrayMixer.length; i++) {
				c += arrayMixer[i];
			}
			volumenes.push(c);
			if (volumenes.length > 400) {
				volumenes.splice(0,1);
			}
			graphics.clear();
			graphics.lineStyle(1, 0x000000);
			graphics.beginFill(0x000000);
			for (var j = 0; j < volumenes.length; j++) {
				graphics.lineTo(j,100+volumenes[j]/1200);
				graphics.lineTo(j,100-volumenes[j]/1200);
				graphics.moveTo(j,100);
			}
			graphics.lineTo(volumenes.length,100);
			graphics.lineTo(0,100);
		}
	}
}
 

Demo de navegación con cubos en Papervision GreatWhite

Etiquetas: API Flickr GreatWhite

Esta es una demo de navegación en 3D, y utiliza Papervision GreatWhite y la API de Flickr.

La demo, que carga las fotos de Lola, se puede ver aquí.

Fichero crossdomain: Carga de archivos desde otro servidor

Etiquetas: crossdomain

Por limitaciones de seguridad, Flash player no permite cargar archivos (jpg, swf, etc..) de otros dominios, a menos que en el servidor que almacena los archivos haya un fichero que indique que el dominio que solicita la carga es de confianza. Este fichero de configuración es "crossdomain.xml", y en él se pueden indicar qué dominios queremos que puedan acceder a los archivos que se alojan en nuestro servidor.

Por ejemplo si tenemos unas fotos almacenadas en el servidor A y queremos cargarlas en nuestra página hecha en Flash alojada en el servidor B, tendremos que poner en A un fichero crossdomain que indique que el servidor A es de confianza. Un ejemplo de fichero crossdomain seria:

 
<cross-domain-policy>
	<allow-access-from domain="www.esedeerre.com"/>
	<allow-access-from domain="www.google.com" />
</cross-domain-policy>
 

En él estamos diciendo que permitimos las cargas de archivos de nuestro servidor para todas las peticiones hechas desde los dominios www.esedeerre.com y www.google.com. También podemos marcar todos los dominios como permitidos de esta forma:

 
<cross-domain-policy>
	<allow-access-from domain="*" />
</cross-domain-policy>
 

Un ejemplo de este tipo de fichero crossdomain, podemos verlo en los servidores de Flickr, que contienen estos archivos para permitir cargas de fotos desde otros dominios por medio de su API. Cuando Flash hace una carga de un archivo alojado en otro dominio, busca en este dominio el fichero "crossdomain.xml", y si no lo encuentra, no permite la carga del archivo.

Utilizar un joystick en juegos o aplicaciones flash

Tenemos dos maneras de hacerlo:

-Utilizando Joykey. Este programa transforma los movimentos del joystick en eventos de teclado. Es decir, programamos el flash como si fueramos a usar teclas, y luego configuramos este programa para que genere los eventos de las teclas que queremos utilizar.

-Utilizando un joystick que genere eventos de teclado. Esta creo que es la mejor opción si tenemos que programar una aplicación que va a estar de cara al público y se maneja con joystick: encargar a alguna empresa de electrónica que nos construya un joystick "a medida" y se comporte como el programa necesite.

Deshabilitar caché al cargar archivos dinámicamente desde Flash

Etiquetas: loadMovie movieClipLoader Loader

Si cargamos un archivo de forma dinámica en Flash (ya sea en Actionscript 2.0 por medio de loadMovie o movieClipLoader, o en Actionscript 3.0 por medio de un Loader o similar),veremos como el navegador cachea el archivo haciendo que la segunda vez y siguientes cargue "instantáneamente". Esto puede ser ventajoso en muchos casos, pero en sitios dinámicos puede ocurrir que el usuario no aprecie cambios realizados porque está viendo la versión cacheada en su navegador. También en fase de testeo es recomendable evitar la caché, para hacernos una idea de cuál es el tiempo real de carga de la web. La manera de evitar caché, es añadiendo una variable con valor aleatorio a la url del archivo que vamos a cargar, ya sea por medio de random() (Actionscript 2.0) o Math.random() (Actionscript 3.0)

Creada la lista de correo de SdR

He creado un formulario de suscripción a esedeerre aquí. Cada vez que se publique un post que crea que puede ser de interés, mandaré un correo a toda la lista.

Papervision: Almacenar variables en elementos 3D

Etiquetas: InteractiveScene3DEvent InteractiveColorMaterial extra interactiveSceneManager renderCamera

Los elementos que heredan de displayObject3D, tiene una propiedad llamada extra en la que podemos almacenar variables por medio de un objeto. Por ejemplo si tenemos varios planos en 3D y queremos saber sobre cuál estamos haciendo click, creamos un objeto para cada uno, lo almacenamos en su propiedad "extra", y después en la función que recoge el evento click, accedemos a la variable que hemos guardado. Aquí vá un ejemplo de como hacerlo:

3 maneras de representar la información en Papervision

Etiquetas: Camera3D renderCamera ColorMaterial Tweener lookAt

Más allá de las modas, el futuro de la web debería estar en sitios como este, que aprovechan los motores 3D para mostrar información de manera clara en pantalla.

Aquí va una pequeña demo en PPV, que muestra 3 formas de representar información en 3D:

Ver demo Papervision

Materiales animados en Papervision 1.7

Etiquetas: Scene3D FreeCamera3D MovieAssetMaterial animated oneSide renderCamera

Para hacer materiales animados en Papervison 1.7, usamos el atributo animated de los materiales. Este código muestra como hacer un plano animado a partir de una animación de la biblioteca, vinculada con el nombre "Animacion".

Físicas en 3D: FOAM + Papervision 1.7

Después del experimento con APE y PPV, quería empezar a hacer experimentos con elementos 3D e interactividad. Después de algunos intentos fallidos con APE, he llegado a la conclusión de que es mucho más fácil hacerlo con el FOAM, asi que de momento me ha salido esto. Los elementos de arriba a la izquierda son arrastrables, y la interacción con ellos se refleja en el 3d.

Ver el ejemplo