Prueba de Pixel Bender + ComputeSpectrum

Prueba de Pixel Bender + ComputeSpectrum

Etiquetas: computeSpectrum ShaderFilter Shader SoundMixer SoundChannel ByteArray

Prueba de Pixel Bender + ComputeSpectrum

Prueba de computeSpectrum + un filtro de Pixel Bender. En el ejemplo se muestra como cargar un filtro de pixel Bender, y aplicarlos en Flash variando sus parámetros en función de un sonido.
Cargar GIFs animados en Flash con GIFPlayer

Cargar GIFs animados en Flash con GIFPlayer

Etiquetas: byteArray GIFPlayer

Cargar GIFs animados en Flash con GIFPlayerCargar GIFs animados en Flash con GIFPlayerCargar GIFs animados en Flash con GIFPlayerCargar GIFs animados en Flash con GIFPlayer

Desde Actionscript se pueden cargar imágenes jpg, png o gif, pero en el caso de los gif, el player solo muestra el primer fotograma de la animación. Con la llegada de Actionscript 3.0 y la clase byteArray, se pueden abrir ficheros .gif y reconocer los distintos fotogramas para mostrarlos en el player. Esto es lo que han hecho los autores de byteArray.org con la clase as3gif. Aquí va un ejemplo de utilización y el resultado:
Carga de sonidos y visualización del espectro en Actionscript 3.0

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

Etiquetas: SoundChannel Sound ByteArray computeSpectrum

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

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:

  1.  
  2. sonido = new Sound(); 
  3. var request:URLRequest = new URLRequest(url); 
  4. sonido.addEventListener(Event.COMPLETE, sonidoCargado);
  5. sonido.load(request);
  6.  

-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:

  1.  
  2. package {
  3. 	import flash.display.*;
  4. 	import flash.events.*;
  5. 	import flash.media.*;
  6. 	import flash.utils.ByteArray;
  7. 	import flash.net.*;
  8. 	public class CargadorSonidos extends Sprite {
  9. 		var url:String = "sonido.mp3";
  10. 		var canal:SoundChannel;
  11. 		var sonido:Sound;
  12. 		var fourierTransform:Boolean = false;
  13. 		var arrayMixer:ByteArray = new ByteArray();
  14. 		var volumenes:Array = new Array();
  15. 		public function CargadorSonidos():void {
  16. 			cargarSonido();
  17. 		}
  18. 		function cargarSonido():void {
  19. 			SoundMixer.stopAll();
  20. 			sonido = new Sound();
  21. 			var request:URLRequest = new URLRequest(url);
  22. 			sonido.addEventListener(Event.COMPLETE, sonidoCargado);
  23. 			sonido.load(request);
  24. 		}
  25. 		function sonidoCargado(event:Event):void {
  26. 			canal = sonido.play(0,1000);
  27. 			addEventListener(Event.ENTER_FRAME,mover);
  28. 		}
  29. 		function mover(e:Event):void {
  30. 			SoundMixer.computeSpectrum(arrayMixer, true);
  31. 			var c = 0;
  32. 			for (var i = 0; i < arrayMixer.length; i++) {
  33. 				c += arrayMixer[i];
  34. 			}
  35. 			volumenes.push(c);
  36. 			if (volumenes.length > 400) {
  37. 				volumenes.splice(0,1);
  38. 			}
  39. 			graphics.clear();
  40. 			graphics.lineStyle(1, 0x000000);
  41. 			graphics.beginFill(0x000000);
  42. 			for (var j = 0; j < volumenes.length; j++) {
  43. 				graphics.lineTo(j,100+volumenes[j]/1200);
  44. 				graphics.lineTo(j,100-volumenes[j]/1200);
  45. 				graphics.moveTo(j,100);
  46. 			}
  47. 			graphics.lineTo(volumenes.length,100);
  48. 			graphics.lineTo(0,100);
  49. 		}
  50. 	}
  51. }
  52.  
Guardar imágenes en AS3 con PNGEncoder y Base64

Guardar imágenes en AS3 con PNGEncoder y Base64

Etiquetas: PNGEncoder Base64 BitmapData Rectangle encodeByteArray

Para guardar una imagen en AS2 habia que almacenar los colores de todos sus pixels, y mandar una cadena de texto con los valores a un fichero en el servidor para que creara la imagen. Esto era viable para imágenes relativamente pequeñas, ya que tanto Flash como el servidor tardaban mucho en procesar los datos. Con AS3 han surgido varias clases que aprovechan el potencial de la clase ByteArray y optimizan el flujo de datos Flash/servidor. En este ejemplo utilizo las clases PNGEncoder y Base64 para guardar un dibujo hecho en flash y guardarlo en el servidor como PNG. El tamaño de la imagen es de 400x400, y el proceso no dura más de 2 seg.

Este es el código: