Ci sono molti siti dove puoi scegliere la tua immagine del profilo scattando una foto con la tua webcam, invece di caricarne una. Questo tutorial ti insegnerà come scattare una foto e fare quello che vuoi, usando Flash Builder 4 con Ruby on Rails o PHP.
Anteprima del risultato finale
Fai clic sul link demo qui sopra, ma tieni presente che non potrai utilizzare la funzione 'Salva' a meno che non la esegui tu stesso su un server che supporta PHP. È possibile "Fare clic con il tasto destro del mouse> Visualizza sorgente" per vedere la sorgente dell'applicazione.
Passaggio 1: considerazioni su Flash Builder 4
Per trarre il massimo vantaggio da questo tutorial, è consigliabile conoscere già alcune delle nuove funzionalità di Flash Builder 4, come i nuovi spazi dei nomi e componenti. Inoltre, avrai bisogno di Flash Builder 4 per eseguire il codice sorgente senza dover modificare nulla.
Utenti Flex 3: non ti preoccupare, puoi comunque seguire questo tutorial. Dovrai cambiare tutti gli spazi dei nomi "fx" e "s" in "mx", ad esempio: ""diventa"Il tag "Declaration" non esiste (scrivi cosa c'è dentro, fuori). "Group" e "BorderContainer" saranno "Canvas". "VGroup" sarà "VBox". "HGroup" sarà "HBox". E non c'è "chromeColor" (dovrai modellare diversamente il pulsante).
Passaggio 2: crea un nuovo progetto Flex
Prima di tutto, dobbiamo creare un nuovo progetto Flex. Apri Flash Builder 4 e fai clic su "File> Nuovo> Flex Project".
Si aprirà la seguente finestra di dialogo:
Scegli un "Nome progetto": nel nostro caso sarà "CameraSnapshot" ma puoi usare quello che vuoi. Puoi anche impostare la "Posizione del progetto" ovunque desideri. Come verrà eseguito nel browser, lasceremo "Web" selezionato. Useremo la versione SDK predefinita e non sceglieremo alcuna tecnologia server.
Hit Next.
Non cambieremo nulla qui, premiamo Avanti.
Nel seguente passaggio utilizzeremo anche le impostazioni predefinite, quindi fai clic su Fine:
Il nostro progetto è stato creato. Questa è una nuova app di Flash Builder 4!
Passaggio 3: creare un file ActionScript
Avremo un file ActionScript esterno che eseguirà tutta la logica per noi.
Creare un nuovo file ActionScript: File> Nuovo> File ActionScript
Dagli un nome, sceglieremo "cam" ma, di nuovo, può essere quello che vuoi:
Puoi lasciare vuoto il "Pacchetto". Hit Finish. Ora iniziamo a programmare!
Passaggio 4: segnaposto della fotocamera
Ora che il nostro progetto è stato creato, avremo bisogno di un posto per mostrare la nostra fotocamera. Aggiungiamo un VideoDisplay al nostro CameraSnapshot.mxml file, dopo il tag "Dichiarazioni":
Il id è importante perché è così che ci riferiamo a questo specifico VideoDisplay.
È possibile modificare la larghezza e l'altezza di VideoDisplay in qualsiasi cosa si desideri, ma ricordarsi di mantenere un rapporto 4: 3 per evitare la distorsione dell'immagine. A meno che tu non abbia a che fare con un caso specifico.
Inoltre, nota che abbiamo usato il "Mx" prefisso dello spazio dei nomi invece di "S". Se usiamo il "S" prefisso dello spazio dei nomi qui, Flash Builder genera un errore quando proviamo ad usare il metodo "attachCamera". Vedremo questo metodo nel prossimo passaggio.
Passaggio 5: prendere la fotocamera
Ora che abbiamo posto per mostrare la fotocamera dell'utente, facciamolo! Crea una nuova funzione all'interno del file cam.as:
funzione privata getCam (): void if (Camera.getCamera ()) // assegna la videocamera predefinita dell'utente a una telecamera var variabile: Camera = Camera.getCamera (); // imposta la qualità della telecamera in modo che sia la più alta possibile camera.setQuality (0, 100); // imposta larghezza, altezza, fotogrammi al secondo camera.setMode (theCam.width, theCam.height, 30); // collega la videocamera al nostro "theCam" VideoDisplay theCam.attachCamera (camera); else // aggiungi il tuo metodo per dire all'utente il suo problema
Si noti che abbiamo un condizionale: andremo avanti solo se possiamo ottenere almeno una telecamera dall'utente. Successivamente, l'abbiamo chiamata "camera" per scopi pratici e l'ho configurata nelle righe successive.
In camera.setMode, dovresti capire "theCam.width" come "la larghezza del nostro VideoDisplay". In Flex, questo si chiama Data Binding. In inglese semplice: "la larghezza e l'altezza della 'videocamera' saranno sempre e automaticamente la stessa larghezza e altezza della 'theCam'". Quindi, se decidi di cambiare la dimensione del VideoDisplay in seguito, le dimensioni della videocamera cambieranno automaticamente.
Dopo aver ottenuto e configurato la nostra videocamera, la colleghiamo alla "theCam". Indica al nostro VideoDisplay cosa visualizzare.
Passaggio 6: visualizzazione della fotocamera
Consente di importare i nostri cam.as a noi CameraSnapshot.mxml file, altrimenti non avremo accesso alla funzione appena creata:
Se hai salvato il tuo "cam.as" in una cartella diversa, aggiungi il nome della cartella prima di "cam.as", ad esempio: "different_folder / cam.as"
Ora dobbiamo dire la nostra applicazione in realtà correre questa funzione Aggiungeremo un metodo "creationComplete" che chiama "getCam ();" all'interno del tag "Applicazione" di apertura. Significa che la nostra videocamera verrà visualizzata non appena l'applicazione è stata completamente creata:
Step 7: Prima esecuzione
Fin qui tutto bene. Ora esegui l'applicazione e guardaci dentro prima di passare al passaggio successivo :)
Avviso: alcuni utenti, specialmente su un Mac, potrebbero dover cambiare la videocamera predefinita che sta ottenendo Flash Player. All'interno dell'app in esecuzione: clic con il pulsante destro del mouse (o cmd + clic)> Configurazioni ...> Fai clic sulla scheda "icona webcam" sotto> Cambia nella tua cam "reale".
Step 8: Layout e posizionamento
In questo passaggio avvolgeremo il nostro tag "VideoDisplay" con un "VGroup" per disporre gli elementi che aggiungeremo, verticalmente. Lo vedrai da te più tardi.
Notare le proprietà "horizontalCenter" e "verticalCenter" impostate su "0". Ciò significa che "VGroup" sarà a 0 pixel di distanza dal centro del contenitore genitore, nel nostro caso, l'intera applicazione.
È possibile eseguire nuovamente l'applicazione: ridimensionare la finestra del browser e notare che si è sempre nel mezzo.
Passaggio 9: pulsante di acquisizione
Per aggiungere il nostro pulsante "Scatta una foto", dovremo avvolgere il nostro "VideoDisplay" con un tag "Gruppo" in cui il layout è assoluto e tutto è posto l'uno sopra l'altro (a meno che non li posizioni con X e Y o posizionali di alcuni pixel lontano dall'alto, a destra, in basso oa sinistra).
Il tuo codice dovrebbe assomigliare a questo:
Si noti che abbiamo appena aggiunto il tag "Gruppo". È all'interno del nostro "VGroup" aggiunto di recente e avvolge il nostro ben noto "VideoDisplay"
Ora aggiungiamo il pulsante "Scatta una foto". Apparirà all'interno di un bel "BorderContainer" semitrasparente che scriveremo sotto il nostro "VideoDisplay", dai uno sguardo:
Nota che la nostra area dei pulsanti è a "0" pixel dal fondo e ha uno sfondo nero semitrasparente (backgroundAlpha). Abbiamo anche aggiunto il nostro pulsante di acquisizione chiamato "trigger". Si trova proprio nel mezzo del nostro "BorderContainer".
Passaggio 10: stile pulsante
Aggiungi "chromeColor" e "color" al nostro pulsante "trigger" e il nostro codice dovrebbe assomigliare a questo:
Puoi eseguire di nuovo l'app e vedere come stiamo andando.
Passaggio 11: segnaposto Anteprima immagine
Ora aggiungiamo un segnaposto dove possiamo vedere in anteprima l'immagine che prenderemo più tardi. Scrivilo sotto il nostro "VideoDisplay" e sopra il nostro "BorderContainer".
Abbiamo aggiunto un "Gruppo" chiamato "previewBox" che racchiude una "Immagine" chiamata "anteprima".
Passaggio 12: preparazione per l'istantanea
Aggiungi il seguente codice al superiore del nostro file "cam.as".
Qui abbiamo appena importato tutto ciò di cui avremo bisogno per prendere e inviare la foto al server.
Passaggio 13: scattare una foto!
Ora è il momento di fare una foto. Aggiungiamo una funzione che lo farà:
public function takePicture (): void // se non visualizziamo l'anteprima di alcuna immagine, ne prenderemo una :) if (! previewBox.visible) // crea una variabile BitmapData chiamata picture che ha l'immagine var della dimensione della variabile: BitmapData = nuovo BitmapData (theCam.width, theCam.height); // BitmapData disegna la nostra theCam picture.draw (theCam); // La nostra fonte di anteprima è una nuova Bitmap fatta di BitmapData di immagini preview.source = new Bitmap (picture); // memorizza questo BitmapData in un altro BitmapData (all'esterno di questa funzione) bm = picture; // rende visibile l'anteprimaBox, così possiamo vedere la nostra immagine previewBox.visible = true; // cambia la nostra etichetta trigger, quindi l'utente sarà in grado di provare nuovamente trigger.label = "Scatta un'altra foto ..."; // cambia il colore del pulsante trigger.setStyle ('chromeColor', '# ff0000'); // se stiamo visualizzando l'anteprima di un'immagine ... else // rende l'anteprimaBox invisibile previewBox.visible = false; // cambia l'etichetta trigger.label = 'Scatta una foto!'; // cambia il colore del pulsante trigger.setStyle ('chromeColor', '# 33abe9');
I commenti sopra "// (...)" ti diranno cosa sta succedendo.
Ora, aggiungi una proprietà "click" all'interno del pulsante "trigger" (CameraSnapshot.mxml) per chiamare la funzione "takePicture" creata di recente:
Esegui l'app e scatta una foto!
Passaggio 14: aggiunta di effetti speciali
Ora aggiungiamo alcuni effetti interessanti: quando scattiamo una foto, vedremo una luce lampeggiante. Quando scartiamo un'immagine, andrà via. Cambia il tag "Dichiarazioni", aggiungendo il seguente codice:
Il tag "Fade" farà sparire la luce del flash in modo realistico. Il tag "Parallel" esegue contemporaneamente "Zoom" e "Dissolvenza", scartando la nostra foto con stile.
Step 15: The Flash Effect
Aggiungiamo la nostra luce flash sotto l'immagine di "anteprima":
Nota che "hideEffect" è impostato su "flashFX": quando "flashLight" diventa invisibile, questo effetto verrà attivato. Inoltre, "backgroundAlpha" è impostato su "0,8", quindi la nostra luce del flash non è così brillante. La nostra luce flash è solo un BorderContainer bianco che appare e poi si allontana rapidamente, creando l'effetto "flash".
Ora abbiamo solo bisogno di impostare la proprietà visibile "flashlight" su "true" e "false" (attivazione dell'effetto flash) all'interno della nostra funzione "takePicture" che ora assomiglia a questo:
public function takePicture (): void // se non visualizziamo l'anteprima di alcuna immagine, ne prenderemo una :) if (! previewBox.visible) // crea una variabile BitmapData chiamata picture che ha l'immagine var della dimensione della variabile: BitmapData = nuovo BitmapData (theCam.width, theCam.height); // BitmapData disegna la nostra theCam picture.draw (theCam); // La nostra fonte di anteprima è una nuova Bitmap fatta di BitmapData di immagini preview.source = new Bitmap (picture); // memorizza questo BitmapData in un altro BitmapData (all'esterno di questa funzione) bm = picture; // rende visibile l'anteprimaBox, così possiamo vedere la nostra immagine previewBox.visible = true; // mostra flashLight flashLight.visible = true; // rende il flashLight andare via flashLight.visible = false; // cambia la nostra etichetta trigger, quindi l'utente sarà in grado di provare nuovamente trigger.label = "Scatta un'altra foto ..."; // cambia il colore del pulsante trigger.setStyle ('chromeColor', '# ff0000'); // se stiamo visualizzando l'anteprima di un'immagine ... else // rende l'anteprimaBox invisibile previewBox.visible = false; // cambia l'etichetta trigger.label = 'Scatta una foto!'; // cambia il colore del pulsante trigger.setStyle ('chromeColor', '# 33abe9');
Passaggio 16: Elimina l'effetto immagine
Cambia il "Gruppo" chiamato "previewBox" (CameraSnapshot.mxml) in modo che utilizzi l'effetto "discardPhoto":
Notare di nuovo "hideEffect". Esegui l'app, scatta una foto, scatta un'altra e vedi gli effetti!
Passaggio 17: Salva il pulsante
Consente di aggiungere un pulsante Salva e Annulla a destra sotto il tag di chiusura del nostro "Gruppo" chiamato "videoArea" e sopra il tag di chiusura "VGroup":
Abbiamo spostato i pulsanti "Annulla" e "Salva un'immagine" all'interno di un tag "HGroup" (che li visualizzerà orizzontalmente). Abbiamo impostato la proprietà "verticalAlign" su "middle" in modo che il pulsante "Cancel" sia posizionato al centro dell'altezza "savePic". Abbiamo anche impostato la "larghezza" su "100%" e "orizzontaleAlign" su "right".
Si noti che il pulsante "Salva immagine" è disabilitato. Lo abiliteremo quando l'utente visualizza un'anteprima di un'immagine e la disabilita quando non lo è. Puoi fare in modo che il pulsante Annulla vada alla pagina precedente, chiudere il pop-in che avvolge il file SWF, ecc ... È la tua chiamata.
All'interno del file "cam.as", dopo alcune modifiche, la nostra funzione "takePicture" avrà ora questo aspetto:
public function takePicture (): void // se non visualizziamo l'anteprima di alcuna immagine, ne prenderemo una :) if (! previewBox.visible) // crea una variabile BitmapData chiamata picture che ha l'immagine var della dimensione della variabile: BitmapData = nuovo BitmapData (theCam.width, theCam.height); // BitmapData disegna la nostra theCam picture.draw (theCam); // La nostra fonte di anteprima è una nuova Bitmap fatta di BitmapData di immagini preview.source = new Bitmap (picture); // memorizza questo BitmapData in un altro BitmapData (all'esterno di questa funzione) bm = picture; // rende visibile l'anteprimaBox, così possiamo vedere la nostra immagine previewBox.visible = true; // mostra flashLight flashLight.visible = true; // rende il flashLight andare via flashLight.visible = false; // cambia la nostra etichetta trigger, quindi l'utente sarà in grado di provare nuovamente trigger.label = "Scatta un'altra foto ..."; // attiva il pulsante savePic savePic.enabled = true; // cambia il colore del pulsante trigger.setStyle ('chromeColor', '# ff0000'); // se stiamo visualizzando l'anteprima di un'immagine ... else // rende l'anteprimaBox invisibile previewBox.visible = false; // cambia l'etichetta trigger.label = 'Scatta una foto!'; // disabilita il pulsante savePic savePic.enabled = false; // cambia il colore del pulsante trigger.setStyle ('chromeColor', '# 33abe9');
Sopra, abbiamo appena aggiunto 2 righe di codice per abilitare e disabilitare il pulsante Salva.
Passaggio 18: Salvataggio dell'immagine
Ora vedremo una delle tante cose che puoi fare con la tua foto: inviarla al server. In tal modo, puoi assegnarlo come immagine del profilo dell'utente, una nuova foto dell'album, ecc ...
Creiamo una funzione che invia la nostra immagine al server quando clicchiamo su "Salva un'immagine":
public function savePicture (): void // cambia l'etichetta del pulsante savePic in modo che l'utente sappia al più presto // che stiamo salvando la sua immagine savePic.label = "Salvataggio in corso ..." // disabilita il pulsante in modo che l'utente non cliccalo due volte savePic.enabled = false; // il pulsante trigger mostra un bel messaggio trigger.label = "Questa è una bella foto :)" // disabilita il pulsante "trigger", ora è troppo tardi per scattare un'altra foto! trigger.enabled = false; // crea un nuovo JPEGEncoder chiamato "je" // imposta la qualità su 100 (massimo) var je: JPEGEncoder = new JPEGEncoder (100); // crea un nuovo ByteArray chiamato "ba" // JPEGEnconder codifica i nostri dati bitmap "bm": la nostra "immagine" var ba: ByteArray = je.encode (bm); // questo ByteArray ora è un JPEG codificato // crea un nuovo Base64Encoder chiamato "be" var be: Base64Encoder = new Base64Encoder (); // codifica il nostro ByteArray "ba" (che è la nostra immagine codificata JPEG) con base64Encoder be.encodeBytes (ba); // Ora abbiamo la nostra stringa "codedData" da inviare al server var encodedData: String = be.flush (); // questo è il servizio HTTPS che useremo per inviare i nostri dati al server var handleService: HTTPService = new HTTPService (); // ora impostiamo quale URL vogliamo ... Imposta l'URL della tua pagina / azione sul lato server // questo è un tipico URL di Ruby on Rails. Controller: users_controller, Action: handlepicture handleService.url = "http: // localhost: 3000 / users / camerasnap"; // un altro esempio di URL: //appUrl.url = "http://www.example.com/handlePicture.php"; // o, un percorso relativo: //appUrl.url = "/handlePicture.php" // scegliamo POST come nostro metodo handleService.method = "POST"; // qui mostriamo il cursore occupato per un migliore feedback visivo handleService.showBusyCursor = true; // Infine, inviamo il nostro "encodedData" come variabile "content" handleService.send (content: encodedData); // 1 - nel tuo codice lato server puoi gestire la variabile "param" o "post" chiamata "content" // 2 - usa un decodificatore base64 // 3 - scrivilo su disco (ora hai un'immagine reale salvata nel tuo server) // 4 - fai di questa immagine l'immagine del profilo dell'utente o qualsiasi cosa tu desideri
In questa funzione facciamo tre cose: cambia alcune etichette e disabilita alcuni pulsanti, codifica la nostra immagine in JPEG e, infine, invia i dati codificati (stringa Base64) al server.
Ancora una volta, i commenti sopra "// (...)" possono dirvi come lo abbiamo fatto.
Ora il nostro pulsante "Salva immagine" deve attivare la funzione "salva immagine". Aggiungi un metodo "clic":
Passaggio 19: Gestione lato server
Nei seguenti passaggi, ho scritto solo il codice necessario in modo che tu possa fare tutto ciò che vuoi con il file di immagine salvato. Dovrai scrivere il codice per rendere "example_name.jpg" l'immagine del profilo dell'utente (per esempio). Sfortunatamente, non riesco a capire come puoi ottenerlo visto che cambia molto a seconda della tua attuale soluzione. Stanza per un altro tutorial immagino ...
L'esempio seguente mostra come salvare l'immagine sul server usando Ruby on Rails o PHP, è piuttosto semplice!
Passo 20: Gestione lato server Ruby on Rails
require "base64" def camerasnap #associate il parametro inviato da Flex (contenuto) a una variabile file_data = params [: contenuto] #Decode la nostra stringa Base64 inviata da Flex img_data = Base64.decode64 (file_data) #Impostare un nome file immagine, con. estensione jpg img_filename = "example_name.jpg" #Opens il "example_name.jpg" e lo popola con "img_data" (il nostro decodificato Base64 invia da Flex) img_file = File.open (img_filename, "wb") | f | f.write (img_data) #ora abbiamo una vera immagine JPEG nel nostro server, fai tutto quello che vuoi con esso! # Scrivi cosa è necessario per renderlo una foto del profilo, una foto dell'album, ecc ... fine
Passo 21: Gestione lato server PHP
Questi due esempi sopra (Rails e PHP) sono il più semplici e chiari possibile. Puoi scriverli in una sola riga di codice (Rails) e 2 righe (PHP) se vuoi.
Passaggio 22: Esportazione della build di rilascio
Prima di caricare il file SWF sul tuo sito, è consigliabile esportarlo come SWF ottimizzato (release build):
Dopo l'esportazione, dovrai caricare qualunque cosa questo è all'interno della cartella "bin-release" (situata all'interno della cartella del progetto).
Conclusione
Spero ti sia piaciuto questo tutorial! Ci sono molte cose che puoi fare con questa "immagine in tempo reale", la sto già usando in produzione in modo che i miei utenti possano cambiare rapidamente la loro immagine del profilo. Dicci cosa pensi che sarebbe un uso creativo o innovativo di questa funzione nei commenti qui sotto. Grazie!
Share
Accentsconagua
