Există multe site-uri în care puteți alege imaginea de profil luând o fotografie cu camera dvs. web, în loc să încărcați una. Acest tutorial vă va învăța cum să faceți o fotografie și să faceți ce vreți cu el, utilizând Flash Builder 4 cu Ruby on Rails sau PHP.
Rezultatul final al rezultatelor
Faceți clic pe linkul demo de mai sus, dar rețineți că nu veți putea utiliza funcția "Salvați" decât dacă o executați dvs. pe un server care acceptă PHP. Puteți să faceți clic dreapta pe "Vizualizare sursă" pentru a vedea sursa aplicației.
Pasul 1: Considerații privind Flash Builder 4
Pentru a profita din plin de acest tutorial, vă recomandăm să cunoașteți deja unele dintre noile caracteristici ale Flash Builder 4, cum ar fi noile spații de nume și componente. De asemenea, veți avea nevoie de Flash Builder 4 pentru a rula codul sursă fără a trebui să schimbați nimic.
Utilizatorii Flex 3: nu vă faceți griji, puteți continua acest tutorial. Va trebui să modificați toate spațiile de nume "fx" și "s" la "mx", de exemplu: ""devine""" Grupul "și" BorderContainer "vor fi" Canvas ", iar" VGroup "va fi" VBox ", iar" HGroup "va fi" HBox ". Și nu există "chromeColor" (va trebui să stilul butonului diferit).
Pasul 2: Creați un nou proiect Flex
În primul rând, trebuie să creăm un nou proiect Flex. Deschideți Flash Builder 4 și faceți clic pe "File> New> Flex Project".
Se va deschide următorul dialog:
Alegeți un "nume de proiect": în cazul nostru va fi "CameraSnapshot", dar puteți folosi orice doriți. De asemenea, puteți seta locația "Proiect" oriunde doriți. Pe măsură ce se va executa în browser, vom lăsa să fie verificați "Web". Vom folosi versiunea implicită SDK și nu vom alege nicio tehnologie de server.
Apasă pe Următorul.
Nu vom schimba nimic aici, lăsați-l pe Următorul.
În acest pas următor vom folosi și setările implicite, așa că faceți clic pe Terminare:
Proiectul nostru a fost creat. Aceasta este o nouă aplicație nouă Flash Builder 4!
Pasul 3: Creați un fișier ActionScript
Vom avea un fișier ActionScript extern care va efectua toată logica pentru noi.
Creați un nou fișier ActionScript: Fișier> Nou> Fișier ActionScript
Dați-i un nume, vom alege "cam", dar din nou, poate fi orice vreți:
Puteți lăsa goală "Pachetul". Hit Finish. Acum, să începem codarea!
Pasul 4: Suportul camerei
Acum că proiectul nostru a fost creat, vom avea nevoie de un loc pentru a afișa camera noastră. Permiteți adăugarea unui VideoDisplay la adresa noastră CameraSnapshot.mxml dosar, după eticheta "Declarații":
id este importantă pentru că așa facem referire la acest VideoDisplay specific.
Puteți schimba lățimea și înălțimea videoclipului la orice doriți, dar nu uitați să păstrați un raport de aspect 4: 3 pentru a evita distorsionarea imaginii. Dacă nu aveți de-a face cu un caz specific.
De asemenea, observați că am folosit "Mx" namespace prefix în loc de "S". Dacă folosim "S" namespace prefix aici, Flash Builder va arunca o eroare atunci când încercăm să folosim metoda "attachCamera". Vom vedea această metodă în pasul următor.
Pasul 5: Obținerea camerei
Acum, că avem loc pentru a afișa camera utilizatorului, hai să înțelegem! Creați o nouă funcție în interiorul fișierului cam.as:
funcția privată getCam (): void if (Camera.getCamera ()) // atribuiți camera implicită a utilizatorului unei camere variabile var: Camera = Camera.getCamera (); // setați calitatea camerei să fie cea mai mare posibilă a aparatului foto.setQuality (0, 100); // setați lățimea, înălțimea, cadrele pe secundă camera.setMode (lățimea camerei, dimensiunea camerei, 30); // atașați aparatul foto la camera noastră "theCam" VideoDisplayCam.attachCamera (camera); altceva // adăugați metoda proprie pentru a spune utilizatorului problema lui
Observați că avem o condiție: vom merge mai departe dacă putem obține cel puțin o cameră de la utilizator. Apoi, l-am numit "aparat de fotografiat" pentru scopuri convenabile și l-am configurat în următoarele câteva linii.
În camera.setMode, trebuie să înțelegeți "lățimea camerei" ca "lățimea videoclipului nostru". În Flex, aceasta se numește Legare de date. În limbajul englezesc: "lățimea și înălțimea" camerei "vor fi mereu și automat aceeași lățime și înălțime ale" camerei ". Deci, dacă decideți să modificați mai târziu dimensiunea VideoDisplay, mărimea camerei se va schimba automat.
După ce ne-am configurat camera, îl atașăm la "camera". Acesta ne spune videoDisplay ce să afișeze.
Pasul 6: Afișarea camerei
Să ne importăm cam.as pentru noi CameraSnapshot.mxml fișier, altfel nu vom avea acces la funcția pe care tocmai am făcut-o:
Dacă ați salvat "cam.as" într-un alt folder, trebuie doar să adăugați numele folderului înainte de "cam.as", de exemplu: "different_folder / cam.as"
Acum trebuie să spunem cererea noastră de fapt alerga această funcție. Vom adăuga o metodă "creationComplete" care apelează "getCam ();" în interiorul etichetei de deschidere "Aplicație". Aceasta înseamnă că aparatul nostru foto va fi afișat de îndată ce aplicația este complet creată:
Pasul 7: Prima fugă
Până acum, bine. Acum, rulați aplicația și vă vedeți în interiorul ei înainte de a trece la pasul următor :)
Notă: câțiva utilizatori, mai ales pe un Mac, ar putea fi nevoiți să schimbe camera implicită pe care o primește Flash Player. În interiorul aplicației care rulează: Faceți clic dreapta (sau cmd + clic)> Configurații ...> Faceți clic pe "pictograma camerei web" de mai jos> Schimbați-l la cam "real".
Pasul 8: Aspect și poziționare
În acest pas, vom înfășura eticheta "VideoDisplay" cu o "grupare VG" pentru a structura elementele pe care le vom adăuga, pe verticală. Veți vedea mai târziu.
Observați că proprietățile "horizontalCenter" și "verticalCenter" sunt setate la "0". Aceasta înseamnă că "grupul VG" va fi la 0 pixeli distanță de centrul containerului părinte, în cazul nostru, întreaga aplicație.
Puteți rula aplicația din nou: redimensionați fereastra browserului dvs. și observați că sunteți întotdeauna în mijloc.
Pasul 9: Butonul de capturare
Pentru a adăuga butonul "Faceți o fotografie", va trebui să împachetați "VideoDisplay" cu o etichetă "Grup" în cazul în care aspectul este absolut și totul este plasat unul peste celălalt (dacă nu le poziționați cu X și Y sau plasați-i puțin pixeli în sus, în partea dreaptă, în partea de jos sau în stânga).
Codul dvs. ar trebui să arate astfel:
Observați că tocmai am adăugat eticheta "Grup". Este în interiorul noului nostru "VGroup" și ne împachetează bine-cunoscutul "VideoDisplay"
Acum adăugăm butonul "Faceți o fotografie". Va apărea într-un frumos semi-transparent "BorderContainer" pe care îl vom scrie de mai jos "VideoDisplay", aruncați o privire:
Rețineți că zona noastră de butoane este "0" pixeli distanță de partea de jos și are un fundal negru semi-transparent (backgroundAlpha). Am adăugat, de asemenea, butonul nostru de captură numit "declanșator". Este plasat chiar în mijlocul "BorderContainer".
Pasul 10: Stilul butonului
Adăugați "chromeColor" și "color" în butonul "declanșator" și codul nostru ar trebui să arate astfel:
Puteți rula aplicația din nou și puteți vedea cum facem.
Pasul 11: Placeholderul pentru previzualizarea imaginilor
Acum vom adăuga un înlocuitor unde putem examina imaginea pe care o vom lua mai târziu. Scrie de mai jos "VideoDisplay" și de mai sus "BorderContainer".
Am adăugat un "grup" numit "previewBox" care împachetează o "imagine" numită "previzualizare".
Pasul 12: Pregătirea pentru Snapshot
Adăugați următorul cod la top din fișierul nostru "cam.as".
Aici am importat tot ce avem nevoie pentru a lua și a trimite imaginea pe server.
Pasul 13: Faceți o imagine!
Acum este momentul să faceți o fotografie. Să adăugăm o funcție care o va face:
funcția publică takePicture (): void // dacă nu previzualizăm nicio imagine, vom lua unul :) dacă (! previewBox.visible) // creați o variabilă BitmapData numită imagine care are dimensiunea camerei var picture: BitmapData = noul BitmapData (lățimea camerei, dimensiunea camerei); // BitmapData desenează imaginea de pe camera (camera); // Sursa noastră de previzualizare este un nou Bitmap din BitmapData imaginii preview.source = nou Bitmap (imagine); // stochează această BitmapData într-o altă BitmapData (în afara acestei funcții) bm = picture; // face vizibilă vizibila, pentru a vedea imaginea noastră previewBox.visible = true; // modificați eticheta de declanșare, astfel încât utilizatorul va putea încerca din nou trigger.label = "Faceți altă fotografie ..."; // modifică culoarea butonului trigger.setStyle ('chromeColor', '# ff0000'); // dacă previzualizăm o imagine ... altfel // face previewBox invisible previewBox.visible = false; // modifică eticheta trigger.label = 'Face o fotografie!'; // modifică culoarea butonului trigger.setStyle ('chromeColor', '# 33abe9');
Comentariile de mai sus "// (...)" vă vor spune ce se întâmplă.
Acum, adăugați o proprietate "clic" în butonul "declanșator" (CameraSnapshot.mxml) pentru a apela funcția "takePicture" creată recent:
Rulați aplicația și faceți o fotografie!
Pasul 14: Adăugarea de efecte cool
Acum adaugam cateva efecte reci: cand facem o pozitie, vom vedea o lumina bliara. Când aruncăm o imagine, ea va dispărea. Modificați eticheta "Declarații", adăugând următorul cod:
Eticheta "Fade" va face ca lumina blițului să dispară în mod realist. Eticheta "Parallel" va executa în același timp "Zoom" și "Fade", aruncând fotografia cu stil.
Pasul 15: Efectul Flash
Să adăugăm blițul nostru sub imaginea "previzualizare" Imagine:
Observați că "hideEffect" este setat la "flashFX": atunci când "flashlight" devine invizibil, acest efect va fi declanșat. De asemenea, "backgroundAlpha" este setat la "0.8", astfel încât lumina noastră flash nu este atât de strălucitoare. Lumina noastră flash este doar un BorderContainer alb care apare și apoi se îndepărtează repede, creând efectul "flash".
Acum, trebuie să setăm proprietatea vizibilă "flashlight" la "true" și "false" (activând efectul flash) în cadrul funcției "takePicture" care va arăta astfel:
funcția publică takePicture (): void // dacă nu previzualizăm nicio imagine, vom lua unul :) dacă (! previewBox.visible) // creați o variabilă BitmapData numită imagine care are dimensiunea camerei var picture: BitmapData = noul BitmapData (lățimea camerei, dimensiunea camerei); // BitmapData desenează imaginea de pe camera (camera); // Sursa noastră de previzualizare este un nou Bitmap din BitmapData imaginii preview.source = nou Bitmap (imagine); // stochează această BitmapData într-o altă BitmapData (în afara acestei funcții) bm = picture; // face vizibilă vizibila, pentru a vedea imaginea noastră previewBox.visible = true; // afișează flashLight flashLight.visible = true; // face FlashLight să meargă la fel flashLight.visible = false; // modificați eticheta de declanșare, astfel încât utilizatorul va putea încerca din nou trigger.label = "Faceți altă fotografie ..."; // modifică culoarea butonului trigger.setStyle ('chromeColor', '# ff0000'); // dacă previzualizăm o imagine ... altfel // face previewBox invisible previewBox.visible = false; // modifică eticheta trigger.label = 'Face o fotografie!'; // modifică culoarea butonului trigger.setStyle ('chromeColor', '# 33abe9');
Pasul 16: Renunțați la efectul de imagine
Modificați "Grupul" numit "previewBox" (CameraSnapshot.mxml), astfel încât acesta să utilizeze efectul "discardPhoto":
Observați din nou "hideEffect". Rulați aplicația, faceți o fotografie, luați alta și vedeți efectele!
Pasul 17: Salvați butonul
Permite adăugarea corectă a butonului Salvați și anulați de mai jos eticheta de închidere a grupului nostru numită "videoArea" și de mai sus tag-ul de închidere "VGroup":
Am înfășurat butoanele "Anulați" și "Salvați o imagine" în interiorul unei etichete "HGroup" (care le va afișa orizontal). Am setat proprietatea "verticalAlign" la "mijloc", astfel că butonul "Anulare" este plasat în mijlocul înălțimii "savePic". De asemenea, setăm "lățimea" la "100%" și "orizontalAlign" la "dreapta".
Observați că butonul "Salvați fotografia" este dezactivat. Vom permite acest lucru atunci când utilizatorul previzualizează o imagine și dezactivează când nu. Puteți face butonul Anulare să meargă la pagina anterioară, să închideți pop-in-ul care înfășoară SWF-ul etc. Este apelul dvs..
În interiorul fișierului "cam.as", după câteva modificări, funcția noastră "takePicture" va arăta în felul următor:
funcția publică takePicture (): void // dacă nu previzualizăm nicio imagine, vom lua unul :) dacă (! previewBox.visible) // creați o variabilă BitmapData numită imagine care are dimensiunea camerei var picture: BitmapData = noul BitmapData (lățimea camerei, dimensiunea camerei); // BitmapData desenează imaginea de pe camera (camera); // Sursa noastră de previzualizare este un nou Bitmap din BitmapData imaginii preview.source = nou Bitmap (imagine); // stochează această BitmapData într-o altă BitmapData (în afara acestei funcții) bm = picture; // face vizibilă vizibila, pentru a vedea imaginea noastră previewBox.visible = true; // afișează flashLight flashLight.visible = true; // face FlashLight să meargă la fel flashLight.visible = false; // modificați eticheta de declanșare, astfel încât utilizatorul va putea încerca din nou trigger.label = "Faceți altă fotografie ..."; // permite butonul savePic savePic.enabled = true; // modifică culoarea butonului trigger.setStyle ('chromeColor', '# ff0000'); // dacă previzualizăm o imagine ... altfel // face previewBox invisible previewBox.visible = false; // modifică eticheta trigger.label = 'Face o fotografie!'; // dezactivează butonul savePic savePic.enabled = false; // modifică culoarea butonului trigger.setStyle ('chromeColor', '# 33abe9');
Mai sus, tocmai am adăugat 2 linii de cod pentru a activa și dezactiva butonul Salvare.
Pasul 18: Salvarea imaginii
Acum vom examina unul dintre multe lucruri pe care le puteți face cu imaginea dvs.: trimiteți-o la server. În acest fel, îl puteți atribui drept imagine de profil a utilizatorului, o nouă fotografie a albumului etc.
Să creați o funcție care trimite imaginea noastră la server când faceți clic pe "Salvați o imagine":
funcția publică savePicture (): void // schimbați eticheta butonului savePic astfel încât utilizatorul să știe cât mai curând posibil // că salvăm imaginea sa savePic.label = "Salvarea ..." // dezactivează butonul astfel încât utilizatorul să nu faceți clic pe acesta de două ori savePic.enabled = false; // butonul de declanșare afișează un mesaj frumos trigger.label = "Aceasta este o imagine frumoasă :)" / / dezactivează butonul "trigger", acum este prea târziu pentru a face o altă fotografie! trigger.enabled = false; // creează un nou JPEGEncoder numit "je" // stabilește calitatea la 100 (maxim) var je: JPEGEncoder = nou JPEGEncoder (100); // creează un nou ByteArray numit "ba" // JPEGEnconder codifică datele noastre "bm" Bitmap: "imagine" var ba: ByteArray = este.encode (bm); // acest ByteArray este acum un JPEG codificat // creează un nou Base64Encoder numit "be" var be: Base64Encoder = new Base64Encoder (); // codifică "ba" ByteArray (care este imaginea noastră JPEG codată) cu base64Encoder be.encodeBytes (ba); // Acum avem șirul "encodedData" pentru a trimite serverului var encodedData: String = be.flush (); // aceasta este HTTPService pe care o vom folosi pentru a trimite datele noastre serverului var handleService: HTTPService = new HTTPService (); // acum setăm ce URL dorim ... Setați adresa URL a paginii / acțiunii dvs. de pe server // aceasta este o adresă tipică Ruby on Rails URL. Controlor: users_controller, Acțiune: handlepicture handleService.url = "http: // localhost: 3000 / users / camerasnap"; // un alt exemplu de URL: //appUrl.url = "http://www.example.com/handlePicture.php"; // sau, o cale relativă: //appUrl.url = "/handlePicture.php" // alegem POST ca metoda noastră handleService.method = "POST"; // aici afișăm cursorul ocupat pentru un feedback vizual mai bun handleService.showBusyCursor = adevărat; // În cele din urmă, trimitem codificatData ca variabilă "content" handleService.send (content: encodedData); // 1 - în codul de pe server-ul dvs. se poate ocupa variabila "param" sau "post" numită "content" // 2 - folosiți un decodor base64 // 3 - scrieți-l pe disc (acum aveți o imagine reală salvată în serverul dvs.) // 4 - faceți această imagine imaginea de profil a utilizatorului sau orice doriți
În această funcție facem trei lucruri: modificați unele etichete și dezactivați unele butoane, codificați imaginea noastră în format JPEG și, în final, trimiteți datele codificate (șir Base64) către server.
Din nou, comentariile de mai sus "// (...)" vă pot spune cum am făcut asta.
Acum, butonul "Salvați imaginea" trebuie să declanșeze funcția "savePicture". Adăugați o metodă "clic":
Pasul 19: Manipularea de la server
În pașii următori, am scris doar codul necesar, astfel încât să puteți face orice doriți cu fișierul de imagine salvat. Va trebui să scrieți codul pentru a face "example_name.jpg" imaginea de profil a utilizatorului (de exemplu). Din nefericire, nu pot să-mi ascund cum poți realiza acest lucru, deoarece se schimbă foarte mult în funcție de soluția curentă. Cameră pentru un alt tutorial Cred că ...
Următorul exemplu arată modul de salvare a imaginii în server utilizând Ruby on Rails sau PHP, este destul de simplu!
Pasul 20: Manipularea pe server a Ruby on Rails
necesită "base64" def camerasnap # asociați paramul trimis de Flex (conținut) la o variabilă file_data = params [: content] #Decorează șirul Base64 trimis de la Flex img_data = Base64.decode64 (file_data) #Set numele unui fișier imagine cu. Exemplu jpg extension img_filename = "example_name.jpg" #Opens "example_name.jpg" și o populare cu "img_data" (codul Base64 trimis de la Flex) img_file = File.open (img_filename, "wb") | f | f.write (img_data) #numai avem o imagine JPEG reală pe serverul nostru, faceți tot ce doriți cu el! # Scrieți ceea ce este necesar pentru a face o fotografie de profil, o fotografie album, etc ... sfârșit
Pasul 21: Manipularea pe server a PHP
Aceste două exemple de mai sus (Rails și PHP) sunt cât mai simple și mai clare posibil. Le puteți scrie în doar 1 rând de cod (Rails) și 2 linii (PHP), dacă doriți.
Pasul 22: Exportarea Release Build
Înainte de a încărca fisierul SWF pe site-ul dvs., este recomandat să-l exportați ca un SWF optimizat (versiune construită):
După export, va trebui să încărcați Tot care se află în interiorul directorului "bin-release" (situat în dosarul proiectului).
Concluzie
Sper că ți-a plăcut acest tutorial! Există multe lucruri pe care le puteți face cu această "imagine în timp real", o folosesc deja în producție, astfel încât utilizatorii mei pot schimba rapid imaginea de profil. Spuneți-ne ce credeți că ar fi o utilizare creativă sau inovatoare a acestei caracteristici în comentariile de mai jos. Mulțumiri!
Share
Accentsconagua
