In deze zelfstudie leert u hoe u de bibliotheek as3flickrlib gebruikt om een Flash Flickr-fotoviewer te maken.
Stap 1: De as3flickrlib
Er zijn veel bibliotheken beschikbaar voor Flex-ontwikkelaars die samenwerken met Flickr. De bibliotheek as3flickrlib is gemaakt door Adobe en is de bibliotheek die we gebruiken om deze app voor het bekijken van foto's te maken. Je moet een kopie van de as3flickrlib-code voor jezelf downloaden, evenals de as3corelib-bibliotheek (as3flickrlib is afhankelijk van as3corelib). Beide zijn hier verkrijgbaar.
Stap 2: TweenMax
Je hebt ook de TweenMax-bibliotheek nodig. TweenMax is een tweening-bibliotheek, waarmee we eenvoudig de eigenschappen van een object in de loop van de tijd kunnen wijzigen. Je kunt TweenMax hier krijgen.
Stap 3: Nieuw project
Maak een nieuw Flex-webproject en voeg de drie bovengenoemde bibliotheken toe aan het bronpad van de toepassing.
Stap 4: Wrapper Class
Deze applicatie werkt door de geladen afbeeldingen van Flickr te nemen en ze toe te voegen aan het hoofdtoepassingsobject (dat wil zeggen het object dat door het MXML-bestand is gemaakt). Wanneer u een afbeelding van het web laadt, wordt deze als een bitmap aan u geretourneerd. Hoewel de klasse Bitmap de klasse DisplayObject uitbreidt (wat de functie addChild vereist), laat Flex alleen die klassen toe die de UIComponent-klasse uitbreiden als een onderliggende component van het hoofdtoepassingsobject en breidt de bitmap de UIComponent niet uit. De compiler markeert niet het toevoegen van een bitmap aan het toepassingsobject via de functie addChild als een fout, maar u krijgt een uitzondering tijdens runtime.
Toch zou het fijn zijn om de Bitmap-objecten toe te kunnen voegen als onderliggende elementen van het Application-object. We moeten een kleine wrapper-klasse maken die de UIComponent-klasse uitbreidt (zodat deze aan de toepassing kan worden toegevoegd), maar voegt ook een bitmap toe als een onderliggende waarde. Die wrapperklasse wordt DisplayObjectUIComponent genoemd.
Dit is de shell van het MXML-bestand. Het grootste deel van de code is hetzelfde als de lege sjabloon die wordt gemaakt wanneer u een nieuwe Flex-toepassing opent in Flex Builder. Daarnaast hebben we de achtergrondkleuren opgegeven (met de backgroundGradientAlphas en backgroundGradientColors attributen) en stel de onComplete-functie in die moet worden aangeroepen wanneer het Application-object zichzelf heeft gemaakt (met de creationComplete attribuut).
Stap 6: mx: script Tag
De code die het downloaden en weergeven van de Flickr-afbeeldingen moet uitvoeren, moet in een mx: script-tag staan. De tag stelt ons in staat om code te schrijven zonder ons zorgen te hoeven maken over speciale tekens zoals groter dan en kleiner dan (< and >) geïnterpreteerd als onderdeel van het XML-document.
Stap 7: klassen importeren
We moeten enkele klassen importeren voor gebruik binnen onze applicatie.
Vervolgens moeten we enkele constanten definiëren die bepalen hoe onze applicatie werkt.
private static const SEARCH_STRING: String = "sunset"; privé-statische const MAX_RESULTS: int = 50; private static const API_KEY: String = "uw sleutel komt hier"; private static const TRANSITION_TIME: Number = 1; private static const DISPLAY_TIME: Number = 3;
SEARCH_STRING definieert de query die naar Flickr wordt verzonden. In wezen vragen we Flickr om afbeeldingen, net zoals u Google zou vragen om webpagina's. We hebben de zoekopdracht ingesteld op "sunset" hier, maar deze string kan van alles zijn zoals "kittens", "bergen", "auto's" enz..
MAX_RESULTS definieert het aantal afbeeldingen dat Flickr zal retourneren zodra het is opgevraagd.
API_KEY is uw eigen Flickr API-sleutel, die u hier kunt aanvragen.
TRANSITION_TIME definieert hoe snel de afbeeldingen in seconden in elkaar overlopen. Hier hebben we de overgangstijd ingesteld op 1 seconde.
DISPLAY_TIME definieert hoe lang elke afbeelding wordt weergegeven voordat de volgende afbeelding wordt geladen. Hier hebben we ingesteld dat elke afbeelding gedurende 3 seconden wordt weergegeven.
Stap 9: definieer variabelen
We moeten enkele variabelen definiëren voor onze applicatie.
privé var foto's: ArrayCollection = null; private var currentImage: int = 0; privé var displayImage: Bitmap = null; private var backgroundImage: Bitmap = null;
De variabele photo's is een verzameling van de fotodefinities die door Flickr zijn teruggestuurd. Het is belangrijk op te merken dat Flickr de foto's niet zelf terugstuurt, maar alleen de informatie die nodig is om de URL van de foto te vinden, die vervolgens apart moet worden gedownload.
De currentImage-variabele onderhoudt een index in de verzameling foto's. Dit is zodat we weten welke foto vervolgens moet worden weergegeven.
De variabelen displayImage en backgroundImage zijn verwijzingen naar de Bitmap-objecten die zijn gemaakt door de Flickr-afbeeldingen te laden.
Stap 10: Beleidsbestanden
Standaard kan een Flash-toepassing alleen bronnen laden vanuit zijn eigen domein. Om bronnen van een ander domein (zoals Flickr) te laden, moet de eigenaar van dat domein een beleidsbestand hebben, meestal crossdomain.xml genaamd, waarmee de Flash-runtime weet dat het OK is om hun bronnen te laden. Dit beleidsbestand moet worden geladen voordat pogingen worden ondernomen om de bronnen te laden.
Flickr host zijn afbeeldingen op een aantal servers, dus hier laden we het beleidsbestand van deze servers. Als u deze stap niet uitvoert, krijgt u een uitzondering bij het laden van afbeeldingen van deze domeinen.
Wanneer de Flex-toepassing zichzelf heeft aangemaakt, wordt de functie onComplete aangeroepen (dit hebben we in stap 5 opgegeven). De onComplete functie is het beginpunt van de toepassing.
private function onComplete (): void var service: FlickrService = new FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", SEARCH_STRING, "any", "", null, null, null, null, -1, "", MAX_RESULTS, 1);
Het eerste dat we moeten doen is een nieuw exemplaar van de FlickrService-klasse maken. Het FlickrService-object is onze toegangspoort tot Flickr en we gebruiken dit om onze zoektocht naar onze sunrise-afbeeldingen in te dienen. U moet de Flickr API-sleutel (van stap 8) aan de FlickrService-constructor leveren.
var service: FlickrService = new FlickrService (API_KEY);
Vervolgens voegen we een functie toe aan de gebeurtenis FlickrResultEvent.PHOTOS_SEARCH. Deze functie wordt aangeroepen wanneer Flickr wat informatie over een zoekopdracht heeft geretourneerd. Hier bevestigen we de functie onPhotosSearch.
Ten slotte voeren we de daadwerkelijke zoekopdracht zelf uit. De zoekfunctie heeft veel parameters die kunnen worden gebruikt om een zoekopdracht te beperken tot een specifieke gebruiker, datum, titel en meer. We zijn alleen geïnteresseerd in het vinden van foto's met de tag sunset en leveren dus een lege nulstring of -1 aan deze andere parameters.
De onPhotoSearch-functie wordt aangeroepen wanneer Flickr wat informatie over onze zoekopdracht heeft geretourneerd.
private function onPhotosSearch (event: FlickrResultEvent): void if (event.success) var photoList: PagedPhotoList = event.data.photos; foto's = nieuwe ArrayCollection (photoList.photos); loadNextImage (); else Alert.show ("Flickr-oproep mislukt. Hebt u de API-sleutel bijgewerkt?");
We moeten eerst vaststellen of de aanroep naar Flickr succesvol was. Dit wordt gedaan door de vlag event.success te controleren. Als dit waar is, heeft Flickr met succes wat informatie geretourneerd over de foto's waarvoor we het hebben opgevraagd. Als event.success false is, is het gesprek mislukt. Dit gebeurt meestal omdat de geleverde API-sleutel onjuist was.
if (event.success) ... else ...
Als de oproep succesvol was, hebben we toegang nodig tot de verzameling fotodata die is geretourneerd.
var photoList: PagedPhotoList = event.data.photos;
De PagedPhotoList bevat vervolgens de details van de foto's zelf, die we vervolgens opslaan in de verzameling foto's.
foto's = nieuwe ArrayCollection (photoList.photos);
Op dit punt bevat de fotoverzameling een lijst met fotodetails die vervolgens kunnen worden gebruikt om de daadwerkelijke foto's te laden. Vanaf hier downloaden we alleen afbeeldingen van de URL's die we hebben gemaakt met behulp van de informatie in de fotoverzameling, zonder speciale oproepen met de Flickr API.
Om het fotoalbum te starten, moeten we de functie loadNextImage aanroepen.
loadNextImage ();
Als er een probleem was bij het aanroepen van Flickr, wordt de gebruiker op de hoogte gesteld met een waarschuwingsvenster.
Alert.show ("Flickr-oproep mislukt. Hebt u de API-sleutel bijgewerkt?");
Stap 13: functie loadNextImage
Nu we de details hebben van de foto's die betrekking hebben op onze zoekopdracht, moeten we de afbeeldingen daadwerkelijk downloaden zodat ze kunnen worden weergegeven. Dit gebeurt door de functie loadNextImage.
Weet je nog dat ik zei dat de oproep naar Flickr de afbeeldingen niet zelf retourneert? Wat het wel doet, is de informatie die nodig is om construeer de URL die we kunnen gebruiken om de afbeelding te downloaden. Door de server, id en geheime informatie van de foto's te gebruiken, kunnen we de volledige URL maken die de afbeelding zal weergeven.
Elke afbeelding heeft een aantal resoluties. We kiezen welk beeldformaat we aan het achtervoegsel van de url downloaden. Het achtervoegsel _m geeft aan dat we dat zijn het downloaden van een middelgrote versie van de afbeelding. Andere achtervoegsels zijn hier te vinden, waarmee u meer of minder gedetailleerde versies van de afbeeldingen kunt downloaden.
Nu we de afbeelding hebben aangevraagd, verhogen we de currentImage-variabele zodat de volgende keer dat loadNextImage wordt aangeroepen, de volgende afbeelding in de zoeklijst wordt weergegeven.
Vervolgens moeten we de afbeeldingen daadwerkelijk laden. We maken een nieuw URLRequest-object (met de URL die we hierboven aan de constructor hebben gemaakt), een nieuw Loader-object en koppelen de functie switchImages aan de gebeurtenis Loaders Event.COMPLETE.
var request: URLRequest = new URLRequest (imageURL); var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages);
Ten slotte laden we de afbeelding van Flickr door de functie Loaders load aan te roepen.
Loader.load (verzoek);
Stap 14: switchImages Functie
De functie switchImages wordt aangeroepen wanneer we een nieuwe afbeelding van Flickr hebben geladen.
Het Bitmap-object dat door het laadproces wordt geretourneerd, wordt opgeslagen in de variabele displayImage.
displayImage = event.currentTarget.content;
Deze nieuwe bitmap wordt vervolgens geïnitialiseerd zodat deze wordt gladgemaakt (om te helpen bij de pixelvorming die kan optreden wanneer u kleine afbeeldingen opschaalt), de grootte wordt gewijzigd om het venster te vullen en volledig transparant ingesteld door de alpha in te stellen op 0.
Vervolgens voegen we de bitmap toe aan de toepassing via een nieuw exemplaar van de klasse DisplayObjectUIComponent dat we hebben beschreven in stap 4.
Op dit punt hebben we de nieuwe afbeelding toegevoegd als een onderliggende waarde van het toepassingsobject. Het is echter niet zichtbaar omdat we de alpha hebben ingesteld op 0. Wat we willen doen is deze nieuwe afbeelding in beeld te brengen door de alpha-waarde te verhogen en tegelijkertijd de laatste afbeelding uit te faden door de alpha-waarde te verlagen. Hier komt de TweenMax-bibliotheek binnen. We bellen naar de functie TweenMax.to en TweenMax zorgt vervolgens voor het aanpassen van de alpha-waarden voor ons.
Door de parameter onComplete in te stellen op imageTweenComplete, plannen we de functie imageTweenComplete om te worden aangeroepen zodra deze tweeningbewerking is voltooid concurreren.
We moeten controleren of de variabele backgroundImage null is, want wanneer de eerste afbeelding is geladen, is er geen bestaande achtergrondafbeelding die wordt weergegeven bovenop.
De functie imageTweenComplete wordt aangeroepen wanneer een nieuw geladen afbeelding door TweenMax in beeld is vervaagd.
private function imageTweenComplete (): void if (backgroundImage! = null) this.removeChild (backgroundImage.parent); backgroundImage = displayImage; displayImage = null; TweenMax.delayedCall (DISPLAY_TIME, loadNextImage);
Nadat het weergave-beeld is vervaagd, wordt de achtergrondafbeelding uit de applicatie verwijderd en wordt het display-beeld de achtergrondafbeelding. De displayImage is dan ingesteld op nul.
Vervolgens gebruiken we TweenMax om een oproep te plannen naar de functie loadNextImage. Hiermee begint de cyclus van het laden van een nieuwe afbeelding en wordt deze opnieuw vervaagd.
Het gebruik van Flickr met Flash vereist wel een paar stappen, maar als je eenmaal de Flickr API hebt doorzocht, de Flickr-afbeeldings-URL's hebt gevonden en de afbeeldingen van Flickr hebt geladen (rekening houdend met de Flash-beveiligingsbeperkingen), is het dan vrij eenvoudig om deze afbeeldingen te gebruiken om een aantrekkelijk fotoalbum te maken.
Dit specifieke voorbeeld kan worden gebruikt om een geanimeerd fotoalbum toe te voegen aan een webpagina en door de variabele SEARCH_STRING te wijzigen, kunt u verschillende soorten afbeeldingen weergeven. U kunt zelfs FlashVars doorgeven aan de Flash-applet om te bepalen welke afbeeldingen worden weergegeven zonder dat u de toepassing opnieuw hoeft te compileren. U kunt ook de service.photos.search-functie wijzigen om alleen uw eigen foto's te retourneren, of foto's die u specifiek hebt getagd.
Share
Accentsconagua
