, skabe et godt billede app med flash bygmester 4,,,,, 3,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, der er mange steder, hvor man kan vælge din profil billede ved at tage et billede med dit webcam, i stedet for at uploade.denne lektion vil lære dig at tage et billede, og gøre hvad du vil med det, ved hjælp af flash bygmester 4 med ruby på skinner eller folkesundhedsprogrammet.,,,, endelige resultat forpremiere, klik på demo led ovenfor, men husk på, at du ikke vil være i stand til at anvende "redde" funktion, medmindre du løb det selv på en server, som støtter folkesundhedsprogrammet.du kan "klik > betragtning kilde" se anvendelse kilde.,, trin 1: flash bygmester 4 hensyn, for at drage fuld fordel af denne forelæsning, det er anbefalet, at du allerede ved, at nogle af de nye elementer i flash bygmester 4, som den nye namespaces og komponenter.du vil også have flash bygmester 4 til kildekoden, uden at ændre noget, flex 3 brugere skal ikke bekymre dig, du stadig kan følge denne forelæsning.du bliver nødt til at ændre alle "fx" og "s" namespaces "hr.", f.eks. "< knap >" bliver "< mx: knap >"."angivelse" tag ikke eksisterer (skrive, hvad der er indeni, udenfor). "gruppen "og" bordercontainer "bliver" fremstilling "."vgroup "bliver" vbox "."hgroup "bliver" hbox ".og der er ingen "chromecolor" (du skal mode den knap anderledes).,, trin 2: skabe en ny flex - projektet, for det første, er vi nødt til at skabe en ny flex - projektet.åben flash bygmester 4 og klik på "fil > nye > flex - projektet"., følgende dialog vil åbne:,, vælge et "projekt": i dette tilfælde vil det være "camerasnapshot", men du kan bruge alt, hvad du vil have.du kan også fastsætte "projekt sted", hvor du vil.som det vil løbe i browseren, vil vi lade "net" kontrolleret.vi vil bruge den misligholdelse, sdk version, og vi vil ikke vælge en server teknologi. slå næste.,, vi vil ikke ændre noget her, slå næste. i det følgende skridt, vil vi også anvende de indstillinger, så klik finish:,, vores projekt er blevet skabt.det er en ny flash bygmester 4 app.,, trin 3: skabe en actionscript fil, vi vil have en ekstern actionscript dossier, som skal udføre alle logik for os. og skabe en ny actionscript fil: fil > nye > actionscript fil, give det et navn, vi vil vælge: "- -" men så igen, det kan være hvad som helst vil du: "du kan forlade" pakke "blank.slå færdig.lad os begynde med kodning.,, trin 4: kamera indikation af en art, nu hvor vores projekt er blevet skabt, vi har brug for et sted at vise vores kamera.lad os tilføje en videodisplay til vores, camerasnapshot.mxml, fil, efter "erklæringer" tag:, < mx: videodisplay id = "thecam" bredde = "533" højde = "400" />,, id, er vigtigt, fordi det er sådan, vi henviser til dette specifikke videodisplay, du. måske ændrer bredde og højde af videodisplay til alt, hvad du vil, men husk at holde en 4:3 billedformat for at undgå image fordrejning.medmindre du har at gøre med en bestemt sag. også bemærket, at vi har brugt den, "hr" namespace præfiks i stedet for, "s".hvis vi bruger den, "s" namespace præfiks her flash bygmester vil kaste en fejl, når vi forsøger at anvende metoden "attachcamera".vi vil se denne metode i den næste skridt.,, løntrin 5: at få kameraet, nu hvor vi har plads til at vise brugeren kamera, lad os få det!oprettelse af en ny funktion i filen, cam. som:, privat funktion getcam(): ugyldig (hvis (kamera. getcamera()) (//tildele brugerens misligholdelse kamera til en variabel var kamera: kamera = kamera. getcamera(); //sæt kameraet kvalitet for at være den højeste som muligt kamera. setquality (0 100); //den bredde, højde, billeder pr. sekund kamera. setmode (thecam.width, thecam.height, 30); //lægger kameraet til vores "thecam" videodisplay thecam. attachcamera (kamera)} andre (//add deres egen metode til at fortælle brugeren hans problem), bemærker, at vi har en betinget: vi kan kun komme videre, hvis vi kan få mindst ét kamera fra brugeren.vi kaldte det "camera" for praktisk formål og konfigureret det i de næste par linjer. i camera.setmode, du burde forstå "thecam. bredde" som "bredden af vores videodisplay".i flex, kaldes det data, bindende.på engelsk: "bredde og højde af 'kamera vil altid og automatisk være samme bredde og højde af" thecam ".så, hvis du beslutter at ændre størrelsen af de videodisplay senere, kameraet er størrelse vil ændre automatisk. efter at være blevet og konfigureringen af vores kamera, vi lægger det til vores "thecam".det siger vores videodisplay hvad udviser.,, trin 6: med kameraet, lad os importere vores, cam.as, til vores, camerasnapshot.mxml, fil, for ellers vil vi ikke have adgang til den opgave, vi lavede:, < fx: manuskript kilde = "cam. som" /> hvis du reddede dit "cam." i en anden folder bare tilføje mappe navn før "cam. som", f.eks. "different_folder /cam." nu er vi nødt til at fortælle vores ansøgning til faktisk, løb, denne funktion.vi kan tilføje en "creationcomplete" metode til "getcam();" i indledningen "ansøgning" tag.det betyder, at vores kamera vil være tændt, så snart ansøgningen er fuldstændig skabt:, < anvendelse xmlns: fx - = = http: //ns. adobe. kom /mxml /2009 "                       xmlns: s =" bibliotek: //ns. adobe. kom /flex /gnist "                       xmlns: mx =" library://ns.adobe.com/flex/mx "minwidth =" 955 "minheight =" 600 "               creationcomplete =" getcam(); ">,, trin 7: første løb så langt, så godt.stik nu af anvendelsen og se dig selv ind i det, før vi går videre til det næste skridt:) meddelelse: nogle brugere, der er specielt et mac, kan blive nødt til at ændre den misligholdelse, kamera, som flash spiller får.i løber app: højre klik (cmd + klik) > konfigurationer.> klik "webcam ikon" regning under > ændret det til din "ægte" cam.,, trin 8: udformning og placering i dette skridt, vi pakker vores "videodisplay" mærkat med et "vgroup" til opstilling af de elementer, som vi kan tilføje, lodret.du får det at se dig senere, < vgroup horizontalcenter = "0" verticalcenter = "0" > < mx: videodisplay id = "thecam" bredde = "533" højde = "400" /> < (e): vgroup > meddelelse "horizontalcenter" og "verticalcenter" egenskaber, der er "0".dette betyder, at "vgroup" vil være 0 pixels væk fra midten af moderselskaber beholder, i vores tilfælde hele anvendelse. kan du køre anvendelse igen: resize din browser vindue, og bemærker, at de altid er i midten.,, trin 9: opsamling knap, for at tilføje vores "tag et billede" knap, vi bliver nødt til at afslutte vores "videodisplay" med en "gruppe" mærke, hvor opstilling er absolut og alt er anbragt oven på hinanden (medmindre du holdning med x - og y - eller stille dem nogle pixels væk fra den øverste, højre, bunden eller venstre)., kode burde se sådan, < vgroup horizontalcenter = "0" verticalcenter = "0" > < gruppe id = "videoarea" > < mx: videodisplay id = "thecam" bredde = "533" højde = "400" /> <; (e): gruppe > < (e): vgroup > bemærker, at vi har tilføjet "gruppen" tag.det er i vores nyligt tilføjede "vgroup" og sætter vores velkendte "videodisplay", er vi nu tilføje "tage et billede - knappen.det vil være i en god delvist gennemskuelige "bordercontainer", skriver vi under vores videodisplay ", se:, < mx: videodisplay id =" thecam "bredde =" 533 "højde =" 400 "/> < bordercontainer bunden =" 0 "bredde =" 100% "backgroundcolor =" sort "backgroundalpha =" 0 "bordercolor =" sort "højde =" 55 "> <" id = "udløser" horizontalcenter = "0" verticalcenter = "0" etiket = "tag et billede."højde = "35" /> < (e): bordercontainer > bemærker, at vores knap område er "0" pixels væk fra bunden, og det er en sort delvist gennemskuelige (backgroundalpha) baggrund.vi tilføjede også vores fange knap kaldet "udløser".det er placeret midt i vores "bordercontainer".,, trin 10: knap stil, tilføje "chromecolor" og "farvede" vores "udløser" knap, - - og vores kode burde se sådan, < "id =" udløser "horizontalcenter =" 0 "verticalcenter = 0" højde = 35 "etiket =" tag et billede. "chromecolor = "# 33abe9" farve = "# ffffff" />, du kan løbe app igen og se, hvordan vi gør.,, trin 11: billede forpremiere indikation af en art, nu kan vi tilføje en indikation af en art, hvor vi kan se det billede, der tager vi senere.skriv det under vores videodisplay ", og over vores" bordercontainer ". < gruppe id =" previewbox "synlige =" falske "> < mx: billede id =" forpremiere "bredde = 100%" højde = 100% "/> < /s: gruppe > vi har tilføjet et" gruppe "kaldet" previewbox ", det var en" image "kaldet" forpremiere ".,, trin 12: forberedelse af øjebliksbillede, tilføje følgende kode på toppen af vores" cam. som "fil., /actionscript fil import flash.display.bitmapdata; import mx.graphics.codec.jpegencoder; import mx.rpc.http.httpservice; import mx.utils.base64encoder; private var bm: bitmapdata; her, vi har indført for alt det, vi behøver for at tage og sende billedet til server.,, trin 13: tag et billede!nu er det tid til at tage et billede.lad os tilføje en funktion, der gør det: offentlige funktion takepicture(): ugyldig (//, hvis vi ikke er previewing et billede, vi tager en:), hvis!previewbox. synlig) (//skabe en bitmapdata variable kaldet billede, der er thecam størrelse var billede: bitmapdata = nye bitmapdata (thecam.width, thecam. højde); //den bitmapdata henleder vores thecam billede. træk (thecam); //vores forpremiere kilde er en ny bitmap af billedet er bitmapdata preview.source = nye bitmap (billede); //deponerer dette bitmapdata i en anden bitmapdata (uden for denne funktion) bm = billede; //gør previewbox synlige, så vi kan se vores billede previewbox.visible = sandt; //ændre vores udløser etiket, så brugeren vil være i stand til at prøve igen trigger.label = "tage et billede..."; //ændrer farven på den knap trigger.setstyle ('chromecolor ","&#ff0000)} //, hvis vi previewing et billede...andet (//gør previewbox usynlige previewbox.visible = falske; //ændringer etiketten trigger.label = 'tage et billede!; //ændrer farven på den knap udløser. setstyle ('chromecolor ","!abe9)}}, bemærkninger over "//(...)" vil fortælle dig, hvad der foregår. nu, tilføje en "klik" fast ejendom i vores "udløser" knap (camerasnapshot. mxml) ring til vores nyligt oprettet "takepicture" funktion:, < "id =" udløser "horizontalcenter =" 0 "verticalcenter =" 0 "højde = 35" etiket = "tag et billede."chromecolor = "# 33abe9" farve = "# ffffff" klik = "takepicture();" />, løb app og tage et billede!,, trin 14: tilføjelse af fedt virkninger, vi nu tilføje nogle seje virkninger: når vi tager et billede, vi vil se et glimt af lys.når vi skille sig af med et billede, det vil gå væk.ændring af "erklæringer" øremærke, ved tilføjelse af følgende kode:, < fx: erklæringer > <!- sted, ikke - visuelle elementer (f.eks. tjenester, værdi genstande). > < mx: "id =" flashfx "varighed = 550" /> < parallelle id = "discardphoto" > < børn > < mx: zoom varighed = 350 "zoomwidthfrom =" 0 "zoomwidthto = 0,01" zoomheightfrom = "0" zoomheightto = 0,01 "target - =" (previewbox} "/> < mx: falme varighed = 350" /> < /s: børn > < /s: parallelle > < /ef: erklæringer >, "forsvinder" mærket vil gøre blinklys forsvinde realistisk.den "parallelle" tag løber "zoom" og "forsvinder" på samme tid, idet vores billede med stil.,, trin 15: flash, lad os tilføje vores blinklys under "forpremiere" billede:, < mx: billede id = "forpremiere" bredde = 100% "højde =" 100% "/> < bordercontainer id =" lys "bredde = 100%" højde = 100% "hideeffect =" (flashfx} "backgroundcolor =" hvide "backgroundalpha =" 0 "/> meddelelse hideeffect" til "" (flashfx} ": når den lommelygte" bliver usynlige, denne virkning vil blive udløst.også, "backgroundalpha" er til "0", så vores blitz lys er ikke så kvik.vores blinklys er en hvid bordercontainer, der dukker op og forsvinder så hurtigt, at "flash" virkning., nu mangler vi bare at sætte den lommelygte "synlige ejendom" ægte "og" falske "(aktiverer flash - virkning) i vores" takepicture "funktion, der nu vil se sådan ud: offentlige funktion takepicture(): ugyldig (//, hvis vi ikke er previewing et billede, vi tager en:), hvis!previewbox. synlig) (//skabe en bitmapdata variable kaldet billede, der er thecam størrelse var billede: bitmapdata = nye bitmapdata (thecam.width, thecam. højde); //den bitmapdata henleder vores thecam billede. træk (thecam); //vores forpremiere kilde er en ny bitmap af billedet er bitmapdata preview.source = nye bitmap (billede); //deponerer dette bitmapdata i en anden bitmapdata (uden for denne funktion) bm = billede; //gør previewbox synlige, så vi kan se vores billede previewbox.visible = sandt; //viser den lommelygte flashlight.visible = sandt; //gør den lommelygte går langt flashlight.visible = falske; //ændre vores udløser etiket, så brugeren være i stand til at prøveigen trigger.label = "tage et billede..."; //ændrer farven på den knap udløser. setstyle ('chromecolor ","&#ff0000)} //, hvis vi previewing et billede...andet (//gør previewbox usynlige previewbox.visible = falske; //ændringer etiketten trigger.label = 'tage et billede!; //ændrer farven på den knap udløser. setstyle ('chromecolor ","!abe9)}}, trin 16: kasseres billede virkning ændre "gruppe" kaldet "previewbox" (camerasnapshot. mxml), så det bruger "discardphoto" virkning:, < gruppe id = "previewbox" synlige = "falske" hideeffect = "(discardphoto}" > meddelelse "hideeffect" igen.- app, tag et billede, tag en og se, hvilke virkninger.,, skridt 17: redde knap, lad os tilføje en redde og aflyse knap lige under, at øremærke vores "gruppe" kaldet "videoarea", og ikke mindst, "vgroup" lukker tag:, < hgroup verticalalign = "mellem" horizontalalign = "rigtige" bredde = 100% "> < mx: linkbutton etiket =" tilbagekalde "/> <" id = "savepic" etiket = "redde billede" højde = "30" har gjort det muligt for = "falske" tooltip = "det er din profil billede."/> < (e): hgroup > vi pakket "tilbagekalde" og "redde et billede" knapper i en "hgroup" tag (som vil vise dem vandret).vi har set "verticalalign" formuegoder "mellem" så afbrydknap anbringes midt i "savepic" højde.- satte vi også "bredde" til "100%" og "horizontalalign" til "ret".se, at "redde billede" knap er handicappede.vi vil gøre det, når de bruger er previewing et billede og slukke, når det ikke.så kan du aflyse knap gå på den foregående side lukke far i det var det omvendt.det er dit kald. i "cam. som" sagen, efter nogle ændringer i vores "takepicture" funktion vil nu ser sådan ud: offentlig funktion takepicture(): ugyldig (//, hvis vi ikke er previewing et billede, vi tager en:), hvis!previewbox. synlig) (//skabe en bitmapdata variable kaldet billede, der er thecam størrelse var billede: bitmapdata = nye bitmapdata (thecam.width, thecam. højde); //den bitmapdata henleder vores thecam billede. træk (thecam); //vores forpremiere kilde er en ny bitmap af billedet er bitmapdata preview.source = nye bitmap (billede); //deponerer dette bitmapdata i en anden bitmapdata (uden for denne funktion) bm = billede; //gør previewbox synlige, så vi kan se vores billede previewbox.visible = sandt; //viser den lommelygte flashlight.visible = sandt; //gør den lommelygte går langt flashlight.visible = falske; //ændre vores udløser etiket, så.e - bruger, vil være i stand til at prøve igen trigger.label = "tage et billede..."; //giver savepic knap savepic.enabled = sandt; //ændrer farven på den knap udløser. setstyle ('chromecolor ","&#ff0000)} //, hvis vi previewing et billede...andet (//gør previewbox usynlige previewbox.visible = falske; //ændringer etiketten trigger.label = 'tage et billede!; //deaktiverer savepic knap savepic.enabled = falske; //ændrer farven på den knap udløser. setstyle ('chromecolor ","!abe9)), ovenfor, har vi tilføjet 2 linier for at kunne aktivere og deaktivere save - knappen,.,, gå 18: at redde filmen, - ser på en af de mange ting, som du kan gøre med dit billede: at sende det til serveren.du kan tildele dem som bruger profil billede, et nyt album foto osv. lad os skabe en funktion, der sender et billede til serveren, når vi klik på "red et billede": offentlig funktion savepicture(): ugyldig (//ændre savepic knap mærke, så brugeren ved, så snart som muligt //, at vi redder hans billede savepic.label = "redde" //deaktiverer knap, så brugeren klik ikke to gange savepic.enabled = falske; //udløserknap viser et godt budskab trigger.label = ". det er et godt billede:)" //deaktiverer "udløser" knap, nu er for sent at tage et billede.trigger.enabled = falske; //skaber en ny jpegencoder kaldet "je" //fastlægger kvaliteten til 100 (maksimale) var je: jpegencoder = nye jpegencoder (100); //skaber en ny bytearray kaldet "ba" //jpegenconder koder - - vores "bm" bitmap data: vores "foto" var ba: bytearray = je. lagre (bm); //denne bytearray er nu en kodet jpeg //skaber en ny base64encoder kaldet "" var: base64encoder = nye base64encoder(); //koder - - vores "ba" bytearray (som er vores jpeg - kodet billede) med base64encoder. encodebytes (ba); //- har vores "encodeddata" snor til at sende til server var encodeddata: string =. flush(); //det er httpservice, som vi vil bruge til at sende vores data til serveren var han.dleservice: httpservice = nye httpservice(); //nu vi hvad url, vi ønsker.sæt url af din server-side side /action //- dette er en typisk ruby på skinner, url.regulator: users_controller, aktion: handlepicture handleservice.url = "http: //////////////////////localhost: 3000 brugere camerasnap"; //et eksempel på url: http: ////////////////appurl.url = "http: //////////////www.example. kom /handlepicture. folkesundhedsprogrammet" og /eller en relative vej: //appurl.url = "/handlepicture. folkesundhedsprogrammet aspektet" //vi vælger stilling som vores metode handleservice.method = "post"; //her viser vi den travle markør for bedre visuel feedback handleservice.showbusycursor = sandt; //endelig, vi sender vores "encodeddata" som en "indhold" variabel handleservice. send ((indhold: encodeddata}) //1 - din server-side kode, du kan klare det "param" eller "post" variabel "indhold" //2 - brug en base64 - dekoder //3 - skriv det til disc (nu har du et reelt billedegemt i din server) //4 - gøre det her billede brugerens profil billede eller noget, i vil have}, i denne funktion, vi gøre tre ting: ændre etiketter og slå nogle knapper, koder for vores billede for billede, og endelig at sende krypterede data (base64 - string) til server. igen. bemærkninger over "//(...) kan fortælle, hvordan vi gjorde det. nu vores" red billede "button har brug for til at udløse" savepicture "funktion.tilføje en "klik" - metoden:, < "id =" savepic "etiket =" redde billede "højde =" 30 "har gjort det muligt for =" falske "tooltip =" det er din profil billede. "klik = "savepicture();" />,, skridt 19: server side håndtering, i det følgende skridt, jeg skrev kun det nødvendige kode, så du kan gøre hvad du vil med den reddede billede fil.du bliver nødt til at skrive, at "example_name jpg" brugerens profil billede (for eksempel).desværre kan jeg ikke hvordan du kan opnå det, så ændrer det meget afhængig af deres nuværende løsning.plads til endnu en lektion tror jeg.., det følgende eksempel viser, hvordan man redder billede i din server med ruby på skinner, eller under folkesundhedsprogrammet,, det er ret simpelt.,, gå 20: server side håndtering ruby på skinner, kræver "base64" def camerasnap&#forbinder param sendt af flex (indhold) til en variabel file_data = params [: indhold]&#dekoder vores base64 - string sendt fra flex img_data = base64. decode64 (file_data)&#et billede på fil med jpg udvidelse. img_filename = "example_name jpg"&#åbner "example_name jpg" og befolker det med "img_data" (vi afkodede base64 - sende fra flex) img_file = fil. åben (img_filename "internationale") (