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 :
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 :
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.
Por Freddie el 14 de Septiembre de 2005
Necesitan el cuarto en ABSOLUTA PENUMBRA ... y aparte de eso, una luz lo bastante grande para abarcar el bloque completo de alguno de los 3 "botones de texto sensibles a la luz"
Una luz de un telefono celular o una pantalla de un PDA funcionaria
Por Elecash el 15 de Septiembre de 2005
Por Sisco el 15 de Septiembre de 2005
Por mrkoala el 15 de Septiembre de 2005
Por NEO_JP el 15 de Septiembre de 2005
Por Elecash el 15 de Septiembre de 2005
Por FeNNeX el 17 de Septiembre de 2005
Por _CONEJO el 18 de Septiembre de 2005
aqui algunos VIDEOS de cosas que se pueden hacer ... con unas 35 lineas de codigo o menos...
http://www.theninjabunny.com/fl8/videolow.html
http://www.theninjabunny.com/fl8/video.html
http://www.virtualhostingdigital.com/~nodani/fotos/videopixel.html
Por Freddie el 18 de Septiembre de 2005
Por choco el 19 de Septiembre de 2005
Por TarES el 06 de Octubre de 2005
si alguien se pica os dejo una url de las q he estado mirando..
http://www.us.es/gtocoma/pid/pid10/deteccioncaras.htm
Por eporroa el 06 de Octubre de 2005
Por _CONEJO el 07 de Octubre de 2005
Por Zah el 25 de Febrero de 2006
Código :
Así eliminamos la condición de que hay que estar en penumbra
Así es como quedaría (recuerden no permitir la conexion a la webcam en el ejemplo de arriba):
pd:
Freddie® :
O mucho me equivoco o la extensión de los botones es un 1x1 pixel [/flash]
Por lmenendez el 26 de Febrero de 2006
Por Juampe el 12 de Abril de 2006
Mi pelo negro carbo hace el resto.
Por Mamaun el 20 de Junio de 2006
Yo, despues de aplicar la modificacion propuesta por zah tampoco necesito tener el cuarto oscuro para que me funcione.
Pero ahora se me plantean algunas dudas.
¿Como puedo hacerlo para que el àrea sensible tenga la forma de un cuadrado o un circulo?
¿Se puede hacer que con el movimiento de la mano se arrastre un objeto por la pantalla?
Gracias
Por Zah el 28 de Junio de 2006
Mamaun :
¿Como puedo hacerlo para que el àrea sensible tenga la forma de un cuadrado o un circulo?
Pon varios puntos, que formen un cuadrado y que se ejecute la acción si ha habido movimiento en todos.
Mamaun :
¿Se puede hacer que con el movimiento de la mano se arrastre un objeto por la pantalla?
Poderse se puede, pero es tremendamente difícil, y no creo que muy preciso. Se me ocurre que tendrías que modelar un vector con los datos de los movimientos de los puntos.
Quizá ICEM4N sepa mejor cómo hacerlo.
Por _CONEJO el 29 de Junio de 2006
La versión "liviana" sería usar un guante, de forma que la mano (solo la mano) generase movimiento, ahí si sería posible más o menos
La otra opción sería detectar todo el movimiento del brazo, detectar su forma y escoger sólo la mano, debería saber si el brazo está recto, doblado, en definitiva, parametrizarlo...
Por Zah el 30 de Junio de 2006
Por _CONEJO el 30 de Junio de 2006
Por Zah el 30 de Junio de 2006
Por _CONEJO el 30 de Junio de 2006
Esas son algunas pruebas que hice hace tiempo. Es C00L si consigues que las palmas tengan una tonalidad diferente al brazo, lo cual es relativamente "sencillo" jugando un poco con la luz. En el peor de los casos, el cliente no lo hará, por lo que se le marcará todo el brazo, ¿Qué hacer en estos casos?, bueno, si estás jugando al arkanoid, pues podrías tomar el punto donde el movimiento haya sido más brusco, podrías coger el valor de la rejilla "más alto" es decir, empiezas con el for a mirar puntos desde arriba abajo, cuando detectas movimiento paras, o podrías, recoger la forma del brazo, parametrizarla eliminar el brazo y quedarte con la mano, lo que posiblemente tumbe al player con las cuentas.
Todo se puede optimizar, por ejemplo NO mirando los puntos centrales o donde sepas que no habrá movimiento o no te interese.
Quizás con el FP9 se consiga mejor rendimiento.
Por Zah el 30 de Junio de 2006
Por Zah el 30 de Junio de 2006
Lo que no sé es si se puede hacer algo para quitar el ruido de la cámara...
PD: No hay nada como no ir al colegio para aprender cosas XDXD[/flash]
Por antares el 13 de Julio de 2006
Os dejo el código q estoy usando:
import flash.display.BitmapData;
this.createEmptyMovieClip("holder_mc", this.getNextHighestDepth());
loader = new MovieClipLoader();
loader.addListener(this);
loader.loadClip("file:///C|/image2.jpg", holder_mc); //esta es la imagen q uso
function onLoadInit() {
myBitmap = new BitmapData(holder_mc._width, holder_mc._height, true, 0×00FFFFFF);
myBitmap.draw(holder_mc);
myBitmap.threshold(holder_mc, new Rectangle(0, 0, 100, 40), new Point(0, 0), “==”, 0×00CCCCCC, 0×000000FF, 0×0000FF00, false);
}
Por SN el 15 de Septiembre de 2006
Por Juli el 01 de Enero de 2007
Ver:
http://einflinux1.uoc.edu/~rv/index.php/DeteccionMovimientoEjemplos
Por Dark_bta el 14 de Marzo de 2007
Por abrahan el 08 de Mayo de 2007
Por Pololito el 08 de Mayo de 2007
Por gustavo ( kokito) el 12 de Mayo de 2007
si me pueden ayudar les estaría muyyyyy agradecido, dado que por no tener todavía un sistema que nos cuente las vueltas el juego no deja de ser re aburrido...
saludos para toda esta gente linda.
kokito
Por abrahan el 01 de Enero de 2008
Por german el 15 de Enero de 2008
Por Jose G. Hernandez el 11 de Mayo de 2008
Saludos!!!
Por emil el 04 de Julio de 2008
soy bastante nuevo en esto de flash y he llegado hasta aquí. Sé que este artículo está desde hace mucho tiempo y no sé cuándo fue la última alcutalización. tampoco sé, por el mismo motivo si alguien va a leer esto, pero yo lo intento...
estoy haciendo un "experimento" que consta de dos partes. en relacción a este artículo me referiré sólo a la segunda. Necesito seleccionar y mover unos dibujos (o gráficos, o imágenes) que están proyectadas sobre una pared. Es decir, tengo una aplicación flash en la cual hay diversos gráficos y ésto se proyecta sobre una pared o pantalla. Con algún sistema de detección de movimiento (un led en la mano, por ejemplo), quiero seleccionar y mover ese gráfico.
Por lo que he leído hasta aquí, más o menos se puede hacer, sobre todo teniendo en cuenta que todo el rato se habla de flash player 8 y ya vamos por el 10 (o casi).
Alquien me puede echar una mano? o indicarme dónde puedo pedir ayuda?
gracias de antemano!!
Por mayte el 27 de Agosto de 2008
¿todos los movimientos son iguales?
¿crees que todos los movimientos son iguales?
Por difercm el 10 de Noviembre de 2008
Por ddarthp el 02 de Abril de 2009
Por ksd-ksty el 22 de Abril de 2009
Si alguien sabe que me ayude porfa lo necesito
Por Mauro_22 el 06 de Junio de 2009
Por carlos giovanni el 20 de Junio de 2009
este es mi correo [email protected]
Por yopi el 26 de Agosto de 2009
Por zero el 21 de Septiembre de 2009
Por kakarla el 27 de Agosto de 2010
Por yaz el 27 de Agosto de 2010
Por CLAnonimo el 14 de Septiembre de 2010
http://www.emedesing.wordpress.com
Por Repositorio ESPOL el 02 de Febrero de 2011
Por darin el 03 de Septiembre de 2011