Lag en Snappy Snapshot App med Flash Builder 4

Create en Snappy Snapshot App med Flash Builder 4
3
Del
en
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Det er mange nettsteder der du kan velge profilbildet ved å ta et bilde med webkameraet, i stedet for å laste opp en. Denne opplæringen vil lære deg hvordan å ta et bilde og gjøre hva du vil med den, ved hjelp av Flash Builder 4 med Ruby on Rails eller PHP.




Endelig resultat Forhåndsvisning Anmeldelser

Klikk på demoen linken over, men husk at du ikke vil være i stand til å bruke 'Lagre' funksjon med mindre du kjører det selv på en server som støtter PHP. Du kan "Høyreklikk > Vis kilde" for å se program kilde



Trinn 1: Flash Builder 4 Hensyn

For å dra full nytte av denne opplæringen, det er anbefalt. at du allerede kjenner noen av de nye funksjonene i Flash Builder 4, som den nye navnerom og komponenter. Dessuten trenger du 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" navnerom til "MX", eksempel: "< s: Button >" blir "< mx: Button >". "Erklæringen" tag eksisterer ikke (skriv hva som er inni den, utenfor). "Group" og "BorderContainer" vil være "lerret". "VGroup" vil være "VBox". "HGroup" vil være "HBox". Og det er ingen "chromeColor" (du trenger å style knappen annerledes)



Trinn 2:. Opprett et nytt Flex Prosjekt

Først av alt, må vi opprette en nye Flex Project. Åpne Flash Builder 4 og klikk "Fil > New > Flex Project".

Følgende dialogboks åpnes:

Velg "Name Project": i vårt tilfelle vil det være "CameraSnapshot", men du kan bruke hva du vil. Du kan også stille inn "Project location" til hvor du vil. Som det vil kjøre i nettleseren, vil vi forlate "Web" sjekket. Vi vil bruke standard SDK versjon, og vi vil ikke velge noen server teknologi.

Hit Neste.

Vi vil ikke endre noe her, traff Neste.

I dette følgende skritt vi vil også bruke standardinnstillingene, så klikk Finish:

Vårt prosjekt er opprettet. Dette er en frisk ny Flash Builder 4 app



Trinn 3:!. Lag en Action File

Vi vil ha en ekstern Actionscript-fil som skal utføre all logikk for oss

Opprett en ny Actionscript-fil: Fil > New > Action File

Gi den et navn, velger vi: "cam", men igjen, det kan være hva du vil:

Du kan la "Package" blank. Hit Finish. Nå la oss starte koding



Trinn 4: Camera Placeholder

Nå som prosjektet vårt har blitt opprettet, trenger vi et sted å vise vår kameraet. Lar legge til en video fremstilling til vår CameraSnapshot.mxml
fil, etter "Erklæringer" tag:
< mx: video fremstilling id = "theCam" width = "533" height = "400" />

id
er viktig fordi det er hvordan vi refererer til denne spesifikke video fremstilling.

Du kan endre bredden og høyden av video fremstilling til hva du vil, men husk å holde en 4 : 3-format for å unngå bildeforvrengning. Med mindre du har å gjøre med en konkret sak.

Også merke til at vi har brukt den "mx"
navneromprefiks stedet for "s"
. Hvis vi bruker "s"
navneromprefiks 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år kameraet

Nå som vi har plass til å vise brukerens kamera, la oss få det! Opprett en ny funksjon i filen cam.as Bilde:
privat funksjon getCam (): void {if (Camera.getCamera ()) {//tildele brukerens standard kameraet til en variabel Var kamera: Kamera = Camera.getCamera (); //Stille inn kameraet kvalitet for å være den høyeste som mulig camera.setQuality (0, 100); //Setter bredde, høyde, bilder per sekund camera.setMode (theCam.width, theCam.height, 30); //Feste kameraet til vår "theCam" video fremstilling theCam.attachCamera (kamera); } Else {//legge til din egen metode for å fortelle brukeren hans problem}}

Legg merke til at vi har en betinget: vi vil bare gå videre hvis vi kan få minst ett kamera fra brukeren. Neste, vi kalte det "kamera" for praktiske formål og konfigurert det i de neste par linjer.

I camera.setMode, bør du forstå "theCam.width" som "bredden av vår video fremstilling". I Flex, dette kalles databinding. I vanlig engelsk: "bredden og høyden på" kamera "vil alltid og automatisk ha samme bredde og høyde på 'theCam'». Så, hvis du bestemmer deg for å endre størrelsen på video fremstilling senere vil kameraets størrelse endrer automatisk.

Etter å ha fått og konfigurering våre kamera, vi legger det til vår "theCam". Det forteller vår video fremstilling hva som skal vises



Trinn 6:. Vise Kamera

Lar importere vår cam.as
til vår CameraSnapshot.mxml
file, ellers vil vi ikke ha tilgang til funksjonen vi bare gjort:
< fx: Script source = "cam.as" />

Hvis du har lagret din "cam.as" i en annen mappe, bare legge mappenavnet før "cam.as", for eksempel: "different_folder /cam.as"

Nå må vi fortelle vår søknad til å faktisk kjøre
denne funksjonen. Vi vil legge til en "creationComplete" metoden kaller "getCam ();" inne i åpningen "Søknad" tag. Det betyr at vår kameraet vil bli vist så snart søknaden er fullstendig opprettet:
< s: Søknad xmlns: fx = "http://ns.adobe.com/mxml/2009~~number=plural" xmlns: s = "bibliotek : //ns.adobe.com/flex/spark "xmlns: mx =" bibliotek: //ns.adobe.com/flex/mx "minWidth =" 955 "minHeight =" 600 "creationComplete =" getCam (); " >



Trinn 7: First Run

Så langt, så bra. Nå, kjøre programmet og se deg selv inni den før vi går videre til neste trinn :)

Merk: noen få brukere, spesielt på en Mac, kan ha å endre standard kamera som Flash Player blir. Inni kjører app: Høyreklikk (eller cmd + klikk) > Konfigurasjoner ... > Klikk på "webcam ikonet" -kategorien under > Endre den til din "ekte" cam



Trinn 8:. Layout og posisjonering

I dette trinnet vil vi bryte vår "video fremstilling" tag med en "VGroup" til layout elementer som vi vil legge til, vertikalt. Du vil se det selv senere
< s:. VGroup horizontalCenter = "0" verticalCenter = "0" &​​gt; < mx: video fremstilling id = "theCam" width = "533" height = "400" /> < /s: VGroup >

Legg merke til "horizontalCenter" og "verticalCenter" egenskaper satt til "0". Dette betyr at "VGroup" vil være 0 piksler fra sentrum av den overordnede container, i vårt tilfelle, hele programmet

Du kan kjøre programmet på nytt. Endre størrelsen nettleserens vindu og merker at du er . alltid i midten



Trinn 9: Capture Button

For å legge til vår "Ta et bilde" -knappen, må vi bryte vår "video fremstilling" med en " gruppe "tag hvor oppsettet er absolutte, og alt er plassert på toppen av hverandre (med mindre du plassere dem med X og Y eller plassere dem noen piksler fra toppen, høyre, bunn eller venstre).

koden skal se slik ut:
< s: VGroup horizontalCenter = "0" verticalCenter = "0" &​​gt; < s: Gruppe id = "videoArea" > < mx: video fremstilling id = "theCam" width = "533" height = "400" /> < /s: Group > < /s: VGroup >

Legg merke til at vi har nettopp lagt "konsernet" tag. Det er inne i vår nylig lagt "VGroup" og wraps vår velkjente "video fremstilling"

Nå legger vi "Ta et bilde" -knappen. Den vil vises inne i en fin semi-transparent "BorderContainer" at vi skal skrive under
vår "video fremstilling", ta en titt:
< mx: video fremstilling id = "theCam" width = "533 "height =" 400 "/> < s: BorderContainer under = "0" width = "100%" bakgrunnsfarge = "black" backgroundAlpha = "0.4" borderColor = "black" height = "55" > < s: Button id = "trigger" horizontalCenter = "0" verticalCenter = "0" label = "Ta et bilde!" height = "35" /> < /s: BorderContainer >

Legg merke til at vår knappen området er "0" piksler bort fra bunnen og den har en svart semi-transparent (backgroundAlpha) bakgrunn. Vi har også lagt vår fangst knapp som heter "trigger". Det er plassert midt i midten av vår "BorderContainer"



Trinn 10:. Knappestil

Legg til "chromeColor" og "farge" til vår "trigger" -knappen og vår kode skal se slik ut:
< s: Button id = "trigger" horizontalCenter = "0" verticalCenter = "0" height = "35" label = "Ta et bilde!" chromeColor = "# 33abe9" color = "# ffffff" />

Du kan kjøre programmet på nytt, og se hvordan vi gjør



Trinn 11: Bilde Preview Placeholder
.

Nå vil vi legge til en plassholder der vi kan forhåndsvise bildet som vi tar senere. Skriv det under
vår "video fremstilling" og ovenfor
vår "BorderContainer"
< s:. Gruppe id = "previewBox" synlig = "false" > < mx: Bilde id = "preview" width = "100%" height = "100%" /> < /s: Group >

Vi har lagt til en "gruppe" som heter "previewBox" som brytes en "Image" kalt "preview"



Trinn 12: Forberedelse til Snapshot <. br>

Legg til følgende kode i toppen
av vår "cam.as" file
//Action fileimport flash.display.BitmapData;. import mx.graphics.codec.JPEGEncoder; import mx.rpc.http.HTTPService, import mx.utils.Base64Encoder; privat Var bm. BitmapData;

Her har vi nettopp importert alt vi trenger for å kunne 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 et bilde, vil vi ta en :) if (previewBox.visible!) {//Oppretter et BitmapData variabel kalt bildet som har theCam størrelse Var bilde: BitmapData = new BitmapData (theCam.width, theCam.height); //den BitmapData trekker vår theCam picture.draw (theCam); //Vår forhåndsvisning kilde er en ny Bitmap laget av bildets BitmapData preview.source = new Bitmap (bildet); //lagrer denne BitmapData inn i en annen BitmapData (utenfor denne funksjonen) bm = bilde; //gjør previewBox synlig, slik at vi kan se våre bilde previewBox.visible = true; //endre vår trigger etiketten, slik at brukeren vil kunne prøve igjen trigger.label = "Ta et nytt bilde ..."; //endrer fargen på knappen trigger.setStyle ('chromeColor', '# ff0000'); } //Hvis vi forhåndsviser et bilde ... else {//gjør previewBox usynlig previewBox.visible = false; //endrer etiketten trigger.label = 'Ta et bilde!'; //endrer fargen på knappen trigger.setStyle ('chromeColor', '# 33abe9'); }}

kommentarer ovenfor "//(...)" vil fortelle deg hva som skjer.

Nå legger et "klikk" eiendom inne i vår "trigger" -knappen (CameraSnapshot.mxml) til ring vår nylig opprettet "takePicture" -funksjon:
< s: Button id = "trigger" horizontalCenter = "0" verticalCenter = "0" height = "35" label = "Ta et bilde!" chromeColor = "# 33abe9" color = "# ffffff" klikk = "takePicture ();" />

Kjør programmet og ta et bilde!



Trinn 14: Legge kule effekter

Nå legger vi noen kule effekter: Når vi tar et bilde, vil vi se en lommelykt. Når vi forkaste et bilde, vil det gå unna. Endre "Erklæringer" tag, ved å legge til følgende kode:
< fx: Erklæringer > <! - Plasser ikke-visuelle elementer (for eksempel tjenester, verdigjenstander) her - > < mx: Fade id = "flashFX" varighet = "550" /> < s: Parallel id = "discardPhoto" > < s: barn > < mx: Zoom varighet = "350" zoomWidthFrom = "1.0" zoomWidthTo = "0,01" zoomHeightFrom = "1.0" zoomHeightTo = "0,01" target = "{previewBox}" /> < mx: Fade varighet = "350" /> < /s: barn > < /s: Parallel > < /fx: Erklæringer >

"Fade" tag vil gjøre blitslyset forsvinner realistisk. Den "Parallell" tag vil kjøre "Zoom" og "Fade" på samme tid, forkaster bildet vår med stil



Trinn 15:. The Flash Effect

La oss legge vår blitslyset under "preview" Bilde:
< mx: Bilde id = "preview" width = "100%" height = "100%" /> < s: BorderContainer id = "lommelykt" width = "100%" height = "100%" hideEffect = "{flashFX}" bakgrunnsfarge = "hvit" backgroundAlpha = "0.8" />

Legg merke til "hideEffect" satt til "{flashFX}": når "lommelykt" blir usynlig, vil denne effekten bli utløst. Også, "backgroundAlpha" er satt til "0,8" så vår blitslys er ikke så lyse. Vår flash lys er bare en hvit BorderContainer som dukker opp og deretter raskt går unna, skaper "flash" effekt.

Nå trenger vi bare å sette "lommelykt" synlig eiendom til "true" og "false" (aktivering av flash effekt) inne i vår "takePicture" funksjon som nå vil se slik ut:
offentlig funksjon takePicture (): void {//hvis vi ikke forhåndsviser et bilde, vil vi ta en :) if (! previewBox.visible) {//oppretter et BitmapData variabel kalt bildet som har theCam størrelse Var bilde: BitmapData = new BitmapData (theCam.width, theCam.height); //den BitmapData trekker vår theCam picture.draw (theCam); //Vår forhåndsvisning kilde er en ny Bitmap laget av bildets BitmapData preview.source = new Bitmap (bildet); //lagrer denne BitmapData inn i en annen BitmapData (utenfor denne funksjonen) bm = bilde; //gjør previewBox synlig, slik at vi kan se våre bilde previewBox.visible = true; //viser lommelykt flashLight.visible = true; //gjør lommelykten går veien flashLight.visible = false; //endre vår trigger etiketten, slik at brukeren vil kunne prøve igjen trigger.label = "Ta et nytt bilde ..."; //endrer fargen på knappen trigger.setStyle ('chromeColor', '# ff0000'); } //Hvis vi forhåndsviser et bilde ... else {//gjør previewBox usynlig previewBox.visible = false; //endrer etiketten trigger.label = 'Ta et bilde!'; //endrer fargen på knappen trigger.setStyle ('chromeColor', '# 33abe9'); }}



Trinn 16: Kast Picture Effect

Endre "konsernet" kalt "previewBox" (CameraSnapshot.mxml) så det bruker "discardPhoto" effekt:
< s: Gruppe id = "previewBox" synlig = "false" hideEffect = "{discardPhoto}" >

Legg merke til "hideEffect" igjen. Kjør app, ta et bilde, ta en annen og se effektene



Trinn 17: Save Button

Gir legge en Lagre og Avbryt-knappen til høyre under Anmeldelser den avsluttende koden av vår "gruppe" som heter "videoArea" og ovenfor
"VGroup" lukking tag:
< s: HGroup verticalAlign = "middle" horizontalAlign = "right" width = "100% "> < mx: LinkButton label = "Avbryt" /> < s: Button id = "savePic" label = "Lagre bilde" height = "30" aktivert = "false" tooltip = "Gjør det profilbildet ditt!" /> < /s: HGroup >

Vi pakket "Avbryt" og "Lagre et bilde" knappene inne i et "HGroup" tag (som vil vise dem horisontalt). Vi har satt "verticalAlign" eiendom til "midten" så på "Avbryt" knappen er plassert i midten av "savePic" height. Vi setter også "bredde" til "100%" og "horizontalAlign" til "riktig".

Legg merke til at "Lagre bilde" -knappen er deaktivert. Vi vil gjøre det når brukeren forhåndsvisning et bilde og deaktivere når ikke. Du kan gjøre på Avbryt gå til forrige side, lukke pop-in som brytes SWF, osv ... Det er opp til deg.

Inside the "cam.as" filen, etter noen endringer, vår "takePicture" -funksjonen skal nå se ut som dette:
offentlig funksjon takePicture (): void {//hvis vi ikke forhåndsviser et bilde, vil vi ta en :) if (previewBox.visible!) {//oppretter en BitmapData variabel kalt bildet som har theCam størrelse Var bilde: BitmapData = new BitmapData (theCam.width, theCam.height); //den BitmapData trekker vår theCam picture.draw (theCam); //Vår forhåndsvisning kilde er en ny Bitmap laget av bildets BitmapData preview.source = new Bitmap (bildet); //lagrer denne BitmapData inn i en annen BitmapData (utenfor denne funksjonen) bm = bilde; //gjør previewBox synlig, slik at vi kan se våre bilde previewBox.visible = true; //viser lommelykt flashLight.visible = true; //gjør lommelykten går veien flashLight.visible = false; //endre vår trigger etiketten, slik at brukeren vil kunne prøve igjen trigger.label = "Ta et nytt bilde ..."; //gjør at savePic knappen savePic.enabled = true; //endrer fargen på knappen trigger.setStyle ('chromeColor', '# ff0000'); } //Hvis vi forhåndsviser et bilde ... else {//gjør previewBox usynlig previewBox.visible = false; //endrer etiketten trigger.label = 'Ta et bilde!'; //deaktiverer savePic knappen savePic.enabled = false; //endrer fargen på knappen trigger.setStyle ('chromeColor', '# 33abe9'); }}

Over, vi har nettopp lagt 2 linjer med kode for å aktivere og deaktivere Lagre



Trinn 18:. Lagre Picture

Nå vil vi se på en av de mange ting du kan gjøre med bildet: sender den til serveren. Ved å gjøre det, kan du tilordne den som en brukers profil bilde, et nytt album bilder, osv ...

La oss lage en funksjon som sender vårt bilde til serveren når vi klikker "Lagre bilde":
offentlig funksjon savePicture (): void {//endre savePic knappen merket slik at brukeren vet så snart som mulig //at vi er redde sitt bilde savePic.label = "Lagrer ..." //deaktiverer knappen slik at brukeren ikke klikk den to ganger savePic.enabled = false; //trigger-knappen viser en hyggelig melding trigger.label = "Det er et fint bilde :)" //deaktiverer "trigger" -knappen, nå er for sent å ta et nytt bilde! trigger.enabled = false; //oppretter et nytt JPEGEncoder kalt "je" //setter kvaliteten til 100 (maks) Var je: JPEGEncoder = new JPEGEncoder (100); //oppretter et nytt ByteArray kalt "ba" //JPEGEnconder koder vår "bm" Bitmap data: vår "bilde" var BA: ByteArray = je.encode (bm); //dette ByteArray er nå en kodet JPEG //oppretter et nytt Base64Encoder kalt "være" var være: Base64Encoder = new Base64Encoder (); //koder vår "ba" ByteArray (som er vår JPEG kodet bildet) med base64Encoder be.encodeBytes (ba); //Nå har vi vår "encodedData" string å sende til serveren Var encodedData: String = be.flush (); //dette er HTTPService som vi vil bruke til å sende våre data til serveren Var handleService: HTTPService = new HTTPService (); //nå satt vi hva URL vi ønsker ... Sett nettadressen til server-side side /action //dette er en typisk Ruby on Rails URL. Controller: users_controller, Handling: handlepicture handleService.url = "http: //localhost: 3000 /brukere /camerasnap"; //annet eksempel på URL: //appUrl.url = "http://www.example.com/handlePicture.php"; //eller en relativ bane: //appUrl.url = "/handlePicture.php" //vi velger POST som vår metode handleService.method = "POST"; //her viser vi opptatt markøren for bedre visuell tilbakemelding handleService.showBusyCursor = true; //Slutt, vi sender vår "encodedData" som en "innhold" variable handleService.send ({innhold: encodedData}); //1 - i din server-side kode kan du håndtere "parameter" eller "post" variabel kalt "innhold" //2 - bruk en base64 dekoder //3 - skriv det på en plate (nå har du et reelt bilde lagret på serveren din) //4 - gjør dette bildet brukerens profilbilde, eller noe du ønsker}

I denne funksjonen vi gjøre tre ting: endre noen etiketter og deaktivere noen knapper, kode vårt bilde til JPEG og til slutt sende kodede data (Base64 streng) til serveren.

Igjen, kommentarene ovenfor "//(...)" kan fortelle deg hvordan vi gjorde det.

Nå er vår "Lagre bilde" knapp behov for å utløse "savePicture" -funksjon. Legg et "klikk" -metoden:
< s: Button id = "savePic" label = "Lagre bilde" height = "30" aktivert = "false" tooltip = "Gjør det profilbildet ditt!" klikk = "savePicture ();" />



Trinn 19: Server-side Håndtering

I de følgende trinnene, jeg skrev bare den nødvendige koden slik at du kan gjøre hva du vil med den lagrede bildefilen. Du må skrive inn koden for å lage "example_name.jpg" brukerens profil bilde (for eksempel). Dessverre kan jeg ikke dekke hvordan du kan oppnå det som det endres mye avhengig av din nåværende løsning. Rom for en annen tutorial jeg antar ..

Følgende eksempel viser hvordan du lagrer bildet i din server ved hjelp av Ruby on Rails
eller PHP
, er det ganske enkelt!



Trinn 20: Server-side Håndtering Ruby on Rails
krever "base64" def camerasnap #associate param sendt av Flex (innhold) til en variabel file_data = params [: innholds] #Decodes vår Base64 string sendt fra Flex img_data = Base64.decode64 (file_data) #set et bilde filnavn, med JPG forlengelse img_filename = "example_name.jpg" #Opens den "example_name.jpg" og fyller den med "img_data" (vår dekodet Base64 send fra Flex) img_file = File.open (img_filename, "wb") {| f | f.write (img_data)} #now vi har en reell JPEG-bilde i vår server, gjøre hva du vil med den! #Write Hva som er nødvendig for å gjøre det til et profilbilde, et album bilder, etc ... end

Trinn 21: Server-side Håndtering PHP
< php //knytte param sendt av Flex ( innhold) til en variabel $ file_data = $ _POST ['content']; //Dekoder vår Base64 streng sendt fra Flex $ img_data = base64_decode ($ file_data); //Sett et bilde filnavn, med JPG forlengelse $ img_filename = "example_name.jpg"; //Åpner "example_name.jpg" $ fp = fopen ($ img_filename, "w"); //fyller den med "img_data" (vår dekodet Base64 sende fra Flex) fwrite ($ fp, $ img_data); //lukker filpeker fclose ($ fp); //nå har vi en reell JPEG-bilde i vår server, gjøre hva du vil med den! //Skriv hva som er nødvendig for å gjøre det til et profilbilde, et album bilder, osv ... >?

Disse to eksemplene ovenfor (Rails og PHP) er så enkel og tydelig som mulig. Du kan skrive dem på bare en linje med kode (Rails) og 2 linjer (PHP) hvis du ønsker



Trinn 22:. Eksportere Slipp Bygg

Før du laster opp SWF til din området, anbefales det at du eksportere det som en optimalisert SWF (release build):

Etter eksport, må du laste opp alt
som er inne i "bin-release" -mappen (ligger inne prosjektmappe).

Konklusjon

Jeg håper du har likt denne opplæringen! Det er mange ting du kan gjøre med denne "real-time bilde", jeg allerede bruker det i produksjon slik at mine brukere kan raskt endre profilbildet sitt. Fortell oss hva du synes ville være en kreativ eller innovativ bruk av denne funksjonen i kommentarfeltet nedenfor. Takk!