Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex et Flickr

Compatible Flash Builder 4. Cliquer pour en savoir plus sur les compatibilités.Par d.exter (Denis exter), le 30 janvier 2010

cliquez sur le bouton “search”

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Présentation

Extrait de wikipédia:

Flickr est un site web de partage de photos et de vidéos gratuites, avec certaines fonctionnalités payantes. En plus d'être un site web populaire auprès des utilisateurs pour partager leurs photos personnelles, il est aussi souvent utilisé par des photographes professionnels. Flickr a été développé par une société canadienne de Vancouver fondée en 2002.

Il apparaît en février 2004 sous la forme d'un ensemble d'outils prévus pour un jeu informatique multiutilisateurs sur Internet : Game Neverending. Le jeu fut finalement abandonné, mais le projet Flickr survécu.

Les premières versions de Flickr étaient basées sur un chat room pour le partage de photos. Les versions ultérieures se sont concentrées davantage sur le téléchargement et le classement des photos.

En mars 2005, cette société fut rachetée par Yahoo. Tout le contenu de Flickr a été transféré depuis les serveurs canadiens vers des serveurs américains, ce qui eu comme implication que son contenu est désormais soumis aux lois américaines.

Le site hébergeait plus de trois milliards de photos en novembre 2008 et comptait plus de 54 millions de visiteurs uniques à travers le monde (selon Comscore).

Longtemps disponible uniquement en anglais, Flickr propose maintenant de nombreuses langues supplémentaires comme le chinois, le coréen, l'allemand, l'espagnol, l'italien, le français et le portugais.

Depuis avril 2008, Flickr accepte les vidéos d'une durée maximale de 90 secondes.

Aujourd’hui, il propose également une API permettant aux développeurs d’utiliser leurs services gratuitement dans des applications à but non lucratif. L'API étant écrite en actionscript, il est donc possible de l'utiliser dans des projets Flex, Flash & AIR.

L'API Flickr se compose de nombreuses méthodes. Pour exécuter une action à l'aide de l'API Flickr, vous devez envoyer une requête en spécifiant une méthode et des arguments, puis vous recevrez une réponse formatée.

Tous les formats de requêtes:

- REST

- XML-RPC

- SOAP

utilisent une liste de paramètres nommés.

Le paramètre OBLIGATOIRE method permet de spécifier la méthode d'appel.

Le paramètre OBLIGATOIRE api_key permet de spécifier votre clé API.

Le paramètre facultatif format permet de spécifier un format de réponse.

Les arguments, réponses et codes d'erreur de chaque méthode sont listés sur la page de données techniques de la méthode, je vous laisse le soin de les consulter sur le site de Flickr. Les méthodes correspondent aux formats suivants :

- REST

- XML-RPC

- SOAP

- JSON

- PHP

Il existe différents kits d’API, je ne nommerais que ceux concernant actionscript:

- api flickr (docs)

- Flashr

- Interfaces REST de l'API Flickr

- as3 flickr lib

mais sachez que de nombreux autres kits sont disponibles pour différents langages tel que ASP.NET, PHP, Python, Java, etc…

Je ne vais pas détailler toutes les méthodes de l’API ici, car elles sont vraiment très nombreuses, mais je vous renvoi directement à la documentation en ligne de Flickr pour les détails, à l’adresse suivante :

http://www.flickr.com/services/api/

L’API est vraiment très complète et vous permettra de réaliser des applications riches et dynamiques, comme par exemple la présentation de données Flickr publiques (photos, vidéo, tags, profils ou groupes) d’une manière différente et innovante, et bien plus encore…

Sur Flickr, il y a un emplacement qui s’appel « App Garden », ou les développeurs peuvent montrer les applications qu’ils ont créé, alors n’hésitez pas à montrer la votre ou a explorer celles des autres à l’adresse suivante :

http://www.flickr.com/services/

Installation

Dans ce tutoriel, nous allons voir comment intégrer des photos de Flickr dans une application Flex, en utilisant la librairie de Flickr (as3flickrlib). Nous allons afficher des photos de Flickr dans une Liste en fonction de mots clés entrés par l’utilisateur. Pour ce faire, vous aurez bien entendu besoin de Flash builder :

http://labs.adobe.com/technologies/flashbuilder4/

d’un compte Yahoo :

http://www.flickr.com/services/api/

qui vous permettra ensuite de souscrire pour une clé, qui vous permettra d’utiliser cette librairie.

Pour télécharger la librairie, il suffit de vous rendre à l’adresse suivante :

http://code.google.com/p/as3flickrlib/downloads/list

Téléchargez la dernière version (87 au moment de l’écriture de ce tutoriel).

Nous allons tout d’abord créer un nouveau projet sous Flash builder, pour ce faire, cliquer sur :

- Fichier –> Nouveau –> Projet Flex

- Nommer le Flickr

- Sélectionner Application web

- Cliquez sur Terminer.

Il faut ensuite inclure la librairie précédemment téléchargée, pour ce faire, il suffit de l’extraire du fichier zip et de la placer dans le répertoire /libs de votre projet, puis click droit sur votre projet –> Propriétés –> Chemin de génération Flex et sous l’onglet « Chemin d’accès à la bibliothèque », il faut importer la librairie « flickr.swc ».

Mise en application: Afficher des photos de Flickr dans une application Flex

Dans la page Flickr.mxml, nous allons commencer par ajouter un champ de texte suivi d’un bouton, qui une fois cliqué, effectuera une recherche d’images sur Flickr, en fonction des mots clés entrés par l’utilisateur, et affichera les images trouvées dans une liste.

Nous allons donc commencer par ajouter un champ texte, un bouton, et la liste dans laquelle seront affichées les images de Flickr :

<s:VGroup>
		<s:TextInput id="search" text="islande"/><s:Button id="btnSearch" label="Search" click="{doFlickrSearch(search.text)}"/>
		<mx:Spacer height="25"/>
		<s:List width="100%" height="100%" id="picsList" itemRenderer="tileListitemRenderer" horizontalCenter="0" verticalCenter="0">
			<s:layout>
				<s:TileLayout orientation="rows"  horizontalGap="0" verticalGap="0" />
			</s:layout>
		</s:List>
	</s:VGroup>

On utilise un itemRenderer pour afficher les images dans la liste:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="tileListitemRenderer" xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/halo" width="100%" height="100%"  updateComplete="init()">
	<fx:Script>
		<![CDATA[
			import com.adobe.webapis.flickr.Photo;
			import mx.core.Application;
 
			public function init():void{
				pic.source = 'http://static.flickr.com/' + data.@server + '/' + data.@id + '_' + data.@secret + '_m.jpg';
			}
		]]>
	</fx:Script>
	<mx:Image id="pic" />
</s:ItemRenderer>

Chaques fois que l'itemRenderer est appelé, la fonction init() est appelée par l'événement “updateComplete”, et formatte l'url de l'image grace aux informations retournées par l'API de Flickr et est assignée au composant image qui pourra ainsi l'afficher dans la liste.

Nous allons ensuite définir quelques constantes :

public static const FLICKR_API_KEY:String = "XXXYOURAPIKEYXXX";
public static const FLICKR_LICENSE:String = "2";
public static const FLICKR_METHOD:String = "flickr.photos.search";
public static const FLICKR_PER_PAGE:int = 9;
public static const FLICKR_URL:String = "http://api.flickr.com/services/rest/?method={METHOD}&api_key={API_KEY}&tags={TAGS}&license={LICENSE}&per_page={PER_PAGE}";

Il vous faudra bien évidemment assigner votre propre clé d’api à la constante « FLICKR_API_KEY ». Il existe différents types de licences, ce paramètre est facultatif. J’ai utilisé la licence No 2 qui est la licence des images non-commerciales, vous pouvez trouve tous les type de licences à l’adresse suivante :

http://www.flickr.com/services/api/flickr.photos.licenses.getInfo.html

La constante « FLICKR_PER_PAGE » définit le nombre de photos que l’on désire recevoir, le maximum est 500 et le défaut si rien n’est spécifié est de 100 photos.

La constante FLICKR_METHOD définit la method de l’API que l’on appel, en l’occurrence comme on effectue une recherché d’image, il s’agira bien entendu de la méthode “ flickr.photos.search ”.

Et enfin, la dernière constante FLICKR_URL définit le format de l’URL avec les différentes autres constantes.

Lorsque l’on clique sur le bouton « search », la méthode « doFlickSearch » est appelée, cette fonction prépare l’URL qui va être appelée par un « URLLoader », l’ « URLLoader » permet de télécharger des données depuis une URL, en l’occurrence une URL Flickr, basée sur le critère de recherche de l’utilisateur :

public function doFlickrSearch(search:String=null):void
{
	var processedURL:String = FLICKR_URL;
 
	processedURL = processedURL.replace(RegExp(/{METHOD}/), FLICKR_METHOD);
	processedURL = processedURL.replace(RegExp(/{API_KEY}/), FLICKR_API_KEY);
	processedURL = processedURL.replace(RegExp(/{TAGS}/), search);
	processedURL = processedURL.replace(RegExp(/{LICENSE}/), FLICKR_LICENSE);
	processedURL = processedURL.replace(RegExp(/{PER_PAGE}/), FLICKR_PER_PAGE);
	var urlLoader:URLLoader = new URLLoader();
	urlLoader.addEventListener(Event.COMPLETE, flickrResponseHandler);
	urlLoader.load(new URLRequest(processedURL));
}

Lorsque les données sont disponibles, la fonction « flickrResponseHandler » est appelée, et le résultat au format XML est convertit en XMLListCollection pour alimenter le dataprovider de la liste. La raison pour laquelle on convertit au format XMLListCollection est que sous le SDK 4.0 les listes n’acceptent comme dataprovider que des données au format « IList ».

private function flickrResponseHandler(evt:Event):void
{
	xml = XML(evt.currentTarget.data);
	picsList.dataProvider=new XMLListCollection(xml.photos.photo)
}

Ce tutoriel est une simple introduction à la librairie de Flickr, qui renferme encore beaucoup d’autres méthodes, vous permettant de créer des applications plus riches et dynamiques. N’hésitez pas à consulter la documentation sur Flickr (http://www.flickr.com/services/api/).

L'API de Flickr permet de reproduire tout ce qui est faisable sur le site de Flickr, sa combinaisn avec Flex permet de présenter les images d'une manière plus riches et interactives. On pourrait très bien imaginer son utilisation pour créer des widgets pour un site web, qui afficherait par exemple des images du lieu géographique où se trouve le visiteur. On pourrais aussi combiner cette API avec une autre, comme par exemple en affichant des images en relation avec la phrase du jour, ou encore en la combinant avec Google map pour afficher les images d'un lieu sur une carte. Les limites de cette API est votre imagination, il ne vous reste donc plus qu'à trouver les bonnes idées !

Je joins le fichier du projet comme à l’habitude. Amusez-vous bien.

flickr.fxp