Comunidad de diseño web y desarrollo en internet online

Detección de movimiento de webcam con Flash 8

Esto es más un ejemplo que un tutorial propiamente dicho, explotaremos una de las propiedades de Flash 8 ahora que ha sido por fin publicado, y todo ya saben donde, en su comunidad favorita, Cristalab!

Haremos un sencillo "menú" que detectará en que parte de la imagen estamos haciendo la simulación de que pulsamos los botones. Para ello utilizaremos la nueva version de Flash 8 aunque tambien podemos hacerlo con FAMES y Flash, aunque se podría realizar enteramente con la versión 7 del mismo y algunas clases extra.

Indispensable : Una WebCam!

Nota :

Apaga las luces de tu cuarto, el fondo deberá de ser oscuro y nosotros claros, esto es porque la función getPixel devuelve el color, números altos si son claros, números bajos si son oscuros. La iluminación de mi habitación en ese momento era de fondo oscuro, no es por otra cosa.


Teoría
Para trabajar con getPixel nos hace falta un objeto BitmapData, a estos objetos se les da un ancho y alto, que será el tamaño del "lienzo". Una vez creado el BitmapData dibujaremos en el mediante el método "draw" pasándole como parámetro el MC que queremos "dibujar". Decir que el objeto BitmapData es "invisible" no se verá pues solo guarda los datos de las imágenes. En nuestro ejemplo "dibujaremos" cada 33 milisegundos la imágen que esté actualmente en la cámara para asi ir actualizando la información del BitmapData. Después con el método getPixel obtendremos el valor del color de 3 pixeles, hacremos una distinción como se comento antes entre oscuro [inactivo] y claro [activo].

Nota :

Si no entendiste nada pero de todas formas quieres experimentar, descarga el FLA:
Descargar FLA
Recuerda que debes tener el Flash Player 8 instalado en tu navegador, instalalo aqui


Comencemos el tutorial
Como ya dije, se explicarán dos formas de realizar este sencillo "menu óptico" una con Flash8 y otra con Flash7 y FAMES.

En primer lugar abrimos Flash, creamos un archivo de 520x240 píxeles. Abrimos la biblioteca [Ctrl+L] y creamos un nuevo video. Si no sabeis como, en la pestañita de arriba a la derecha, pulsais y ahí estará la opción deseada. Lo pasamos de la biblioteca al escenario, a la posición 0,0 y le damos un tamaño de 320x240 píxeles, le damos el nombre de "vid", lo convertimos a MovieClip y le pones el nombre de "mcVideo", de forma que el video sea _root.mcVideo.vid .

En segundo lugar cogemos 3 imágenes cualesquiera, las convertimos a MovieClips y las soltamos en el escenario -en la derecha para que no se mezclen con el video- , dándoles de nombre "pron" , "maspron" y "koala". Finalmente podemos poner unos textos en una capa superior al video, en las dos esquinas superiores del video y en la parte central arriba.

Camino 1 : Usar Flash 8
Pues en flash, pulsamos F9 para abrir el panel de acciones y colocamos este código

Código :

//Variables que utilizaremos
   var weedcam:Camera;
   var zona;

   var imagen:Video;
   var pron,maspron,koala:MovieClip;



//La función que detecta si pulsamos o no
   function accion()
   {
      
//""Dibujamos"" la imagen de la webcam en el bitmapData
//Funciona con MC o dibujando a mano, ver la referencia al respecto
//para más información
      zona.draw( imagen );
//Estos 3 son iguales, detectan si un pixel es claro o no
// este valor 16777215 es el que toman antes de que se inicialice la cámara así evitamos que aparezcan pulsados al principio
      if(zona.getPixel(10,10)>9000000 && zona.getPixel(10,10)!=16777215) {
         _root.pron._visible = true;
         _root.maspron._visible = false;
         _root.koala._visible = false;
      };
      if(zona.getPixel(310,10)>9000000 && zona.getPixel(310,10)!=16777215) {
         _root.pron._visible = false;
         _root.maspron._visible = false;
         _root.koala._visible = true;
      };
      if(zona.getPixel(160,10)>9000000 && zona.getPixel(160,10)!=16777215) {
         _root.pron._visible = false;
         _root.maspron._visible = true;
         _root.koala._visible = false;
      };

   }


//Ponemso las imagenes no visibles
      _root.pron._visible = false;
      _root.maspron._visible = false;
      _root.koala._visible = false;
      
//Cogemos las webcam
      weedcam = Camera.get();
//Le decimos donde tiene que dibujarla
      _root.mcVideo.vid.attachVideo (weedcam );
//Creamos un nuevo bitmapData, indispensable para usar el getPixel
      zona = new flash.display.BitmapData( 320, 240 );
//Lo guardamos en una variable
      imagen = _root.mcVideo;
//LLamamos a la funcion chula unas 30 veces por segundo
      setInterval(accion,33);

Sencillito no?


Camino 2 : Usar FAMES + Flash 7


Abrimos Eclipse, creamos un nuevo proyecto y una clase que llamaremos videoMotion
copiamos este texto

Código :

//Iniciamos la clase
class videoMotion{
   
//Variables que utilizaremos
   static var weedcam:Camera;
   static var zona;
   static var imagen:Video;
   static var pron,maspron,koala:MovieClip;



//La función que detecta si pulsamos o no
   static function accion()
   {
      
//""Dibujamos"" la imagen de la webcam en el bitmapData
//Funciona con MC o dibujando a mano, ver la referencia al respecto
//para más información
      zona.draw( imagen );
//Estos 3 son iguales, detectan si un pixel es claro o no
// este valor 16777215 es el que toman antes de que se inicialice la cámara así evitamos que aparezcan pulsados al principio
      if(zona.getPixel(10,10)>9000000 && zona.getPixel(10,10)!=16777215) {
         _root.pron._visible = true;
         _root.maspron._visible = false;
         _root.koala._visible = false;
      };
      if(zona.getPixel(310,10)>9000000 && zona.getPixel(310,10)!=16777215) {
         _root.pron._visible = false;
         _root.maspron._visible = false;
         _root.koala._visible = true;
      };
      if(zona.getPixel(160,10)>9000000 && zona.getPixel(160,10)!=16777215) {
         _root.pron._visible = false;
         _root.maspron._visible = true;
         _root.koala._visible = false;
      };

   }

//Punto de entrada de la aplicación
   public static function main() {
//Ponemso las imagenes no visibles
      _root.pron._visible = false;
      _root.maspron._visible = false;
      _root.koala._visible = false;
      
//Cogemos las webcam
      weedcam = Camera.get();
//Le decimos donde tiene que dibujarla
      _root.mcVideo.vid.attachVideo (weedcam );
//Creamos un nuevo bitmapData, indispensable para usar el getPixel
      zona = new flash.display.BitmapData( 320, 240 );
//Lo guardamos en una variable
      imagen = _root.mcVideo;
//LLamamos a la funcion chula unas 30 veces por segundo
      setInterval(videoMotion.accion,33);
      
   };
   
}

El código es el mismo en ambos casos, salvando excepciones como meterlo dentro de una clase y demás para que vaya bien con FAMES.

Un nuevo archivo.flashout, para no volver a explicarlo, vean este tutorial que aquí se explica como hacerlo, selecionamos la clase y el SWF que exporto Flash.

Publicar en Flash 8
Si has escogido el camino de usar Flash8 puedes saltarte este paso,si no sigue leyendo. MTASC - nuestro compilador favorito - viene con las nuevas clases de Flash, por lo que no tendremos que buscarlas por ahí ni importarlas ni nada parecido.""Supuestamente"" añadiendo el parámetro adicional "-version 8" al compilador desde el .flashout debería de exportar en formato de Flash8, a mi como esta manera no me funciona, me bajé un programa bien salaó que te convierte un swf7 a swf8 funciona a las mil maravillas y va incluido en los archivos del tutorial. Recuerden que FAMES compila "encima" -a menos que se indique que cree un nuevo archivo- por lo que una vez pasado el SWF a la versión 8 ya no habrá falta de hacerlo más veces.

Resultado final
Recuerden, fondo oscuro, pueden apagar las luces y usar un móvil/linterna como punto de luz, ingénienselas!!
ahora, posen la pequeña luz como si fuera un dedo sobre cada una de las frases de arriba, como si fuera un boton


Publicamos, aplicamos el programa si no nos funciona lo de "-version 8" y Voilá!Ahi tenemos una de las nuevas funcionalidades de Flash 8, que sin duda nos dará mucho juego. Desde emular la conocida EyeToy, detección más exacta de movimientos en la cámara, incluso para reconocer siluetas de objetos, menus a través de la imagen,...

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate