Your SlideShare is downloading. ×
Manual crear imágenes desde flash
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Manual crear imágenes desde flash

5,598
views

Published on

Manual para crear imágenes dinámicas desde flash, muy útil para desarrollos que involucren creación dinámica de personajes. NOTA: No se recomienda crear imágenes muy grandes, ya que puede no funcionar …

Manual para crear imágenes dinámicas desde flash, muy útil para desarrollos que involucren creación dinámica de personajes. NOTA: No se recomienda crear imágenes muy grandes, ya que puede no funcionar el programa por envío de muchos datos, se recomienda crear imágenes de un tamaño apróx de 800 x800, se puede más grande pero se empieza a afectar el rendimiento.

Published in: Design

6 Comments
1 Like
Statistics
Notes
  • Hola, por fin logre hacer lo de la subida de imagenes siguiendo tu manual y el manual de www.programador-php.com/flash_dinamico_con_php.php, el primer tema.


    Veras... ahora me toca hacer que el imprimir pantantalla o en el caso del ejemplo que tengo el 'redimenzionar la imagen' quede guardada la imagen final, jundo al marco.

    Este es el ejemplo de lo que ya tengo: http://leonardosco.com/avatares/

    Como puedo hacer que elijan un marco y cuando quieran guardar la imagen se guarde junto al marco...

    mmmm... para explicarme un poco mas hare un boceto ... en imagen para apreciar lo que quiero hacer :D...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Muchas gracias por la ayuda... he estado estudiando el tema para poder lograr algo similar con lo de los avatares...

    seria mucha molestia si nos agregamos al msn para estar mas en contacto?

    Tus proyectos son increibles.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Te recomiendo entonces que trabaajes localmente, instala el xamp. Luego proba la parte de subir la imagen a un servidor y mira si te funciona. Para poderte colaborar, no se te olvide poner el còdigo y los comentarios respectivos.

    Toda la programaciòn de los juegos yo la he hecho, desde cero, el diseño es de otra persona.

    Saludos
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Lo estoy corriendo en un servidor web...

    Mi intencion final es intentar hacer un generador de avatares, donde el usuario seleccionara un marco, sube su foto, la acomoda, y la descarga...

    Muy chidos los juegos que tienes en youtube, los hiciste tu?

    Saludos y muchas gracias por la pronta respuesta.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hola,

    Respondeme por favor las siguientes para darte una solución.

    1. Estar corriendo los archivos en un servidor local o servidor web.
    2. Si es local, como lo estas haciendo.

    Nota: algunas distribuciones de php, no tienen activadas las funcionalidades de la librería GD, la cual se usa para subir la imagen.

    Revisa por favor y me contas como te va.

    Para ver la aplicación funcionando visita:

    http://www.youtube.com/xaca11

    Saludos, proximamente monto una ruta con el ejemplo.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,598
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
302
Comments
6
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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.
  • 2. 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. 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:quot;Archivos de Imagenquot;, extension:quot;*.jpg;*.gif;*jpeg;*.pngquot;, macType:quot;JPEG;jp2_;GIFFquot;}]; upload_btn.addEventListener(quot;clickquot;, doUpload); fileUpload.addListener(escucha); escucha.onSelect = doSelect; escucha.onComplete = doComplete; escucha.onCancel = doCancel; escucha.onProgress = doProgress; function doComplete(archivo:FileReference) { mcLoader.loadClip(quot;archs/quot;+archivo.name,mccont.video_mc.mccont); } function doProgress(archivo:FileReference, bLoaded:Number, bTotal:Number) { var porcentaje = Math.round((bLoaded*100)/bTotal); //porcentaje+quot;% del archivo quot;+archivo.name; //porcentaje; } function doCancel() { trace(quot;El Usuario Canceloquot;); } function doSelect(archivo:FileReference) { fileUpload.upload(quot;uploadFile.phpquot;); } function doUpload(event) { fileUpload.browse(fileTypes); }
  • 4. 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(); } }
  • 5. 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:quot;Archivos de Imagenquot;, extension:quot;*.jpg;*.gif;*jpeg;*.pngquot;, macType:quot;JPEG;jp2_;GIFFquot;}]; 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(quot;uploadFile.phpquot;);  El archivo uploadFile.php contiene el siguiente código:  <?php //ruta del fichero a almacenar $uploadfile = quot;./archs/quot;.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.
  • 6. 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(quot;archs/quot;+archivo.name,mccont.video_mc.mccont);//Opción uno mcLoader.loadClip(quot;archs/quot;+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.
  • 7. 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:
  • 8. 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 = quot;preparando la imagen quot;+perc+quot;% completadoquot;; } // copy is complete, send the result LoadVars to PHP listener.onComplete = function(target:MovieClip, load_var:LoadVars){ load_var.file = random(250)+quot;.jpgquot;; load_var.send(quot;pixels.phpquot;, quot;_blankquot;, quot;POSTquot;); } 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.
  • 9. 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)+quot;.jpgquot;; load_var.send(quot;pixels.phpquot;, quot;_blankquot;, quot;POSTquot;);  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;
  • 10. // 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(quot;,quot;, $_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 != quot;quot;){ // get the hexadecimal string (must be 6 chars length) // so add the missing chars if needed $hex = $value; while(strlen($hex) < 6){ $hex = quot;0quot; . $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(quot;Content‐type:image/jpegquot;); header(quot;Content‐Disposition: attachment; filename=quot;.$_POST['file']); imagejpeg($img, quot;quot;, 90); ?> header(quot;Content‐type:image/jpegquot;); header(quot;Content‐Disposition: attachment; filename=quot;.$_POST['file']); imagejpeg($img, quot;quot;, 90);  Esas últimas líneas son las encargadas de mostrarle la ventana de guardar, en el computador  del usuario.
  • 11. Utilizando estas funcionalidades, se crea un ejemplo un poco más elaborado que permite  crear imágenes como las siguientes: