FileReference, para subir y descargar archivos por medio de Flash y AS3.
Escrito por Gerardo Sepúlveda Viernes, 16 de Septiembre de 2011 23:31
En este tutorial vamos a aprender un poco acerca de la clase FileReference en Actionscript 3 para Flash y lo aplicaremos a un ejemplo práctico.
La clase FileReference nos permite subir archivos desde nuestra computadora hacia un servidor y viceversa, es decir descargarlos del servidor a nuestra máquina. Cabe mencionar que esta clase cambió para Flash Player 10, ya que en versiones anteriores cuando el usuario seleccionaba un archivo para subirlo era necesario que se enviara al el servidor y después regresara la información a la aplicación para poder verla o hacer uso de ella. A partir de Flash Player 10 es posible accesar a los datos del archivo directo desde el player local de la computadora sin la necesidad de mandarlo a un servidor. Para muestra de este ejemplo, da click en el ejemplo de abajo y selecciona cualquier archivo de imagen de tu computadora.
Para hacer uso de esta clase necesitamos accesar a ella mediante siguiente código:
import flash.net.FileReference;
// Creamos una variable para activar la clase
var archivo:FileReference = new FileReference();
// Creamos otra variable que mediante el objeto FileFilter establecerá un filtro para determinar qué tipo de archivo se mostrará o subirá, así como las extensiones que serán permitidas.
var filtroImagen = new FileFilter("Images", "*.jpg;*.jpeg;*.gif;*.png");
//El metodo browse tomará el "arreglo" (array) de nuestra variable filtroImagen como su filtro. Podemos también prescindir de esto y dejar que se busquen los archivos sin ningún tipo de filtro.
archivo.browse([filtroImagen]);
Vamos a armar un ejemplo rápido con pocas líneas para ver como funciona exactamente. Usaremos la imagen de un billete de 100 dólares y remplazaremos la imagen de Benjamin Franklin por alguna que tengas en tu computadora.
Para esto tendremos 2 imágenes de nuestro billete, una original con el rostro de Benjamin Franklin y otra sin el rostro, que previamente lo quitamos en Photoshop.
1.- Abrimos Flash CS5.5 (o la versión que tengas a la mano) y crearemos un nuevo archivo de 700 pixeles de ancho por 350 de alto. El archivo deberá estar configurado para Actionscript 3.
2.- Importamos nuestras imágenes de los billetes y las colocamos en 2 layers diferentes que nombraremos: a) Imagen con rostro y b) Imagen sin rostro. La imagen original con el rostro deberá ir en un layer por encima de la que le hemos borrado el rostro. Todo esto lo hacemos para llevar un orden y no perdernos, incluso podemos poner ambas imágenes en el mismo layer o nombrarlas con otro nombre, pero para aprender será mejor llevar un orden y hacerlo de la forma más clara posible.
3.- Vamos a crear un botón al cuál le pondremos el texto "Seleccionar Imagen" y un nombre de instancia "subirImagen_btn."
4.- Crearemos un MovieClip vacio del tamaño del ovalo del billete (214x255px aprox. y en esa misma posición) con el nombre de instancia "loaderImage" y a este lo enmascarillamos con otro layer que tenga un ovalo del tamaño del ovalo que contiene al rostro de Benjamin Franklin del billete.
5.- Creamos un quinto layer al cual nombraremos Acciones. En el panel de acciones teclearemos el código que continuación se muestra junto con los comentarios explicando cada linea.
Si gustas puedes copiar y pegar el código y verás como funciona de inmediato, pero para aprender cualquier lenguaje de programación no hay mejor manera que escribirlo hasta el cansancio, de esta forma te darás cuentas de los errores que cometes y te será más fácil entender la sintaxis del mismo.
import flash.display.Bitmap;
import flash.display.Loader;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.MouseEvent;
import flash.utils.ByteArray;
// Inicializamos la clase FileReference (como indicamos arriba).
var imageFilter=new FileFilter("Images", "*.jpg;*.jpeg;*.gif;*.png");
var archivoUp:FileReference=new FileReference();
archivoUp.addEventListener(Event.CANCEL, cancelHandler);
archivoUp.addEventListener(Event.SELECT, selectHandler);
archivoUp.addEventListener(ProgressEvent.PROGRESS, progressHandler);
archivoUp.addEventListener(Event.COMPLETE, completeHandler);
// Agregamos un Listener (addEventListener) al botón que subirá la imagen
subirImagen_btn.addEventListener(MouseEvent.CLICK,selectImage);
//Le decimos al botón que abra el cuadro de dialogo para buscar la imagen en tu computadora
function selectImage(e:MouseEvent):void{
archivoUp.browse([imageFilter]);
}
function selectHandler(e:Event):void{
trace("Imagen seleccionada: "+archivoUp.name);
archivoUp.load();
}
//Creamos una función que detectará si se cancela la acción de "seleccionar la imagen"
function cancelHandler(e:Event):void {
trace("Acción cancelada");
}
//Para mostrar el progreso de carga del archivo
function progressHandler(e:ProgressEvent):void {
trace("Progreso en la selección: loaded="+e.bytesLoaded+" total="+e.bytesTotal);
}
function completeHandler(e:Event):void {
trace("Nombre de archivo completado: " + archivoUp.name);
var ba:ByteArray=archivoUp.data;
var loader:Loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,cargado);
loader.loadBytes(ba); // load with Loader
}
//Creamos una función "cargado" una vez que la imagen es cargada
function cargado(e:Event):void{
var bitmapFile:Bitmap = e.currentTarget.loader.content as Bitmap;
// Ajustamos la imagen en caso de que esta sea más grande que el tamaño del "stage" o archivo.
if(bitmapFile.width>stage.stageWidth||bitmapFile.height>stage.stageHeight){
var escalax:Number= stage.stageWidth/bitmapFile.width;
var escalay:Number= stage.stageHeight/bitmapFile.height;
if(escalax<escalay){
bitmapFile.scaleX=bitmapFile.scaleY=escalax;
}else{
bitmapFile.scaleX=bitmapFile.scaleY=escalay;
}
}
// Cargamos la imagen en el Movieclip "loaderImage"
loaderImage.addChild(bitmapFile);
// Hacemos que el botón para subir otra imágen ya no sea visible
subirImagen_btn.visible=false;
/* Desaparecemos el billete original para dejar uno que no tiene imagen central,
la cuál será remplazada con nuestra imágen seleccionada*/
billete1.visible=false;
}
/* PARA HACER LA IMAGEN MÁS REAL VAMOS A HACER QUE SE VEA EN BLANCO Y NEGRO Y QUE CONCUERDE ASÍ CON EL FONDO*/
import flash.filters.ColorMatrixFilter;
import fl.motion.AdjustColor;
var color : AdjustColor;
var colorMatrix : ColorMatrixFilter;
var matrix : Array;
var filterBW : Array;
color = new AdjustColor();
color.brightness = 20;
color.contrast = 20;
color.hue = 0;
color.saturation = -100;
matrix = color.CalculateFinalFlatArray();
colorMatrix = new ColorMatrixFilter(matrix);
filterBW = [colorMatrix];
addEventListener(Event.ENTER_FRAME,blckWhite);
function blckWhite(e:Event):void{
loaderImage.filters = filterBW;
}
Prueba tu archivo con cmd+Enter o Control-Test Movie. En el archivo .swf que genere da click en seleccionar imagen y elige cualquier imagen de tu computadora.
Como puedes ver la imagen que seleccionas de tu computadora se cargará en el MovieClip loaderImage y por los efectos de blanco y negro que le hemos puesto así como la opción Multiply en la opción de Blending se fundirá más naturalmente en la imagen viendose más real.
Hay opciones más avanzadas que después veremos como agrandar, disminuir, rotar o centrar el tamaño de tu imagen o incluso arrastrarla para ajustarla con más exactitud para que se ajuste exactamente a tus necesidades.
Hasta aquí hemos visto como la imagen es colocada con éxito en el archivo flash, sin embargo este solo es un ejemplo básico de como lograr subir un archivo mediante FileReference, una vez que ya sabemos esto podemos aprovechar las características de Flash y darle interactividad, movimiento, animación, integrarlo con 3D o incluso realidad aumentada, vaya, un sin fín de opciones que harán un proyectó más rico e interesante. El resultado dependerá de lo que necesites, por ejemplo: puedes generar un pdf, un bitmap y descargarlo, o enviarlo por mail desde tu aplicación Flash, o incluso integrarlo al API de Facebook y publicarlo en tu muro etc.
Si buscas algo más complicado puedes integrar el bitmap a una animación que hayas hecho en Flash y que la imagen forme parte de la animación. También podemos integrarlo a algún material en video que tengamos desde After Effects, hacer el tracking y generar CuePoints que serán exportados a Flash para detectar los puntos de movimiento y hacer que la imagen se integre dinámicamente al video siguiendo el movimiento de la cámara, esto ya suena más interesante y creo que será buen tema para un siguiente tutorial.
¿Tu qué uso le daría a la clase FileReference para aprovechar y sacar todo el potencial que Flash nos da?
Como podemos ver este es un pequeño ejemplo pero dependerá de nuestra creatividad los usos y aplicaciones que le podamos dar para hacerlo más interesante, atractivo o divertido, dependiendo de los requerimientos de cada uno de nuestros proyectos.
Descarga los archivos de referencia desde aquí.
Texto por Gerardo Sepúlveda (@gerardose).
RSS feed Comments
Gracias. P.D.:te pregunto pues lo expuesto sobre imagenes es lo mas claro que he visto en la web sobre Filereference.