I denne opplæringen lærer du hvordan du bruker as3flickrlib-biblioteket til å lage en Flash Flickr-bildeviser.
Trinn 1: As3flickrlib
Det er mange biblioteker tilgjengelig for Flex-utviklere som grensesnitt med Flickr. As3flickrlib-biblioteket ble opprettet av Adobe og er biblioteket som vi skal bruke til å lage dette bildevisningsprogrammet. Du må laste ned en kopi av as3flickrlib-koden for deg selv, så vel som as3corelib-biblioteket (as3flickrlib avhenger av as3corelib). Begge kan fås herfra.
Trinn 2: TweenMax
Du trenger også TweenMax-biblioteket. TweenMax er et tweening-bibliotek, som gjør at vi enkelt kan endre egenskapene til et objekt over tid. Du kan få TweenMax her.
Trinn 3: Nytt prosjekt
Opprett et nytt Flex-webprosjekt og legg til de tre bibliotekene som er nevnt ovenfor, til Kildeveien i programmet.
Trinn 4: Wrapper Class
Denne applikasjonen fungerer ved å ta bilder lastet fra Flickr og legge dem til hovedprogramobjektet (dvs. objektet som er opprettet av MXML-filen). Når du laster et bilde fra nettet, blir det returnert til deg som en Bitmap. Mens bitmap-klassen utvider klassen DisplayObject (som er hva addChild-funksjonen krever), tillater Flex bare de klassene som utvider UIComponent-klassen som skal legges til som barn i hovedapplikasjonsobjektet, og bitmappen utvider ikke UIComponent. Kompilatoren vil ikke flagge legge til en Bitmap til Application-objektet via addChild-funksjonen som en feil, men du får et unntak ved kjøretid.
Likevel, det ville være fint å kunne legge til Bitmap-objektene som barn av programobjektet. Vi må lage en liten innpakningsklasse som utvider UIComponent-klassen (slik at den kan legges til Programmet), men legger også til en Bitmap som et barn av seg selv. Den wrapper klassen kalles DisplayObjectUIComponent.
Dette er skallet til MXML-filen. Mesteparten av koden er den samme som den tomme malen som er opprettet når du åpner et nytt Flex-program i Flex Builder. I tillegg har vi angitt bakgrunnsfarger (med backgroundGradientAlphas og backgroundGradientColors attributter) og angi onComplete-funksjonen som skal ringes når applikasjonsobjektet har opprettet seg selv (med creationComplete Egenskap).
Trinn 6: mx: script Tag
Koden som vil gjøre jobben med å laste ned og vise Flickr-bildene, må inneholde en mx: script-tag. De tag bare tillater oss å skrive kode uten å måtte bekymre seg om spesialtegn som større enn og mindre enn (< and >) tolkes som en del av XML-dokumentet.
Trinn 7: Importer klasser
Vi må importere noen klasser for bruk i vår søknad.
Deretter må vi definere noen konstanter som vil kontrollere hvordan applikasjonen vår fungerer.
privat statisk const SEARCH_STRING: String = "solnedgang"; privat statisk const MAX_RESULTS: int = 50; privat statisk const API_KEY: String = "nøkkelen din går her"; privat statisk const TRANSITION_TIME: Number = 1; privat statisk const DISPLAY_TIME: Number = 3;
SEARCH_STRING definerer spørringen som skal sendes til Flickr. I hovedsak vil vi spørre Flickr for bilder mye som om du vil spørre Google for nettsider. Vi har satt spørringen til "solnedgang" her, men denne strengen kan være alt som "kattunger", "fjell", "biler" osv..
MAX_RESULTS definerer hvor mange bilder Flickr vil returnere når den er 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 falme inn i hverandre på sekunder. Her har vi satt overgangstiden for å ta 1 sekund.
DISPLAY_TIME definerer hvor lenge hvert bilde skal vises før neste bilde lastes inn. Her har vi satt hvert bilde som skal vises i 3 sekunder.
Trinn 9: Definer variabler
Vi må definere noen variabler for vår søknad.
private var bilder: ArrayCollection = null; private var currentImage: int = 0; privat var displayImage: Bitmap = null; private var backgroundImage: Bitmap = null;
Bildevariabelen er en samling av bildedefinisjonene sendt tilbake av Flickr. Det er viktig å merke seg at Flickr ikke sender tilbake bildene selv, men bare informasjonen som trengs for å finne nettadressen til bildet, som deretter må lastes ned separat.
CurrentImage-variabelen opprettholder en indeks i bildesamlingen. Dette er slik at vi vet hvilket bilde som skal vises neste.
DisplayImage og backgroundImage-variablene er referanser til Bitmap-objektene som er opprettet ved å laste inn Flickr-bildene.
Trinn 10: Politikkfiler
Som standard kan en Flash-applikasjon bare laste inn ressurser fra sitt eget domene. For å laste ressurser fra et annet domene (som Flickr) må eieren av det domenet ha en policyfil, vanligvis kalt crossdomain.xml, som gjør at Flash-kjøretiden vet at det er OK å laste ressursene sine. Denne policyfilen må lastes inn før det gjøres forsøk på å laste ressursene.
Flickr vertene er det bilder på en rekke servere, så her laster vi inn policyfilen til disse serverne. Hvis du ikke utfører dette trinnet, får du et unntak når du prøver å laste bilder fra disse domenene.
Når Flex-programmet er ferdig med å skape seg, vil funksjonen onComplete bli kalt (dette er det vi angav i trinn 5). Den onComplete funksjonen er inngangspunktet for søknaden.
Det første vi må gjøre er å opprette en ny forekomst av FlickrService-klassen. FlickrService-objektet er vår gateway til Flickr, og vi bruker det til å sende inn vårt søk etter våre soloppgangsbilder. Du må levere Flickr API-nøkkelen (fra trinn 8) til FlickrService-konstruktøren.
var service: FlickrService = ny FlickrService (API_KEY);
Deretter legger vi en funksjon til FlickrResultEvent.PHOTOS_SEARCH hendelsen. Denne funksjonen blir kalt når Flickr har returnert litt informasjon om et søk. Her knytter vi funksjonen onPhotosearch.
Endelig utfører vi selve søket selv. Søkefunksjonen har mange parametere 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 taggen sunset, og så leverer enten null, tom streng eller -1 til disse andre parametrene.
Funksjonen onPhotoSearch kalles når Flickr har returnert litt informasjon om vårt søk.
privat funksjon onPhotosSearch (event: FlickrResultEvent): void if (event.success) var photoList: PagedPhotoList = event.data.photos; photos = new ArrayCollection (photoList.photos); loadNextImage (); else Alert.show ("Flickr-samtalen mislyktes." Oppdaterte du API-nøkkelen? ");
Vi må først avgjøre om samtalen til Flickr var vellykket. Dette gjøres ved å sjekke event.success flagget. Hvis dette er sant, har Flickr returnert noe informasjon om bildene vi spurte om. Hvis event.success er feil, ble samtalen mislyktes. Dette skjer vanligvis fordi API-nøkkelen som ble levert, var feil.
hvis (event.success) ... annet ...
Hvis samtalen var vellykket, må vi få tilgang til samlingen av fotodata som ble returnert.
var photoList: PagedPhotoList = event.data.photos;
PagedPhotoListen inneholder da detaljene til bildene selv, som vi deretter lagrer i bildesamlingen.
photos = new ArrayCollection (photoList.photos);
På dette tidspunktet inneholder bildesamlingen en liste over fotodetaljer som deretter kan brukes til å laste de faktiske fotografiene. Herfra vil vi bare laste ned bilder, fra nettadressene vi opprettet ved hjelp av informasjonen i bildesamlingen, uten noen flere spesielle samtaler ved hjelp av Flickr API.
For å starte bildealbumet må vi ringe funksjonen loadNextImage.
loadNextImage ();
Hvis det oppsto et problem med å ringe Flickr, blir brukeren varslet med et varselvindu.
Alert.show ("Flickr-samtalen mislyktes. Oppdaterte du API-nøkkelen?");
Trinn 13: loadNextImage Funksjon
Nå som vi har detaljene i bildene som er relatert til søket, må vi faktisk laste ned bildene slik at de kan vises. Dette gjøres av loadNextImage-funksjonen.
Husk at jeg sa at samtalen til Flickr faktisk ikke returnerer bildene selv? Det som returnerer er informasjonen som trengs for å konstruer nettadressen som vi kan bruke til å laste ned bildet. Ved å bruke serveren, id og hemmelig informasjon på bildene kan vi opprette hele nettadressen som vil vise bildet.
Hvert bilde har en rekke oppløsninger. Vi velger hvilken størrelse bilde vi laster ned ved suffiks av URL. _M suffikset indikerer at vi er laster ned en mellomstor versjon av bildet. Andre suffiks kan du finne her, som lar deg laste ned mer eller mindre detaljerte versjoner av bildene.
Nå som vi har bedt om bildet, øker vi dagensImage-variabelen slik at neste gang loadNextImage blir kalt, drar vi ned neste bilde i søkelisten.
++currentImage; currentImage% = photos.length;
Deretter må vi faktisk laste bildene. Vi lager et nytt URLRequest-objekt (leverer nettadressen som vi opprettet over til konstruktøren), et nytt Loader-objekt, og legger til switchImages-funksjonen til Loaders Event.COMPLETE-hendelsen.
var forespørsel: URLRequest = ny URLRequest (imageURL); var loader: Loader = ny Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages);
Til slutt laster vi bildet fra Flickr ved å ringe Loaders load-funksjonen.
loader.load (forespørsel);
Trinn 14: SwitchImages Funksjon
SwitchImages-funksjonen kalles når vi har lastet et nytt bilde fra Flickr.
Bitmap-objektet som returneres av lasteprosessen, lagres i displayImage-variabelen.
displayImage = event.currentTarget.content;
Denne nye bitmappen blir så initialisert slik at den blir jevnet (for å hjelpe til med pixelisering som kan oppstå når du skalar opp små bilder), resizing for å fylle vinduet og settes for å være helt gjennomsiktig ved å sette det til a 0.
På dette tidspunktet har vi det nye bildet lagt til som et barn i programobjektet. Det er ikke synlig skjønt, fordi vi har satt alfa til 0. Det vi vil gjøre, er å fade dette nye bildet til syne ved å øke det alfaverdien, samtidig som det fade ut det siste bildet ved å redusere det er alfaverdien. Det er her TweenMax-biblioteket kommer inn. Vi ringer til TweenMax.to-funksjonen, og TweenMax tar seg da på å modifisere alfaverdiene for oss.
Ved å sette onComplete-parameteren til imageTweenComplete planlegger vi funksjonen imageTweenComplete som skal kalles når denne tweening-operasjonen er konkurrere.
Vi må sjekke om bakgrunnsvariabelen er null fordi når det første bildet er lastet, er det ingen eksisterende bakgrunn. Vis at den vises på toppen av.
Når displayImage har blitt bleknet, blir bakgrunnsbildet fjernet fra applikasjonen og displayImage blir bakgrunnsbildet. De displayImage er da satt til null.
Vi bruker deretter TweenMax til å planlegge et anrop til loadNextImage-funksjonen. Dette starter syklusen ved å laste inn et nytt bilde og fading det inn igjen.
Bruk av Flickr med Flash krever noen få skritt, men når du får hodet ditt rundt Flickr API, finner du Flickr-bildeadressene, laster du bildene fra Flickr (med hensyn til Flash-sikkerhetsrestriksjonene) er det ganske enkelt å bruke disse bildene å skape et tiltalende fotoalbum.
Dette bestemte eksempelet kan brukes til å legge til et animert fotoalbum til en nettside, og ved å endre SEARCH_STRING-variabelen kan du vise forskjellige typer bilder. Du kan til og med sende FlashVars til Flash-appleten for å finne ut hvilke bilder som vises uten å måtte kompilere programmet. Du kan også endre tjenesten service.photos.search for å returnere bare dine egne bilder, eller de som du har merket spesielt.
Share
Accentsconagua
