În acest tutorial veți învăța cum să utilizați biblioteca as3flickrlib pentru a crea un vizualizator de fotografii Flash Flickr.
Pasul 1: As3flickrlib
Există multe biblioteci disponibile pentru dezvoltatorii Flex care interfață cu Flickr. Biblioteca as3flickrlib a fost creată de Adobe și este biblioteca pe care o vom folosi pentru a crea această aplicație de vizualizare a fotografiilor. Va trebui să descărcați o copie a codului as3flickrlib pentru dvs., precum și biblioteca as3corelib (as3flickrlib depinde de as3corelib). Ambele pot fi obținute de aici.
Pasul 2: TweenMax
Veți avea nevoie și de biblioteca TweenMax. TweenMax este o bibliotecă tweening, care ne permite să schimbăm cu ușurință proprietățile unui obiect în timp. Puteți obține TweenMax aici.
Pasul 3: Proiect nou
Creați un nou proiect Flex web și adăugați cele trei biblioteci menționate mai sus în Calea sursă a aplicației.
Pasul 4: Clasa Wrapper
Această aplicație funcționează prin preluarea imaginilor încărcate de pe Flickr și adăugarea acestora la obiectul Principal Application (adică obiectul creat de fișierul MXML). Atunci când încărcați o imagine de pe web, aceasta vă este returnată sub formă de Bitmap. În timp ce clasa Bitmap extinde clasa DisplayObject (ceea ce este nevoie de funcția addChild), Flex va permite numai ca acele clase care extind clasa UIComponent să fie adăugate ca fiu al principalului obiect Application și Bitmap nu extinde UIComponentul. Compilatorul nu va semnala că va adăuga o Bitmap la obiectul Application prin funcția addChild ca o eroare, dar veți obține o excepție la timpul de execuție.
Cu toate acestea, ar fi frumos să puteți adăuga obiectele Bitmap ca copii ai obiectului Application. Trebuie să creăm o clasă mică de împachetare care extinde clasa UIComponent (astfel încât poate fi adăugată la aplicație), dar, de asemenea, adaugă un Bitmap ca un copil de la sine. Această clasă de împachetare se numește DisplayObjectUIComponent.
pachet import flash.display.DisplayObject; import mx.core.UIComponent; clasa publică DisplayObjectUIComponent extinde UIComponent funcția publică DisplayObjectUIComponent (displayObject: DisplayObject) super (); explicitHeight = displayObject.height; explicitWidth = displayObject.width; addChild (displayObject);
Pasul 5: Un nou fișier MXML
Acum trebuie să creăm fișierul MXML.
...
Aceasta este shell-ul fișierului MXML. Majoritatea codului este același cu șablonul gol care este creat atunci când deschideți o nouă aplicație Flex în Flex Builder. În plus, am specificat culorile de fundal (cu backgroundGradientAlphas și backgroundGradientColors atribute) și setați funcția OnComplete care trebuie apelată atunci când obiectul Application sa creat singur (cu creationComplete atribut).
Pasul 6: Tag mx: script
Codul care va face treaba de a descărca și afișa imaginile Flickr trebuie să fie conținut într-o etichetă mx: script. tag-ul ne permite doar să scriem cod fără a fi nevoie să vă faceți griji cu privire la caractere speciale, cum ar fi mai mare decât și mai puțin decât (< and >) fiind interpretat ca parte a documentului XML.
Pasul 7: Clase de import
Trebuie să importăm câteva clase pentru utilizare în aplicația noastră.
Apoi trebuie să definim câteva constante care vor controla modul în care funcționează aplicația noastră.
constrângere statică privată SEARCH_STRING: String = "apus de soare"; static static const MAX_RESULTS: int = 50; static static const API_KEY: String = "cheia dvs. merge aici"; constr. statică privată TRANSITION_TIME: Număr = 1; constr. statică privată DISPLAY_TIME: Număr = 3;
SEARCH_STRING definește interogarea care va fi trimisă către Flickr. În esență, vom interoga Flickr pentru imagini, la fel cum ați fi interogat Google pentru paginile web. Am stabilit interogarea să "apună" aici, dar acest șir ar putea fi ceva de genul "pisoi", "munți", "mașini" etc..
MAX_RESULTS definește câte imagini Flickr va reveni după ce a fost interogat.
API_KEY este propria cheie Flickr API, pentru care puteți aplica aici.
TRANSITION_TIME definește cât de repede imaginile vor dispărea în câteva secunde. Aici am stabilit timpul de tranziție pentru o secundă.
DISPLAY_TIME definește durata de afișare a fiecărei imagini înainte ca imaginea următoare să fie încărcată. Aici am setat fiecare imagine să fie afișată timp de 3 secunde.
Pasul 9: Definiți variabilele
Trebuie să definim câteva variabile pentru aplicația noastră.
private var fotografii: ArrayCollection = null; private var actualImage: int = 0; private var displayImage: bitmap = null; privat var backgroundImage: Bitmap = null;
Variabila de fotografii este o colecție de definiții de fotografii trimise înapoi de Flickr. Este important să rețineți că Flickr nu trimite de fapt fotografiile în sine, ci doar informațiile necesare pentru a găsi adresa URL a fotografiei, care apoi trebuie să fie descărcată separat.
Variabila currentImage menține un index în colecția de fotografii. Acesta este motivul pentru care știm ce fotografie trebuie să fie afișată în continuare.
Variabilele displayImage și backgroundImage sunt referințe la obiectele Bitmap care sunt create prin încărcarea imaginilor Flickr.
Pasul 10: Fișiere de politici
Implicit, o aplicație Flash poate încărca resurse numai din domeniul propriu. Pentru a încărca resurse dintr-un alt domeniu (ca Flickr), proprietarul domeniului respectiv trebuie să aibă un fișier de politică, denumit de obicei crossdomain.xml, care să permită runtime-ului Flash să știe că este în regulă să-și încarce resursele. Acest fișier de politici trebuie să fie încărcat înainte de orice încercări de încărcare a resurselor.
Flickr găzduiește imaginile pe un număr de servere, deci aici încărcăm fișierul politic al acestor servere. Dacă nu efectuați acest pas, veți obține o excepție atunci când încercați să încărcați imagini din aceste domenii.
Când aplicația Flex a terminat să se creeze singură, va fi apelată funcția onComplete (așa am specificat în pasul 5). OnComplete funcția este punctul de intrare al aplicației.
funcția privată onComplete (): void var service: FlickrService = nou FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", SEARCH_STRING, "orice", "", null, null, null, null, -1, "", MAX_RESULTS, 1);
Primul lucru pe care trebuie să-l facem este să creați o nouă instanță a clasei FlickrService. Obiectul FlickrService este gateway-ul nostru către Flickr și îl folosim pentru a trimite căutarea imaginilor noastre de răsărit. Trebuie să furnizați cheia API Flickr (de la Pasul 8) la constructorul FlickrService.
serviciul var: FlickrService = noul FlickrService (API_KEY);
Apoi atașăm o funcție la evenimentul FlickrResultEvent.PHOTOS_SEARCH. Această funcție va fi apelată când Flickr a returnat informații despre o căutare. Aici atașăm funcția onPhotosSearch.
În cele din urmă, efectuăm căutarea propriu-zisă. Funcția de căutare are o mulțime de parametri care pot fi utilizate pentru a restrânge o căutare până la un anumit utilizator, dată, titlu și multe altele. Suntem interesați doar să găsim fotografii cu eticheta sunset, furnizând astfel un șir nul, gol sau -1 la acești alți parametri.
Funcția onPhotoSearch este apelată când Flickr a returnat câteva informații despre căutarea noastră.
funcția privată onPhotosSearch (eveniment: FlickrResultEvent): void if (event.success) var photoList: PagedPhotoList = event.data.photos; photos = nou ArrayCollection (photoList.photos); loadNextImage (); altceva Alert.show ("Apelul Flickr a eșuat. Ați actualizat cheia API?");
Mai întâi trebuie să determinăm dacă apelul către Flickr a avut succes. Aceasta se face verificând pavilionul event.success. Dacă este adevărat, Flickr a reluat cu succes unele informații despre fotografiile pe care le-am cerut. Dacă succesul evenimentului este fals, atunci apelul a eșuat. Aceasta se întâmplă de obicei deoarece cheia API furnizată a fost incorectă.
dacă (event.success) ... altceva ...
Dacă apelul a avut succes, trebuie să accesăm colecția de date foto care a fost returnată.
var fotoList: PagedPhotoList = event.data.photos;
PagedPhotoList conține apoi detaliile fotografiilor, pe care apoi le salvăm în colecția de fotografii.
photos = nou ArrayCollection (photoList.photos);
În acest moment, colecția de fotografii conține o listă a detaliilor fotografiilor, care apoi pot fi utilizate pentru a încărca fotografiile reale. De aici vom descărca imagini, de la adresele URL pe care le-am creat utilizând informațiile din colecția de fotografii, fără a mai fi nevoie de apeluri speciale utilizând API-ul Flickr.
Pentru a începe albumul foto, trebuie să sunăm la funcția loadNextImage.
loadNextImage ();
Dacă a apărut o problemă prin apelarea Flickr, utilizatorul este notificat cu o fereastră Alertă.
Alert.show ("Apelul Flickr a eșuat. Ați actualizat cheia API?");
Pasul 13: Funcția loadNextImage
Acum, când avem detaliile fotografiilor care se referă la căutarea noastră, trebuie să descărcăm de fapt imaginile astfel încât acestea să poată fi afișate. Aceasta se face prin funcția loadNextImage.
Amintiți-vă că am spus că apelul la Flickr nu returnează propriile imagini? Ce se întoarce sunt informațiile necesare construiți adresa URL pe care o putem utiliza pentru a descărca imaginea. Utilizând serverul, informațiile id și informațiile secrete ale fotografiilor, putem crea adresa URL completă care va afișa imaginea.
Fiecare imagine are o serie de rezoluții. Alegem ce imagine de dimensiune suntem descărcate de sufixul adresei URL. Sufixul _m indică faptul că suntem descărcând o versiune de dimensiune medie a imaginii. Alte sufixe pot fi găsite aici, care vă permit să descărcați versiuni mai mult sau mai puțin detaliate ale imaginilor.
Acum că am cerut imaginea, creștem variabila currentImage astfel încât data viitoare loadNextImage să fie numită vom trage următoarea imagine din lista de căutare.
++currentImage; actualImage% = photos.length;
Apoi trebuie să încărcăm imaginile. Creăm un nou obiect URLRequest (care furnizează URL-ul pe care l-am creat mai sus constructorului), un nou obiect Loader și atașăm funcția switchImages la evenimentul Loaders Event.COMPLETE.
solicitare var: URLRequest = new URLRequest (imageURL); var loader: Loader = încărcător nou (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages);
În cele din urmă, încărcăm imaginea din Flickr apelând funcția de încărcare a încărcătorilor.
loader.load (cerere);
Pasul 14: Funcția switchImages
Funcția switchImages este apelată când am încărcat o nouă imagine din Flickr.
Obiectul Bitmap returnat de procesul de încărcare este salvat în variabila displayImage.
displayImage = event.currentTarget.content;
Acest nou bitmap este apoi inițializat astfel încât să fie netezit (pentru a ajuta la pixelizarea care poate apărea atunci când scalați imagini mici), redimensionați pentru a umple fereastra și setați să fie complet transparenți prin setarea alpha la 0.
În acest moment, noua imagine a fost adăugată drept copil al obiectului Aplicație. Nu este vizibilă, totuși, pentru că am setat alfa la 0. Ceea ce vrem să facem este să estompeze noua imagine prin creșterea valorii ei alfa, în același timp diminuând ultima imagine prin scăderea valorii ei alfa. Aici intră biblioteca TweenMax. Facem un apel la funcția TweenMax.to, iar TweenMax se ocupă apoi de modificarea valorilor alfa pentru noi.
Prin setarea parametrului onComplete la imagineTweenComplete programăm funcția imageTweenComplete care trebuie apelată odată ce această operație de adăugare este concura.
Trebuie să verificăm dacă variabila backgroundImage este nulă, deoarece atunci când prima imagine este încărcată, nu există niciun element de fundal existent pe care îl afișează pe partea de sus.
Funcția imageTweenComplete este apelată atunci când o imagine nou încărcată a fost estompată de TweenMax.
funcția privată imageTweenComplete (): void if (backgroundImage! = null) this.removeChild (backgroundImage.parent); backgroundImage = displayImage; displayImage = null; TweenMax.delayedCall (DISPLAY_TIME, loadNextImage);
După ce imaginea de afișare a fost decolorată, imaginea de fundal este îndepărtată din aplicație, iar displayImage devine elementul de fundal. displayImage este apoi setată la null.
Apoi utilizăm TweenMax pentru a programa un apel la funcția loadNextImage. Aceasta inițiază ciclul de încărcare a unei imagini noi și o decolorare din nou.
Folosirea Flickr cu Flash necesită câțiva pași, dar odată ce ați făcut capul în jurul API-ului Flickr, aflați adresele URL ale imaginii Flickr, încărcarea imaginilor de pe Flickr (luând în considerare restricțiile de securitate Flash), este destul de ușor să utilizați aceste imagini pentru a crea un album foto atrăgător.
Acest exemplu special ar putea fi folosit pentru a adăuga un album foto animat la o pagină web și modificând variabila SEARCH_STRING puteți afișa diferite tipuri de imagini. Ați putea trece chiar și FlashVars la aplicația Flash pentru a determina ce imagini sunt afișate fără a trebui să recompilați aplicația. De asemenea, puteți modifica funcția service.photos.search pentru a reveni numai la propriile fotografii sau la cele pe care le-ați etichetat în mod specific.
Share
Accentsconagua
