Con Flash Professional podemos hacer cosas muy interesantes, y mas cuando agregamos Actionscript a nuestros proyectos. En este tutorial aprenderemos a capturar una imagen desde la Webcam, y a cargar archivos de imagen desde el sistema a nuestra aplicación en Flash.

Webcam Flash

1.- Comenzaremos esta aplicación creando un nuevo proyecto de Actionscript 3 al cual crearemos un nuevo layer, al cual nombraremos contenido, mientras que al layer que por defecto tenemos en el proyecto le llamaremos actions.

2.- Ahora importaremos dos iconos a nuestra aplicación (dentro de nuestro layer contenido), el primero hará referencia a la Webcam y el segundo al archivo del sistema. Ambos archivos que son png los convertiremos en symbol para así poder asignarles un nombre de instancia.

3.- El nombre de instancia que asignaremos a cada uno son: webcam_mc e imagen_mc. Crearemos ademas dos cuadros de texto, los cuales posicionaremos uno debajo de cada icono los cuales llamaremos txt_uno y txt_dos, que por el momento estarán vacíos. Añadiremos ademas a nuestra interfaz dos botones desde el panel components. Los nombres de instancia para estos botones serán captura_btn y restart_btn respectivamente, con las etiquetas Captura e Inicio. Ambos botones estarán posicionados debajo de webcam_mc e imagen_mc y los haremos invibiles desde el panel de propiedades.

4.- En nuestro layer actions comenzaremos a colocar nuestro código. Primero haremos que cuando el usuario pase el cursor sobre cada uno de los iconos, visualice un cursor diferente al igual que un botón. Así el usuario sabrá que puede dar clic sobre estos iconos.

webcam_mc.buttonMode = true;
imagen_mc.buttonMode = true;

5.-Incluiremos un If el cual evaluara si esta disponible una webcam instalada en el equipo para su uso, de esta forma mostrara el icono webcam_mc, de lo contrario solo mostrara imagen_mc. Ademas haremos invisibles ambos iconos por medio de Actionscript, y asignaremos texto a nuestros componentes txt_uno y txt_dos. Para mas información acerca de la clase Camera, sus restricciones y propiedades, aquí.

webcam_mc.visible = false;
imagen_mc.visible = false;
 
if(Camera.isSupported){
	/* Si existe una webcam disponible */
	webcam_mc.visible = true;
	txt_uno.text = "Capturar desde Webcam";
	webcam_mc.buttonMode = true;
 
	imagen_mc.visible = true;
	imagen_mc.buttonMode = true;
	txt_dos.text = "Seleccionar desde Archivo";
 
} else{
	/* Si no hay una webcam solo muestra el otro icono */
	imagen_mc.visible = true;
	imagen_mc.buttonMode = true;
	txt_dos.text = "Seleccionar desde Archivo";
}

6.- Ahora crearemos nuestro objeto cámara que sera el que acceda al uso de la webcam para capturar así la imagen y almacenarla temporalmente. Para esto necesitamos ademas de agregarle a webcam_mc un EventListener de evento Clic, el cual ejecutara la función que tomara esa captura (el cual agregaremos dentro del If que evalúa la existencia de la webcam). También haremos visible nuestro botón captura_btn y le agregaremos un EventListener que sera el que se encargue de mostrar la captura en nuestra aplicación.

import flash.media.Camera;
 
var webcam:Video = null;
var camara:Camera;
var preview:Bitmap;
 
webcam_mc.addEventListener(MouseEvent.CLICK, onCapturar);
 
function onCapturar(event:MouseEvent):void{
	/* Ocultamos las opciones */
	this.removeChild(webcam_mc);
	this.removeChild(imagen_mc);
	txt_uno.visible = false;
	txt_dos.visible = false;
 
	/* Creamos el objeto y lo mostramos */
	camara = Camera.getCamera();
	camara.setMode(320, 240, 30);
 
	webcam = new Video(320, 240);
	webcam.attachCamera(camara);
	this.addChild(webcam);
	webcam.x = 120;
	webcam.y = 80;
	captura_btn.visible = true;
	captura_btn.addEventListener(MouseEvent.CLICK, onGuardar);
}

7.- Nuestra funcion onGuardar sera la que muestre en nuestra aplicación la captura tomada con la webcam. Ademas de hacer visible nuestro botón restart_btn, el cual tendrá un EventListener que ejecute la función onInicio, el cual regresara nuestra aplicación a su estado inicial.

function onGuardar(event:MouseEvent):void{
	var foto:BitmapData = new BitmapData(webcam.width, webcam.height);
	foto.draw(webcam);
	preview = new Bitmap(foto);
	this.removeChild(webcam);
	this.addChild(preview);
	preview.x = 120;
	preview.y = 80;
	captura_btn.visible = false;
	restart_btn.visible = true;
	restart_btn.addEventListener(MouseEvent.CLICK, onInicio);
}
 
function onInicio(event:MouseEvent):void{
	restart_btn.visible = false;
	this.addChild(webcam_mc);
	this.addChild(imagen_mc);
	this.removeChild(preview);
	txt_uno.visible = true;
	txt_dos.visible = true;
}

8.- Ahora comenzaremos a agregar la funcionalidad que permitirá la carga de un archivo del sistema. Al igual que a webcam_mc, agregaremos un EventListener de evento Clic a imagen_mc, el cual permitirá buscar en el sistema del usuario una imagen para cargar.

var archivo:FileReference = new FileReference();
var loader:Loader;
 
function onCargar(event:MouseEvent):void{
	/* Ocultamos las opciones */
	this.removeChild(webcam_mc);
	this.removeChild(imagen_mc);
	txt_uno.visible = false;
	txt_dos.visible = false;
 
	/* Creamos un filtro que nos ayude en la busqueda */
	var filtro:FileFilter = new FileFilter('Image', '*.jpg; *.gif; *.png');
	archivo.browse([filtro]);
	archivo.addEventListener(Event.SELECT, onSelectFile);
	trace("Seleccionar archivo");
}

9.- La función onSelectFile se encargara de cargar a nuestro objeto archivo la imagen seleccionada y así, cuando esta carga se haya completado se ejecutara a su vez la función onComplete. Esta función contendrá una variable que guardara momentáneamente dicha imagen seleccionada, y del nodo target del evento recibido tomaremos dicha imagen para entonces pasar dichos datos a nuestro objeto loader.

function onSelectFile(event:Event):void{
	// Cargamos la imagen dentro de archivo
	archivo.load();
	archivo.addEventListener(Event.COMPLETE, onComplete);
}
 
function onComplete(evt:Event):void{
	/* Esta variable guardara de momento la imagen contenida en el evento */
	var temporal:FileReference = FileReference (evt.target);
	loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImagenCargada);
	loader.loadBytes(temporal.data);
	trace("Carga la imagen");
}

10.- Para finalizar pasaremos los datos contenidos dentro de loader hacia nuestro objeto preview y así visualizar la imagen en la aplicación. También agregaremos nuestro botón que regresara la aplicación a su estado inicial.

function onImagenCargada(evt:Event):void{
	/* Mostramos la imagen */
	preview = Bitmap(evt.target.content);
	this.addChild(preview);
	restart_btn.visible = true;
	restart_btn.addEventListener(MouseEvent.CLICK, onInicio);
}

Ahora al ejecutar nuestra aplicación el usuario podrá elegir entre capturar una imagen con la webcam o seleccionar un archivo de imagen para abrir. Ambas técnicas tienen usos muy interesantes aunque a simple vista puede ser sencillo su empleo, la complejidad llega cuando queremos hacer cosas mas grandes e interesantes como el Face Replacement que podemos ver en esta aplicacion de MTV.

Para dominar esta técnica también te recomendamos inscribirte a nuestro curso de ActionScript, donde se ven más ejercicios sobre el tema e inclusive se llegan a combinar con cinemática inversa y papervision.

También te puede interesar:

Tags: , , ,