Det er mange steder der du kan velge profilbildet ditt ved å ta et bilde med webkameraet ditt, i stedet for å laste opp en. Denne opplæringen vil lære deg hvordan du tar et bilde og gjør hva du vil med det, ved hjelp av Flash Builder 4 med Ruby on Rails eller PHP.
Endelig resultatforhåndsvisning
Klikk på demo lenken ovenfor, men husk at du ikke vil kunne bruke funksjonen "Lagre", med mindre du kjører det selv på en server som støtter PHP. Du kan "Høyreklikk> Vis kilde" for å se programkilden.
Trinn 1: Flash Builder 4 Betraktninger
For å få full nytte av denne opplæringen anbefales det at du allerede kjenner noen av de nye funksjonene til Flash Builder 4, som de nye navneområdene og komponentene. Du må også ha Flash Builder 4 for å kjøre kildekoden uten å måtte endre noe.
Flex 3-brukere: ikke bekymre deg, du kan fortsatt følge denne opplæringen. Du må endre alle "fx" og "s" navneområder til "mx", eksempel: "" blir ""Skriv ut" -koden eksisterer ikke (skriv hva som er inne i det, utenfor). "Gruppe" og "BorderContainer" blir "Lerret". "VGroup" blir "VBox". "HGroup" blir "HBox". Og det er ingen "chromeColor" (du må stille knappen annerledes).
Trinn 2: Opprett et nytt Flex-prosjekt
Først av alt, må vi opprette et nytt Flex-prosjekt. Åpne Flash Builder 4 og klikk "File> New> Flex Project".
Følgende dialog åpnes:
Velg et "Prosjektnavn": i vårt tilfelle blir det "CameraSnapshot", men du kan bruke det du vil. Du kan også sette "Project Location" til hvor du vil. Som det vil løpe i nettleseren, vil vi la "Web" bli sjekket. Vi vil bruke standard SDK-versjonen, og vi velger ikke noen serverteknologi.
Hit Next.
Vi vil ikke endre noe her, klikk Neste.
I dette trinnet vil vi også bruke standardinnstillingene, så klikk Fullfør:
Vårt prosjekt er opprettet. Dette er en fersk ny Flash Builder 4 app!
Trinn 3: Opprett en ActionScript-fil
Vi vil ha en ekstern ActionScript-fil som vil utføre all logikken for oss.
Opprett en ny ActionScript-fil: Fil> Ny> ActionScript-fil
Gi det et navn, vi velger: "cam", men igjen kan det være hva du vil:
Du kan la "pakken" være tom. Hit Finish. La oss nå starte kodingen!
Trinn 4: Kamera plassholder
Nå da prosjektet vårt er opprettet, trenger vi et sted å vise kameraet vårt. Lar legge til et VideoDisplay til vår CameraSnapshot.mxml fil, etter merket "Deklarasjoner":
De id er viktig fordi det er hvordan vi refererer til dette bestemte VideoDisplay.
Du kan endre bredden og høyden til VideoDisplay til alt du vil, men husk å beholde et formatforhold på 4: 3 for å unngå bildeforvrengning. Med mindre du har å gjøre med et bestemt tilfelle.
Vær også oppmerksom på at vi har brukt "Mx" namespace prefiks i stedet for "S". Hvis vi bruker "S" namespace prefix her, vil Flash Builder kaste en feil når vi prøver å bruke metoden "attachCamera". Vi vil se denne metoden i neste trinn.
Trinn 5: Få kameraet
Nå som vi har plass til å vise brukerens kamera, la oss få det! Lag en ny funksjon inne i filen cam.as:
privat funksjon getCam (): void if (Camera.getCamera ()) // tilordner brukerens standard kamera til en variabel var kamera: Camera = Camera.getCamera (); // still kamerakvaliteten til å være den høyeste som mulig kamera.setQuality (0, 100); // angi bredde, høyde, rammer per sekund camera.setMode (theCam.width, theCam.height, 30); // Fest kameraet til "TheCam" VideoDisplay theCam.attachCamera (kamera); annet // legg til din egen metode for å fortelle brukeren sitt problem
Legg merke til at vi har en betingelse: vi vil bare fortsette hvis vi kan få minst ett kamera fra brukeren. Deretter kalte vi det "kamera" for praktiske formål og konfigurert det i de neste linjene.
I camera.setMode bør du forstå "theCam.width" som "bredden på videodisplayet". I Flex kalles dette Data Binding. På vanlig engelsk: "Bredden og høyden til" kameraet "vil alltid og automatisk være den samme bredden og høyden til" theCam "". Så, hvis du bestemmer deg for å endre størrelsen på VideoDisplay senere, endres kameraets størrelse automatisk.
Etter å ha fått og konfigurert kameraet, legger vi det til vår "theCam". Det forteller våre VideoDisplay hva du skal vise.
Trinn 6: Viser kameraet
Lar oss importere vår cam.as til vår CameraSnapshot.mxml fil, ellers har vi ikke tilgang til funksjonen vi nettopp har gjort:
Hvis du lagret "cam.as" i en annen mappe, legger du bare til mappenavnet før "cam.as", for eksempel: "different_folder / cam.as"
Nå må vi fortelle vår søknad om å faktisk løpe denne funksjonen. Vi legger til en "creationComplete" -metode som kalles "getCam ();" inne i åpningen "Application" -taggen. Det betyr at kameraet vårt vil bli vist så snart programmet er helt opprettet:
Trinn 7: Første kjøre
Så langt så bra. Kjør nå programmet og se deg selv inne i det før vi går videre til neste trinn :)
Merk: Noen brukere, spesielt på Mac, må kanskje endre standardkameraet som Flash Player får. Inne i kjørende app: Høyreklikk (eller cmd + klikk)> Konfigurasjoner ...> Klikk på kategorien "Webkamera ikon" nedenfor> Endre det til din "ekte" cam.
Trinn 8: Layout og posisjonering
I dette trinnet vil vi pakke vår "VideoDisplay" -tag med en "VGroup" for å sette opp elementene som vi legger til, vertikalt. Du ser det selv senere.
Legg merke til at "horizontalCenter" og "verticalCenter" -egenskapene er satt til "0". Dette betyr at "VGroup" vil være 0 piksler unna sentrum av foreldrebeholderen, i vårt tilfelle hele applikasjonen.
Du kan kjøre programmet på nytt: endre størrelsen på nettleservinduet og merk at du alltid er i midten.
Trinn 9: Capture Button
For å legge til vår "Ta et bilde" -knapp, må vi pakke inn vårt "VideoDisplay" med en "Gruppe" -tag hvor layoutet er absolutt og alt settes oppå hverandre (med mindre du plasserer dem med X og Y eller plasser dem noen piksler vekk fra toppen, høyre, nederst eller venstre).
Koden din skal se slik ut:
Legg merke til at vi nettopp har lagt til «Gruppe» -taggen. Det er inne i vår nylig lagt "VGroup" og bryter inn vår velkjente "VideoDisplay"
Nå legger vi til knappen "Ta et bilde". Det vil dukke opp i en fin semi-gjennomsiktig "BorderContainer" som vi skal skrive under vår "VideoDisplay", ta en titt:
Legg merke til at vårt knappområde er "0" piksler vekk fra bunnen, og den har en svart semi-transparent (backgroundAlpha) bakgrunn. Vi har også lagt til vår opptaksknapp kalt "trigger". Den er plassert midt i vår "BorderContainer".
Trinn 10: Knappestil
Legg til "chromeColor" og "color" til vår "trigger" -knappen, og vår kode skal se slik ut:
Du kan kjøre appen igjen og se hvordan vi gjør det.
Trinn 11: Bildeforhåndsvisning Plassholder
Nå legger vi til en plassholder hvor vi kan forhåndsvise bildet som vi tar senere. Skriv det under vår "VideoDisplay" og ovenfor vår "BorderContainer".
Vi har lagt til en "Gruppe" som heter "previewBox" som bryter et "Image" kalt "forhåndsvisning".
Trinn 12: Klargjøre for stillbildet
Legg til følgende kode på topp av vår "cam.as" -fil.
Her har vi nettopp importert alt vi trenger for å ta og sende bildet til serveren.
Trinn 13: Ta et bilde!
Nå er det på tide å ta et bilde. La oss legge til en funksjon som vil gjøre det:
offentlig funksjon takePicture (): void // hvis vi ikke forhåndsviser noe bilde, tar vi en :) hvis (! forhåndsvisningBox.visible) // opprett en BitmapData-variabel kalt bilde som harCams størrelse var bilde: BitmapData = ny BitmapData (theCam.width, theCam.height); // BitmapData tegner våreCam-bildet.draw (theCam); // Vår forhåndsvisning er kilde er en ny Bitmap laget av bilde BitmapData preview.source = ny Bitmap (bilde); // lagrer denne BitmapData til en annen BitmapData (utenfor denne funksjonen) bm = bilde; // gjør forhåndsvisningsboksen synlig, så vi kan se vår forhåndsvisningsbildeBox.visible = true; // endre utløser etiketten, slik at brukeren vil kunne prøve igjen trigger.label = "Ta et annet bilde ..."; // endrer fargen på knappen trigger.setStyle ('chromeColor', '# ff0000'); // hvis vi forhåndsviser et bilde ... annet // gjør forhåndsvisningenBox usynlig forhåndsvisningBox.visible = false; // endrer etiketten trigger.label = 'Ta et bilde!'; // endrer fargen på knappen trigger.setStyle ('chromeColor', '# 33abe9');
Kommentarene ovenfor "// (...)" vil fortelle deg hva som skjer.
Nå legger du til en "klikk" -egenskap inne i "utløserknappen" -knappen (CameraSnapshot.mxml) for å ringe til vår nylig opprettede "takePicture" -funksjon:
Kjør appen og ta et bilde!
Trinn 14: Legge til kuldeffekter
Nå legger vi til noen kule effekter: Når vi tar et bilde, ser vi et blitslys. Når vi kaster bort et bilde, vil det gå bort. Endre merket "Deklarasjoner" ved å legge til følgende kode:
"Fade" -taggen gjør at lampen forsvinner realistisk. "Parallell" -koden kjører "Zoom" og "Fade" samtidig, og kaster bort bildet vårt med stil.
Trinn 15: Flash-effekten
La oss legge til vårt blitslys under "forhåndsvisning" Bildet:
Legg merke til "hideEffect" satt til "flashFX": når "flashLight" blir usynlig, vil denne effekten bli utløst. Også "backgroundAlpha" er satt til "0.8", så vårt blitslys er ikke så klart. Vårt blitslys er bare en hvit BorderContainer som dukker opp og så fort går bort, og skaper "flash" -effekten.
Nå må vi bare sette "flashLight" synlig egenskap til "true" og "false" (aktiverer flash-effekten) i vår "takePicture" -funksjon som nå ser slik ut:
offentlig funksjon takePicture (): void // hvis vi ikke forhåndsviser noe bilde, tar vi en :) hvis (! forhåndsvisningBox.visible) // opprett en BitmapData-variabel kalt bilde som harCams størrelse var bilde: BitmapData = ny BitmapData (theCam.width, theCam.height); // BitmapData tegner våreCam-bildet.draw (theCam); // Vår forhåndsvisning er kilde er en ny Bitmap laget av bilde BitmapData preview.source = ny Bitmap (bilde); // lagrer denne BitmapData til en annen BitmapData (utenfor denne funksjonen) bm = bilde; // gjør forhåndsvisningsboksen synlig, så vi kan se vår forhåndsvisningsbildeBox.visible = true; // viser flashLight flashLight.visible = true; // gjør flashLight gå måte flashLight.visible = false; // endre utløser etiketten, slik at brukeren vil kunne prøve igjen trigger.label = "Ta et annet bilde ..."; // endrer fargen på knappen trigger.setStyle ('chromeColor', '# ff0000'); // hvis vi forhåndsviser et bilde ... annet // gjør forhåndsvisningenBox usynlig forhåndsvisningBox.visible = false; // endrer etiketten trigger.label = 'Ta et bilde!'; // endrer fargen på knappen trigger.setStyle ('chromeColor', '# 33abe9');
Trinn 16: Kast ut bildeeffekt
Endre "Gruppe" kalt "previewBox" (CameraSnapshot.mxml), slik at den bruker "discardPhoto" -effekten:
Legg merke til "hideEffect" igjen. Kjør appen, ta et bilde, ta en annen og se effektene!
Trinn 17: Lagre knapp
Lar legge til Lagre og Avbryt-knappen til høyre under den avsluttende koden til vår "Gruppe" kalt "videoArea" og ovenfor "VGroup" lukkerkoden:
Vi pakket inn knappene "Avbryt" og "Lagre et bilde" inne i en "HGroup" -tag (som vil vise dem horisontalt). Vi har satt egenskapen "verticalAlign" til "middle", så "Cancel" -knappen er plassert midt på "savePic" -høyden. Vi stiller også bredden til "100%" og "horisontaljustere" til "høyre".
Legg merke til at knappen "Lagre bilde" er deaktivert. Vi vil aktivere det når brukeren forhåndsviser et bilde og deaktiverer når ikke. Du kan gjøre Avbryt-knappen gå til forrige side, lukk pop-in-modulen som bryter inn SWF, etc. ... Det er ditt anrop.
Innenfor "cam.as" -filen, etter noen endringer, vil vår "takePicture" -funksjon nå se slik ut:
offentlig funksjon takePicture (): void // hvis vi ikke forhåndsviser noe bilde, tar vi en :) hvis (! forhåndsvisningBox.visible) // opprett en BitmapData-variabel kalt bilde som harCams størrelse var bilde: BitmapData = ny BitmapData (theCam.width, theCam.height); // BitmapData tegner våreCam-bildet.draw (theCam); // Vår forhåndsvisning er kilde er en ny Bitmap laget av bilde BitmapData preview.source = ny Bitmap (bilde); // lagrer denne BitmapData til en annen BitmapData (utenfor denne funksjonen) bm = bilde; // gjør forhåndsvisningsboksen synlig, så vi kan se vår forhåndsvisningsbildeBox.visible = true; // viser flashLight flashLight.visible = true; // gjør flashLight gå måte flashLight.visible = false; // endre utløser etiketten, slik at brukeren vil kunne prøve igjen trigger.label = "Ta et annet bilde ..."; // gjør at savePic-knappen savePic.enabled = true; // endrer fargen på knappen trigger.setStyle ('chromeColor', '# ff0000'); // hvis vi forhåndsviser et bilde ... annet // gjør forhåndsvisningenBox usynlig forhåndsvisningBox.visible = false; // endrer etiketten trigger.label = 'Ta et bilde!'; // deaktiverer savePic-knappen savePic.enabled = false; // endrer fargen på knappen trigger.setStyle ('chromeColor', '# 33abe9');
Ovenfor har vi nettopp lagt til 2 linjer med kode for å aktivere og deaktivere Lagre-knappen.
Trinn 18: Lagre bildet
Nå ser vi på en av de mange tingene du kan gjøre med bildet ditt: sende det til serveren. Ved å gjøre det kan du tilordne det som brukerens profilbilde, et nytt albumfoto, etc ...
La oss lage en funksjon som sender bildet vårt til serveren når vi klikker "Lagre et bilde":
offentlig funksjon savePicture (): void // endre savePic knappetiketten slik at brukeren vet så snart som mulig // at vi lagrer bildet savePic.label = "Lagre ..." // deaktiverer knappen slik at brukeren ikke gjør det klikk den to ganger savePic.enabled = false; // utløserknappen viser en fin melding trigger.label = "Det er et fint bilde :)" // deaktiverer "trigger" -knappen, nå er for sent for å ta et nytt bilde! trigger.enabled = false; // lager en ny JPEGEncoder kalt "je" // setter kvaliteten til 100 (maksimum) var du: JPEGEncoder = ny JPEGEncoder (100); // lager en ny ByteArray kalt "ba" // JPEGEnconder koder for våre "bm" Bitmap data: vårt "bilde" var ba: ByteArray = je.encode (bm); // denne ByteArray er nå en kodet JPEG // oppretter en ny Base64Encoder kalt "være" var: Base64Encoder = ny Base64Encoder (); // koder vår "ba" ByteArray (som er vårt JPEG kodede bilde) med base64Encoder be.encodeBytes (ba); // Nå har vi vår "encodedData" streng for å sende til serveren var encodedData: String = be.flush (); // dette er HTTPService som vi vil bruke til å sende dataene til serveren var handleService: HTTPService = ny HTTPService (); // nå bestemmer vi hvilken nettadresse vi vil ha ... Angi nettadressen til serversiden / handlingen // dette er en typisk Ruby on Rails-URL. Controller: users_controller, Action: handlepicture handleService.url = "http: // localhost: 3000 / users / camerasnap"; // et annet eksempel på URL: //appUrl.url = "http://www.example.com/handlePicture.php"; // eller, en relativ sti: //appUrl.url = "/handlePicture.php" // vi velger POST som vår metode handleService.method = "POST"; // her viser vi den opptatte markøren for bedre visuell tilbakemelding handleService.showBusyCursor = true; // Endelig sender vi vår "encodedData" som en "innhold" -variabel handleService.send (content: encodedData); // 1 - i server-side-koden kan du håndtere parameteren "param" eller "post" som kalles "innhold" // 2 - bruk en base64 dekoder // 3 - skriv den til disken (nå har du et riktig bilde lagret på serveren din) // 4 - gjør dette bildet brukerens profilbilde eller alt du vil ha
I denne funksjonen gjør vi tre ting: endre noen etiketter og deaktiver noen knapper, kodes bildet vårt til JPEG og til slutt sender de kodede dataene (Base64-streng) til serveren.
Igjen kan kommentarene over "// (...)" fortelle deg hvordan vi gjorde det.
Nå må vår "Lagre bilde" -knappen utløse "savePicture" -funksjonen. Legg til en "klikk" metode:
Trinn 19: Behandling av server side
I de følgende trinnene skrev jeg bare nødvendig kode slik at du kan gjøre alt du vil ha med den lagrede bildefilen. Du må skrive koden for å gjøre "example_name.jpg" brukerens profilbilde (for eksempel). Dessverre kan jeg ikke dekke hvordan du kan oppnå det da det endres mye avhengig av din nåværende løsning. Rom for en annen opplæring jeg antar ...
Følgende eksempel viser hvordan du lagrer bildet i serveren din ved hjelp av Ruby on Rails eller PHP, det er ganske enkelt!
Trinn 20: Server-side Håndtering Ruby on Rails
krever "base64" def camerasnap #associate parameteren som sendes av Flex (innhold) til en variabel file_data = params [: content] #Decodes vår Base64-streng sendt fra Flex img_data = Base64.decode64 (file_data) #Sett et bildefilnavn med. jpg-utvidelse img_filename = "example_name.jpg" #Opner "example_name.jpg" og fyller den med "img_data" (vår dekodede Base64 send fra Flex) img_file = File.open (img_filename, "wb") | f | f.write (img_data) #now har vi et ekte JPEG-bilde i vår server, gjør alt du vil ha med det! # Skriv hva som er nødvendig for å gjøre det til et profilbilde, et albumfoto, etc ... ende
Trinn 21: Serverhåndtering PHP
Disse to eksemplene ovenfor (Rails og PHP) er like enkle og klare som mulig. Du kan skrive dem i bare 1 linje med kode (Rails) og 2 linjer (PHP) hvis du vil.
Trinn 22: Eksporter Utgivelsesbygg
Før du laster opp SWF-en til nettstedet ditt, anbefales det at du eksporterer det som en optimalisert SWF (release build):
Etter eksporten må du laste opp alt det er inne i "bin-release" -mappen (plassert i prosjektmappen din).
Konklusjon
Jeg håper du har likt denne opplæringen! Det er mange ting du kan gjøre med dette "sanntidsbildet", jeg bruker det allerede i produksjon, slik at brukerne mine raskt kan endre profilbildet sitt. Fortell oss hva du synes er en kreativ eller nyskapende bruk av denne funksjonen i kommentarene nedenfor. Takk!
Share
Accentsconagua
