Dans ce didacticiel, vous apprendrez à utiliser la bibliothèque as3flickrlib pour créer une visionneuse de photos Flash Flickr..
Étape 1: Le as3flickrlib
Il existe de nombreuses bibliothèques disponibles pour les développeurs Flex qui interagissent avec Flickr. La bibliothèque as3flickrlib a été créée par Adobe. C'est la bibliothèque que nous utiliserons pour créer cette application d'affichage de photos. Vous devrez télécharger une copie du code as3flickrlib pour vous-même, ainsi que de la bibliothèque as3corelib (as3flickrlib dépend de as3corelib). Les deux peuvent être obtenus d'ici.
Étape 2: TweenMax
Vous aurez également besoin de la bibliothèque TweenMax. TweenMax est une bibliothèque d'interpolation, ce qui nous permet de modifier facilement les propriétés d'un objet au fil du temps. Vous pouvez obtenir TweenMax ici.
Étape 3: Nouveau projet
Créez un nouveau projet Web Flex et ajoutez les trois bibliothèques mentionnées ci-dessus au chemin source de l'application..
Étape 4: Classe d'emballage
Cette application fonctionne en prenant les images chargées à partir de Flickr et en les ajoutant à l'objet Application principal (c'est-à-dire l'objet créé par le fichier MXML). Lorsque vous chargez une image sur le Web, elle vous est renvoyée sous forme de bitmap. Alors que la classe Bitmap étend la classe DisplayObject (comme le requiert la fonction addChild), Flex n'autorisera que les classes étendues à la classe UIComponent à être ajoutées en tant qu'enfants de l'objet Application principal, et Bitmap n'étendra pas UIComponent. Le compilateur ne signalera pas l'ajout d'une bitmap à l'objet Application via la fonction addChild comme une erreur, mais vous obtiendrez une exception au moment de l'exécution..
Néanmoins, il serait intéressant de pouvoir ajouter les objets Bitmap en tant qu'enfants de l'objet Application. Nous devons créer une petite classe wrapper qui étend la classe UIComponent (afin qu'elle puisse être ajoutée à l'application), mais ajoute également un bitmap en tant qu'enfant de lui-même. Cette classe wrapper s'appelle DisplayObjectUIComponent.
package import flash.display.DisplayObject; import mx.core.UIComponent; Classe publique DisplayObjectUIComponent étend UIComponent fonction publique DisplayObjectUIComponent (displayObject: DisplayObject) super (); explicitHeight = displayObject.height; explicitWidth = displayObject.width; addChild (displayObject);
Étape 5: Nouveau fichier MXML
Maintenant, nous devons créer le fichier MXML.
…
C'est le shell du fichier MXML. La plupart du code est identique au modèle vide créé lors de l'ouverture d'une nouvelle application Flex dans Flex Builder. De plus, nous avons spécifié les couleurs d’arrière-plan (avec le backgroundGradientAlphas et backgroundGradientColors attributs) et définir la fonction onComplete à appeler lorsque l'objet Application s'est créé (avec le créationComplete attribut).
Étape 6: mx: script tag
Le code permettant de télécharger et d’afficher les images Flickr doit être contenu dans une balise mx: script. le tag nous permet simplement d’écrire du code sans avoir à nous soucier des caractères spéciaux tels que supérieur à et inférieur à (< and >) en cours d'interprétation dans le document XML.
Étape 7: Importer des classes
Nous devons importer certaines classes pour les utiliser dans notre application.
Ensuite, nous devons définir des constantes qui contrôleront le fonctionnement de notre application..
Constante statique privée SEARCH_STRING: String = "sunset"; statique privée privée MAX_RESULTS: int = 50; const statique privé API_KEY: String = "votre clé va ici"; Const statique privée TRANSITION_TIME: Number = 1; Const statique privée DISPLAY_TIME: Number = 3;
SEARCH_STRING définit la requête qui sera envoyée à Flickr. Essentiellement, nous interrogerons Flickr pour les images, comme vous interrogeriez Google pour les pages Web. Nous avons défini la requête sur "coucher de soleil" ici, mais cette chaîne pourrait être quelque chose comme "chatons", "montagnes", "voitures", etc..
MAX_RESULTS définit le nombre d'images que Flickr renverra une fois qu'il aura été interrogé..
API_KEY est votre propre clé d'API Flickr, que vous pouvez appliquer ici..
TRANSITION_TIME définit la rapidité avec laquelle les images s’affichent en quelques secondes. Ici, nous avons défini le temps de transition pour prendre 1 seconde.
DISPLAY_TIME définit la durée d'affichage de chaque image avant le chargement de l'image suivante. Ici, nous avons défini chaque image à afficher pendant 3 secondes.
Étape 9: Définir les variables
Nous devons définir quelques variables pour notre application.
photos var privées: ArrayCollection = null; private var currentImage: int = 0; private var displayImage: Bitmap = null; private var backgroundImage: Bitmap = null;
La variable photos est un ensemble de définitions de photos renvoyées par Flickr. Il est important de noter que Flickr ne renvoie pas les photos elles-mêmes, mais uniquement les informations nécessaires pour trouver l'URL de la photo, qui doit ensuite être téléchargée séparément..
La variable currentImage conserve un index dans la collection de photos. C’est pour que nous sachions quelle photo doit être affichée ensuite.
Les variables displayImage et backgroundImage sont des références aux objets Bitmap créés en chargeant les images Flickr..
Étape 10: Fichiers de stratégie
Par défaut, une application Flash ne peut charger que des ressources de son propre domaine. Pour charger des ressources d'un autre domaine (comme Flickr), le propriétaire de ce domaine doit disposer d'un fichier de stratégie, généralement appelé crossdomain.xml, qui indique au moteur d'exécution de Flash que le chargement de leurs ressources est correct. Ce fichier de stratégie doit être chargé avant toute tentative de chargement des ressources..
Flickr héberge ses images sur plusieurs serveurs. Nous chargeons donc ici le fichier de règles de ces serveurs. Si vous n'effectuez pas cette étape, vous aurez une exception lorsque vous essayez de charger des images à partir de ces domaines..
Lorsque l'application Flex a fini de se créer, la fonction onComplete est appelée (c'est ce que nous avons spécifié à l'étape 5). Le onComplete fonction est le point d'entrée de l'application.
fonction privée onComplete (): void service var: FlickrService = new FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", SEARCH_STRING, "tout", "", null, null, null, null, -1, "", MAX_RESULTS, 1);
La première chose à faire est de créer une nouvelle instance de la classe FlickrService. L'objet FlickrService est notre passerelle vers Flickr, et nous l'utilisons pour soumettre notre recherche à nos images sunrise. Vous devez fournir la clé d'API Flickr (à partir de l'étape 8) au constructeur FlickrService..
service var: FlickrService = new FlickrService (API_KEY);
Ensuite, nous attachons une fonction à l'événement FlickrResultEvent.PHOTOS_SEARCH. Cette fonction sera appelée lorsque Flickr aura renvoyé des informations sur une recherche. Ici, nous attachons la fonction onPhotosSearch.
Enfin, nous effectuons la recherche proprement dite. La fonction de recherche comporte de nombreux paramètres qui peuvent être utilisés pour limiter la recherche à un utilisateur spécifique, à une date, à un titre, etc. Nous ne sommes intéressés que par la recherche de photos avec la balise sunset et nous fournissons donc une chaîne vide ou vide ou -1 à ces autres paramètres.
La fonction onPhotoSearch est appelée lorsque Flickr a renvoyé des informations sur notre recherche..
fonction privée onPhotosSearch (événement: FlickrResultEvent): void if (événement.success) var photoList: PagedPhotoList = event.data.photos; photos = new ArrayCollection (photoList.photos); loadNextImage (); else Alert.show ("L'appel Flickr a échoué. Avez-vous mis à jour la clé API?");
Nous devons d’abord déterminer si l’appel à Flickr a abouti. Ceci est fait en vérifiant l'indicateur event.success. Si tel est le cas, Flickr a renvoyé avec succès des informations sur les photos pour lesquelles nous l'avons interrogé. Si event.success est false, l'appel a échoué. Cela se produit généralement parce que la clé d'API fournie était incorrecte.
if (event.success) … sinon …
Si l'appel a abouti, nous devons avoir accès à la collection de données photo renvoyée..
var photoList: PagedPhotoList = event.data.photos;
La PagedPhotoList contient ensuite les détails des photos elles-mêmes, que nous sauvegardons ensuite dans la collection de photos..
photos = new ArrayCollection (photoList.photos);
À ce stade, la collection de photos contient une liste de détails de photo qui peuvent ensuite être utilisés pour charger les images réelles. À partir de là, nous allons simplement télécharger des images, à partir des URL que nous avons créées à l'aide des informations de la collection de photos, sans autres appels spéciaux à l'aide de l'API Flickr..
Pour démarrer l'album photo, nous devons appeler la fonction loadNextImage.
loadNextImage ();
En cas de problème lors de l'appel de Flickr, l'utilisateur est averti par une fenêtre d'alerte..
Alert.show ("L'appel Flickr a échoué. Avez-vous mis à jour la clé API?");
Étape 13: Fonction loadNextImage
Maintenant que nous avons les détails des photos qui se rapportent à notre recherche, nous devons télécharger les images afin qu’elles puissent être affichées. Ceci est fait par la fonction loadNextImage.
fonction privée loadNextImage (): void var imageURL: String = 'http://static.flickr.com/' + photos [currentImage] .server + '/' + photos [currentImage] .id + '_' + photos [ currentImage] .secret + '_m.jpg'; ++ currentImage; currentImage% = photos.length; var request: URLRequest = new URLRequest (imageURL); var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages); loader.load (demande);
N'oubliez pas que j'ai dit que l'appel à Flickr ne renvoie pas les images elles-mêmes. Ce qu’elle renvoie est l’information nécessaire pour Construisez l'URL que nous pouvons utiliser pour télécharger l'image. En utilisant le serveur, l'id et les informations secrètes des photos, nous pouvons créer l'URL complète qui affichera l'image.
Chaque image a un certain nombre de résolutions. Nous sélectionnons la taille de l'image que nous téléchargeons à l'aide du suffixe de l'URL. Le suffixe _m indique que nous sommes télécharger une version de taille moyenne de l'image. D'autres suffixes peuvent être trouvés ici, ce qui vous permet de télécharger des versions plus ou moins détaillées des images..
Maintenant que nous avons demandé l'image, nous incrémentons la variable currentImage afin que la prochaine fois que loadNextImage soit appelée, nous déroulons l'image suivante dans la liste de recherche..
++Image actuelle; currentImage% = photos.length;
Ensuite, nous devons réellement charger les images. Nous créons un nouvel objet URLRequest (en fournissant au constructeur l'URL créée ci-dessus), un nouvel objet Loader et associons la fonction switchImages à l'événement Loaders Event.COMPLETE..
var request: URLRequest = new URLRequest (imageURL); var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages);
Enfin, nous chargeons l'image depuis Flickr en appelant la fonction de chargement Loaders.
loader.load (demande);
Étape 14: Fonction switchImages
La fonction switchImages est appelée lorsque nous avons chargé une nouvelle image à partir de Flickr..
L'objet Bitmap renvoyé par le processus de chargement est enregistré dans la variable displayImage..
displayImage = event.currentTarget.content;
Ce nouveau bitmap est ensuite initialisé de manière à ce qu'il soit lissé (pour aider à la pixellisation pouvant se produire lorsque vous redimensionnez de petites images), redimensionné pour remplir la fenêtre et défini pour être complètement transparent en définissant sa valeur alpha sur 0..
À ce stade, nous avons ajouté la nouvelle image en tant qu'enfant de l'objet Application. Cependant, elle n'est pas visible car nous avons défini l'alpha sur 0. Ce que nous voulons, c'est masquer cette nouvelle image en augmentant sa valeur alpha, tout en masquant la dernière image en diminuant sa valeur alpha. C’est là que la bibliothèque TweenMax entre en jeu. Nous appelons la fonction TweenMax.to, qui prend ensuite en charge la modification des valeurs alpha pour nous..
En définissant le paramètre onComplete sur imageTweenComplete, nous planifions l’appel de la fonction imageTweenComplete une fois que cette opération d’interpolation est terminée. rivaliser.
Nous devons vérifier si la variable backgroundImage est null car, lorsque la première image est chargée, il n’existe pas d’image backgroundImage qu’elle affiche au-dessus de.
La fonction imageTweenComplete est appelée lorsqu'une image nouvellement chargée est affichée en fondu à l'écran par TweenMax..
fonction privée imageTweenComplete (): void if (backgroundImage! = null) this.removeChild (backgroundImage.parent); backgroundImage = displayImage; displayImage = null; TweenMax.delayedCall (DISPLAY_TIME, loadNextImage);
Une fois que la propriété displayImage a été estompée, la propriété backgroundImage est supprimée de l'application et la propriété displayImage devient la propriété backgroundImage. le displayImage est alors défini sur null.
Nous utilisons ensuite TweenMax pour planifier un appel à la fonction loadNextImage. Cela démarre le cycle de chargement d’une nouvelle image et de son réapparition en fondu..
Utiliser Flickr avec Flash nécessite quelques étapes, mais une fois que vous avez compris l’API de Flickr, recherchez les URL d’image Flickr, chargez les images à partir de Flickr (en tenant compte des restrictions de sécurité de Flash), il est alors très facile d’utiliser ces images. créer un album photo attrayant.
Cet exemple particulier pourrait être utilisé pour ajouter un album photo animé à une page Web. En modifiant la variable SEARCH_STRING, vous pouvez afficher différents types d'images. Vous pouvez même transmettre FlashVars à l'applet Flash pour déterminer les images à afficher sans avoir à recompiler l'application. Vous pouvez également modifier la fonction service.photos.search pour ne renvoyer que vos propres photos ou celles que vous avez marquées spécifiquement..
Share
Accentsconagua
