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 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 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 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 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: 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 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" Legg til "chromeColor" og "farge" til vår "trigger" -knappen og vår kode skal se slik ut: Du kan kjøre programmet på nytt, og se hvordan vi gjør Nå vil vi legge til en plassholder der vi kan forhåndsvise bildet som vi tar senere. Skriv det under Vi har lagt til en "gruppe" som heter "previewBox" som brytes en "Image" kalt "preview" Legg til følgende kode i toppen Her har vi nettopp importert alt vi trenger for å kunne ta og sende bildet til serveren Nå er det på tide å ta et bilde. La oss legge til en funksjon som vil gjøre det: 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: Kjør programmet og ta et bilde! 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: "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 La oss legge vår blitslyset under "preview" Bilde: 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: Endre "konsernet" kalt "previewBox" (CameraSnapshot.mxml) så det bruker "discardPhoto" effekt: Legg merke til "hideEffect" igjen. Kjør app, ta et bilde, ta en annen og se effektene Gir legge en Lagre og Avbryt-knappen til høyre under Anmeldelser den avsluttende koden av vår "gruppe" som heter "videoArea" og ovenfor 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: Over, vi har nettopp lagt 2 linjer med kode for å aktivere og deaktivere Lagre 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": 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: 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 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 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 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!
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
Trinn 8:. Layout og posisjonering
< s:. VGroup horizontalCenter = "0" verticalCenter = "0" > < mx: video fremstilling id = "theCam" width = "533" height = "400" /> < /s: VGroup >
Trinn 9: Capture Button
< s: VGroup horizontalCenter = "0" verticalCenter = "0" > < s: Gruppe id = "videoArea" > < mx: video fremstilling id = "theCam" width = "533" height = "400" /> < /s: Group > < /s: VGroup >
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 >
Trinn 10:. Knappestil
< s: Button id = "trigger" horizontalCenter = "0" verticalCenter = "0" height = "35" label = "Ta et bilde!" chromeColor = "# 33abe9" color = "# ffffff" />
Trinn 11: Bilde Preview Placeholder
.
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 >
Trinn 12: Forberedelse til Snapshot <. br>
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;
Trinn 13: Ta et bilde
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'); }}
< s: Button id = "trigger" horizontalCenter = "0" verticalCenter = "0" height = "35" label = "Ta et bilde!" chromeColor = "# 33abe9" color = "# ffffff" klikk = "takePicture ();" />
Trinn 14: Legge kule effekter
< 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 >
Trinn 15:. The Flash Effect
< mx: Bilde id = "preview" width = "100%" height = "100%" /> < s: BorderContainer id = "lommelykt" width = "100%" height = "100%" hideEffect = "{flashFX}" bakgrunnsfarge = "hvit" backgroundAlpha = "0.8" />
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
< s: Gruppe id = "previewBox" synlig = "false" hideEffect = "{discardPhoto}" >
Trinn 17: Save Button
"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 >
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'); }}
Trinn 18:. Lagre Picture
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}
< 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
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 ... >?
Trinn 22:. Eksportere Slipp Bygg
som er inne i "bin-release" -mappen (ligger inne prosjektmappe).
Konklusjon