Costruisci un visualizzatore di foto usando Flex e l'API di Flickr

In questo tutorial imparerai come usare la libreria as3flickrlib per creare un visualizzatore di foto Flash Flickr.




Passo 1: Il as3flickrlib

Ci sono molte librerie disponibili per gli sviluppatori Flex che si interfacciano con Flickr. La libreria as3flickrlib è stata creata da Adobe ed è la libreria che useremo per creare questa applicazione di visualizzazione di foto. Dovrai scaricare una copia del codice as3flickrlib per te stesso, così come la libreria as3corelib (as3flickrlib dipende da as3corelib). Entrambi possono essere ottenuti da qui.

Passaggio 2: TweenMax

Avrai anche bisogno della libreria TweenMax. TweenMax è una libreria di interpolazione che consente di modificare facilmente le proprietà di un oggetto nel tempo. Puoi ottenere TweenMax qui.

Passaggio 3: nuovo progetto

Crea un nuovo progetto web Flex e aggiungi le tre librerie menzionate sopra al percorso sorgente dell'applicazione.

Passaggio 4: Classe wrapper

Questa applicazione funziona prendendo le immagini caricate da Flickr e aggiungendole all'oggetto Application principale (ovvero l'oggetto creato dal file MXML). Quando carichi un'immagine dal web, questa viene restituita come Bitmap. Mentre la classe Bitmap estende la classe DisplayObject (che è ciò che richiede la funzione addChild), Flex consente solo alle classi che estendono la classe UIComponent di essere aggiunte come figlio dell'oggetto principale dell'applicazione e Bitmap non estende l'UIComponent. Il compilatore non contrassegna l'aggiunta di un Bitmap all'oggetto Application tramite la funzione addChild come errore, ma si otterrà un'eccezione in fase di esecuzione.

Tuttavia, sarebbe bello poter aggiungere gli oggetti Bitmap come figli dell'oggetto Application. È necessario creare una classe wrapper di piccole dimensioni che estenda la classe UIComponent (in modo che possa essere aggiunta all'applicazione), ma aggiunge anche una bitmap come elemento secondario di se stessa. Quella classe wrapper si chiama DisplayObjectUIComponent.

 package import flash.display.DisplayObject; import mx.core.UIComponent; public class DisplayObjectUIComponent estende UIComponent public function DisplayObjectUIComponent (displayObject: DisplayObject) super (); explicitHeight = displayObject.height; explicitWidth = displayObject.width; addChild (displayObject); 

Passaggio 5: nuovo file MXML

Ora dobbiamo creare il file MXML.

  ... 

Questa è la shell del file MXML. La maggior parte del codice è uguale al modello vuoto che viene creato quando si apre una nuova applicazione Flex in Flex Builder. Inoltre abbiamo specificato i colori di sfondo (con il backgroundGradientAlphas e backgroundGradientColors attributi) e impostare la funzione onComplete da chiamare quando l'oggetto Application si è creato da solo (con creationComplete attributo).

Passaggio 6: mx: tag script

Il codice che farà il lavoro di download e visualizzazione delle immagini di Flickr deve essere contenuto in un tag mx: script. Il tag ci consente semplicemente di scrivere codice senza doverci preoccupare di caratteri speciali come maggiore di e minore di (< and >) interpretato come parte del documento XML.

   

Passaggio 7: Importa classi

Abbiamo bisogno di importare alcune classi per l'uso all'interno della nostra applicazione.

 import mx.collections.ArrayCollection; import mx.controls.Alert; import com.adobe.webapis.flickr. *; import com.adobe.webapis.flickr.events. *; import gs.TweenMax; import gs.easing. *;

Passaggio 8: Definisci costanti

Quindi dobbiamo definire alcune costanti che controlleranno il funzionamento della nostra applicazione.

 const statico privato SEARCH_STRING: String = "sunset"; const statico privato MAX_RESULTS: int = 50; private static const API_KEY: String = "la tua chiave va qui"; private static const TRANSITION_TIME: Number = 1; private static const DISPLAY_TIME: Number = 3;
  • SEARCH_STRING definisce la query che verrà inviata a Flickr. In sostanza, interrogeremo Flickr per le immagini in modo molto simile a quanto si farebbe per interrogare Google per le pagine Web. Abbiamo impostato la query su "tramonto" qui, ma questa stringa potrebbe essere qualcosa come "gattini", "montagne", "auto" ecc..
  • MAX_RESULTS definisce il numero di immagini che Flickr restituirà una volta che è stato interrogato.
  • API_KEY è la tua chiave API Flickr, che puoi richiedere qui.
  • TRANSITION_TIME definisce la velocità con cui le immagini si dissolvono l'una nell'altra in pochi secondi. Qui abbiamo impostato il tempo di transizione per 1 secondo.
  • DISPLAY_TIME definisce per quanto tempo ciascuna immagine verrà visualizzata prima che venga caricata l'immagine successiva. Qui abbiamo impostato ciascuna immagine da visualizzare per 3 secondi.

Passaggio 9: Definire le variabili

Dobbiamo definire alcune variabili per la nostra applicazione.

 foto private var: ArrayCollection = null; private var currentImage: int = 0; private var displayImage: Bitmap = null; private var backgroundImage: Bitmap = null;
  • La variabile foto è una raccolta delle definizioni di foto inviate da Flickr. È importante notare che Flickr non invia effettivamente le foto indietro, ma solo le informazioni necessarie per trovare l'URL della foto, che deve quindi essere scaricato separatamente.
  • La variabile currentImage mantiene un indice nella raccolta di foto. Questo è così sappiamo quale foto deve essere visualizzata in seguito.
  • Le variabili displayImage e backgroundImage sono riferimenti agli oggetti Bitmap creati caricando le immagini di Flickr.

Passaggio 10: file di criteri

Per impostazione predefinita, un'applicazione Flash può caricare solo risorse dal proprio dominio. Per caricare risorse da un altro dominio (come Flickr) il proprietario di quel dominio deve avere un file di criteri, solitamente chiamato crossdomain.xml, che consente al runtime Flash di sapere che è OK caricare le proprie risorse. Questo file di criteri deve essere caricato prima di qualsiasi tentativo di caricare le risorse.

Flickr ospita le sue immagini su un numero di server, quindi qui carichiamo il file delle politiche di questi server. Se non esegui questo passaggio otterrai un'eccezione quando proverai a caricare immagini da questi domini.

 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");

Passaggio 11: Funzione onComplete

Quando l'applicazione Flex ha terminato di crearsi, verrà chiamata la funzione onComplete (questo è ciò che abbiamo specificato nel Passaggio 5). Il completamento
la funzione è il punto di ingresso dell'applicazione.

 funzione privata onComplete (): void var service: FlickrService = new FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", SEARCH_STRING, "any", "", null, null, null, null, -1, "", MAX_RESULTS, 1); 

La prima cosa che dobbiamo fare è creare una nuova istanza della classe FlickrService. L'oggetto FlickrService è il nostro gateway per Flickr, e lo usiamo per inviare la nostra ricerca per le nostre immagini sunrise. È necessario fornire la chiave API Flickr (dal punto 8) al costruttore FlickrService.

servizio var: FlickrService = new FlickrService (API_KEY);

Quindi colleghiamo una funzione all'evento FlickrResultEvent.PHOTOS_SEARCH. Questa funzione verrà chiamata quando Flickr ha restituito alcune informazioni su una ricerca. Qui si allega la funzione onPhotosSearch.

service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch);

Alla fine eseguiamo la ricerca vera e propria. La funzione di ricerca ha molti parametri che possono essere utilizzati per restringere una ricerca a un utente specifico, data, titolo e altro. Siamo interessati solo a trovare le foto con il tramonto del tag e quindi fornire una stringa vuota, vuota o -1 a questi altri parametri.

service.photos.search ("", SEARCH_STRING, "any", "", null, null, null, null, -1, "", MAX_RESULTS, 1);

Passaggio 12: funzione onPhotoSearch

La funzione onPhotoSearch viene chiamata quando Flickr ha restituito alcune informazioni sulla nostra ricerca.

funzione privata suPhotosSearch (evento: FlickrResultEvent): void if (event.success) var photoList: PagedPhotoList = event.data.photos; foto = nuova ArrayCollection (photoList.photos); loadNextImage ();  else Alert.show ("Chiamata di Flickr fallita. Hai aggiornato la chiave API?"); 

Per prima cosa è necessario determinare se la chiamata a Flickr ha avuto esito positivo. Questo viene fatto controllando il flag event.success. Se questo è vero, Flickr ha restituito con successo alcune informazioni sulle foto per le quali ci siamo interrogati. Se event.success è false, la chiamata non è riuscita. Questo di solito accade perché la chiave API fornita non era corretta.

 if (event.success) ... else ...

Se la chiamata ha avuto successo, è necessario accedere alla raccolta di dati fotografici restituiti.

var photoList: PagedPhotoList = event.data.photos;

The PagedPhotoList contiene quindi i dettagli delle foto stesse, che poi salviamo nella raccolta di foto.

foto = nuova ArrayCollection (photoList.photos);

A questo punto la raccolta di foto contiene un elenco di dettagli fotografici che possono essere utilizzati per caricare le immagini fotografiche reali. Da qui in avanti scaricheremo solo immagini, dagli URL che abbiamo creato utilizzando le informazioni nella raccolta di foto, senza ulteriori chiamate speciali utilizzando l'API di Flickr.

Per avviare l'album fotografico, dobbiamo chiamare la funzione loadNextImage.

loadNextImage ();

Se si è verificato un problema durante la chiamata a Flickr, all'utente viene inviata una notifica con una finestra di avviso.

Alert.show ("Chiamata di Flickr fallita. Hai aggiornato la chiave API?");

Passaggio 13: loadNextImage Function

Ora che disponiamo dei dettagli delle foto relative alla nostra ricerca, dobbiamo effettivamente scaricare le immagini in modo che possano essere visualizzate. Questo viene fatto dalla funzione loadNextImage.

 funzione privata loadNextImage (): void var imageURL: String = 'http://static.flickr.com/' + photos [currentImage] .server + '/' + photos [currentImage] .id + '_' + foto [ currentImage] .secret + '_m.jpg'; ++ currentImage; currentImage% = photos.length; var request: URLRequest = new URLRequest (imageURL); var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages); Loader.load (richiesta); 

Ricorda che ho detto che la chiamata a Flickr in realtà non restituisce le immagini stesse? Quello che restituisce è l'informazione necessaria a
costruisci l'URL che possiamo usare per scaricare l'immagine. Utilizzando il server, l'ID e le informazioni segrete delle foto, possiamo creare l'URL completo che visualizzerà l'immagine.

Ogni immagine ha un numero di risoluzioni. Scegliamo quale immagine di dimensioni stiamo scaricando dal suffisso dell'URL. Il suffisso _m indica che lo siamo
scaricare una versione di medie dimensioni dell'immagine. Qui è possibile trovare altri suffissi, che consentono di scaricare versioni più o meno dettagliate delle immagini.

var imageURL: String = 'http://static.flickr.com/' + photos [currentImage] .server + '/' + photos [currentImage] .id + '_' + photos [currentImage] .secret + '_m. jpg ';

Ora che abbiamo richiesto l'immagine, incrementiamo la variabile currentImage in modo che la prossima volta che loadNextImage viene richiamato, tiriamo giù l'immagine successiva nell'elenco di ricerca.

++currentImage; currentImage% = photos.length;

Quindi dobbiamo caricare effettivamente le immagini. Creiamo un nuovo oggetto URLRequest (fornendo l'URL che abbiamo creato sopra al costruttore), un nuovo oggetto Loader e allega la funzione switchImages all'evento Event.COMPLETE di Loaders..

var request: URLRequest = new URLRequest (imageURL); var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, switchImages);

Infine, carichiamo l'immagine da Flickr chiamando la funzione di caricamento Loaders.

Loader.load (richiesta);

Passaggio 14: Funzione switchImages

La funzione switchImages viene chiamata quando abbiamo caricato una nuova immagine da Flickr.

funzione privata switchImages (event: Event): void displayImage = event.currentTarget.content; displayImage.smoothing = true; displayImage.width = this.width; displayImage.height = this.height; displayImage.alpha = 0; this.addChild (new DisplayObjectUIComponent (displayImage)); TweenMax.to (displayImage, TRANSITION_TIME, alpha: 1, eas: Linear, onComplete: imageTweenComplete); if (backgroundImage! = null) TweenMax.to (backgroundImage, TRANSITION_TIME, alpha: 0, eas: Linear); 

L'oggetto Bitmap restituito dal processo di caricamento viene salvato nella variabile displayImage.

displayImage = event.currentTarget.content;

Questa nuova Bitmap viene quindi inizializzata in modo da renderla liscia (per aiutare con la pixelizzazione che può verificarsi quando ridimensiona le immagini di piccole dimensioni), ridimensionata per riempire la finestra e impostata per essere completamente trasparente impostando l'alpha su 0.

displayImage.smoothing = true; displayImage.width = this.width; displayImage.height = this.height; displayImage.alpha = 0;

Quindi aggiungiamo Bitmap all'applicazione tramite una nuova istanza della classe DisplayObjectUIComponent che abbiamo descritto nel passaggio 4.

 this.addChild (new DisplayObjectUIComponent (displayImage));

A questo punto abbiamo la nuova immagine aggiunta come figlio dell'oggetto Application. Non è visibile però perché abbiamo impostato l'alpha su 0. Quello che vogliamo fare è sfumare questa nuova immagine in vista aumentando il suo valore alfa, mentre allo stesso tempo dissolvendo l'ultima immagine diminuendone il valore alfa. È qui che entra in gioco la libreria TweenMax. Chiamiamo la funzione TweenMax.to e TweenMax si occupa quindi di modificare i valori alfa per noi.

Impostando il parametro onComplete su imageTweenComplete, pianifichiamo la chiamata alla funzione imageTweenComplete una volta che questa operazione di interpolazione è
competere.

Abbiamo bisogno di controllare se la variabile backgroundImage è nullo perché quando viene caricata la prima immagine non c'è alcuna immagine di sfondo esistente che viene visualizzata sopra.

TweenMax.to (displayImage, TRANSITION_TIME, alpha: 1, eas: Linear, onComplete: imageTweenComplete); if (backgroundImage! = null) TweenMax.to (backgroundImage, TRANSITION_TIME, alpha: 0, eas: Linear);

Passaggio 15: Funzione imageTweenComplete

La funzione imageTweenComplete viene chiamata quando TweenMax visualizza un'immagine appena caricata in dissolvenza.

funzione privata imageTweenComplete (): void if (backgroundImage! = null) this.removeChild (backgroundImage.parent); backgroundImage = displayImage; displayImage = null; TweenMax.delayedCall (DISPLAY_TIME, loadNextImage); 

Dopo la dissolvenza di displayImage, la backgroundImage viene rimossa dall'applicazione e displayImage diventa backgroundImage. Il
displayImage viene quindi impostato su null.

if (backgroundImage! = null) this.removeChild (backgroundImage.parent); backgroundImage = displayImage; displayImage = null;

Quindi usiamo TweenMax per programmare una chiamata alla funzione loadNextImage. Questo avvia il ciclo di caricamento di una nuova immagine e la dissolvenza di nuovo.

TweenMax.delayedCall (DISPLAY_TIME, loadNextImage);

Conclusione

L'uso di Flickr con Flash richiede alcuni passaggi, ma una volta che hai capito come funziona l'API di Flickr, scoprendo gli URL delle immagini di Flickr, caricando le immagini da Flickr (prendendo in considerazione le restrizioni di sicurezza di Flash) è molto facile usare queste immagini per creare un album fotografico accattivante.

Questo particolare esempio potrebbe essere utilizzato per aggiungere un album fotografico animato a una pagina Web e modificando la variabile SEARCH_STRING è possibile visualizzare diversi tipi di immagini. È anche possibile trasferire FlashVars all'applet Flash per determinare quali immagini vengono visualizzate senza dover ricompilare l'applicazione. È inoltre possibile modificare la funzione service.photos.search per restituire solo le proprie foto o quelle che sono state contrassegnate in modo specifico.

Grazie per aver letto.