¡Habemus codec!

Importantísima y muy buena noticia para todos, excepto para Apple, Microsoft y demás empresas promotoras del codec propietario H264. Google adquirió la empresa On2, y como la propia FSF había pedido y las quinielas pronosticaban, ha procedido a liberar el codec VP8.

Adobe ya se ha pronunciado al respecto y lo incluirá en próximas versiones de Flash Player. Además al estar bajo licencia libre, se convertirá en el estándar de facto con toda seguridad. Youtube, Firefox, Wikipedia entre otros lo avalan.

Además han dejado ver un nuevo proyecto para promocionar y estandarizar el formato de vídeo abierto para la web: http://www.webmproject.org/

Desde el punto de vista técnico, VP8 promete mejoras en el tamaño de los ficheros, mayor calidad que h264 a un bitrate inferior y un rendimiento superior. Por lo que todo parecen ventajas para el usuario.

Vía:
http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html
http://softlibre.barrapunto.com/softlibre/10/05/19/1840218.shtml

Reproductor de audio con espectro de sonido.

En este tutorial, con código comentado veremos como crear nuestro propio reproductor de audio en Actionscript 3. Cuenta con visualización del espectro de sonido dinámica, carga de audio mediante streaming y además playlist mediante un fichero XML.

Haz click en la imagen para ver el reproductor en ejecución.

Para utilizar el reproductor como recurso, debes descargar los ficheros originales. y modificar el archivo .fla. Una vez dentro del símbolo Reproductor, puedes modificar todos los símbolos y gráficos a tu antojo, siempre y cuando respetes los nombres de instancia.

El tracklist puede ser modificado desde el fichero canciones.xml con la siguiente estructura:

1
2
3
4
5
6
7
8
9
10

< ?xml version="1.0" encoding="utf-8" ?>
<canciones>
	<!--Comentario: Cada uno de estos nodos se trata de un enlace a una canción
	    en el caso actual consta de 3 cancioens con nombre de fichero 01.mp3, 02.mp3 y 03.mp3
	    las cuales se encuentran en la carpeta canciones, la cual a su vez se encuentra en la misma
	    carpeta que el reproductor.-->
	<cancion ruta="./canciones/01.mp3" />
	<cancion ruta="./canciones/02.mp3" />
	<cancion ruta="./canciones/03.mp3" />
</canciones>

En caso de querer añadir o eliminar funcionalidades a este reproductor, habría que modificar los ficheros de Actionscript. Debido a la extensión de las clases que entran en juego, han sido puestas en “leer más”. El código ha sido comentado y el proyecto completo podéis encontrarlo aquí (Sin canciones):
http://www.flashactionscript.es/wp-content/uploads/2010/05/ReproductorAudio.zip

Seguir leyendo ‘Reproductor de audio con espectro de sonido’

Capturar entrada de micrófono en Flash Player 10.1

(AVISO: Para ver el ejemplo es necesario el uso de Flash Player 10.1, así como aceptar el uso de micrófono/webcam cuando sea requerido)

A continuación muestro el código del ejemplo comentado.

La clase Main.as realiza el registro de los observadores necesarios para controlar el espectro de sonido del micrófono, que ha sido seleccionado mediante Microphone.getMicrophone();.

El evento que controlará la salida del espectro de sonido es del tipo SampleEvent, el cual posee como propiedad data, un bytearray con 256 números reales del tipo Number.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

package 
{
	import flash.display.Sprite;
	import flash.events.ActivityEvent;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.SampleDataEvent;
	import flash.events.StatusEvent;
	import flash.media.Microphone;
	import flash.utils.ByteArray;
	/**
	 * ...
	 * @author Francisco Javier Guerrero
	 */
	public class Main extends Sprite 
	{
 
		private var grafica:Grafico;
		private var microfono:Microphone;
 
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			//Seleccionamos el micrófono por defecto.
			microfono = Microphone.getMicrophone();
			//Listener para entrada de sonido
			microfono.addEventListener(SampleDataEvent.SAMPLE_DATA, onSampleData);
			//Listener de actividad
			microfono.addEventListener(ActivityEvent.ACTIVITY, onActividad);
			//Listener de estado
			microfono.addEventListener(StatusEvent.STATUS, onStatus);
			//Activar salida de micro por altavoces
			microfono.setLoopBack(true);
 
			//Mostramos información por primera vez.
			mostrarInfo();
 
			//Creamos la gráfica a partir del símbolo existente en el .swc "SimboloGrafico.swc"
			grafica = new Grafico();
			//Añadimos la grafica a la lista de visualización
			addChild(grafica);
 
 
			this.addEventListener(MouseEvent.CLICK, onClick);
		}
 
		/**
		 * Controla el estado en que se encuentra
		 * @param	e
		 */
		private function onStatus(e:StatusEvent):void 
		{
			trace("Estado: "+e);
		}
 
		/**
		 * Controla si existe actividad
		 * @param	e
		 */
		private function onActividad(e:ActivityEvent):void 
		{
			trace("Actividad: "+e);
		}
 
		/**
		 * Controla cada entrada de sonido
		 * @param	e
		 */
		private function onSampleData(e:SampleDataEvent):void 
		{
			//La grafica dibuja los datos actuales.
			grafica.dibujar(e.data as ByteArray);
		}
 
		/**
		 * Muestra la información relacionada
		 */
		private function mostrarInfo():void {
			//Algunas de estas propiedades pueden ser modificadas, mas info en: 
			// 
			trace("\n\n**************************************************");
			trace("Nombre: "+Microphone.names[microfono.index]);
			trace("name: "+microfono.name);
			trace("Nivel de actividad: "+microfono.activityLevel);
			trace("Calidad del codec: "+microfono.codec);
			trace("Calidad de codificación: "+microfono.encodeQuality);
			trace("Frames por paquete: "+microfono.framesPerPacket);
			trace("Ganancia: "+microfono.gain);
			trace("Silenciado: "+microfono.muted);
			trace("Frecuencia: "+microfono.rate);
			trace("Nivel de Silencio: "+microfono.silenceLevel);
			trace("Tiempo de Silencio: "+microfono.silenceTimeout);
			trace("Supresion de Eco: " + microfono.useEchoSuppression);
			trace("**************************************************");
		}
 
		/**
		 * Mostrar información al hacer click
		 * @param	e
		 */
		private function onClick(e:MouseEvent):void 
		{
			mostrarInfo();
		}
 
	}
 
}

La clase Grafico.as hereda de un símbolo movieclip llamado SimboloGrafico, previamente generado y compartido en un fichero SWC.

Dibuja la gráfica a partir de un bytearray mediante el método dibujar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

package  
{
	import flash.display.Graphics;
	import flash.utils.ByteArray;
 
	/**
	 * ...
	 * @author Francisco Javier Guerrero
	 */
	public class Grafico extends SimboloGrafico
	{
		private var alto:Number;
		private var ancho:Number;
 
		public function Grafico() 
		{
			//Inicializamos los valores de alto y ancho;
			alto = fondo.height / 2;
			ancho = fondo.width / 256;
		}
 
		public function dibujar(ba:ByteArray):void {
			var i:int;
 
			//Inicializa la herramienta de dibujo
			g.clear();
			g.lineStyle(3, 0x00FF00);
 
			//Dibujamos la grafica
			var aux:Number = alto + (ba.readFloat() * alto);
 
			g.moveTo(0, aux);
			g.lineTo(0, aux);
 
			for (i = 1; i < 256; i++ ) {
				g.lineTo((i * ancho), alto + (ba.readFloat() * alto));
			}
		}
 
		//Devuelve la propiedad graphics de un objeto MovieClip que nos servirá de lienzo,
		//el cual hemos llamado "dibujo"
		public function get g():Graphics { return dibujo.graphics; }
 
	}
 
}

Durante este minitutorial aprenderemos a usar SWFObject para incrustar nuestras películas SWF dentro de código HTML.

SWFObject es la mejor y sencilla forma actualmente para mostrar nuestras películas SWF en páginas HTML. Realiza esta tarea mediante código Javascript, sustituyendo así los métodos “clásicos” como el las etiquetas object y embed. Aplicaciones como FlashDevelop, usan SWFobject como método predeterminado para la incrustación de películas. Además cuenta con licencia libre.

Hay múltiples formas de usar SWFObject, pero en éste caso usaremos la versión AIR del generador provisto en la propia web del proyecto. Para ello necesitaremos tener instalado Adobe AIR.

1. En primer lugar descargaremos el fichero .zip y procederemos a descomprimir en una carpeta.
2. Instalamos la aplicación AIR y ejecutamos.
3. Completamos todos los campos, click en la imagen para ampliar.

4. Rellenamos los campos marcados como obligatorios y los campos opcionales que necesitemos.
   SWFObject permite incrustar nuestras películas tanto con un tamaño fijo determinado en píxeles, como con tamaño variable basado en porcentajes a través del campo Dimensions.
5. Hacemos click en el botón Generate para generar nuestro código HTML.
6. Hacemos click en Save File y guardamos en un archivo con extensión .html o hacemos click en Copy to Clipboard para copiar y pegar en nuestro programa de edición HTML favorito.
7. Subimos a un directorio de nuestro servidor FTP el fichero .html que hemos obtenido en el proceso.
8. A continuación subimos a nuestro servidor FTP nuestra película SWF, en la ruta relativa indicada anteriormente en el fichero .html. Normalmente en el mismo directorio del fichero .html.
9. Ahora procedemos a situar nuestros ficheros necesarios para SWFObject.
   1. Descargamos el fichero .zip y extraemos en una carpeta.
   2. Subimos al servidor FTP los ficheros necesarios para el funcionamiento de SWFObject, en las rutas relativas indicadas en el .html generado. Normalmente en el mismo directorio del fichero .html.
   3. Es necesario el fichero Javascript swfobject.js. El fichero expressInstall.swf es necesario sólo en caso de usar instalación express
10. Comprobamos que todo funcione correctamente.

 
 
 
 
Web del proyecto: http://code.google.com/p/swfobject/
SWFObject: http://swfobject.googlecode.com/files/swfobject_2_2.zip
Generador: AIR / HTML
Documentación: http://code.google.com/p/swfobject/wiki/documentation

¡Bienvenidos todos!

Para estrenar, éste, nuestro nuevo blog, y una vez realizado nuestro ¡Hola Mundo! pertinente, comenzaremos con un vídeo de demostración, realizado por Ryan Stewart de la nueva API con capacidad de mapas 3D de Google Maps para Actionscript 3. Siendo así compatible con Flash, Flex y AIR.

Podéis encontrar la documentación así como ejemplos (en inglés) en la siguiente url:
http://code.google.com/intl/es-ES/apis/maps/documentation/flash/3d-maps.html

¡HOLA MUNDO!

1
2
3
4
5
6
7
8
9
10
11
12
13

package  
{
	/**
	 * @author Francisco Javier Guerrero
	 */
	public class Main
	{
		public function Main() 
		{
			trace("¡HOLA MUNDO!");
		}
	}
}