Minitutorial: Guardar imágenes JPEG desde Flash CS4

Una de las prestaciones más interesantes de Flash Player 10 es la posibilidad de poder guardar documentos directamente a disco sin necesidad de recurrir a ninguna tecnología de servidor tipo PHP, ASP o similar. Si combinamos esta función con la clase JPEG Encoder de las Core libraries de Action script veremos lo sencillo que es guardar una imagen bitmap en disco a partir de un clip de película de un documento de Flash.

A continuación vamos a mostrar cuales son los pasos a seguir para conseguirlo mediante un sencillo mini-tutorial de Flash CS4. NOTA: Este minitutorial asume que ya tienes conocimientos básicos de Flash.

1. Crea un nuevo documento en Flash CS4 del tipo Archivo de Flash (AS 3.0)
2. Antes de seguir descárgate las core libraries action script de la siguiente web de google. http://code.google.com/p/as3corelib/ Una vez descargado el fichero .zip descomprímelo en una carpeta de tu disco duro donde luego puedas localizarlo.
3. Selecciona el comando de menú Edición>Preferencias, y dentro de las categorías del cuadro de diálogo que aparece haz clic en Action Script
   
   
4. Haz clic en el botón Configuración de Action Script 3.0.
   
5. Dentro del apartado “Ruta de biblioteca” haz clic en el icono rojo de “navegar hasta archivo SWC”
   
6. Localiza el documento SWC de las core libraries que localizarás dentro de la carpeta donde descomprimiste el documento .zip en as3corelib-.92.1\lib\as3corelib.swc y haz clic en “Open” o “abrir” y luego clic en “Aceptar” hasta que vuelvas de nuevo al escenario del documento. Ya tenemos incluidas las core libraries de action script que haremos servir para codificar la imagen JPEG de nuestra aplicación.
7. Ahora crea el movie clip que contendrá la imagen que vamos a exportar como JPEG, para ello, selecciona el comando de menú Insertar>Nuevo símbolo… y elige un símbolo del tipo clip de película.
8. En el interior de símbolo dibuja la imagen que deseas guardar. Puedes dibujarla directamente en Flash con las herramientas de dibujo del propio programa o puedes importarla de Illustrator o Photoshop. Da igual que los gráficos sean bitmap o vectoriales, el resultado será siempre una imagen bitmap. NOTA: Es importante que la imagen se sitúe a la derecha y abajo del punto de referencia del clip de película (la señal de la cruz) ya que ese punto será el que se considere como coordenada de origen (esquina superior izquierda) para exportar  la imagen JPEG.
   
9. Vuelve al escenario principal y arrastra una instancia del símbolo que acabas de crear al escenario desde la biblioteca. Bautiza a esta instancia con el nombre de “dibujo_mc” dentro del panel de propiedades ya que será mediante este nombre como nos referiremos al clip de película desde action script.
   
10. Siguiendo el mismo proceso, crea un símbolo de bóton, arrastra una instancia al escenario desde la biblioteca y dale el nombre de “guardar_btn”.



11. Haz clic en la celda correspondiente al primer fotograma en la línea de tiempo y abre el panel de acciones. Vamos a comenzar a escribir el script.

import com.adobe.images.JPGEncoder;

Con esta instrucción cargamos la clase de codificación de las core library

A continuación creamos una variable del tipo Bitmap data que contendrá los píxeles de la imagen que queremos guardar. Los parámetros que pasamos al objeto Bitmap Data son el ancho y el alto del mapa de bits que esta ocasión coincidirán con el ancho y alto del clip de película creado.

 import com.adobe.images.JPGEncoder; 

var jpgOrigen:BitmapData = new BitmapData (dibujo_mc.width, dibujo_mc.height);

1. Seguidamente dibujamos el contenido del clip de película dentro del objeto Bitmap data que acabamos de crear.

import com.adobe.images.JPGEncoder;

var jpgOrigen:BitmapData = new BitmapData (dibujo_mc.width, dibujo_mc.height);

jpgOrigen.draw(dibujo_mc);

1. En el siguiente paso vamos a crear una variable del tipo JPGEncoder para almacenar la información de mapa de bits en formato JPEG. El parámetro de valor numérico que hay en el interior de los paréntesis es el nivel de calidad/compresión que tendrá el JPEG resultante

import com.adobe.images.JPGEncoder;

var jpgOrigen:BitmapData = new BitmapData (dibujo_mc.width, dibujo_mc.height);

jpgOrigen.draw(dibujo_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);

1. Ahora toca crear una nueva variable del tipo ByteArray que será la que “encapsulará” en un fichero la información JPEG codificada. El valor de esta variable es el resultado de aplicar al bitmap jpgOrigen el método encode de la clase JPEGEncoder

import com.adobe.images.JPGEncoder;

var jpgOrigen:BitmapData = new BitmapData (dibujo_mc.width, dibujo_mc.height);

jpgOrigen.draw(dibujo_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);

var jpgFile:ByteArray = jpgEncoder.encode(jpgOrigen);

1. El siguiente paso es asignar un “listener” al botón que hemos creado para guardar la imagen cuando hagamos clic sobre él. El listener invocará a una función a la que llamaremos “guardar” que será la que realmente guardará la imagen JPEG en disco

import com.adobe.images.JPGEncoder;

var jpgOrigen:BitmapData = new BitmapData (dibujo_mc.width, dibujo_mc.height);

jpgOrigen.draw(dibujo_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);

var jpgFile:ByteArray = jpgEncoder.encode(jpgOrigen);

guardar_btn.addEventListener(MouseEvent.MOUSE_UP,guardar);

1. Y ahora queda de finir la función que utilizará la clase “File Reference” que utilizará un cuadro de diálogo para guardar la imagen en disco.

import com.adobe.images.JPGEncoder;

var jpgOrigen:BitmapData = new BitmapData (dibujo_mc.width, dibujo_mc.height);

jpgOrigen.draw(dibujo_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);

var jpgFile:ByteArray = jpgEncoder.encode(jpgOrigen);

guardar_btn.addEventListener(MouseEvent.MOUSE_UP,guardar);

function guardar (event:MouseEvent){

var ficheroGuardado:FileReference = new FileReference();

ficheroGuardado.save(jpgFile,"image.jpg");

 }

Lo que se ha hecho en el interior de la función es crear una variable con una instancia de la clase “File reference” . A esta instancia se le asigna el método “save” que se encarga de abrir el cuadro de diálogo de guardar, como en cualquier aplicación de escritorio. El nombre por defecto del fichero que se guardará es “imagen.jpg”, pero por supuesto se le puede cambiar en el momento de guardarlo a disco.

Y eso es todo!!. Tendremos en nuestro disco duro un flamante fichero .JPG listo para imprimir, editar o hacer lo que queramos con él en cualquiera de nuestras aplicaciones gráficas favoritas como Photoshop o Fireworks.

Ahora pensad en la cantidad de posibilidades que se abren para el creativo con esta prestación. Con Flash es posible crear innumerables efectos gráficos mediante action script que ni tan solo podemos imaginar realizar mediante los métodos tradicionales y que ahora vamos a poder reflejar y salvar en un fichero JPEG sin necesidad de acudir a ninguna tecnología de servidor. Lo que hemos visto es tan solo la punta del iceberg, el script se puede sofisticar hasta cotas mucho más refinadas. A ver lo que sois capaces de hacer, yo…estoy en ello ;-).