Build en Photo Viewer Bruke Flex og Flickr API
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil du lære hvordan du bruker as3flickrlib biblioteket for å lage en Flash Flickr fotofremviser.
Trinn 1: as3flickrlib
Det er mange biblioteker tilgjengelig for Flex utviklere som grensesnitt med Flickr. Den as3flickrlib Biblioteket ble opprettet av Adobe og er biblioteket som vi vil bruke til å lage dette bildet visningsprogrammet. Du må laste ned en kopi av as3flickrlib koden for deg selv, samt as3corelib bibliotek (as3flickrlib avhenger as3corelib). Begge kan fås herfra
Trinn 2:. TweenMax
Du vil også trenge TweenMax biblioteket. TweenMax er en tweening bibliotek, som tillater oss å enkelt endre egenskapene til et objekt over tid. Du kan få TweenMax her
Trinn 3:.. Nytt prosjekt
Opprett en ny Flex web-prosjektet og legge de tre bibliotekene nevnt ovenfor til kilden Path of søknaden
Trinn 4: Wrapper Class
Denne applikasjonen fungerer ved å ta bilder som er lastet fra Flickr og legge dem til hoved Application objekt (dvs. objektet som er opprettet av MXML fil). Når du legger et bilde av nettet det er returnert til deg som en Bitmap. Mens Bitmap klassen utvider Displayobject klasse (som er hva addChild funksjonen krever), vil Flex bare tillate de klasser som utvider UIComponent klassen til å bli lagt til som et barn av hoved Application objekt, og Bitmap ikke forlenge UIComponent. Kompilatoren vil ikke flagge legge en Bitmap til Application objektet via addChild funksjon som en feil, men du vil få et unntak under kjøring.
Likevel ville det være fint å kunne legge til Bitmap objekter som barn av programmet objektet. Vi må lage en liten wrapper klasse som gjør forlenge UIComponent klasse (slik at det kan legges til Application), men legger også en Bitmap som et barn av seg selv. At wrapper klassen kalles DisplayObjectUIComponent
pakke {import flash.display.DisplayObject.; import mx.core.UIComponent; public class DisplayObjectUIComponent strekker UIComponent {offentlig funksjon DisplayObjectUIComponent (Displayobject: Displayobject) {super (); explicitHeight = displayObject.height; explicitWidth = displayObject.width; addChild (Displayobject); }}}
Trinn 5: New MXML File
Nå må vi opprette MXML filen. ?
< xml version = "1.0" encoding = "UTF-8" > < mx:? Søknad xmlns: mx = "< a href =" http://www.adobe.com/2006/MXML "> http: //www.adobe.com/2006/mxml< /a >" layout = "absolutte" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# 000000, # 5B5B5B]" creationComplete = "onComplete ()" > ... ≪ /mx: Application >
Dette er skallet av MXML filen. Mesteparten av koden er den samme som den tomme malen som opprettes når du åpner opp en ny Flex-program i Flex Builder. I tillegg har vi spesifisert bakgrunnsfargene (med backgroundGradientAlphas Koden som vil gjøre jobben med å laste ned og vise Flickr bildene må ligge i en mx: script tag . ≪! [CDATA [...]] > tag bare tillater oss å skrive kode uten å måtte bekymre seg for spesialtegn som er større enn og mindre enn (< og >) blir tolket som en del av XML-dokumentet Vi har behov for å importere noen klasser for bruk i søknaden vår Neste vi trenger å definere noen konstanter som vil kontrollere hvordan våre programmet fungerer Vi trenger å definere noen variabler for vår søknad Som standard et Flash-program kan bare legge ressurser fra sin egen domene. For å laste ressurser fra et annet domene (som Flickr) eieren av domenet må ha en politikk fil, vanligvis kalt crossdomain.xml, som lar Flash runtime vet at det er OK å laste sine ressurser. Denne politikken filen må lastes før eventuelle forsøk er gjort for å laste ressursene. Flickr vert det er bilder på en rekke servere, så her vi laster policyfilen av disse serverne. Hvis du ikke utfører dette trinnet vil du få et unntak når du prøver å laste inn bilder utenfor disse domains. Når Flex søknaden er ferdig med å lage selv, vil den onComplete funksjonen kalles (dette er hva vi angitt i trinn 5). Den onComplete Det første vi må gjøre er å lage en ny forekomst av FlickrService klassen. Den FlickrService objektet er vår inngangsport til Flickr, og vi bruker den til å sende vår søken etter våre soloppgang bilder. Du må oppgi Flickr API-nøkkel (fra Trinn 8) til FlickrService konstruktøren Neste vi legge til en funksjon på FlickrResultEvent.PHOTOS_SEARCH hendelsen.. Denne funksjonen vil bli kalt når Flickr har returnert noen informasjon om et søk. Her legger vi den onPhotosSearch funksjon Til slutt vi utføre selve søket i seg selv. Søkefunksjonen har en rekke parametre som kan brukes til å begrense et søk ned til en bestemt bruker, dato, tittel og mer. Vi er bare interessert i å finne bilder med merkelappen solnedgang, og så levere enten en null, tom streng eller -1 til disse andre parametre. onPhotoSearch funksjonen kalles når Flickr har returnert noen informasjon om våre søk Vi må først finne ut om kallet til Flickr var vellykket. Dette gjøres ved å sjekke event.success flagget. Hvis dette er sant Flickr har fått tilbake litt informasjon om bildene vi spørres det etter. Hvis event.success er falsk da samtalen mislyktes. Dette skjer vanligvis fordi API-nøkkel som ble levert var feil. Hvis anropet lyktes vi trenger for å få tilgang til samlingen av foto data som ble returnert PagedPhotoList inneholder så detaljene i bildene selv, som vi så lagrer i bilder samlingen På dette punktet bilder Samlingen inneholder en liste over foto detaljer som deretter kan brukes til å laste de faktiske fotografier. Fra nå av vil vi bare være å laste ned bilder, fra nettadressene vi opprettet ved hjelp av informasjonen i bilder samlingen, uten noen flere spesial anrop med Flickr API. For å starte fotoalbum, må vi kalle loadNextImage funksjon Hvis det var et problem å kalle Flickr brukeren varsles med et varselvindu Nå som vi har detaljene i bildene som er knyttet til vårt søk, må vi faktisk laste ned bildene slik at de kan vises. Dette gjøres ved loadNextImage funksjon Husk at jeg sa at kallet til Flickr faktisk ikke tilbake bildene selv? Hva det går tilbake er informasjon som er nødvendig for bedriften konstruere URL som vi kan bruke til å laste ned bildet. Ved å bruke serveren, id og hemmelig informasjon av bildene vi kan lage den fullstendige URL som vil vise bildet. Hvert bilde har en rekke resolusjoner. Vi plukker hvilken størrelse bildet vi laster ned med suffikset av url. Den _m suffiks viser at vi er Nå som vi har bedt om bildet, tilvekst vi currentImage variabel så neste gang loadNextImage er kalte vi vil trekke ned det neste bildet i søkelisten Neste vi må faktisk laste bildene. Vi skaper en ny URLRequest objekt (forsyne URL som vi opprettet ovenfor til konstruktøren), en ny Loader objekt, og fest switchImages funksjon til Laste Event.COMPLETE hendelsen Til slutt, vi laste bildet fra Flickr ved å ringe Lastelastfunksjonen switchImages funksjonen kalles når vi har hentet en ny bilde fra Flickr The Bitmap objekt som returneres av lasteprosessen reddes displayImage variable Denne nye Bitmap deretter initialisert slik at det er glattet (for å hjelpe til med pixelization som kan oppstå når du skalerer opp små bilder), endret for å fylle vinduet, og satt til å være helt gjennomsiktig ved å sette det er alfa til 0. Vi deretter legge Bitmap til Application via en ny forekomst av DisplayObjectUIComponent klasse som vi beskrev i trinn 4. På dette punktet har vi det nye bildet lagt til som et barn av Application objektet. Det er ikke synlig, men fordi vi har satt alfa til 0. Det vi ønsker å gjøre er å falme dette nye bildet til syne ved å øke det er alfa verdi, mens på samme tid falming ut det siste bildet ved å redusere det er alfa verdi. Det er der TweenMax biblioteket kommer i. Vi gjør et kall til TweenMax.to funksjon, og TweenMax tar så vare på modifing alfaverdier for oss. Ved å sette onComplete parameter å imageTweenComplete vi planlegge imageTweenComplete funksjon som skal kalles når dette tweening operasjonen er Vi trenger å sjekke om backgroundImage variabelen er null fordi når det første bildet er lastet det er ingen eksisterende backgroundImage at det viser på toppen av . imageTweenComplete funksjonen kalles når en nylig lastet bildet er falmet til syne ved Når displayImage er falmet i, backgroundImage blir fjernet fra programmet og displayImage blir backgroundImage. Den Vi bruker deretter TweenMax å planlegge et kall til loadNextImage funksjonen. Dette starter syklusen av lasting av et nytt bilde og falming den inn igjen Ved hjelp av Flickr med Flash krever noen skritt, men når du få hodet rundt Flickr API, finne ut Flickr bildenettadresser, du legger bildene fra Flickr (ta Flash sikkerhetsrestriksjoner i betraktning) er det da ganske lett å bruke disse bildene for å skape et attraktivt fotoalbum. Dette bestemte eksempel kan brukes til å legge til en animert fotoalbum til en nettside, og ved å endre SEARCH_STRING variabelen du kan vise ulike typer bilder. Du kan selv passere FlashVars til Flash applet for å bestemme hvilke bilder vises uten å måtte rekompilere programmet. Du kan også endre service.photos.search funksjonen til å returnere bare dine egne bilder, eller de som du har merket spesielt. Takk for lesing. Anmeldelser
og backgroundGradientColors
attributter) og sett onComplete funksjon som skal kalles når Application objektet har skapt seg selv (med creationComplete
egenskap)
Trinn 6:. mx: script Tag
< mx. Script > < [CDATA [...]] > < /mx: Script >
Trinn 7:. Import Classes
import mx.collections.ArrayCollection, import mx.controls.Alert, import com.adobe.webapis.flickr. *; import com.adobe.webapis.flickr.events. *; import gs.TweenMax; import gs.easing. *; < h2> Trinn 8: Definer Constants
private static konst SEARCH_STRING: String = "solnedgang"; privat statisk konst MAX_RESULTS. int = 50; private static konst api_key: String = "nøkkelen går her"; privat statisk konst TRANSITION_TIME: Number = 1; private static konst DISPLAY_TIME: Number = 3;
SEARCH_STRING definerer spørring som vil bli sendt til Flickr. I hovedsak vil vi spørre Flickr for bilder mye som du vil søke på Google for nettsider. Vi har satt spørringen til "solnedgang" her, men denne strengen kan være noe lignende "kattunger", "fjell", "biler" osv
MAX_RESULTS definerer hvor mange bilder Flickr kommer tilbake når det har blitt forespurt .
api_key er din egen Flickr API-nøkkel, som du kan søke om her.
TRANSITION_TIME definerer hvor raskt bildene vil visne inn i hverandre i løpet av sekunder. Her har vi satt overgangen tid til å ta en andre.
Trinn 9:.. Definer Variabler
privat Div Bilder: ArrayCollection = null; privat Var currentImage: int = 0; privat Var displayImage: Bitmap = null; privat Var backgroundImage: Bitmap = null;
bilder variabelen er en samling av de foto definisjoner sendt tilbake av Flickr . Det er viktig å merke seg at Flickr faktisk ikke sende tilbake bildene selv, men kun den informasjonen som trengs for å finne nettadressen til bildet, som deretter må lastes ned separat.
Trinn 10 : Regler Files
Security.loadPolicyFile("http://farm1.static.flickr.com/crossdomain.xml");Security.loadPolicyFile("http://farm2.static.flickr.com/crossdomain.xml");Security.loadPolicyFile("http://farm3.static.flickr.com/crossdomain.xml");Security.loadPolicyFile("http://farm4.static.flickr.com/crossdomain.xml");
Step 11: onComplete Funksjon
funksjonen er poenget med programmet oppføringen
privat funksjon onComplete (): void {var tjenesten. FlickrService = new FlickrService (api_key); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", SEARCH_STRING, "noen", "", null, null, null, null, -1, "", MAX_RESULTS, 1);}
Var tjeneste: FlickrService = new FlickrService (api_key);
service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch);.
Service.photos.search ("", SEARCH_STRING, "noen", "" , null, null, null, null, -1, "", MAX_RESULTS, 1);
Trinn 12:. onPhotoSearch Funksjon
privat funksjon onPhotosSearch (event: FlickrResultEvent): void {if (event.success) {var Bildeliste: PagedPhotoList = event.data.photos; bilder = nye ArrayCollection (photoList.photos); loadNextImage (); } Else {Alert.show ("Flickr samtalen mislyktes Visste du oppdatere API-nøkkel.?"); }}
If (event.success) {...} else {...}
Var Bildeliste:.. PagedPhotoList = event.data.photos;
bilder = new ArrayCollection (photoList.photos);
loadNextImage ();.
Alert.show ("Flickr samtalen mislyktes Visste du oppdatere API-nøkkel..? ");
Trinn 13: loadNextImage Funksjon
privat funksjon loadNextImage (). Void {var Bildeadresse: String = 'http://static.flickr.com/~~number=plural' + bilder [currentImage] .server + '/' + bilder [ ,,,0],currentImage] .id + '_' + bilder [currentImage] .secret + '_m.jpg'; ++ currentImage; currentImage% = photos.length; Var forespørsel: URLRequest = new URLRequest (Bildeadresse); Var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages); loader.load (forespørsel); }
laste ned en middels stor versjon av bildet. Andre suffikser kan bli funnet her, som lar deg laste ned mer eller mindre detaljert versjoner av bildene
Var Bildeadresse:. String = 'http://static.flickr.com/' + bilder [currentImage] .server + ' /'+ bilder [currentImage] .id +' _ '+ bilder [currentImage] .secret +' _m.jpg ';
++ currentImage;. currentImage% = photos.length;
Var forespørsel. URLRequest = new URLRequest (Bildeadresse); Var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages);
loader.load (forespørsel. );
Trinn 14: switchImages Funksjon
private funksjons switchImages (event: Hendelses): void {displayImage = hendelse.. currentTarget.content; displayImage.smoothing = true; displayImage.width = this.width; displayImage.height = this.height; displayImage.alpha = 0; this.addChild (ny DisplayObjectUIComponent (displayImage)); TweenMax.to (displayImage, TRANSITION_TIME, {alfa: 1, lette: Linear, onComplete: imageTweenComplete}); if (! backgroundImage = null) TweenMax.to (backgroundImage, TRANSITION_TIME, {alfa: 0, letthet: Linear});.}
displayImage = event.currentTarget.content;
displayImage.smoothing = true; displayImage.width = this.width; displayImage.height = this.height; displayImage.alpha = 0;
this.addChild (ny DisplayObjectUIComponent (displayImage));
konkurrere.
TweenMax.to (displayImage, TRANSITION_TIME, {alfa: 1, letthet: Linear, onComplete: imageTweenComplete}); if (backgroundImage = null!) TweenMax.to (backgroundImage, TRANSITION_TIME, {alfa: 0, letthet: Linear });
Trinn 15: imageTweenComplete Funksjon
TweenMax privat funksjon imageTweenComplete (): void {if (backgroundImage.! = null) this.removeChild (backgroundImage.parent); backgroundImage = displayImage; displayImage = null; TweenMax.delayedCall (DISPLAY_TIME, loadNextImage);}
displayImage blir deretter satt til null
if (backgroundImage = null!) This.removeChild (backgroundImage.parent.); backgroundImage = displayImage; displayImage = null;
TweenMax.delayedCall (DISPLAY_TIME, loadNextImage);.
Konklusjon