Create en 3D Flickr Photo Gallery med Flex og Away3D
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne tut Jeg vil demonstrere hvordan å bygge en dynamisk bildegalleri ved å bruke Flickr API. For å legge til litt ekstra teft, vil vi dra nytte av Away3D og vise bildene i et 3D-miljø.
Det er masse å diskutere, så la oss komme videre med det!
Trinn 1: Gjennomgå Flickr API
Denne applikasjonen vil hente bilder fra Flickr som skal vises i et 3D-rom. Kort, prosessen med å laste ned bilder fra Flickr er som følger:
En Flickr API-nøkkel oppnås
AS3Flickr og AS3CoreLib Action biblioteker er lastet ned og refererte fra Flex Builder <.. br>
De Flickr kryssdomenepolicyfiler er lastet slik at Flex å få tilgang til bilder fra eksterne domener.
Et søk på Flickr utføres.
Resultatene brukes til å finne nettadressen av Flickr-bilder.
Bildene seg selv er lastet ned og lagret /vises.
Denne prosessen er dekket i dybden av en tidligere tutorial som du finner her. Jeg anbefaler deg å lese at opplæringen hvis du ikke er kjent med AS3Flickr bibliotek, som disse punktene vil bare bli kort omtalt i denne opplæringen
Trinn 2:. En introduksjon til Away3D Lite
Flash runtime har gjort noen imponerende fremgang i løpet av de siste årene. Den utbredte distribusjon av Flash runtime, både med Adobe AIR og nettleser plugins, sammen med ytelsesøkning i senere versjoner, betyr Flash har et svært rikt økosystem av biblioteker og programmer. Det har gått fra å være en animasjon verktøy til en generell utvikling plattform for spill, forretningsapplikasjoner, 3D visualiseringer, videospillere og mer.
3D-motorer har utviklet seg sammen med Flash på en stund, kommer fra en kuriositet til nå være fullt kjennetegnet og selv kommersielle biblioteker. Away3D er en av de mer populære gratis Flash 3D-motorer, og nylig en mindre, raskere versjon av Away3D ble utgitt kalt Away3D Lite. Mens Away3D Lite mangler noen av eye candy stede i de mer kompliserte 3D-motorer, sitt fokus på enkelhet betyr at det er perfekt for et enkelt program som en 3D-fotoalbum
Trinn 3:. Få Away3D Lite
Du kan laste ned en kopi av Away3D Lite 1.0 gratis fra denne nettsiden her. Last ned og pakk motoren kildekoden til et passende sted
Trinn 4:. Få Greensock TweenMax Library
Bevegelsen av kameraet i 3D-fotogalleri vil bli utført ved hjelp av Greensock TweenMax biblioteket , som du kan få fra denne siden her. Igjen, laste ned og pakke biblioteket til et passende sted
Trinn 5:. Få AS3Flickr og AS3CoreLib
De AS3Flickr og AS3CoreLib bibliotekene blir brukt til å kontakte Flickr webtjeneste. Du kan finne mer informasjon om disse bibliotekene fra artikkelen
Bygg en Photo Viewer Bruke Flex og Flickr API
Trinn 6:. Opprett et nytt prosjekt
Opprett en ny Flex prosjekt, og tilsett Away3D Lite, TweenMax, AS3Flickr og AS3CoreLib bibliotekene til Flex Bygg Sti
Trinn 7:. Definer Application attributter
applicationComplete = "appComplete ()"
Dette setter appComplete funksjon å bli kalt når søknaden er initialisert, og vil fungere som inngangspunkt for vår kode.
framerate = "100"
Dette setter frame rate cap for søknaden 100 bilder per sekund. Standard er 24, og øker dette vil gjøre programmet virker mer væske.
width = "600" height = "400" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# 000000, # 374040 ] "
Disse attributtene angi størrelse og bakgrunnsfargen på Flex-program
Application taggen skal se omtrent slik ut koden under:
< mx.: Søknad xmlns: mx = "http://www.adobe.com/2006/mxml~~number=plural" layout = "absolutte" applicationComplete = "appComplete ()" width = "600" height = "400" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[ ,,,0],# 000000, # 374040] "framerate =" 100 "> < /mx: Application >
Trinn 8: Legg noen kontroller
Legg følgende koder til Application tag
< mx. TextInput x = "10" y = "10" id = "txtSearch" /> < mx: Button x = "178" y = "10" label = "Søk" fillAlphas = "[0,9, 0,9, 0,9, 0,9]" klikk = "{applicationManager.flickrSearch (dette. txtSearch.text)} "/>
Vi vil gi brukeren muligheten til å søke Flickr og vise resultatene i vår 3D bildegalleri under kjøring. Disse to kodene legge til en tekstboks, der søkefrasen kan legges inn, og en knapp for å starte søket.
Den klikkhendelsen for knappen syner applicationManager.flickrSearch (this.txtSearch.text)
. Den ApplicationManager vil bli opprettet i senere trinn, og flickrSearch funksjonen vil inneholde koden for å kontakte Flickr og laste ned bildene
Trinn 9:. Legg noen kode
Legg til skript tag til Application tag. Det er der Actionscript-kode vil bli skrevet
< mx:.! Script > < [CDATA [//koden går her]] > < /mx: Script >
Trinn 10: Tilsett Variabler
private Var applicationManager
Legg til følgende variable inne i Script tag:. ApplicationManager = null;
ApplicationManager klassen vil være ansvarlig for initialisering Away3D motoren, lasting av Flickr-bilder og flytte kameraet. Vi holder en referanse til det i applicationManager variabel slik knappen opprettet i trinn 8 kan ringe flickrSearch funksjonen
Trinn 11:. Legge korset domenepolicy Files
Security.loadPolicyFile("http://api.flickr.com/crossdomain.xml");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");
In For å få tilgang til bildene på Flickr servere kryssdomenepolicyfiler trenger å bli lastet. Dette er dekket i mer detalj i artikkelen Bygg en Photo Viewer Bruke Flex og Flickr API
Trinn 12:. Den appComplete Funksjon
Legg til en ny funksjon kalt appComplete
privat funksjon. appComplete (): void {applicationManager = new ApplicationManager (); this.addChildAt (ny SpriteUIComponent (applicationManager), 0);}
Denne funksjonen kalles når Flex programmet har lastet og initialisert. Det er her vi skaper en ny forekomst av ApplicationManager klassen og legge den som et barn kontroll. Legg merke til at vi faktisk passere en forekomst av en klasse kalt SpriteUIComponent til addChildAt funksjonen.
Som du vil se i senere trinn, strekker ApplicationManager en av malen klasser fra Away3D Lite API. Disse mal klasser selv forlenge Flex Sprite-klassen. Selv om addChildAt funksjonen vil godta en Sprite, vil et unntak heves under kjøring. Dette er fordi kun klassene strekker den UIComponent klassen kan legges et barn spakene på en Flex-program. For å omgå denne begrensningen på SpriteUIComponent forlenger UIComponent klassen, og deretter legger til en Sprite som sitt eget barn
Trinn 13:. Den SpriteUIComponent Class
pakke {import flash.display.Sprite; import mx.core.UIComponent; public class SpriteUIComponent strekker UIComponent {offentlig funksjon SpriteUIComponent (sprite: Sprite) {super (); explicitHeight = sprite.height; explicitWidth = sprite.width; addChild (sprite); }}}
Som nevnt ovenfor, SpriteUIComponent klassen utvider UIComponent klassen (mao det kan legges til som et barn av en Flex-program), og deretter legger den medfølgende Sprite objekt som sitt eget barn.
Trinn 14: ApplicationManager Class
Importer følgende pakker
import away3dlite.core.base *; import away3dlite.core.utils *, import away3dlite.loaders *, import away3dlite.materials... *; import away3dlite.primitives. *;. import away3dlite.templates *; importere com.adobe.webapis.flickr. *; import com.adobe.webapis.flickr.events. *; import flash.display. *; import flash.events. *;. import flash.geom *; import flash.net. *; importere com.greensock. *; import mx.collections *;
Trinn 15:.. Forleng BasicTemplate
Definer ApplicationManager klasse som utvider BasicTemplate klassen
public class ApplicationManager strekker BasicTemplate
En ny funksjon som følger med Away3D Lite er malen klasser. Nesten hver Away3D programmet trenger å initial de samme underliggende klasser som et kamera og en visning, og også setup hendelsen lyttere for ramme hendelser. Disse vanlige skritt, som pleide å ha for å bli kodet av hver utvikler manuelt, blir nå utført av en av flere mal klasser. Vi vil utvide en av disse mal klasser, BasicTemplate, med ApplicationManager
Trinn 16:. Definer konstanter
ApplicationManager vil ha en rekke faste variabler som definerer utseendet og funksjonen til . klasse
private static konst SEARCH_STRING: String = "landskapet"; privat statisk konst MAX_RESULTS: int = 50; private static konst api_key. String = "YourFlickrAPIKey";
Disse tre konstanter forholder seg til Flickr webtjeneste
private static konst PHOTO_HEIGHT: Number = 50; private static konst PHOTO_WIDTH: Number = PHOTO_HEIGHT * 1.618;
Disse to variablene definere størrelsen på bildene i 3D-rom. Bredden er definert i forhold til høyden ved hjelp av det gylne rektangel ratio, som produserer et rektangel hvis form er generelt ansett som estetisk tiltalende
private static konst PHOTO_CLOUD_WIDTH: Antall = 1000; private static konst PHOTO_CLOUD_HEIGHT. Antall = 1000; private static const PHOTO_CLOUD_DEPTH: Antall = 3000;
Disse tre variablene definerer området som alle bildene vil ligge i
privat statisk konst NUMBER_PHOTOS: int = 300;
Denne variabelen definerer hvor mange enkeltbilder vil bli opprettet i. . området definert ovenfor
private static konst CAMERA_JUMP_TIME: Number = 3; private static konst CAMERA_DIST_FROM_PHOTO: Number = 30; private static konst CAMERA_DIST_JUMP_BACK: Nummer = 100;
Disse variablene definerer bevegelsen og hastigheten på kameraet som det hopper fra ett bilde til det neste. Kameraet vil følge en Bezier-kurve, med starten av kurven være 30 enheter tilbake fra et bilde som beveger seg mot et punkt 100 enheter tilbake, og deretter slutter ved et punkt 30 enheter tilbake fra det neste bildet.
Trinn 17: Inkludering standardbildet product: [Bygg (kilde = "../media /texture.jpg")] beskyttet statisk konst DefaultTexture: Klasse;
Bildene som skal vises all kommer fra Flickr, noe som betyr at det vil være en innledende forsinkelse som bildene skal hentes. I mellomtiden et bilde innebygd i SWF-fil vises, for å gi brukeren noe å se på annet enn hvite rektangler
Trinn 18:. Legge Variabler
beskyttet Var teksturer: ArrayCollection = new ArrayCollection (); beskyttede Var Bilder: ArrayCollection = new ArrayCollection (); beskyttede Var loadedTextures: int = 0;
Bildene returnert fra Flickr blir lagret i teksturer samlingen. De Away3D Lite maskene som vil vise bildene blir lagret i bilder samlingen. Den loadedTextures variable holder rede på hvor mange bilder har blitt lastet fra Flickr, slik at de kan lagres i riktig posisjon i teksturer samlingen
Trinn 19:. Initial den ApplicationManager
Legg til en . ny funksjon kalt onInit
overstyre beskyttet funksjon onInit (): void
Når den underliggende BasicTemplate objektet er initialisert selv, onInit funksjonen vil bli kalt. Det er her vi initialisere utvide klassen
for. (Var i: int = 0; i < MAX_RESULTS; ++ i) addTexture (Cast.bitmap (DefaultTexture));
Først lager vi en samling av teksturer for vår 3D bilder maskene å bruke, alt i utgangspunktet å bruke standardbildet vi forankret i trinn 17. Cast er et verktøy klasse leveres av Away3D Lite, og her bruker vi den til å forvandle den innebygde bildet inn i et BitmapData objekt, som leveres til . den addTexture funksjon
for (var j: int = 0; j < NUMBER_PHOTOS; ++ j) createPlane ();
Nå skaper vi maskene som skal vise fotografier. 3D-bilder vil faktisk være plan: 2D rektangler uten dybde som vil møte kameraet
flickrSearch (SEARCH_STRING);
Vi deretter starter en standard søke av Flickr bildedatabase ved å ringe flickrSearch, for å gi brukeren. noen bilder å se på før de utfører sin egen søke
this.debug = false;.
debug eiendommen av BasicTemplate klassen er satt til false, som slår av standard debug statistikk skjerm som er normalt vises med en Away3D Lite søknad
this.camera.x = 0;. this.camera.y = 0; this.camera.z = 10; this.camera.lookAt (ny Vector3D (0, 0, 0), ny Vector3D (0, 1, 0));
Som standard BasicTemplate klassen plasserer kameraet ned den negative enden av z-aksen, ser tilbake mot origo langs en positiv z-aksen. Når flyene er skapt av den createPlane funksjon, de er også opprettet med sine foran peker langs den positive z-aksen. Dette betyr at kameraet vil, som standard, se på baksiden ansiktet av flyene.
Vanligvis i 3D applikasjoner polygoner med ryggen til kameraet er ikke synlig (dette kalles tilbake face culling), så å se flyene vi har behov for å flytte kameraet opp den positive enden av z-aksen og deretter se tilbake på origo langs en negativ z-aksen
Var randomPhoto. Mesh = photos.getItemAt (Math.random () * ( MAX_RESULTS - 1)) som Mesh;.
Vi får da en referanse til en tilfeldig planet lagret i bilder samlingen
this.camera.x = randomPhoto.x; this.camera.y = randomPhoto.y; dette .camera.z = randomPhoto.z + CAMERA_DIST_FROM_PHOTO;
Kameraet er da posisjon litt foran denne tilfeldig planet. Dette er den første brukeren skal se på når programmet laster
bezierJump ();..
Endelig starter vi TweenMax tweening operasjon som vil flytte kameraet fra dagens bilde for å vise en ny tilfeldig bilde
Trinn 20: void {var tekstur::; tekstur BitmapMaterial = new BitmapMaterial (data) Den addTexture Funksjon
beskyttet funksjon addTexture (: BitmapData data) Legg til en ny funksjon kalt addTexture. .smooth = true; textures.addItem (tekstur);}
addTexture funksjon, kalt av onInit i trinn 19, skaper en ny BitmapMaterial klasse (som er den klassen som definerer strukturen av en 3D-bilder) ved hjelp av den medfølgende BitmapData setter sin glatte eiendom til sann, og legger det til teksturer samlingen
Trinn 21:. Den createPlane Funksjon
Legg til en ny funksjon kalt createPlane
beskyttet funksjon createPlane ().: void {var mesh: Plane = new Plane (textures.getItemAt (Math.random () * (MAX_RESULTS - 1)) som BitmapMaterial, PHOTO_WIDTH, PHOTO_HEIGHT, 1, 1, false); mesh.x = Math.random () * PHOTO_CLOUD_WIDTH; mesh.y = Math.random () * PHOTO_CLOUD_HEIGHT; mesh.z = Math.random () * PHOTO_CLOUD_DEPTH; scene.addChild (mesh); photos.addItem (mesh);}
createPlane funksjon, kalt av onInit i trinn 19, skaper en ny flyet ved hjelp av dimensjoner som er definert av konstantene i trinn 16 og strukturert med en tilfeldig BitmapMaterial fra teksturer samlingen, posisjonerer dem tilfeldig innenfor "photo cloud" området, legger dem til scenen (en Away3D objekt fra BasicTemplate klassen) slik at de er synlige, og legger dem til bilder samlingen slik at vi lett kan referere til dem senere.
Trinn 22 : Få bilder fra Flickr
Legg til to nye funksjoner, en som heter flickrSearch og den andre heter onPhotosSearch
offentlig funksjon flickrSearch (søk: String): void {var tjenesten. FlickrService = new FlickrService (api_key); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", søk, "noen", "", null, null, null, null, -1, "", MAX_RESULTS, 1);} beskyttet funksjon onPhotosSearch (event: FlickrResultEvent): void {for hver (var bildet: Bilde i event.data.photos.photos) {var Bildeadresse: String = 'http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg'; Var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, funksjon (hendelse: Hendelse): void {var tekstur: BitmapMaterial = textures.getItemAt (loadedTextures) som BitmapMaterial; texture.bitmap = event.currentTarget.content.bitmapData; ++ loadedTextures; loadedTextures % = MAX_RESULTS;}); loader.load (ny URLRequest (Bildeadresse)); }}
Begge disse funksjonene er tatt nesten linje for linje fra Build a Photo Viewer Bruke Flex og Flickr API. Den eneste forskjellen er at når bildene er lastet fra Flickr deres BitmapData er tildelt til bitmap eiendommen til den BitmapMaterial objekter lagret i teksturer samlingen. Dette i sin tur endrer bildet som vises på flyene innenfor 3D-scenen.
På denne måten kan vi dynamisk oppdatere 3D-bilder blir vist med flere samtaler til flickrSearch funksjonen når brukeren gjør et søk fra Hoved GUI
Trinn 23:.. Den bezierJump Funksjon
bezierJump funksjonen kalles gjentatte ganger for å hoppe kameraet fra ett bilde til det neste
beskyttet funksjon bezierJump (): void
Bezierkurver er en praktisk måte å jevnt flytte kameraet langs kurven definert av bare 3 referansepunkter. kameraene nåværende posisjon foran et bilde, en posisjon bak kamera, og den endelige destinasjonen foran et nytt bilde
Var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) som Mesh;
Først en ny tilfeldig bilde for å flytte til er valgt fra bilder samlingen
TweenMax.to (. this.camera, CAMERA_JUMP_TIME, {x: randomPhoto.x, y: randomPhoto.y, z: randomPhoto.z + CAMERA_DIST_FROM_PHOTO,
Vi bruker deretter TweenMax å flytte kameraet posisjon (som definert av x, y og z-eiendommer ) til like foran posisjonen til bestemmelses bildet tilfeldig valgt ...
forsinkelse: 2,
etter en innledende forsinkelse på 2 sekunder (som betyr at brukeren ser på hvert bilde i 2 sekunder) ...
Bezier: [{x: this.camera.x, y: this.camera.y, z: this.camera.z + CAMERA_DIST_JUMP_BACK}]
langs en Bezier kurve som er påvirket av et punkt like bak kameraets gjeldende posisjon ...
onComplete: bezierJump});
rekursivt kalle bezierJump funksjon når flyttingen er fullført
På denne måten kameraet flyttes til et bilde, ser det for 2 sekunder. hopper til neste bilde og starter prosessen på nytt. Generelt rekursivt kall tweening funksjoner er en fin måte å skript bevegelser i Flex applikasjoner.
Konklusjon
Jeg tror du er enig at en 3D-fotoalbum er en oppsiktsvekkende måte å vise bilder . Selv om vi bruker offentlig tilgjengelige Flickr-bilder som kilde av bildene her, kan dette programmet enkelt endres til å vise dine egne bilder, enten vert på Flickr eller lastes ned fra andre steder.
Jeg håper du likte denne opplæringen, takk for lesing!