In questo tutorial illustrerò come creare una galleria fotografica dinamica utilizzando l'API di Flickr. Per aggiungere un tocco in più, sfrutteremo la potenza di Away3D e mostreremo le foto in un ambiente 3D.
C'è molto da discutere, quindi andiamo avanti!
Passaggio 1: revisione dell'API di Flickr
Questa applicazione recupererà le foto da Flickr per essere visualizzate all'interno di uno spazio 3D. In breve, il processo di download delle foto da Flickr è il seguente:
Si ottiene una chiave API Flickr.
Le librerie AS3Flickr e AS3CoreLib ActionScript sono scaricate e referenziate da Flex Builder.
I file di criteri del dominio incrociato Flickr vengono caricati per consentire a Flex di accedere alle immagini da domini remoti.
Viene eseguita una ricerca su Flickr.
I risultati vengono utilizzati per trovare l'URL delle immagini di Flickr.
Le immagini stesse vengono scaricate e salvate / visualizzate.
Questo processo è approfondito da un precedente tutorial che puoi trovare qui. Ti consiglio vivamente di leggere questo tutorial se non hai familiarità con la libreria AS3Flickr, in quanto questi punti verranno menzionati solo brevemente in questo tutorial.
Passaggio 2: Introduzione a Away3D Lite
Il runtime Flash ha compiuto notevoli progressi negli ultimi anni. La diffusione diffusa del runtime Flash, sia con Adobe AIR che con i plugin del browser, insieme all'aumento delle prestazioni nelle versioni successive, significa che Flash ha un ecosistema molto vario di librerie e applicazioni. È passato dall'essere uno strumento di animazione a una piattaforma di sviluppo generica per giochi, applicazioni aziendali, visualizzazioni 3D, lettori video e altro ancora.
I motori 3D si sono evoluti parallelamente a Flash per un certo periodo, passando da una curiosità a una serie di librerie complete e persino commerciali. Away3D è uno dei più popolari motori Flash 3D gratuiti e recentemente è stata rilasciata una versione più piccola e più veloce di Away3D, chiamata Away3D Lite. Mentre Away3D Lite manca di alcuni dei più brillanti presenti nei motori 3D più complicati, il suo focus sulla semplicità significa che è perfetto per una semplice applicazione come un album di foto 3D.
Passaggio 3: Ottieni Away3D Lite
Puoi scaricare una copia di Away3D Lite 1.0 gratuitamente da questa pagina web qui. Scarica ed estrai il codice sorgente del motore in una posizione comoda.
Passaggio 4: Ottieni la libreria TweenMax di Greensock
Il movimento della fotocamera all'interno della galleria fotografica 3D verrà eseguito utilizzando la libreria Greensock TweenMax, che puoi ottenere da questa pagina qui. Ancora una volta, scarica ed estrai la libreria in una posizione comoda.
Passaggio 5: Ottieni AS3Flickr e AS3CoreLib
Le librerie AS3Flickr e AS3CoreLib vengono utilizzate per contattare il servizio Web Flickr. Puoi trovare dettagli su queste librerie dall'articolo Costruisci un visualizzatore di foto usando Flex e l'API di Flickr.
Passaggio 6: creare un nuovo progetto
Crea un nuovo progetto Flex e aggiungi le librerie Away3D Lite, TweenMax, AS3Flickr e AS3CoreLib al percorso di costruzione Flex.
Passaggio 7: definire gli attributi dell'applicazione
applicationComplete = "AppComplete ()" Questo imposta la funzione di completamento delle app da chiamare quando l'applicazione è inizializzata e fungerà da punto di ingresso per il nostro codice.
frameRate = "100" Questo imposta il limite del frame rate per l'applicazione a 100 frame al secondo. L'impostazione predefinita è 24 e l'aumento di questa operazione renderà l'applicazione più fluida.
width = "600" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# 000000, # 374040]" Questi attributi definiscono la dimensione e il colore di sfondo dell'applicazione Flex.
Il tuo tag Application dovrebbe apparire come il seguente codice:
Passaggio 8: aggiungere alcuni controlli
Aggiungi i seguenti tag al tag Application.
Daremo all'utente la possibilità di cercare su Flickr e visualizzare i risultati all'interno della nostra galleria fotografica 3D in fase di esecuzione. Questi due tag aggiungono una casella di testo, dove è possibile inserire la frase di ricerca e un pulsante per avviare la ricerca.
L'evento click per le chiamate ai pulsanti applicationManager.flickrSearch (this.txtSearch.text). L'ApplicationManager verrà creato nei passaggi successivi e la funzione flickrSearch conterrà il codice per contattare Flickr e scaricare le foto.
Passaggio 9: aggiungere un codice
Aggiungi un tag Script al tag Application. Qui è dove verrà scritto il codice ActionScript.
Passaggio 10: aggiungere le variabili
Aggiungi la seguente variabile all'interno del tag Script.
private var applicationManager: ApplicationManager = null;
La classe ApplicationManager sarà responsabile per l'inizializzazione del motore Away3D, il caricamento delle immagini di Flickr e lo spostamento della videocamera. Teniamo un riferimento ad esso nella variabile applicationManager in modo che il pulsante creato nel passo 8 possa chiamare la funzione flickrSearch.
Passaggio 11: caricamento dei file di criteri di dominio incrociato
Per accedere alle immagini sui server di Flickr, è necessario caricare i file dei criteri del dominio incrociato. Questo argomento è trattato più dettagliatamente nell'articolo Build a Photo Viewer usando Flex e l'API di Flickr.
Passaggio 12: la funzione di completamento della app
Aggiungi una nuova funzione chiamata appComplete.
funzione privata appComplete (): void applicationManager = new ApplicationManager (); this.addChildAt (new SpriteUIComponent (applicationManager), 0);
Questa funzione viene chiamata quando l'applicazione Flex è stata caricata e inizializzata. È qui che creiamo una nuova istanza della classe ApplicationManager e la aggiungiamo come controllo figlio. Si noti che in realtà passiamo un'istanza di una classe chiamata SpriteUIComponent alla funzione addChildAt.
Come vedrai nei passaggi successivi, ApplicationManager estende una delle classi template dall'API Away3D Lite. Queste classi template estendono la classe Flex Sprite. Anche se la funzione addChildAt accetterà uno Sprite, verrà generata un'eccezione in fase di runtime. Questo perché solo le classi che estendono la classe UIComponent possono essere aggiunte ai controlli figlio di un'applicazione Flex. Per ovviare a questa limitazione, SpriteUIComponent estende la classe UIComponent e quindi aggiunge uno Sprite come se fosse un figlio.
Passaggio 13: la classe SpriteUIComponent
pacchetto import flash.display.Sprite; import mx.core.UIComponent; public class SpriteUIComponent estende UIComponent public function SpriteUIComponent (sprite: Sprite) super (); explicitHeight = sprite.height; explicitWidth = sprite.width; addChild (sprite);
Come accennato in precedenza, la classe SpriteUIComponent estende la classe UIComponent (ovvero può essere aggiunta come figlio di un'applicazione Flex), quindi aggiunge l'oggetto Sprite fornito come figlio proprio.
Definire la classe ApplicationManager come estensione della classe BasicTemplate.
public class ApplicationManager estende BasicTemplate
Una nuova funzionalità inclusa in Away3D Lite sono le classi template. Quasi tutte le applicazioni Away3D devono inizializzare le stesse classi sottostanti come una telecamera e una vista, e anche impostare i listener di eventi per gli eventi frame. Questi passaggi comuni, che prima dovevano essere codificati manualmente da ogni sviluppatore, vengono ora eseguiti da una delle diverse classi di template. Estenderemo una di queste classi template, BasicTemplate, con ApplicationManager.
Passaggio 16: Definisci le costanti
ApplicationManager avrà un numero di variabili costanti che definiscono l'aspetto e la funzione della classe.
Queste tre costanti si riferiscono al servizio web Flickr.
const statico privato PHOTO_HEIGHT: Number = 50; const statico privato PHOTO_WIDTH: Number = PHOTO_HEIGHT * 1.618;
Queste due variabili definiscono la dimensione delle foto nello spazio 3D. La larghezza è definita in relazione all'altezza utilizzando il rapporto del rettangolo dorato, che produce un rettangolo la cui forma è generalmente considerata esteticamente gradevole.
const statico privato PHOTO_CLOUD_WIDTH: Number = 1000; const statico privato PHOTO_CLOUD_HEIGHT: Number = 1000; const statico privato PHOTO_CLOUD_DEPTH: Number = 3000;
Queste tre variabili definiscono l'area in cui saranno contenute tutte le foto.
private static const CAMERA_JUMP_TIME: Number = 3; private static const CAMERA_DIST_FROM_PHOTO: Number = 30; private static const CAMERA_DIST_JUMP_BACK: Number = 100;
Queste variabili definiscono il movimento e la velocità della fotocamera mentre salta da una foto all'altra. La fotocamera seguirà una curva più bezier, con l'inizio della curva di 30 unità indietro da una foto, spostandosi verso un punto 100 unità indietro, e quindi terminando in un punto 30 unità indietro rispetto alla foto successiva.
Le immagini che verranno visualizzate provengono tutte da Flickr, il che significa che ci sarà un ritardo iniziale quando le foto verranno recuperate. Nel frattempo verrà visualizzata un'immagine incorporata nel file SWF, per dare all'utente qualcosa da guardare oltre ai rettangoli bianchi.
Passaggio 18: aggiunta delle variabili
texture var protette: ArrayCollection = new ArrayCollection (); foto var protette: ArrayCollection = new ArrayCollection (); protected var loadedTextures: int = 0;
Le immagini restituite da Flickr sono memorizzate nella collezione di trame. Le mesh Away3D Lite che mostreranno le immagini sono memorizzate nella collezione di foto. La variabile loadedTextures tiene traccia di quante immagini sono state caricate da Flickr, in modo che possano essere memorizzate nella posizione appropriata nella collezione di trame.
Passaggio 19: inizializzazione di ApplicationManager
Aggiungi una nuova funzione chiamata onInit.
sovrascrivi la funzione protetta onInit (): void
Una volta inizializzato l'oggetto BasicTemplate sottostante, verrà chiamata la funzione onInit. È qui che inizializziamo la classe estesa.
per (var i: int = 0; i < MAX_RESULTS; ++i) addTexture(Cast.bitmap(DefaultTexture));
Per prima cosa creiamo una collezione di trame da usare per le nostre mesh fotografiche 3D, inizialmente utilizzando l'immagine predefinita che abbiamo incorporato nel passaggio 17. Cast è una classe di utilità fornita da Away3D Lite, e qui la usiamo per trasformare l'immagine incorporata in un BitmapData oggetto, che viene fornito alla funzione addTexture.
per (var j: int = 0; j < NUMBER_PHOTOS; ++j) createPlane();
Ora creiamo le mesh che visualizzeranno le immagini fotografiche. Le foto 3D saranno in realtà piani: rettangoli 2D senza profondità che affronteranno la fotocamera.
flickrSearch (SEARCH_STRING);
Iniziamo quindi una ricerca predefinita del database di immagini di Flickr chiamando flickrSearch, per dare all'utente alcune immagini da guardare prima di eseguire la propria ricerca.
this.debug = falso;
La proprietà debug della classe BasicTemplate è impostata su false, che disattiva la schermata delle statistiche di debug predefinita che viene normalmente visualizzata con un'applicazione Away3D Lite.
this.camera.x = 0; this.camera.y = 0; this.camera.z = 10; this.camera.lookAt (new Vector3D (0, 0, 0), new Vector3D (0, 1, 0));
Per impostazione predefinita, la classe BasicTemplate posiziona la videocamera lungo l'estremità negativa dell'asse z, guardando indietro verso l'origine lungo un asse z positivo. Quando i piani vengono creati dalla funzione createPlane, vengono creati anche con il loro fronte puntato lungo l'asse positivo z. Ciò significa che la fotocamera, di default, guarderà la faccia posteriore dei piani.
Tipicamente in applicazioni 3D i poligoni con le spalle alla telecamera non sono visibili (si chiama back face culling), quindi per vedere i piani abbiamo bisogno di spostare la telecamera verso l'estremità positiva dell'asse z e quindi guardare indietro all'origine lungo un asse z negativo.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) come Mesh;
Otteniamo quindi un riferimento a un piano casuale memorizzato nella raccolta di foto.
La fotocamera è quindi posizionata leggermente di fronte a questo piano casuale. Questa è la prima foto che l'utente guarderà al caricamento dell'applicazione.
bezierJump ();
Infine, iniziamo l'operazione di interpolazione TweenMax che sposterà la fotocamera dalla foto corrente per visualizzare una nuova foto casuale.
Passaggio 20: la funzione addTexture
Aggiungi una nuova funzione chiamata addTexture.
funzione protetta addTexture (data: BitmapData): void var texture: BitmapMaterial = new BitmapMaterial (data); texture.smooth = true; textures.addItem (texture);
La funzione addTexture, chiamata da onInit nel passaggio 19, crea una nuova classe BitmapMaterial (che è la classe che definisce la trama di una foto 3D) utilizzando il BitmapData fornito, imposta la proprietà smooth su true e la aggiunge alla collezione di trame.
La funzione createPlane, chiamata da onInit nel passaggio 19, crea un nuovo piano utilizzando le dimensioni definite dalle costanti nel passaggio 16 e strutturato con un oggetto Bitmap casuale dalla raccolta delle trame, le posiziona casualmente all'interno dell'area "foto cloud", le aggiunge a la scena (un oggetto Away3D della classe BasicTemplate) in modo che siano visibili e li aggiunge alla raccolta di foto in modo da poterli facilmente consultare in seguito.
Passaggio 22: acquisizione di immagini da Flickr
Aggiungi due nuove funzioni, una chiamata flickrSearch e l'altra chiamata onPhotosSearch.
funzione pubblica flickrSearch (search: String): void var service: FlickrService = new FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", search, "any", "", null, null, null, null, -1, "", MAX_RESULTS, 1); funzione protetta suPhotosSearch (evento: FlickrResultEvent): void per ciascuna (var photo: Photo in event.data.photos.photos) var imageURL: String = 'http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg'; var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, function (event: Event): void var texture: BitmapMaterial = textures.getItemAt (loadedTextures) come BitmapMaterial; texture.bitmap = event.currentTarget.content.bitmapData; ++ loadedTextures; loadedTextures % = MAX_RESULTS;); loader.load (new URLRequest (imageURL));
Entrambe queste funzioni sono prese quasi in linea per la riga da Build a Photo Viewer usando Flex e l'API di Flickr. L'unica differenza è che quando le immagini vengono caricate da Flickr, i loro BitmapData vengono assegnati alla proprietà bitmap degli oggetti BitmapMaterial memorizzati nella collezione di trame. Questo a sua volta cambia l'immagine che viene visualizzata sui piani all'interno della scena 3D.
In questo modo possiamo aggiornare dinamicamente le foto 3D visualizzate con più chiamate alla funzione flickrSearch quando l'utente esegue una ricerca dalla GUI principale.
Passaggio 23: la funzione bezierJump
La funzione bezierJump viene chiamata più volte per saltare la telecamera da una foto all'altra.
funzione protetta bezierJump (): void
Le curve di Bezier sono un modo conveniente per spostare agevolmente la telecamera lungo una curva definita da soli 3 punti di riferimento: la posizione attuale delle fotocamere di fronte a una foto, una posizione dietro la telecamera e la destinazione finale di fronte a una nuova foto.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) come Mesh;
Prima viene selezionata una nuova foto a caso da selezionare dalla raccolta di foto.
Quindi usiamo TweenMax per spostare la posizione della telecamera (come definito dalle proprietà x, y e z) proprio di fronte alla posizione della foto di destinazione selezionata casualmente ...
ritardo: 2,
dopo un ritardo iniziale di 2 secondi (il che significa che l'utente visualizza ogni foto per 2 secondi) ...
lungo una curva più bezier che è influenzata da un punto appena dietro la posizione corrente delle telecamere ...
onComplete: bezierJump);
chiamando ricorsivamente la funzione bezierJump una volta completato lo spostamento.
In questo modo, la fotocamera si sposta su una foto, la visualizza per 2 secondi, passa alla foto successiva e ricomincia il processo. In generale, la chiamata ricorsiva delle funzioni di tweening è un ottimo modo per eseguire lo script dei movimenti nelle applicazioni Flex.
Conclusione
Penso che sarai d'accordo che un album di foto 3D è un modo accattivante per visualizzare le foto. Anche se utilizziamo le immagini di Flickr pubblicamente disponibili come fonte delle foto qui, questa applicazione potrebbe essere facilmente modificata per visualizzare le tue immagini, ospitate su Flickr o scaricate altrove.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Share
Accentsconagua
