Visor de Fotos Flex con Picasa (I)

Como comentaba en mi último post quería compartir con vosotros unas pocas lineas acerca del proceso de creación del visor de fotos para la cabecera de este blog.

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 .