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.

Leopard Photo Screen Saver

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 :).

6 Comentarios

  1. Extraordinario, Charlie! Yo había visto algún ejemplo de Flickr, pero muy inocente, y al final me decanté por lo mismo que hiciste tú al principio: tenerlo en tu propio servidor y tirar de ellos mediante un catálogo XML. Pero viendo este ejemplo, me está empezando a picar el gusanillo de experimentar también.

  2. Hola Rafa,
    si usas tu propio servidor y quieres ahorrarte el XML, te aconsejo que te hagas un servicio AMF que te devuelva la estructura de carpetas con los albums y otro servicio que te devuelva las imagenes de cada album (con toda la información oportuna). De esta forma evitas tener que estar modificando XMLs y el único mantenimiento es subir por FTP las nuevas imagenes a tu servidor.
    Por otra parte este método ofrece la ventaja de tener un servicio externo que es el que se encarga de todo esto, por lo que evitas el tener que entrar vía FTP y por otra parte puedes usar alguna de las muchas aplicaciones que hoy día soportan estos servicios, de forma que puedes actualizar tu album remoto casi en cualquier sitio y ver el resultado con tu visor Flex directamente 🙂

  3. Hola Carlos,
    Resulta que me encontraba haciendo esto mismo, un visor de imágenes de Picasa, repasando las APIs y demás, cuando me he encontrado con que Picasa tiene un Atom asociado a cada usuario y a cada carpeta de imágenes, con lo que basta con cargar el siguiente XML:
    http://picasaweb.google.com/data/feed/api/user/
    Para que devuelva un listado de carpetas, y sus Atom corresponientes.
    A su vez, cada imagen tiene de nuevo su Atom con los detalles de la foto y los comentarios.
    Probablemente la API Flex de acceso que comentas lea esto mismo y lo simplifique un poco, pero me parecía interesante comentarlo, por si alguien quiere acceder a pelo, o tener más control.

  4. No sale el final del enlace… acaba en /api/user/(y aqui va el user name), eso me pasa por ponerlo con símbolos de mayor y menor 😉

  5. Hola Charles; tal vez puedas ayudarme con un problema que no he podido solucionar; necesito para mi blog un visor de imágenes a) que las muestre casi del tamaño de la pantalla b) que presente las imágenes una a continuación de otra automáticamente, como presentación de diapositivas, y c) que el tiempo de permanencia de las imágenes en pantalla sea establecido a voluntad mia (para poder elegir entre pocos segundos, o un minuto, o dos, etc). sabéis de algo que me pueda servir? Anticipo que no se mucho de sistemas. Mil gracias por anticipado.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *