În acest tut vă voi demonstra cum să construiți o galerie foto dinamică utilizând API-ul Flickr. Pentru a adăuga un pic mai mult de fler, vom exploata puterea de Away3D și afișa fotografiile într-un mediu 3D.
Există multe de discutat, deci hai să mergem mai departe!
Pasul 1: Revizuirea API-ului Flickr
Această aplicație va prelua fotografiile de pe Flickr pentru a fi afișate într-un spațiu 3D. Pe scurt, procesul de descărcare a fotografiilor de pe Flickr este după cum urmează:
Se obține o cheie API Flickr.
Bibliotecile AS3Flickr și AS3CoreLib ActionScript sunt descărcate și menționate de la Flex Builder.
Fișierele politicii de domeniu încrucișat Flickr sunt încărcate pentru a permite Flex să acceseze imagini din domenii de la distanță.
Se efectuează o căutare a Flickr.
Rezultatele sunt folosite pentru a găsi adresa URL a imaginilor Flickr.
Imaginile în sine sunt descărcate și salvate / afișate.
Acest proces este acoperit în profunzime de un tutorial anterior pe care îl puteți găsi aici. Vă recomandăm foarte mult să citiți acel tutorial dacă nu sunteți familiarizat cu biblioteca AS3Flickr, deoarece aceste puncte vor fi menționate doar pe scurt în acest tutorial.
Pasul 2: O introducere în Away3D Lite
Rulajul Flash a înregistrat progrese impresionante în ultimii ani. Implementarea pe scară largă a runtime-ului Flash, atât cu pluginurile Adobe AIR, cât și cu pluginurile de browser, împreună cu creșterea performanței în versiunile ulterioare, înseamnă că Flash are un ecosistem foarte divers de biblioteci și aplicații. A trecut de la a fi un instrument de animație la o platformă de dezvoltare generală pentru jocuri, aplicații de afaceri, vizualizări 3D, playere video și multe altele.
Motoarele 3D au evoluat alături de Flash pentru o perioadă de timp, mergând de la o curiozitate până acum, fiind complet prezentate și chiar și bibliotecile comerciale. Away3D este unul dintre cele mai populare motoare Flash gratuite, iar recent o versiune mai mică și mai rapidă a lui Away3D a fost lansată numită Away3D Lite. În timp ce Away3D Lite nu are parte de bomboane ochi prezente în motoarele 3D mai complicate, focalizarea pe simplitate înseamnă că este perfectă pentru o aplicație simplă, cum ar fi un album foto 3D.
Pasul 3: Obțineți Away3D Lite
Puteți descărca gratuit o copie a Away3D Lite 1.0 aici. Descărcați și extrageți codul sursă al motorului într-o locație convenabilă.
Pasul 4: Obțineți Biblioteca Greensock TweenMax
Mișcarea camerei în cadrul galeriei foto 3D va fi realizată utilizând biblioteca Greensock TweenMax, pe care o puteți accesa aici. Din nou, descărcați și extrageți biblioteca într-o locație convenabilă.
Pasul 5: Obțineți AS3Flickr și AS3CoreLib
Bibliotecile AS3Flickr și AS3CoreLib sunt utilizate pentru a contacta serviciul web Flickr. Puteți găsi detalii despre aceste biblioteci din articol Construiți un vizualizator de fotografii utilizând Flex și API-ul Flickr.
Pasul 6: Creați un proiect nou
Creați un nou proiect Flex și adăugați librăriile Away3D Lite, TweenMax, AS3Flickr și AS3CoreLib pe Calea Flex Build.
Pasul 7: Definirea atributelor aplicației
applicationComplete = "appComplete ()" Aceasta stabilește funcția appComplete care trebuie apelată atunci când aplicația a inițializat și va servi ca punct de intrare pentru codul nostru.
FRAMERATE = "100" Aceasta stabilește capacul ratei cadrelor pentru aplicație la 100 de cadre pe secundă. Valoarea prestabilită este de 24, iar creșterea acesteia va face aplicația să pară mai fluidă.
width = "600" backgroundGradientAlphas = "[1.0, 1.0]" fundalGradientColors = "[# 000000, # 374040]" Aceste atribute definesc dimensiunea și culoarea de fundal a aplicației Flex.
Eticheta de aplicație ar trebui să arate ca și codul de mai jos:
Pasul 8: Adăugați unele controale
Adăugați următoarele etichete în eticheta aplicației.
Vom oferi utilizatorului posibilitatea de a căuta Flickr și de a afișa rezultatele în galeria foto 3D la momentul executării. Aceste două etichete adaugă o casetă de text, în care poate fi introdusă expresia de căutare și un buton pentru inițierea căutării.
Evenimentul de clic pentru butonul de apeluri applicationManager.flickrSearch (this.txtSearch.text). ApplicationManager va fi creat în pași ulteriori, iar funcția flickrSearch va conține codul pentru a contacta Flickr și descărca fotografiile.
Pasul 9: Adăugați un anumit cod
Adăugați o etichetă Script la eticheta aplicației. Aici se va scrie codul ActionScript.
Pasul 10: Adăugați variabilele
Adăugați următoarea variabilă în eticheta Script.
aplicație privată var varManager: ApplicationManager = null;
Clasa ApplicationManager va fi responsabilă pentru inițializarea motorului Away3D, încărcarea imaginilor Flickr și deplasarea camerei. Menținem o referință la ea în variabila applicationManager astfel încât butonul creat la pasul 8 să poată apela funcția flickrSearch.
Pasul 11: Încărcarea fișierelor de politică Cross Domain
Pentru a accesa imaginile de pe serverele Flickr, trebuie să fie încărcate fișierele de politică de domeniu încrucișat. Acest lucru este detaliat în articolul Build a Photo Viewer utilizând Flex și API-ul Flickr.
Pasul 12: Funcția appComplete
Adăugați o nouă funcție numită appComplete.
funcția privată appComplete (): void applicationManager = new ApplicationManager (); this.addChildAt (noul SpriteUIComponent (applicationManager), 0);
Această funcție este apelată când aplicația Flex a fost încărcată și inițializată. Aici se creează o nouă instanță a clasei ApplicationManager și se adaugă ca un control pentru copii. Observați că trecem de fapt o instanță a unei clase numită SpriteUIComponent la funcția addChildAt.
După cum veți vedea în pașii ulteriori, ApplicationManager extinde una dintre clasele de șablon din Away3D Lite API. Aceste clase de șabloane preiau înșiși clasa Flex Sprite. Chiar dacă funcția addChildAt va accepta un Sprite, o excepție va fi ridicată în timpul rulării. Acest lucru se datorează faptului că numai clasele care extind clasa UIComponent pot fi adăugate controalelor copil ale unei aplicații Flex. Pentru a rezolva această limitare, SpriteUIComponent extinde clasa UIComponent și apoi adaugă un Sprite ca copil propriu.
Pasul 13: Clasa SpriteUIComponent
pachet import flash.display.Sprite; import mx.core.UIComponent; clasa publică SpriteUIComponent extinde UIComponent funcția publică SpriteUIComponent (sprite: Sprite) super (); explicitHeight = sprite.height; explicitWidth = sprite.width; addChild (sprite);
După cum sa menționat mai sus, clasa SpriteUIComponent extinde clasa UIComponent (adică poate fi adăugată ca un copil al unei aplicații Flex), și apoi adaugă obiectul Sprite furnizat ca propriul copil.
Definiți clasa ApplicationManager ca extinderea clasei BasicTemplate.
clasa publica ApplicationManager extinde BasicTemplate
O caracteristică nouă inclusă în Away3D Lite sunt clasele de șabloane. Aproape fiecare aplicație Away3D trebuie să inițieze aceleași clase de bază cum ar fi o cameră și o vizualizare, precum și setarea ascultătorilor evenimentelor pentru evenimentele cadru. Acești pași obișnuiți, care trebuiau să fie codificați manual de fiecare dezvoltator, sunt acum realizați de una sau mai multe clase de șabloane. Vom extinde una dintre aceste clase de șabloane, BasicTemplate, cu ApplicationManager.
Pasul 16: Definiți constantele
ApplicationManager va avea un număr de variabile constante care definesc aspectul și funcția clasei.
Aceste trei constante se referă la serviciul web Flickr.
static static PHOTO_HEIGHT: Număr = 50; static static PHOTO_WIDTH: Number = PHOTO_HEIGHT * 1.618;
Aceste două variabile definesc dimensiunea fotografiilor în spațiul 3D. Lățimea este definită în raport cu înălțimea folosind raportul de dreptunghi de aur, care produce un dreptunghi a cărui formă este în general considerată estetică plăcută.
statică statică privată PHOTO_CLOUD_WIDTH: Număr = 1000; static static privat PHOTO_CLOUD_HEIGHT: Număr = 1000; statică statică privată PHOTO_CLOUD_DEPTH: Număr = 3000;
Aceste trei variabile definesc zona în care vor fi incluse toate fotografiile.
constr. statică privată NUMBER_PHOTOS: int = 300;
Această variabilă definește câte fotografii individuale vor fi create în zona definită mai sus.
static static privat CAMERA_JUMP_TIME: Number = 3; static static const CAMERA_DIST_FROM_PHOTO: Number = 30; static static const CAMERA_DIST_JUMP_BACK: Number = 100;
Aceste variabile definesc mișcarea și viteza aparatului foto în timp ce sare de la o fotografie la alta. Camera va urma o curbă bezier, cu începutul curbei fiind de 30 de unități înapoi de la o fotografie, deplasându-se spre un punct de 100 de unități înapoi și apoi terminând într-un punct cu 30 de unități înapoi de la următoarea fotografie.
Imaginile care vor fi afișate toate provin de pe Flickr, ceea ce înseamnă că va exista o întârziere inițială când fotografiile vor fi preluate. În același timp, o imagine încorporată în fișierul SWF va fi afișată, pentru a oferi utilizatorului ceva să privească dreptunghiuri altele decât alb.
Pasul 18: Adăugarea variabilelor
textele protejate var: ArrayCollection = ArrayCollection () nou; fotografii protejate var: ArrayCollection = nou ArrayCollection (); protejat var încărcatTexturi: int = 0;
Imaginile returnate de pe Flickr sunt stocate în colecția de texturi. Mesajele Away3D Lite care vor afișa imaginile sunt stocate în colecția de fotografii. Variabila loadedTextures păstrează o evidență a numărului de imagini încărcate de pe Flickr, astfel încât acestea să poată fi stocate în poziția corespunzătoare din colecția de texturi.
Pasul 19: Inițializarea aplicațieiManager
Adăugați o nouă funcție numită onInit.
override funcția protejată onInit (): void
Odată ce obiectul BasicTemplate de bază a fost inițializat, funcția onInit va fi apelată. Aici inițiază clasa de extindere.
pentru (var i: int = 0; i < MAX_RESULTS; ++i) addTexture(Cast.bitmap(DefaultTexture));
Mai întâi vom crea o colecție de texturi pentru a fi utilizate cu ochiurile foto 3D, toate folosind inițial imaginea implicită pe care am încorporat-o în pasul 17. Cast este o clasă utilitară furnizată de Away3D Lite și aici o utilizăm pentru a transforma imaginea încorporată într-o BitmapData obiect, care este furnizat funcției addTexture.
pentru (var j: int = 0; j < NUMBER_PHOTOS; ++j) createPlane();
Acum creăm ochiurile care vor afișa imaginile de fotografie. Fotografiile 3D vor fi de fapt avioane: dreptunghiuri 2D fără adâncime care se vor confrunta cu camera.
flickrSearch (SEARCH_STRING);
Apoi, inițiază o căutare prestabilită a bazei de date de imagini Flickr apelând flickrSearch, pentru a oferi utilizatorului câteva imagini la care să se uite înainte de a efectua propriile căutări.
this.debug = false;
Proprietatea de depanare a clasei BasicTemplate este setată la falsă, ceea ce oprește ecranul prestabilit al statisticilor de depanare, care este afișat în mod normal cu o aplicație Away3D Lite.
În mod implicit, clasa BasicTemplate plasează camera foto pe capătul negativ al axei z, privindu-se spre origine de-a lungul unei axe pozitive z. Atunci când avioanele sunt create de funcția createPlane, ele sunt create cu fața orientată de-a lungul axei pozitive z. Aceasta înseamnă că, în mod implicit, camera va privi fața din spate a avioanelor.
În mod obișnuit, în aplicațiile 3D, poligoanele cu spatele la cameră nu sunt vizibile (acest lucru se numește sacrificare a spatelui), așa că pentru a vedea avioanele de care avem nevoie pentru a muta camera până la capătul pozitiv al axei z și apoi să ne întoarcem la origine o axă negativă z.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) ca Mesh;
Apoi, trimitem o referință la un plan aleator stocat în colecția de fotografii.
Camera este apoi poziționată ușor în fața acestui plan aleator. Aceasta este prima fotografie pe care utilizatorul o va analiza când se încarcă aplicația.
bezierJump ();
În cele din urmă, vom începe operația de tweening TweenMax care va muta camera din fotografia curentă pentru a vedea o nouă fotografie aleatoare.
Pasul 20: Funcția addTexture
Adăugați o nouă funcție numită addTexture.
funcția protejată addTexture (date: BitmapData): void var texture: BitmapMaterial = BitmapMaterial nou (date); texture.smooth = adevărat; textures.addItem (textura);
Funcția addTexture, numită de onInit la pasul 19, creează o nouă clasă BitmapMaterial (care este clasa care definește textura unei fotografii 3D) utilizând BitmapData furnizată, își stabilește proprietatea netedă la adevărat și o adaugă colecției de texturi.
Funcția createPlane, numită de onInit la pasul 19, creează un plan nou utilizând dimensiunile definite de constantele de la pasul 16 și texturiază cu un material BitmapMaterial aleatoriu din colecția texturilor, le poziționează aleator în zona "cloud foto", le adaugă la scena (un obiect Away3D din clasa BasicTemplate), astfel încât acestea să fie vizibile și le adaugă în colecția de fotografii, astfel încât să le putem trimite mai ușor.
Pasul 22: Obținerea de imagini din Flickr
Adăugați două funcții noi, una numită flickrSearch și cealaltă numită pe PhotosSearch.
funcția publică flickrSearch (căutare: String): void var service: FlickrService = nou FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", căutare, "orice", "", null, null, null, null, -1, "", MAX_RESULTS, 1); funcția protejată onPhotosSearch (eveniment: FlickrResultEvent): void pentru fiecare (var: fotografie în event.data.photos.photos) var imageURL: String = 'http://static.flickr.com/' + foto.server + '/' + photo.id + '_' + photo.secret + '_m.jpg'; var loader: Loader = încărcător nou (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, funcție (eveniment: Eveniment): void var textură: BitmapMaterial = textures.getItemAt (loadedTextures) ca BitmapMaterial; texture.bitmap = event.currentTarget.content.bitmapData; ++ loadedTextures; loadedTextures % = MAX_RESULTS;); loader.load (noua adresă URLRequest (imageURL));
Ambele aceste funcții sunt luate aproape de linia de linie de la Build a Photo Viewer utilizând Flex și API-ul Flickr. Singura diferență este că, pe măsură ce imaginile sunt încărcate de pe Flickr, BitmapData este atribuită proprietății bitmap a obiectelor BitmapMaterial stocate în colecția de texturi. Aceasta, la rândul său, modifică imaginea afișată pe planuri în cadrul scenei 3D.
În acest mod, putem actualiza dinamic fotografiile 3D afișate cu mai multe apeluri către funcția flickrSearch când utilizatorul face o căutare din GUI principal.
Pasul 23: Funcția bezierJump
Funcția bezierJump este numită în mod repetat pentru a sari camera de la o fotografie la alta.
funcția protejată bezierJump (): void
Curbele Bezier reprezintă o modalitate convenabilă de a muta cu ușurință camera de-a lungul curbei definite de doar 3 puncte de referință: poziția curentă a camerei în fața unei fotografii, o poziție în spatele camerei foto și destinația finală în fața unei fotografii noi.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) ca Mesh;
Mai întâi este selectată o fotografie nouă aleatorie pentru a vă deplasa la colecția de fotografii.
Apoi utilizăm TweenMax pentru a muta poziția camerei (așa cum este definită de proprietățile x, y și z) doar în fața poziției fotografiei destinație aleasă aleatoriu ...
întârziere: 2,
după o întârziere inițială de 2 secunde (ceea ce înseamnă că utilizatorul vizualizează fiecare fotografie timp de 2 secunde) ...
de-a lungul unei curbe bezier care este influențată de un punct chiar în spatele poziției curente a camerelor ...
onComplete: bezierJump);
recursiv apelând funcția bezierJump odată ce mutarea este completă.
În felul acesta, camera se mișcă într-o fotografie, o vizualizează timp de 2 secunde, trece la următoarea fotografie și pornește din nou procesul. În general, apelarea recursivă a funcțiilor tweening este o modalitate excelentă de scriere a mișcărilor în aplicațiile Flex.
Concluzie
Cred că veți fi de acord că un album foto 3D este un mod de a atrage ochii pentru a afișa fotografii. Deși utilizăm imagini Flickr disponibile public ca sursă a fotografiilor aici, această aplicație ar putea fi ușor modificată pentru a afișa propriile imagini, fie găzduite pe Flickr, fie descărcate de oriunde.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Share
Accentsconagua
