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: