Manual importar y exportar imágenes desde flash. En muchas ocasiones para actividades de algunos clientes se requiere poder crear una funcionalidad en flash que permita exportar la apariencia en un momento dado de un clip de película dentro de un contenedor flash (minisitio, banner, video) y que se pueda guardar en el equipo del usuario. Esto se aplica para actividades como, ecards personalizables con foto, crear wallpapers dinámicos, crear avantares personalizados, entre otros.

Para explicar los diferentes pasos para llevar a cabo una aplicación de este estilo, vamos a realizar un ejemplo de personalizar un dibujo con partes intercambiables como muestra la imagen:

Para realizar este documento se concultaron las siguientes páginas:

http://www.sephiroth.it/tutorials/flashPHP/print_screen/index.php http://www.phpclasses.org/browse/package/4312.html

La idea es poder exportar a una imagen jpg en cualquier momento, un movieclip específico de la película flash, el movieclip seleccionado será el recuadro que enmarca el espacio del personaje.

Antes de comentar es importante notar que el movieclip que se exporta, en realidad es un contenedor, en su interior se define otro u otros movieclips que tienen las diferentes funciones para cambiar las partes del cuerpo, como boca, ojo, cuerpo, entre otros. Esto se realiza con el fin de simplificar la programación ya que de esta forma se maneja un grupo de movieclips como un único grupo que se puede aislar de su película principal para poder guardar sólo lo que nos interesa.

El ejemplo permite subir una imagen desde el computador del usuario para que haga parte del personaje que se esta creando. Y esta imágen se puede escalar y arrastrar para acomodarse al diseño que se esta creando.

Vamos a empezar explicando como subir una imagen temporal para utilizarla en la película.

1.Creamos un contendor (movieclip vacío, es decir sin nada en su interior)

2. Luego lo ponemos debajo de una máscara circular y le damos un nombre de instancia.

3 . Ponemos un botón que es el encargado de lanzar el explorador de archivos desde flash, este debe tener un nombre de instancia upload_btn, y en un frame de la película principal ponemos la siguiente programación:

import flash.net.FileReference;

/*Administrador de carga*/

var loadListener:Object = new Object();

loadListener.onLoadComplete = function(target_mc:MovieClip, httpStatus:Number):Void

target_mc.arrastrar();

var mcLoader:MovieClipLoader = new MovieClipLoader();

mcLoader.addListener(loadListener);

/**/

var fileUpload:FileReference = new FileReference();

var escucha:Object = new Object();

var fileTypes:Array;

fileTypes = [description:"Archivos de Imagen", extension:"*.jpg;*.gif;*jpeg;*.png", macType:"JPEG;jp2_;GIFF"];

upload_btn.addEventListener("click", doUpload);

fileUpload.addListener(escucha);

escucha.onSelect = doSelect;

escucha.onComplete = doComplete;

escucha.onCancel = doCancel;

escucha.onProgress = doProgress;

function doComplete(archivo:FileReference)

mcLoader.loadClip("archs/"+archivo.name,mccont.video_mc.mccont);

function doProgress(archivo:FileReference, bLoaded:Number, bTotal:Number)

var porcentaje = Math.round((bLoaded*100)/bTotal);

//porcentaje+"% del archivo "+archivo.name;

//porcentaje;

function doCancel()

trace("El Usuario Cancelo");

function doSelect(archivo:FileReference)

fileUpload.upload("uploadFile.php");

function doUpload(event)

fileUpload.browse(fileTypes);

Explicando el código:

Primero importamos la clase FileReference, la cual nos va a permitir lanzar la ventada de archivos desde flash. Luego creamos un movieclipLoader, ya que necesitamos adeministrar la carga de la imagen para luego poder asignarle las funciones de arrastrar al movieclip contenedor de la imagen. Si se utiliza loadMovie, no se puede agregar funciones al clip cargado, ya que la carga resetea las propiedades del movieclip contenedor.

target_mc.arrastrar(); ,

Al finalizar la carga se asigna un prototipo al movieclip cargado, que le permite tener funciones para arrastrar y soltar, este es el código:

MovieClip.prototype.arrastrar = function()

this.onPress = function()

startDrag(this,false);

this.onRelease = function()

this.stopDrag();

this.onReleaseOutside = function()

this.stopDrag();

Para utilizar el objecto FileReference es necesario crear un objecto que sea el listener de los eventos que se esperan los cuales son:

doUpload: Se invoca la ventana del explorador de archivos que va a permitir al usuario buscar las imágenes en su equipo.

FileReference, cuenta con un filtro que restringe la búsqueda a sólo archivos de cierto tipo por medio de:

fileTypes = [description:"Archivos de Imagen", extension:"*.jpg;*.gif;*jpeg;*.png", macType:"JPEG;jp2_;GIFF"];

fileUpload.browse(fileTypes); //lanza la ventana

Cuando se lanza la ventana, se esperan los siguientes eventos:

doCancel: Cuando el usuario presiona el botón cancelar de la ventana de exploración.

doSelect: Cuando el usuario selecciona un archivo que desea subir, apenas realiza esto, se debe programar la función para que llamé un script de php que permita grabar la imagen en un archivo temporal del servidor, para este caso lel archivo con el script se llama uploadfile.php

fileUpload.upload("uploadFile.php");

El archivo uploadFile.php contiene el siguiente código:

<?php

//ruta del fichero a almacenar

$uploadfile = "./archs/".basename( $_FILES['Filedata']['name'] );

//si es correcta la subida del fichero

if ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $uploadfile ) )

echo( '1 ' . $_FILES['Filedata']['name']);

//si falla la subida del fichero

else

echo( '0');

?>

Se debe crear en la carpeta donde se encuentra la película flash, un directorio con nombre archs, donde se guardaran las imgenes temporales que suba el usuario.

Nota: Para este ejemplo, no se considera el espacio de esta carpeta, es decir los usuario de la aplicación pueden subir muchas fotos a la carpeta, pero es labor del programador administrar como mejor le parezca el contenido y disponibilidad de espacio en el directorio.

FileReference, envia al script por método POST, la información del archivo seleccionado, es decir el nombre y su ubicación temporal para ser almacenado, esto se consulta por medio de las variables:

$_FILES['Filedata']['name']//nombre del archivo

$_FILES['Filedata']['tmp_name']//ubicación temporal para ser almacenada

Si se requiere pasar un parámetro adicional se puede hacer agregando parámetros a la llamada del script por medio de la sintaxis: ?variable=valor&variable2=valor2

Una vez se invoca el script de carga se produce el evento de progreso de la carga, el cual nos da información sobre la transferencia del archivo al servidor, y es una buena opción para mostrar un porcentaje de carga al usuario.

DoProgress, recibe el obejto del archivo, los bytes cargados y los bytes totales para poder hacer un cálculo del porcentaje de carga.

Docomplete: Cuando termina el proceso de carga se invoca el método de carga completa, donde es posible realizar la asignación de la imágen cargada al movieclip vacío que teníamos preparado como contendor.

Para el ejemplo, aparece una ruta muy larga para llegar al objeto, pero este se puede ajustar según la ubicación del objeto.

mcLoader.loadClip("archs/"+archivo.name,mccont.video_mc.mccont);//Opción uno

mcLoader.loadClip("archs/"+archivo.name,mccont.mc);//Opción 2, depende de la ubicación

Lo importante es conservar la ruta completa donde esta ubicado el archivo temporal, para este caso la ruta es relativa al directorio actual.

Públicamos la película y al probar vemos que el botón para subir, nos invoca la ventana para buscar archivos.

Apenas seleccionamos la imagen, se invoca el script php y por último se carga la imágen destras de la máscar, luego de acomodarla con el mouse este es el resultado:

Con esto completamos la explicación de como importar una imágen dinámicamente a un swf en línea, ahora vamos a ver como se exporta una imágen:

Esta parte es un poco más corta, ya que me base en un ejemplo de la página:

http://www.sephiroth.it/tutorials/flashPHP/print_screen/index.php

Basicamente utilicé una clase que ellos crearon llamada PrintScreen, modificando algunas cosas, elimando otras y agregando algunos detalles, este es el código:

import it.sephiroth.PrintScreen;

pre._visible = false;//texfield que muestra el porcentaje de preparación de la imágen a guardar

var listener:Object = new Object();

// copy in progress...

listener.onProgress = function(target:MovieClip, loaded:Number, total:Number)

var perc = Math.round((loaded/total)*100)

pre._visible = (perc<100);

pre.text = "preparando la imagen "+perc+"% completado";

// copy is complete, send the result LoadVars to PHP

listener.onComplete = function(target:MovieClip, load_var:LoadVars)

load_var.file = random(250)+".jpg";

load_var.send("pixels.php", "_blank", "POST");

function print_me()

pn = new PrintScreen(); // initialize the PrintScreen class

pn.addListener( listener ); // assign a listener

pn.print(mccont,0,0,mccont._width,mccont._height);

import it.sephiroth.PrintScreen; Lo primero que hacemos es importar la clase PrintScreen, no voy a dar muchos detalles del funcionamiento ya que los pueden encontrar en el enlace del ejemplo, basicamente lo que hace esta clase es analizar los pixeles del movieclip seleccionado y prepara los pixeles con color diferente a blanco para ser enviado a un script, que se encarga de crear la imágen en el navegador de lo que contiene el movieclip y luego darle la opción al usuario de guardar.

Para resaltar

pn.print(mccont,0,0,mccont._width,mccont._height);

Esta línea se encarga de preparar el movieclip que necesitamos convertir a imágen, recibe como parámetros la referencia al movieclip, su ubicación e información de ancho y alto.

Luego se invocan dos eventos, el evento de progreso de preparación de bytes y por último el evento de prepración completa, lo cuál quiere decir que ya tenemos la información necesaria para enviarle al script que se encarga de generar la imagen, antes del envío le agregué un un nombre de archivo aleatorio con extensión jpg.

load_var.file = random(250)+".jpg"; load_var.send("pixels.php", "_blank", "POST");

El script que procesa la imagen es el mismo de la página de ejemplo, lo único que cambia es al final, donde se redirecciona el contenido para que sea almacenado en el computador del usuario:

<?php

error_reporting(0);

/**

* Get the width and height of the destination image

* from the POST variables and convert them into

* integer values

*/

$w = (int)$_POST['width'];

$h = (int)$_POST['height'];

// create the image with desired width and height

$img = imagecreatetruecolor($w, $h);

// now fill the image with blank color

// do you remember i wont pass the 0xFFFFFF pixels

// from flash?

imagefill($img, 0, 0, 0xFFFFFF);

$rows = 0;

$cols = 0;

// now process every POST variable which

// contains a pixel color

for($rows = 0; $rows < $h; $rows++)

// convert the string into an array of n elements

$c_row = explode(",", $_POST['px' . $rows]);

for($cols = 0; $cols < $w; $cols++)

// get the single pixel color value

$value = $c_row[$cols];

// if value is not empty (empty values are the blank pixels)

if($value != "")

// get the hexadecimal string (must be 6 chars length)

// so add the missing chars if needed

$hex = $value;

while(strlen($hex) < 6)

$hex = "0" . $hex;

// convert value from HEX to RGB

$r = hexdec(substr($hex, 0, 2));

$g = hexdec(substr($hex, 2, 2));

$b = hexdec(substr($hex, 4, 2));

// allocate the new color

// N.B. teorically if a color was already allocated

// we dont need to allocate another time

// but this is only an example

$test = imagecolorallocate($img, $r, $g, $b);

// and paste that color into the image

// at the correct position

imagesetpixel($img, $cols, $rows, $test);

// print out the correct header to the browser

header("Content‐type:image/jpeg");

header("Content‐Disposition: attachment; filename=".$_POST['file']);

imagejpeg($img, "", 90);

?>

header("Content‐type:image/jpeg");

header("Content‐Disposition: attachment; filename=".$_POST['file']);

imagejpeg($img, "", 90);

Esas últimas líneas son las encargadas de mostrarle la ventana de guardar, en el computador del usuario.

Utilizando estas funcionalidades, se crea un ejemplo un poco más elaborado que permite crear imágenes como las siguientes: