La aplicación hace uso intensivo de las nuevas capacidades de AIR 2.0 para comunicarse de forma nativa con procesos del sistema operativo (NativeProcess API). Además ha sido diseñada pensando en la sencillez máxima: Simplemente basta con arrastrar los documentos que queremos firmar a la aplicación y hacer “click” en el botón firmar para tener todos los documentos firmados en pocos segundos.

Puedes descargar una versión de evaluación de 30 días del producto para Windows o Mac desde aquí.

A su vez es de esperar que Made In Flex y CEV aprovechen los conocimientos del equipo de MIF en estas tecnologías y las estupendas instalaciones del CEV para ofrecer nuevos eventos para beneficio de toda la comunidad.

Os dejo la nota de prensa:

CEV Y CODEOSCOPIC: ACUERDO DE COLABORACIÓN

GeoStratum es un sistema de información basado en un visor cartográfico sobre el que podemos desarrollar diferentes aplicaciones basadas en visualización georeferenciada.

La usabilidad de una aplicación de estas características alcanza niveles excelentes gracias a la sencillez de navegación, basada principalmente en clicks y movimientos del ratón, en contraposición a los típicos formularios de las aplicaciones de gestión tradicionales y la exposición de la información de forma espacial sobre localizaciones geográficas en vez de las tablas de datos normales en estos casos.

Este es sin duda un buen ejemplo de aplicación RIA, desarrollada sobre Flex y JEE, por uno de los equipos de producción de Codeoscopic. El concepto principal detrás del producto es el poder extender la base GIS para añadir información propia de un negocio concreto. En ese aspecto, GeoStratrum 2.0 es la herramienta apropiada para gestionar infraestructuras de suministro (agua, electricidad, etc), planes urbanísticos, líneas de transporte (metro, autobus,…), servicios de logística, polígonos industriales, parques naturales, etc…

Esta lista es un experimento con las nuevas capacidades que ofrecen las listas en Flex 4. Ya sabéis que ahora el layout y los Item Renderers son mucho más versatiles en Spark y podemos mantener el reciclaje de renderers (useVirtualLayout = true) a la vez que hacemos que estos se comporten de forma más expresiva como en este caso. Os recomiendo que juguéis un poco con las nuevas listas de spark

Por otra parte he añadido dos nuevos experimentos en formato “modular”. Uno es un fork del experimento con Picasa y fisicas reales, salvo que en este caso lo que llueven son controles Flex!.

El otro es un experimento-mashup con los servicios de YouTube.com. En el uso una lista de reproducción que tengo en mi usuario de YouTube para visualizar algunos videos sobre mis gustos personales a modo de “televisión a la carta”. De esta forma puedo ir añadiendo o quitando vídeos a dicha lista desde el interface de youtube para que automáticamente se visualicen en la cabecera de este blog con el formato aplicado.

El único proposito detrás de todo esto es la diversión. Como suelen decir “code is fun”!

En este caso he aplicado físicas reales al visor de fotos de Picasa. El API usada para añadir las físicas reales es Box2D. Podéis arrastar las imagenes y lanzarlas por el escenario .

También he cambiado la estructura por un cargador de módulos que selecciona uno de ellos al azar. De momento solo hay dos módulos, pero espero ir introduciendo algunos más con el tiempo. Todo es cuestión de entretenerse, experimentar y disfrutar de las cosas que se pueden hacer con Flash .

Como paso con el anterior experimento, espero destriparlo en próximos posts!

El planteamiento principal a la hora de pensar técnicamente este visor simple de fotos era como hacerlo de forma que la memoria se mantuviera estable y no tuviéramos problemas si manteníamos la ejecución durante largo tiempo, teniendo en cuenta que estamos todo el rato cargando imágenes que se quedan en el fondo del visor y que van a ir siendo tapadas en parte por las nuevas fotos.

La forma óptima es usar solo dos objetos. Un control Image de Flex que es el que irá cargando cada foto, y un Bitmap que será sobre el que iremos copiando los pixeles de cada imagen una vez terminen el recorrido de su animación (este componente puede ser un UIComponent). Una vez desarrollado este concepto, vemos que el profiler se mantiene constante como era de esperar en cuanto a la memoria consumida.

En cuanto a la programación llevada a cabo. Los dos objetos que intervienen son el control Imagen y un UIComponent que servirá de “lienzo” para ir copiando las fotos e ir manteniendo el uso de memoria:

<mx :UIComponent id="canvas"/>
<mx :Image id="img" smoothBitmapContent="true" complete="photoEffect.play();"/>

A continuación un poco de código de inicialización para entender que variables hay implicadas:

// --- Definición de variables y código de inicialización
// --- Bitmap sobre el que copiaremos las imagenes
private var collage:Bitmap;
// --- Array de datos descargado de PIcasa (ver post anterior)
private var fotos_arr:Array;

// --- Inicialización del canvas (UIComponent) sobre el que pintaremos las imagenes
canvas.width = width;
canvas.height = height;
collage = new Bitmap(new BitmapData(width, height, true, 0x000000));
canvas.addChild(collage);

Luego tenemos un método que se encarga de “lanzar una foto” como podemos ver a continuación:

public function throwOnePhoto():void {
        //-- Sacamos la imagen que lanzaremos del array de fotos de picasa al azar
	var tmp:Object = fotos_arr.splice(Math.random()*fotos_arr.length,1).pop();

	// --- hacemos los calculos iniciales (rotacion,escala,...) para dicha imagen
	angle = range*Math.random()-range/2;
	finalAngle = -angle+Math.random()*20;
	rot.angleTo = finalAngle;
	img.scaleX = img.scaleY = 2;
	img.alpha = 0;
        // --- sacamos la url de los datos de picasa y añadimos el parametro imgmax. Esto último es *crucial* para evitar errores de carga en algunos navegadores (como siempre IE da sus problemillas). Otro pequeño truco indispensable para que funcione este servicio de Picasa correctamente.
	img.source = tmp.media.content.url + "?imgmax=800";
	img.width = tmp.media.content.width;
	img.height = tmp.media.content.height;
	img.x = Math.random()*(width - img.width);
	img.y = Math.random()*(height - img.height);
	img.rotation = angle;

        // --- dibujamos en la imagen un fondo blanco y proyectamos una sombra para darle aspecto de foto a la imagen
	img.graphics.clear();
	img.graphics.beginFill(0xffffff);
	img.graphics.drawRect(-5, -5, img.width+10, img.height+10);
	img.graphics.endFill();
	img.filters = [new DropShadowFilter(1, 90, 0, .75, blur, blur, 2, 2)];
}

Cada vez que queramos lanzar una foto, llamaremos al método anterior.

En cuanto al efecto utilizado cuando “lanzamos la foto”, se trata de una combinación de efectos ejecutados en paralelo:

<fx : Declarations>
	<s : Parallel id="photoEffect" duration="4000" effectEnd="copyImage(event)" >
		<s : Fade alphaTo="1" duration="3000"/>
		<s : Rotate id="rot" startDelay="500" duration="3500" autoCenterTransform="true"/>
		<s : Scale scaleXFrom="2" scaleYFrom="2" duration="3000" scaleXTo="1" scaleYTo="1" startDelay="1000" autoCenterTransform="true"/>
	</s>
</fx>

En este caso, el truco está en el uso de los parámetros startDelay y duration para hacer la combinación de timelines que buscamos. Otro parámetro clave en la nueva arquitectura de efectos de Flex 4 es autoCenterTransform, cuyo cometido es hacer que los efectos Move, Scale y Rotate actúen al unisono mediante un proxy que hace que el valor solo cambie una vez como resultado de todos los cambios de efectos sobre el objeto (de esta forma se evitan los parpadeos o “brincos” inesperados de los objetos animados.

Finalmente y una vez que el efecto a terminado, tenemos que ejecutar la parte más delicada del proceso. La copia del estado visual de la imagen en nuestro lienzo para poder reutilizar el componente Image nuevamente y evitar el uso innecesario de memoria, como comentamos anteriormente. Para ello llamamos al método copyImage cuando el efecto a terminado su ejecución:

//cuando termina el effecto
private function copyImage(event:EffectEvent):void {
	drawOntoBitmapData(img,collage.bitmapData);

	if(fotos_arr.length > 0)
		throwOnePhoto();
}

El método drawOntoBitmapData se encarga de dibujar el objeto Image sobre el Bitmap. En el conseguimos los limites de la imagen mediante getBounds (teniendo en cuenta que hemos aplicado un filtro de sombra). Y tenemos que tener igualmente en cuenta la rotación y la traslación aplicada para hacer la copia final en nuestro lienzo. Aquí se trata de darle un poco de uso a nuestros conocimientos matemáticos .

private function drawOntoBitmapData(source : IBitmapDrawable, target : BitmapData) : void {
	var bounds : Rectangle = DisplayObject(source).getBounds(DisplayObject(source));
	var bitmapData : BitmapData = new BitmapData(bounds.width+blur*2, bounds.height+blur*2, true, 0x00000000);
	var mangle:Number = finalAngle*Math.PI/180;
	var sinVal:Number = Math.sin(mangle);
	var cosVal:Number = Math.cos(mangle);

	var m1:Matrix= new Matrix(1, 0, 0, 1, -bounds.x+blur, -bounds.y+blur);
	bitmapData.draw(source, m1, null, null, null, true);

	var m2:Matrix= new Matrix(1, 0, 0, 1, bounds.x - blur, bounds.y - blur);
	m2.translate(img.x*cosVal+img.y*sinVal, img.y*cosVal-img.x*sinVal);
	m2.rotate(mangle);
	target.draw(bitmapData, m2, null, null, null, true);
}

Y ya está. El efecto visual está terminado y listo para usar en nuestro blog .

Espero que os haya parecido interesante. El siguiente paso es empezar a jugar con lo conseguido y experimentar con las nuevas cosas que ofrece Flex 4…¿qué tal si aplicamos ahora un efecto Rotate3D?

El concepto inicial era crear una cabecera sencilla con Flex 4, donde fuesen apareciendo fotos al azar como si fuesen “lanzadas” a un escritorio. La idea no es nueva, ya que se puede ver en alguno de los salvapantallas de los Mac. El motivo de elegir Flex 4 era simplemente por posibilidades de experimentación en el futuro con el nuevo framework.

En el proceso de pensar dicha cabecera me planteé donde estarían alojadas las fotos a mostrar. Podría tener, como en mi antiguo visor de fotos, un álbum en mi propio servidor y acceder vía AMF a la estructura de directorios y fotos, de forma que simplemente subiendo una nueva foto por FTP, el servicio AMF ya supiese de su existencia y la devolviese al visor para ser visualizada. No obstante y teniendo en cuenta que hoy en día tenemos servicios de alojamiento de imágenes gratuitos como Flickr, Picasa o Facebook, me decidí por estos últimos ya que además tienen interfaces web y se hacen sencillos de gestionar. Otras ventajas de esta elección es que podemos subir las imágenes desde un browser vía http y eliminamos ancho de banda del servidor dado que las imágenes están en las máquinas de Google.

Inicialmente hice un poco de investigación entre los distintos servicios y sus APIs para Flex y finalmente me quedé con Picasa. Quizá simplemente por la sencillez que siempre imprime Google en todo lo que hace y sobre todo por el API Flex de acceso tan sencilla que encontré.

Si tenéis un álbum creado en Picasa es muy sencillo recoger la información de su contenido. Para que veáis la facilidad de uso del API de Flex podemos hacer lo siguiente:

private var gService:GDataService = new GDataService();
private var username:String = "usuario";
private var albumName:String = "album";	

gService.userName = username;
gService.proxied = false;
gService.projection = GDataService.GDATA_PROJECTION_API;

gService.addEventListener( GDataEvent.GET_PHOTOS_BY_ALBUM, handlePhotoOk );
gService.addEventListener( GDataEvent. GET_PHOTOS_BY_ALBUM_FAILED, handlePhotoFail );

gService.getPhotosByAlbum( albumName );

Como es habitual tenemos que definir un servicio con nuestro usuario y álbum a mostrar y los listeners para el manejo del resultado o del error. En mi caso opté por usar el método getPhotosByAlbum que me devuelve todas las fotos del álbum en cuestión. Luego en el método handlePhotoOk podemos recoger el array de fotos depositado en event.result.source y comenzar a usarlo en nuestro visor para mostrar las imágenes que necesitemos.

Eso sí, os dejo unas lineas de código fundamentales para que todo funcione correctamente:

Security.loadPolicyFile( "http://photos.googleapis.com/data/crossdomain.xml" );

Security.loadPolicyFile( "http://lh3.ggpht.com/crossdomain.xml" );
Security.loadPolicyFile( "http://lh4.ggpht.com/crossdomain.xml" );
Security.loadPolicyFile( "http://lh5.ggpht.com/crossdomain.xml" );
Security.loadPolicyFile( "http://lh6.ggpht.com/crossdomain.xml" );

Esto último lo descubrí a base de prueba y error ya que la seguridad del Flash Player, una vez más, tiende a complicarnos un poco la vida y sin estas lineas las imágenes no descargaran o algunos browsers simplemente no mostraran ninguna imagen haciendo que nuestro visor falle silenciosamente (o mal funcione en el mejor de los casos).

En el siguiente post veremos como mostrar las imágenes con el efecto deseado ahora que tenemos la fuente de datos a punto. Espero que os resulte interesante .

Con respecto al lavado de cara realizado, el tema de wordpress elegido es Carrington, con algunas modificaciones. También le he añadido en el header un pequeño visor de fotos de un álbum que he colgado en Picasa. De esta forma conforme vaya añadiendo nuevas imágenes, el visor mostrará dichos cambios sin tener que tocar nada. Este pequeño experimento lo he desarrollado con las últimas betas de Flex 4 (que requiere Flash Player 10). Realmente no es necesario, pero ¡que demonios!, de eso se trata ¿no?. De colgar las cosas experimentales que en otros lugares como la web de Codeoscopic no podría poner . De hecho mi plan es ir evolucionando este visor con algunas cosillas que nos ofrece el nuevo player conforme tenga tiempo para ir jugando.

En próximos post analizaremos este visor de Picasa. Espero que lo encontréis interesante .

Este nuevo evento tiene un montón de charlas muy interesantes donde podremos conocer todo lo nuevo que está preparando Adobe:

Flash Builder 4 (el nuevo Flex Builder), Gumbo (Flex 4), Spark (el nuevo juego de componentes de Flex4), Flex Unit 4, Flash Catalyst.

También tendremos otros temas que son igualmente muy interesantes: Flex + SEO o como hacer webs Flex Indexables y por otra parte, una comparación de frameworks : Cairngorm, Swiz, PureMVC y Mate.

Todo esto amenizado por el buen rollo y ganas de compartir que siempre tenemos en los eventos que organizamos en Made In Flex.

Sin desperdicio ¿no?. Podéis leer más aquí­. Si queréis asistir no olvidéis registraros aquí­ !

Nos vemos el 5 de Junio en Barcelona!

Hace unos pocos dí­as recibí­ un paquete con una camiseta. La camiseta es un detalle a todos aquellos que estamos poniendo nuestro granito de arena ayudando en la mejora de Flex en todo el mundo. Como se puede ver en las fotos, los chicos de Adobe se han molestado en personlizar el Fx del logo de Flex con los nombres de todos los implicados. Con detalles como este (y otros muchos) no es de extrañar que Adobe goze de tan buena prensa en el mundo. Gracias Adobe!