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 escribió:
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 escribió:
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
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,...
Links - Links - Links
- Video de Ejemplo en uso
- Archivos del tutorial - usando Flash8
- Archivos del tutorial - usando FAMES - Contiene Convert2SWF8.exe
- FAMES y Flash 8
- Tutorial de uso de FAMES
- Convierte swf7 al swf8 - Windows
- Convierte swf7al swf8 - MacOs X
Si algunos links no funcionan al momento de leer el tutorial, espera unas horas y reintentalo
