Il existe de nombreux sites sur lesquels vous pouvez choisir l’image de votre profil en prenant une photo avec votre webcam, au lieu de la télécharger. Ce tutoriel vous apprendra à prendre une photo et à en faire ce que vous voulez, en utilisant Flash Builder 4 avec Ruby on Rails ou PHP.
Aperçu du résultat final
Cliquez sur le lien de démonstration ci-dessus, mais n'oubliez pas que vous ne pourrez pas utiliser la fonction "Enregistrer" à moins de l'exécuter vous-même sur un serveur prenant en charge PHP. Vous pouvez "cliquer avec le bouton droit> Voir la source" pour voir la source de l'application.
Étape 1: Considérations relatives à Flash Builder 4
Afin de tirer pleinement parti de ce didacticiel, il est recommandé de connaître certaines des nouvelles fonctionnalités de Flash Builder 4, telles que les nouveaux espaces de nom et les nouveaux composants. De plus, vous aurez besoin de Flash Builder 4 pour exécuter le code source sans rien modifier..
Utilisateurs de Flex 3: ne vous inquiétez pas, vous pouvez toujours suivre ce tutoriel. Vous devrez changer tous les espaces de noms "fx" et "s" en "mx", exemple: "" devient ""Le tag" Déclaration "n’existe pas (écrivez ce qui est dedans, dehors)." Groupe "et" BorderContainer "seront" Canvas "." VGroup "sera" VBox "." HGroup sera "HBox". Et il n'y a pas de "chromeColor" (vous devrez styliser le bouton différemment).
Étape 2: Créer un nouveau projet Flex
Tout d’abord, nous devons créer un nouveau projet Flex. Ouvrez Flash Builder 4 et cliquez sur "Fichier> Nouveau> Projet Flex"..
La boîte de dialogue suivante s'ouvrira:
Choisissez un "Nom du projet": dans notre cas, ce sera "CameraSnapshot" mais vous pouvez utiliser ce que vous voulez. Vous pouvez également définir "Emplacement du projet" à l'endroit de votre choix. Comme il fonctionnera dans le navigateur, nous laisserons cocher "Web". Nous utiliserons la version par défaut du SDK et nous ne choisirons aucune technologie de serveur..
Hit suivant.
Nous ne changerons rien ici, cliquez sur Suivant.
Dans cette étape suivante, nous utiliserons également les paramètres par défaut. Cliquez donc sur Terminer:
Notre projet a été créé. Ceci est une nouvelle application Flash Builder 4!
Étape 3: créer un fichier ActionScript
Nous aurons un fichier ActionScript externe qui effectuera toute la logique pour nous..
Créez un nouveau fichier ActionScript: Fichier> Nouveau> Fichier ActionScript
Donnez-lui un nom, nous choisirons: "cam" mais encore une fois, cela peut être ce que vous voulez:
Vous pouvez laisser le "Package" vide. Cliquez sur Terminer. Commençons maintenant à coder!
Étape 4: espace réservé pour la caméra
Maintenant que notre projet a été créé, nous aurons besoin d’un endroit pour afficher notre caméra. Permet d’ajouter un VideoDisplay à notre CameraSnapshot.mxml fichier, après la balise "Declarations":
le identifiant est important car c'est ainsi que nous nous référons à ce VideoDisplay.
Vous pouvez modifier la largeur et la hauteur de VideoDisplay à votre guise, mais n'oubliez pas de conserver un rapport de format 4: 3 pour éviter toute déformation de l'image. Sauf si vous avez affaire à un cas particulier.
En outre, notez que nous avons utilisé le "mx" préfixe d'espace de nom au lieu de "s". Si nous utilisons le "s" Ici, Flash Builder génère une erreur lorsque nous essayons d'utiliser la méthode "attachCamera". Nous verrons cette méthode à l'étape suivante.
Étape 5: Obtenir la caméra
Maintenant que nous avons la place d'afficher la caméra de l'utilisateur, allons le chercher! Créer une nouvelle fonction dans le fichier cam.as:
fonction privée getCam (): void if (Camera.getCamera ()) // attribue la caméra par défaut de l'utilisateur à une caméra var variable: Camera = Camera.getCamera (); // définit la qualité de la caméra sur la meilleure qualité possible camera.setQuality (0, 100); // définit la largeur, la hauteur, le nombre d'images par seconde camera.setMode (theCam.width, theCam.height, 30); // attache la caméra à notre "theCam" VideoDisplay theCam.attachCamera (camera); else // ajoute votre propre méthode pour dire à l'utilisateur son problème
Notez que nous avons une condition: nous ne passerons à autre chose que si nous pouvons obtenir au moins une caméra de l'utilisateur. Ensuite, nous l'avons appelé "caméra" à des fins pratiques et l'avons configuré dans les lignes suivantes.
Dans camera.setMode, vous devez comprendre "theCam.width" comme "la largeur de notre VideoDisplay". Dans Flex, cela s'appelle Data Binding. En clair: "la largeur et la hauteur de la 'caméra' seront toujours et automatiquement identiques à la largeur et à la hauteur de la 'theCam'". Donc, si vous décidez de changer la taille de VideoDisplay ultérieurement, la taille de la caméra changera automatiquement.
Après avoir obtenu et configuré notre caméra, nous l’attachons à notre "theCam". Il dit à notre VideoDisplay quoi afficher.
Étape 6: Affichage de la caméra
Permet d'importer notre cam.as à notre CameraSnapshot.mxml fichier, sinon nous n’aurons pas accès à la fonction que nous venons de créer:
Si vous avez enregistré votre "cam.as" dans un autre dossier, ajoutez simplement le nom du dossier avant "cam.as", par exemple: "different_folder / cam.as".
Maintenant, nous devons dire à notre application de réellement courir cette fonction. Nous allons ajouter une méthode "creationComplete" appelant "getCam ();" à l'intérieur de l'ouverture "Application" tag. Cela signifie que notre caméra sera affichée dès que l'application sera complètement créée:
Étape 7: première course
Jusqu'ici tout va bien. Maintenant, lancez l'application et voyez-vous à l'intérieur avant de passer à l'étape suivante :)
Remarque: il est possible que quelques utilisateurs, spécialement sur un Mac, doivent modifier la caméra par défaut fournie par Flash Player. Dans l'application en cours d'exécution: clic droit (ou cmd + clic)> Configurations…> cliquez sur l'onglet "icône de la webcam" ci-dessous> Changez-le en votre "vraie" caméra.
Étape 8: Disposition et positionnement
Dans cette étape, nous allons emballer notre balise "VideoDisplay" avec un "VGroup" pour mettre en forme les éléments que nous allons ajouter, verticalement. Vous le verrez vous-même plus tard.
Notez que les propriétés "horizontalCenter" et "verticalCenter" sont définies sur "0". Cela signifie que le "VGroup" sera à 0 pixel du centre du conteneur parent, dans notre cas, toute l'application.
Vous pouvez exécuter l'application à nouveau: redimensionnez la fenêtre de votre navigateur et notez que vous êtes toujours au milieu..
Étape 9: bouton de capture
Pour ajouter notre bouton "Prendre une photo", nous devons envelopper notre "VideoDisplay" avec une balise "Groupe" où la mise en page est absolue et tout est superposé (sauf si vous les positionnez avec X et Y ou placez-les à quelques pixels du haut, de la droite, du bas ou de la gauche).
Votre code devrait ressembler à ceci:
Notez que nous venons d'ajouter la balise "Groupe". C'est à l'intérieur de notre "VGroup" récemment ajouté et enveloppe notre bien connu "VideoDisplay"
Maintenant, nous ajoutons le bouton "Prendre une photo". Il apparaîtra dans un joli "BorderContainer" semi-transparent que nous écrirons au dessous de notre "VideoDisplay", regardez:
Notez que notre zone de boutons est à "0" pixels du bas et qu’elle a un fond noir semi-transparent (backgroundAlpha). Nous avons également ajouté notre bouton de capture appelé "déclencheur". Il est placé en plein milieu de notre "conteneur frontière".
Étape 10: Style du bouton
Ajoutez "chromeColor" et "color" à notre bouton "trigger" et notre code devrait ressembler à ceci:
Vous pouvez exécuter l'application à nouveau et voir comment nous allons.
Étape 11: espace réservé à l'aperçu de l'image
Nous allons maintenant ajouter un espace réservé où nous pouvons prévisualiser la photo que nous prendrons plus tard. Écris le au dessous de notre "VideoDisplay" et au dessus de notre "BorderContainer".
Nous avons ajouté un "groupe" appelé "previewBox" qui enveloppe une "image" appelée "preview".
Étape 12: Préparation de l'instantané
Ajoutez le code suivant à la Haut de notre fichier "cam.as".
Ici, nous venons d'importer tout ce dont nous avons besoin pour prendre et envoyer la photo au serveur..
Étape 13: Prenez une photo!
Maintenant il est temps de prendre une photo. Ajoutons une fonction qui le fera:
fonction publique takePicture (): void // si nous ne visionnons aucune image, nous en prendrons une :) si (! previewBox.visible) // crée une variable BitmapData appelée image ayant la taille de theCam. var image: BitmapData = new BitmapData (theCam.width, theCam.height); // BitmapData dessine notre theCam picture.draw (theCam); // La source de notre aperçu est un nouveau bitmap composé du bitmapData preview.source = new Bitmap (picture); // stocke ce BitmapData dans un autre BitmapData (en dehors de cette fonction) bm = picture; // rend la previewBox visible afin que nous puissions voir notre image previewBox.visible = true; // change notre libellé de déclencheur afin que l'utilisateur puisse réessayer trigger.label = "Prendre une autre photo ..."; // change la couleur du bouton trigger.setStyle ('chromeColor', '# ff0000'); // si nous prévisualisons une image… else // rend la previewBox invisible previewBox.visible = false; // change le libellé trigger.label = 'Prenez une photo!'; // change la couleur du bouton trigger.setStyle ('chromeColor', '# 33abe9');
Les commentaires ci-dessus "// (…)" vous diront ce qui se passe.
Ajoutez maintenant une propriété "click" dans notre bouton "trigger" (CameraSnapshot.mxml) pour appeler notre fonction "takePicture" récemment créée:
Lancer l'application et prendre une photo!
Étape 14: Ajout d'effets sympas
Nous ajoutons maintenant quelques effets intéressants: lorsque nous prenons une photo, nous voyons une lumière flash. Lorsque nous jetons une photo, elle disparaîtra. Modifiez la balise "Declarations" en ajoutant le code suivant:
La balise "Fade" fera disparaître la lumière du flash de façon réaliste. La balise "Parallel" lancera les "Zoom" et "Fade" en même temps, en rejetant notre photo avec style.
Étape 15: l'effet de flash
Ajoutons notre lampe flash en dessous de la "prévisualisation" Image:
Notez que "hideEffect" est défini sur "flashFX": lorsque le "flashLight" devient invisible, cet effet est déclenché. De plus, "backgroundAlpha" est réglé sur "0,8", donc notre flash n'est pas très brillant. Notre lampe flash est juste un BorderContainer blanc qui apparaît et disparaît rapidement, créant ainsi l'effet "flash".
Il suffit maintenant de définir la propriété visible "flashLight" sur "true" et "false" (activation de l'effet flash) dans notre fonction "takePicture" qui ressemblera à ceci:
fonction publique takePicture (): void // si nous ne visionnons aucune image, nous en prendrons une :) si (! previewBox.visible) // crée une variable BitmapData appelée image ayant la taille de theCam new BitmapData (theCam.width, theCam.height); // BitmapData dessine notre theCam picture.draw (theCam); // La source de notre aperçu est un nouveau bitmap composé du bitmapData preview.source = new Bitmap (picture); // stocke ce BitmapData dans un autre BitmapData (en dehors de cette fonction) bm = picture; // rend la previewBox visible afin que nous puissions voir notre image previewBox.visible = true; // affiche le flashLight flashLight.visible = true; // rend le flashLight aller flashLight.visible = false; // change notre libellé de déclencheur afin que l'utilisateur puisse réessayer trigger.label = "Prendre une autre photo ..."; // change la couleur du bouton trigger.setStyle ('chromeColor', '# ff0000'); // si nous prévisualisons une image… else // rend la previewBox invisible previewBox.visible = false; // change le libellé trigger.label = 'Prenez une photo!'; // change la couleur du bouton trigger.setStyle ('chromeColor', '# 33abe9');
Étape 16: Supprimer l'effet d'image
Changez le "Groupe" appelé "previewBox" (CameraSnapshot.mxml) pour qu'il utilise l'effet "discardPhoto":
Notez le "hideEffect" à nouveau. Exécuter l'application, prendre une photo, en prendre une autre et voir les effets!
Étape 17: bouton Enregistrer
Permet d’ajouter un bouton Enregistrer et Annuler à droite au dessous de la balise de fermeture de notre "groupe" appelée "videoArea" et au dessus de la balise de fermeture "VGroup":
Nous avons enveloppé les boutons "Annuler" et "Enregistrer une image" dans une balise "HGroup" (qui les affichera horizontalement). Nous avons défini la propriété "verticalAlign" sur "middle" afin que le bouton "Annuler" soit placé au milieu de la hauteur "savePic". Nous avons également défini la "largeur" sur "100%" et "horizontalAlign" sur "droite".
Notez que le bouton "Enregistrer l'image" est désactivé. Nous l'activerons lorsque l'utilisateur visionnera une image et le désactiverons si ce n'est pas le cas. Vous pouvez faire en sorte que le bouton Annuler revienne à la page précédente, fermer la fenêtre contextuelle qui enveloppe le fichier SWF, etc..
Dans le fichier "cam.as", après quelques modifications, notre fonction "takePicture" va maintenant ressembler à ceci:
fonction publique takePicture (): void // si nous ne visionnons aucune image, nous en prendrons une :) si (! previewBox.visible) // crée une variable BitmapData appelée image ayant la taille de theCam. var image: BitmapData = new BitmapData (theCam.width, theCam.height); // BitmapData dessine notre theCam picture.draw (theCam); // La source de notre aperçu est un nouveau bitmap composé du bitmapData preview.source = new Bitmap (picture); // stocke ce BitmapData dans un autre BitmapData (en dehors de cette fonction) bm = picture; // rend la previewBox visible afin que nous puissions voir notre image previewBox.visible = true; // affiche le flashLight flashLight.visible = true; // rend le flashLight aller flashLight.visible = false; // change notre libellé de déclencheur afin que l'utilisateur puisse réessayer trigger.label = "Prendre une autre photo ..."; // active le bouton savePic savePic.enabled = true; // change la couleur du bouton trigger.setStyle ('chromeColor', '# ff0000'); // si nous prévisualisons une image… else // rend la previewBox invisible previewBox.visible = false; // change le libellé trigger.label = 'Prenez une photo!'; // désactive le bouton savePic savePic.enabled = false; // change la couleur du bouton trigger.setStyle ('chromeColor', '# 33abe9');
Ci-dessus, nous venons d'ajouter 2 lignes de code pour activer et désactiver le bouton Enregistrer..
Étape 18: Enregistrement de l'image
Nous allons maintenant examiner l'une des nombreuses choses que vous pouvez faire avec votre photo: l'envoyer au serveur. Ce faisant, vous pouvez l'affecter à la photo de profil d'un utilisateur, à une nouvelle photo d'album, etc.
Créons une fonction qui envoie notre image au serveur lorsque nous cliquons sur "Enregistrer une image":
fonction publique savePicture (): void // modifie le libellé du bouton savePic afin que l'utilisateur sache dès que possible // que nous enregistrons sa photo savePic.label = "Enregistrement en cours" // désactive le bouton afin que l'utilisateur ne le puisse pas cliquez dessus deux fois savePic.enabled = false; // le bouton de déclenchement affiche un joli message trigger.label = "C'est une belle image :)" // désactive le bouton "de déclenchement", il est maintenant trop tard pour prendre une autre photo! trigger.enabled = false; // crée un nouveau JPEGEncoder appelé "je" // définit la qualité sur 100 (maximum). var je: JPEGEncoder = new JPEGEncoder (100); // crée un nouveau ByteArray appelé "ba" // JPEGEnconder encode nos données bitmap "bm": notre "image" var ba: ByteArray = je.encode (bm); // ce ByteArray est maintenant un fichier JPEG codé // crée un nouveau Base64Encoder appelé "be" var be: Base64Encoder = new Base64Encoder (); // code notre ByteArray "ba" (qui est notre image codée JPEG) avec base64Encoder be.encodeBytes (ba); // Nous avons maintenant notre chaîne "encodedData" à envoyer au serveur var encodedData: String = be.flush (); // c'est le service HTTPS que nous allons utiliser pour envoyer nos données au serveur var handleService: HTTPService = new HTTPService (); // maintenant, nous définissons quelle URL nous voulons… Définissez l'URL de votre page / action côté serveur // c'est une URL typique de Ruby on Rails. Contrôleur: users_controller, Action: handlepicture handleService.url = "http: // localhost: 3000 / users / camerasnap"; // autre exemple d'URL: //appUrl.url = "http://www.example.com/handlePicture.php"; // ou, un chemin relatif: //appUrl.url = "/handlePicture.php" // nous avons choisi POST en tant que notre méthode handleService.method = "POST"; // nous montrons ici le curseur occupé pour un meilleur retour visuel handleService.showBusyCursor = true; // Finalement, nous envoyons notre "encodedData" en tant que variable "content" handleService.send (content: encodedData); // 1 - dans votre code côté serveur, vous pouvez gérer la variable "param" ou "post" appelée "content" // 2 - utiliser un décodeur base64 // 3 - l'écrire sur un disque sur votre serveur) // 4 - faire de cette image la photo de profil de l'utilisateur ou tout ce que vous voulez
Dans cette fonction, nous faisons trois choses: changer des étiquettes et désactiver des boutons, encoder notre image au format JPEG et, enfin, envoyer les données encodées (chaîne Base64) au serveur..
Encore une fois, les commentaires ci-dessus "// (…)" peuvent vous dire comment nous avons fait cela.
Maintenant, notre bouton "Enregistrer l'image" doit déclencher la fonction "Enregistrer l'image". Ajouter une méthode "clic":
Étape 19: Gestion du serveur
Dans les étapes suivantes, j’ai écrit uniquement le code nécessaire pour que vous puissiez faire tout ce que vous voulez avec le fichier d’image sauvegardé. Vous devrez écrire le code pour que "exemple_nom.jpg" soit la photo de profil de l'utilisateur (par exemple). Malheureusement, je ne peux pas expliquer comment vous pouvez y parvenir car cela change beaucoup en fonction de votre solution actuelle. De la place pour un autre tutoriel, je suppose…
L'exemple suivant montre comment enregistrer l'image sur votre serveur à l'aide de Rubis sur rails ou PHP, c'est assez simple!
Étape 20: Gestion du Ruby on Rails côté serveur
require "base64" def camerasnap #associe le paramètre envoyé par Flex (contenu) à une variable file_data = params [: content] #Décode notre chaîne Base64 envoyée par Flex img_data = Base64.decode64 (fichier_données) # Définit un nom d'image, avec. jpg extension img_filename = "nom_exemple.jpg" #Opens le "nom_exemple.jpg" et le remplit avec "img_data" (notre envoi décodé Base64 de Flex) img_file = Fichier.open (img_filename, "wb") | f | f.write (img_data) # maintenant nous avons une vraie image JPEG sur notre serveur, faites ce que vous voulez avec! #Ecrivez ce qui est nécessaire pour en faire une photo de profil, un album photo, etc… fin
Étape 21: Gestion du serveur PHP
Ces deux exemples ci-dessus (Rails et PHP) sont aussi simples et clairs que possible. Vous pouvez les écrire en 1 ligne de code (Rails) et 2 lignes (PHP) si vous le souhaitez..
Étape 22: Exporter une version validée
Avant de télécharger le fichier SWF sur votre site, il est recommandé de l'exporter sous forme de fichier SWF optimisé (édition):
Après l'exportation, vous devrez télécharger tout qui se trouve dans le dossier "bin-release" (situé dans le dossier de votre projet).
Conclusion
J'espère que vous avez aimé ce tutoriel! Il y a beaucoup de choses que vous pouvez faire avec cette "image en temps réel", je l'utilise déjà en production afin que mes utilisateurs puissent changer rapidement l'image de leur profil. Dites-nous ce que vous pensez être une utilisation créative ou innovante de cette fonctionnalité dans les commentaires ci-dessous. Merci!
Share
Accentsconagua
