Er zijn veel sites waar u uw profielafbeelding kunt kiezen door een foto te maken met uw webcam, in plaats van er een te uploaden. Deze zelfstudie leert je hoe je een foto maakt en doet wat je wilt, met behulp van Flash Builder 4 met Ruby on Rails of PHP.
Eindresultaat voorbeeld
Klik op de demolink hierboven, maar houd er rekening mee dat u de functie 'Opslaan' niet kunt gebruiken, tenzij u het zelf uitvoert op een server die PHP ondersteunt. U kunt "Rechtsklik> Bron weergeven" om de toepassingsbron te bekijken.
Stap 1: Overwegingen bij Flash Builder 4
Om optimaal van deze zelfstudie te profiteren, is het aanbevolen dat u enkele van de nieuwe functies van Flash Builder 4 al kent, zoals de nieuwe naamruimten en componenten. U hebt ook Flash Builder 4 nodig om de broncode uit te voeren zonder iets te hoeven wijzigen.
Flex 3-gebruikers: maak je geen zorgen, je kunt deze tutorial nog steeds volgen. Je moet alle "fx" en "s" namespaces veranderen in "mx", bijvoorbeeld: "" wordt ""De tag" Declaration "bestaat niet (schrijf wat er in zit, buiten)." Group "en" BorderContainer "zullen" Canvas "zijn." VGroup "zal" VBox "zijn." HGroup "zal" HBox "zijn. En er is geen "chromeColor" (je zult de knop anders moeten stylen).
Stap 2: Maak een nieuw flexproject
Allereerst moeten we een nieuw Flex-project maken. Open Flash Builder 4 en klik op "Bestand> Nieuw> Flex-project".
Het volgende dialoogvenster wordt geopend:
Kies een "Projectnaam": in ons geval zal dit "CameraSnapshot" zijn, maar u kunt alles gebruiken wat u maar wilt. U kunt de "Projectlocatie" ook instellen waar u maar wilt. Omdat het in de browser wordt uitgevoerd, laten we "Web" aangevinkt. We zullen de standaard SDK-versie gebruiken en we zullen geen servertechnologie kiezen.
Klik op Volgende.
We zullen hier niets veranderen, klik op Volgende.
In deze volgende stap gebruiken we ook de standaardinstellingen, dus klik op Voltooien:
Ons project is gemaakt. Dit is een nieuwe nieuwe Flash Builder 4-app!
Stap 3: Maak een ActionScript-bestand
We zullen een extern ActionScript-bestand hebben dat alle logica voor ons zal uitvoeren.
Maak een nieuw ActionScript-bestand: Bestand> Nieuw> ActionScript-bestand
Geef het een naam, we zullen kiezen: "cam" maar nogmaals, het kan zijn wat je maar wilt:
U kunt het "pakket" leeg laten. Klik op Finish. Laten we nu beginnen met coderen!
Stap 4: Camera Tijdelijke aanduiding
Nu ons project is gemaakt, hebben we een plek nodig om onze camera weer te geven. Laten we een VideoDisplay aan onze toevoegen CameraSnapshot.mxml bestand, na de tag "Verklaringen":
De ID kaart is belangrijk omdat we zo naar dit specifieke VideoDisplay verwijzen.
U kunt de breedte en hoogte van het Video-display wijzigen in alles wat u maar wilt, maar onthoud dat u een beeldverhouding van 4: 3 moet behouden om beeldvervorming te voorkomen. Tenzij u met een specifiek geval te maken hebt.
Merk ook op dat we de "Mx" naamruimte prefix in plaats van "S". Als we de "S" naamruimte prefix hier, zal Flash Builder een foutmelding geven wanneer we de methode "attachCamera" proberen te gebruiken. We zullen deze methode in de volgende stap zien.
Stap 5: De camera ophalen
Nu we plaats hebben om de camera van de gebruiker weer te geven, laten we het krijgen! Maak een nieuwe functie binnen het bestand cam.as:
private function getCam (): void if (Camera.getCamera ()) // wijs de standaard camera van de gebruiker toe aan een variabele var camera: Camera = Camera.getCamera (); // stel de camerakwaliteit in op de hoogst mogelijke camera.setQuality (0, 100); // stel de breedte, hoogte, frames per seconde van de camera in. setMode (theCam.width, theCam.height, 30); // bevestig de camera aan onze "theCam" VideoDisplay deCam.attachCamera (camera); else // voeg je eigen methode toe om de gebruiker zijn probleem te vertellen
Merk op dat we een voorwaardelijke hebben: we gaan alleen verder als we tenminste één camera van de gebruiker kunnen krijgen. Vervolgens noemden we het "camera" voor handige doeleinden en configureerden we het in de volgende paar regels.
In camera.setMode zou u "theCam.width" moeten begrijpen als "de breedte van ons VideoDisplay". In Flex wordt dit Data Binding genoemd. In gewoon Engels: "de breedte en hoogte van de 'camera' zullen altijd en automatisch dezelfde breedte en hoogte hebben als de 'theCam'". Dus als u besluit de grootte van het VideoDisplay later te wijzigen, zal het formaat van de camera automatisch veranderen.
Na het ophalen en configureren van onze camera bevestigen we deze aan onze "theCam". Het vertelt ons wat VideoDisplay moet weergeven.
Stap 6: De camera weergeven
Laten we onze importeren cam.as naar onze CameraSnapshot.mxml bestand, anders hebben we geen toegang tot de functie die we zojuist hebben gemaakt:
Als u uw "cam.as" in een andere map hebt opgeslagen, voegt u gewoon de mapnaam toe vóór "cam.as", bijvoorbeeld: "different_folder / cam.as"
Nu moeten we onze aanvraag daadwerkelijk laten weten rennen deze functie. We zullen een "creationComplete" methode toevoegen met de naam "getCam ();" in de openingstag "Toepassing". Dit betekent dat onze camera wordt weergegeven zodra de toepassing volledig is gemaakt:
Stap 7: First Run
Tot nu toe, zo goed. Start nu de applicatie en zie jezelf erin voordat we naar de volgende stap gaan :)
Let op: een paar gebruikers, speciaal op een Mac, moeten mogelijk de standaardcamera wijzigen die Flash Player krijgt. Binnen de draaiende app: klik met de rechtermuisknop (of Cmd + klik)> Configuraties ...> Klik op het tabblad "webcam-pictogram" hieronder> verander het in uw "echte" camera.
Stap 8: Layout en positionering
In deze stap zullen we onze tag "VideoDisplay" omwikkelen met een "VGroup" om de elementen die we verticaal toevoegen, op te maken. Je zult het later zelf zien.
Let op de eigenschappen "horizontalCenter" en "verticalCenter" ingesteld op "0". Dit betekent dat de "VGroup" 0 pixels verwijderd is van het midden van de bovenliggende container, in ons geval de hele applicatie.
U kunt de applicatie opnieuw uitvoeren: verklein het browservenster en merk dat u altijd in het midden zit.
Stap 9: Capture Button
Om onze knop "Neem een foto" toe te voegen, moeten we ons "VideoDisplay" omwikkelen met een "Groep" -tag waarbij de lay-out absoluut is en alles op elkaar is geplaatst (tenzij je ze plaatst met X en Y of plaats ze enkele pixels weg van de bovenkant, rechts, onder of links).
Uw code zou er als volgt uit moeten zien:
Merk op dat we zojuist de tag "Groep" hebben toegevoegd. Het zit in onze recent toegevoegde "VGroup" en verpakt ons bekende "VideoDisplay"
Nu voegen we de knop "Maak een foto" toe. Het zal verschijnen in een mooie semi-transparante "BorderContainer" die we zullen schrijven beneden ons "VideoDisplay", neem een kijkje:
Merk op dat ons knopgebied "0" pixels van de onderkant verwijderd is en dat het een zwarte semi-transparante (backgroundAlpha) achtergrond heeft. We hebben ook onze opnameknop "trigger" toegevoegd. Het staat precies in het midden van onze "BorderContainer".
Stap 10: Knopstijl
Voeg 'chromeColor' en 'color' toe aan onze 'trigger'-knop en onze code zou er als volgt uit moeten zien:
U kunt de app opnieuw uitvoeren en zien hoe het met ons gaat.
Stap 11: Picture Preview Placeholder
Nu voegen we een tijdelijke aanduiding toe waar we een voorbeeld van de foto kunnen bekijken die we later zullen nemen. Schrijf het beneden ons "VideoDisplay" en bovenstaande onze "BorderContainer".
We hebben een "Groep" met de naam "previewBox" toegevoegd die een "afbeelding" omhult met de naam "preview".
Stap 12: Voorbereiden op de momentopname
Voeg de volgende code toe op de top van ons "cam.as" -bestand.
Hier hebben we zojuist alles geïmporteerd dat we nodig hebben om de foto naar de server te brengen en te verzenden.
Stap 13: Maak een foto!
Nu is het tijd om een foto te maken. Laten we een functie toevoegen die het doet:
openbare functie takePicture (): void // als we geen foto's bekijken, nemen we er een :) als (! previewBox.visible) // een BitmapData-variabele maakt met de naam picture met de grootte van de cam-afbeelding var: BitmapData = nieuwe BitmapData (theCam.width, theCam.height); // de BitmapData tekent onze theCam picture.draw (theCam); // De bron van onze voorvertoning is een nieuwe Bitmap gemaakt van de bitmapData van de afbeelding. Preview.source = new Bitmap (afbeelding); // slaat deze BitmapData op in een andere BitmapData (buiten deze functie) bm = picture; // maakt het previewBox zichtbaar, zodat we onze voorbeeldafbeelding kunnen bekijkenBox.visible = true; // verander ons triggerlabel, zodat de gebruiker het opnieuw kan proberen trigger.label = "Maak nog een foto ..."; // wijzigt de kleur van de knop trigger.setStyle ('chromeColor', '# ff0000'); // als we een voorbeeld van een afbeelding bekijken ... anders maakt // de previewBox onzichtbare previewBox.visible = false; // Verandert het label trigger.label = 'Maak een foto!'; // wijzigt de kleur van de knop trigger.setStyle ('chromeColor', '# 33abe9');
De opmerkingen hierboven "// (...)" zullen u vertellen wat er aan de hand is.
Voeg nu een "klik" -eigenschap toe aan onze "trigger" -knop (CameraSnapshot.mxml) om onze recent gemaakte "takePicture" -functie aan te roepen:
Start de app en maak een foto!
Stap 14: Coole effecten toevoegen
Nu voegen we een aantal coole effecten toe: wanneer we een foto maken, zien we een flitslicht. Als we een foto weggooien, verdwijnt deze. Wijzig de tag 'Verklaringen' door de volgende code toe te voegen:
Met de tag "Fade" verdwijnt het flitslicht op realistische wijze. De tag "Parallel" voert tegelijkertijd de "Zoom" en "Fade" uit, waarbij onze foto met stijl wordt weggegooid.
Stap 15: Het flitseffect
Laten we ons flitslicht onder de "voorbeeld" afbeelding toevoegen:
Let op de "hideEffect" ingesteld op "flashFX": wanneer de "flashLight" onzichtbaar wordt, zal dit effect worden geactiveerd. Ook is de "achtergrondAlpha" ingesteld op "0.8", dus ons flitslicht is niet zo helder. Ons flitslicht is slechts een witte BorderContainer die wordt weergegeven en vervolgens snel verdwijnt, waardoor het "flits" -effect wordt gecreëerd.
Nu moeten we gewoon de "flashLight" zichtbare eigenschap instellen op "true" en "false" (het flash-effect activeren) in onze "takePicture" -functie die er nu als volgt uitziet:
openbare functie takePicture (): void // als we geen foto's bekijken, nemen we er een :) als (! previewBox.visible) // een BitmapData-variabele maakt met de naam picture met de grootte van de cam-afbeelding var: BitmapData = nieuwe BitmapData (theCam.width, theCam.height); // de BitmapData tekent onze theCam picture.draw (theCam); // De bron van onze voorvertoning is een nieuwe Bitmap gemaakt van de bitmapData van de afbeelding. Preview.source = new Bitmap (afbeelding); // slaat deze BitmapData op in een andere BitmapData (buiten deze functie) bm = picture; // maakt het previewBox zichtbaar, zodat we onze voorbeeldafbeelding kunnen bekijkenBox.visible = true; // geeft de zaklamp weer flashLight.visible = true; // zorgt ervoor dat de zaklamp veel gaat knipperenLicht.zichtbaar = onwaar; // verander ons triggerlabel, zodat de gebruiker het opnieuw kan proberen trigger.label = "Maak nog een foto ..."; // wijzigt de kleur van de knop trigger.setStyle ('chromeColor', '# ff0000'); // als we een voorbeeld van een afbeelding bekijken ... anders maakt // de previewBox onzichtbare previewBox.visible = false; // Verandert het label trigger.label = 'Maak een foto!'; // wijzigt de kleur van de knop trigger.setStyle ('chromeColor', '# 33abe9');
Stap 16: Negeer het foto-effect
Wijzig de "Group" genaamd "previewBox" (CameraSnapshot.mxml), dus het gebruikt het "discardPhoto" effect:
Let opnieuw op de "hideEffect". Start de app, maak een foto, neem een andere en bekijk de effecten!
Stap 17: Knop Opslaan
Laten we een knop Opslaan en annuleren gelijk toevoegen beneden de afsluitende tag van onze "Groep" genaamd "videoArea" en bovenstaande de afsluittag van "VGroup":
We hebben de knoppen "Annuleren" en "Afbeelding opslaan" ingekapseld in een "HGroup" -tag (die ze horizontaal weergeeft). We hebben de eigenschap "verticalAlign" op "middle" gezet, zodat de knop "Cancel" in het midden van de hoogte "savePic" wordt geplaatst. We hebben ook de "breedte" ingesteld op "100%" en "horizontalAlign" op "right".
Merk op dat de knop "Afbeelding opslaan" uitgeschakeld is. We zullen het inschakelen wanneer de gebruiker een voorbeeld van een afbeelding bekijkt en uitschakelen wanneer dat niet het geval is. U kunt de knop Annuleren naar de vorige pagina laten gaan, de pop-in die de SWF omslaat, enz. Sluiten. Het is uw oproep.
Binnen het bestand "cam.as", na enkele wijzigingen, ziet onze "takePicture" -functie er nu als volgt uit:
openbare functie takePicture (): void // als we geen foto's bekijken, nemen we er een :) als (! previewBox.visible) // een BitmapData-variabele maakt met de naam picture met de grootte van de cam-afbeelding var: BitmapData = nieuwe BitmapData (theCam.width, theCam.height); // de BitmapData tekent onze theCam picture.draw (theCam); // De bron van onze voorvertoning is een nieuwe Bitmap gemaakt van de bitmapData van de afbeelding. Preview.source = new Bitmap (afbeelding); // slaat deze BitmapData op in een andere BitmapData (buiten deze functie) bm = picture; // maakt het previewBox zichtbaar, zodat we onze voorbeeldafbeelding kunnen bekijkenBox.visible = true; // geeft de zaklamp weer flashLight.visible = true; // zorgt ervoor dat de zaklamp veel gaat knipperenLicht.zichtbaar = onwaar; // verander ons triggerlabel, zodat de gebruiker het opnieuw kan proberen trigger.label = "Maak nog een foto ..."; // activeert de savePic-knop savePic.enabled = true; // wijzigt de kleur van de knop trigger.setStyle ('chromeColor', '# ff0000'); // als we een voorbeeld van een afbeelding bekijken ... anders maakt // de previewBox onzichtbare previewBox.visible = false; // Verandert het label trigger.label = 'Maak een foto!'; // schakelt de savePic-knop savePic.enabled = false uit; // wijzigt de kleur van de knop trigger.setStyle ('chromeColor', '# 33abe9');
Hierboven hebben we net 2 regels code toegevoegd om de knop Opslaan in of uit te schakelen.
Stap 18: het beeld opslaan
Nu gaan we kijken naar een van de vele dingen die u met uw foto kunt doen: naar de server verzenden. Door dit te doen, kunt u het toewijzen als een profielfoto van een gebruiker, een nieuwe albumfoto, enz ...
Laten we een functie maken die onze foto naar de server verzendt wanneer we klikken op "Een afbeelding opslaan":
public function savePicture (): void // wijzig het label van de savePic-knop zodat de gebruiker dit zo snel mogelijk weet // dat we zijn afbeelding opslaan savePic.label = "Opslaan ..." // schakelt de knop uit zodat de gebruiker niet klik er twee keer op savePic.enabled = false; // de triggerknop geeft een leuk bericht weer trigger.label = "Dat is een mooie foto :)" // schakelt de "trigger" -knop uit, nu is het te laat om nog een foto te maken! trigger.enabled = false; // maakt een nieuwe JPEGEncoder met de naam "je" // stelt de kwaliteit in op 100 (maximum) var je: JPEGEncoder = new JPEGEncoder (100); // maakt een nieuwe ByteArray genaamd "ba" // JPEGEnconder codeert voor onze "bm" Bitmap-gegevens: onze "afbeelding" var ba: ByteArray = je.encode (bm); // deze ByteArray is nu een gecodeerde JPEG // maakt een nieuwe Base64Encoder genaamd "be" var be: Base64Encoder = new Base64Encoder (); // codeert onze "ba" ByteArray (wat onze JPEG-gecodeerde afbeelding is) met base64Encoder be.encodeBytes (ba); // Nu hebben we onze "encodedData" -tekenreeks naar de server gestuurd var encodedData: String = be.flush (); // dit is de HTTPService die we gebruiken om onze gegevens naar de server te sturen var handleService: HTTPService = new HTTPService (); // nu stellen we in welke URL we willen ... Stel de URL in van uw pagina / actie op de server // dit is een typische URL van Ruby on Rails. Controller: users_controller, Action: handlepicture handleService.url = "http: // localhost: 3000 / users / camerasnap"; // nog een voorbeeld van URL: //appUrl.url = "http://www.example.com/handlePicture.php"; // of, een relatief pad: //appUrl.url = "/handlePicture.php" // we kiezen POST als onze methode handleService.method = "POST"; // hier tonen we de bezette cursor voor betere visuele feedback handleService.showBusyCursor = true; // Ten slotte verzenden we onze "encodedData" als een "inhoud" -variabele handleService.send (content: encodedData); // 1 - in uw servercode kunt u de "param" - of "post" -variabele "content" gebruiken // 2 - gebruik een base64-decoder // 3 - schrijf deze naar schijf (nu hebt u een echte afbeelding opgeslagen in je server) // 4 - maak van deze afbeelding de profielfoto van de gebruiker of wat je maar wilt
In deze functie doen we drie dingen: verander een aantal labels en schakel een aantal knoppen uit, codeer onze afbeelding in JPEG en stuur tenslotte de gecodeerde gegevens (Base64 string) naar de server.
Nogmaals, de opmerkingen hierboven "// (...)" kunnen u vertellen hoe we dat hebben gedaan.
Nu moet onze knop "Afbeelding opslaan" de functie "savePicture" activeren. Voeg een "klik" -methode toe:
Stap 19: Behandeling aan serverzijde
In de volgende stappen heb ik alleen de benodigde code geschreven, zodat je alles kunt doen wat je wilt met het opgeslagen afbeeldingsbestand. Je moet de code schrijven om "example_name.jpg" de profielfoto van de gebruiker te maken (bijvoorbeeld). Helaas kan ik niet zeggen hoe je dat kunt bereiken, omdat het veel verandert, afhankelijk van je huidige oplossing. Ruimte voor een andere tutorial, denk ik ...
In het volgende voorbeeld ziet u hoe u de afbeelding opslaat op uw server met Ruby on Rails of PHP, het is vrij eenvoudig!
Stap 20: Server-side Omgaan met Ruby on Rails
vereisen "base64" def camerasnap # associëren de parameter verzonden door Flex (inhoud) naar een variabele file_data = params [: inhoud] #Decodes onze Base64-string verzonden vanuit Flex img_data = Base64.decode64 (bestandsgegevens) #Set een bestandsnaam van een afbeelding, met. jpg-extensie img_filename = "example_name.jpg" #Open de "example_name.jpg" en vult deze in met "img_data" (onze gedecodeerde Base64-verzending van Flex) img_file = File.open (img_filename, "wb") | f | f.write (img_data) #Nu hebben we een echte JPEG-afbeelding op onze server, doe er alles mee wat je wilt! #Schrijf wat nodig is om er een profielfoto, een albumfoto, enz ... van te maken
Stap 21: Server-side-afhandeling PHP
Deze twee voorbeelden hierboven (Rails en PHP) zijn zo eenvoudig en duidelijk mogelijk. Je kunt ze schrijven in slechts 1 regel code (Rails) en 2 regels (PHP) als je wilt.
Stap 22: Release Build exporteren
Voordat u de SWF naar uw site uploadt, is het raadzaam deze te exporteren als een geoptimaliseerde SWF (release build):
Na het exporteren, moet je uploaden alles dat is in de map "bin-release" (bevindt zich in uw projectmap).
Conclusie
Ik hoop dat je deze tutorial leuk vond! Er zijn veel dingen die je kunt doen met deze "real-time picture", ik gebruik het al in de productie, zodat mijn gebruikers snel hun profielfoto kunnen wijzigen. Vertel ons wat u denkt dat een creatief of innovatief gebruik van deze functie is in de onderstaande opmerkingen. Bedankt!
Share
Accentsconagua
