Share
Dans ce tutoriel, je vais vous montrer comment imiter les photos créées par la caméra Lytro. Le résultat final vous permettra de créer vos propres images dynamiques et intéressantes à afficher sur le Web, permettant ainsi aux téléspectateurs de modifier le point central! Aucun appareil photo spécial requis - vous pouvez utiliser n'importe quel appareil photo permettant la mise au point manuelle (ce qui inclut la plupart des appareils photo de téléphone).
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Cliquez sur une guitare pour vous concentrer dessus.
Avant de commencer, assurez-vous que votre appareil photo peut sélectionner manuellement un point AF. Dans ce tutoriel, vous ne pouvez pas utiliser la méthode de verrouillage de la mise au point pour modifier les points de mise au point. Un reflex numérique serait mieux avec ce tutoriel, mais un appareil photo compact doté de commandes manuelles décentes ira bien! Assurez-vous également que vous avez un trépied solide.
Tout d’abord, installez votre appareil photo sur un trépied. Assurez-vous qu'il est sécurisé et qu'il ne va pas tomber ou bouger, car nous ne voulons pas que la composition change du tout entre les plans..
Assurez-vous que votre sujet reste statique tout au long de la prise de vos images, sinon dans le résultat final, vos images sembleront bouger et cela ne semblerait pas bon du tout.!
Pour obtenir une image vraiment efficace, vous devez définir le mode dans lequel vous voulez que vous puissiez contrôler l’ouverture. Cela vous permettra de définir une grande ouverture (nombre petit f) et de faire ressortir l'arrière-plan (ou l'avant-plan). Rappelez-vous que plus le nombre f est bas, plus le flou est important.!
Le mode Priorité à l’ouverture (A / Av sur Canon) est un excellent mode qui vous permettra de définir l’ouverture, et l’appareil photo choisira tous les autres paramètres à votre place. Bien que vous soyez averti, ce mode peut produire deux images avec des expositions légèrement différentes, et chacune d’elles peut avoir une couleur légèrement différente. Soyez donc prudent.!
Le mode manuel (M) serait préférable, car vous pouvez définir les paramètres d'exposition et conserver la cohérence de vos photos. Les réglages manuels de la balance des blancs sont également une bonne idée pour conserver la cohérence des couleurs de vos images..
Pour ce tutoriel, je recommanderais n'importe où autour de f1 - f5.6, en fonction de la distance entre votre sujet et l'appareil photo.
Maintenant, avec une large ouverture sélectionnée sur votre appareil photo (petit nombre f), déplacez votre marqueur AF sur votre sujet au premier plan à l'aide du pavé directionnel situé à l'arrière de votre appareil photo. Laissez la caméra se concentrer, puis prenez la photo. Sans déplacer votre appareil photo, sélectionnez un nouveau point AF en arrière-plan, effectuez la mise au point, puis prenez la photo comme indiqué sur l'image ci-dessus..
Un conseil pratique si vous avez un reflex numérique est d'entrer dans mode de visualisation en direct. Ici, vous pouvez sélectionner n’importe quel point sur l’écran, ce qui vous permet une plus grande flexibilité dans le choix de vos points de focalisation. Si vous avez un appareil photo compact, utilisez votre clavier de commande pour sélectionner votre point de mise au point..
Vous devriez maintenant avoir deux images qui sont exactement les mêmes, à part le point focal. Continuez à filmer jusqu'à ce que vous soyez satisfait de votre composition et de votre profondeur de champ. Transférez ensuite vos photos sur votre ordinateur et lancez-vous dans Flash!
Commencez par configurer un dossier de projet nommé de manière appropriée. J'aime toujours garder les projets dans des dossiers clairement nommés afin de pouvoir les retrouver si j'ai besoin de revenir sur ce que j'ai fait ultérieurement. Ici, vous conserverez vos images originales, images redimensionnées et vos fichiers Flash / ActionScript.
Pour que les images soient sécurisées pour le Web, nous devons les redimensionner. Ouvrez votre éditeur d’image préféré et redimensionnez simplement vos photos à la taille que vous jugez appropriée. Ici, je les ai redimensionnées à 600x400px, mais vous pouvez utiliser n’importe quelle taille et vérifier que la case "contraindre les proportions" est cochée.
Ensuite, enregistrez les images au format JPEG de haute qualité. Ceci est important car Flash compresse le fichier entier ultérieurement, il est donc inutile de perdre la qualité de l'image à ce stade..
Démarrez Flash et ouvrez un nouveau document ActionScript 3.0. Cliquez sur le bouton Modifier sous l'onglet Propriétés et redimensionnez votre scène à la taille de vos images. J'ai choisi 600x400px.
Ensuite, créez deux couches sur votre scène. nommez la couche inférieure? Photos ?, et la couche supérieure? Boutons ?. Ajouter une autre image clé sur la? Photos? couche, mais assurez-vous sur les boutons? couche, vous venez d'ajouter un autre cadre. Voir l'image ci-dessus.
Ensuite, importez vos deux photos dans la bibliothèque, alors glissez-les et déposez-les du dossier de votre projet dans le panneau de la bibliothèque. Maintenant, assurez-vous d'avoir vos deux photos sur une image clé différente..
La couche photo est maintenant terminée!
Maintenant, nous devons créer les boutons sur lesquels les utilisateurs vont cliquer pour changer le point focal. Pour ce faire, nous allons masquer les zones floues des deux images, les remplir et les rendre invisibles..
Commencez par sélectionner la première image sur les boutons? couche. Utilisez l'outil Plume, masquez la forme des zones floues et complétez le tracé. Vous n'avez pas besoin d'être trop précis ici; assurez-vous simplement que vous obtenez la forme générale de l'objet.
Ensuite, sélectionnez l'outil Pot de peinture et indiquez les chemins que vous venez de créer. Supprimez le trait noir sur les bords si nécessaire.
Ensuite, sélectionnez les formes et allez dans Modifier> Convertir en symbole (F8). Assurez-vous que le type de symbole est un bouton et appelez-le comme vous le souhaitez. J'ai nommé ma forme 'Guitar1'.
Double-cliquez sur votre nouveau bouton pour accéder au mode d’isolation du bouton. Ici vous pouvez éditer les états du bouton.
Dans ce cas, nous voulons le rendre invisible, alors cliquez et faites glisser depuis l'état 'UP', puis relâchez-le sur l'état 'HIT'.
Revenez ensuite à votre chronologie d'origine et votre forme devrait avoir un masque transparent. Félicitations! Vous venez de faire un bouton invisible!
L'étape suivante consiste à nommer ce bouton. Pendant qu'il est sélectionné, dans le panneau de droite, sous l'onglet Propriétés, nommez votre bouton 'btn_back'.
Ensuite, cliquez sur l'image suivante sur vos? Boutons? couche sur la deuxième image, de sorte que l’autre partie de l’image est floue. Cela permet simplement de savoir où masquer.
Maintenant, faites exactement comme avant:
Maintenant, nommez ce nouveau bouton, 'btn_fore'.
Vous devriez maintenant avoir deux boutons transparents qui couvrent les deux images, comme indiqué. Ils peuvent se chevaucher légèrement, mais cela n’a pas trop d'importance. La couche de boutons est maintenant terminée!
La dernière partie consiste à créer le code qui fera fonctionner les boutons. Cette étape implique l'utilisation de classes de document. Utilisez ce didacticiel pour vous aider à les comprendre si vous les connaissez déjà ou si vous souhaitez simplement les actualiser..
Premièrement, localisez la zone "Classe" dans votre fichier FLA sous le panneau des propriétés. Ici, tapez Principale. Il s’agit maintenant du nom de votre classe de document et du nom de votre fichier ActionScript que vous allez créer ensuite..
Ensuite, sélectionnez Fichier> Paramètres ActionScript. Vous devez décocher la case "Déclarer automatiquement les instances d'étape". Cela signifie que vous devez maintenant déclarer manuellement les deux boutons dans le code, ce que nous voulons. (L'emplacement de cette boîte de dialogue peut être différent dans les versions précédentes de Flash. Si vous ne le trouvez pas, utilisez un moteur de recherche.)
Ensuite, il est temps de créer le fichier ActionScript qui contient tout notre code. Cliquez sur Fichier> Nouveau> Fichier ActionScript..
Maintenant, enregistrez ceci sous Main.as, et assurez-vous qu’il se trouve dans le même répertoire que le fichier FLA. Maintenant, les fichiers FLA et ActionScript sont liés!
Commencez par utiliser ce morceau de code comme base:
package import flash.display.MovieClip; classe publique Main étend MovieClip fonction publique Main (): void // Fonction // Classe // Package
J'ai inclus une déclaration d'importation pour MovieClip pour commencer, mais nous ajouterons plus de déclarations au fur et à mesure.
Pour commencer, vous devez déclarer vos 2 boutons en tant que variables. Ceux-ci vont entre Classe publique principale étend MovieClip et avant fonction publique Main ():
public var btn_back: SimpleButton; public var btn_fore: SimpleButton;
Pour que Flash comprenne quoi SimpleButton est, vous devez ajouter ceci avec l'autre déclaration d'importation en haut:
import flash.display.SimpleButton;
Après que vous ayez fait cela, votre code devrait ressembler à ceci:
package import flash.display.MovieClip; import flash.display.SimpleButton; public class Main étend MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; fonction publique Main (): void // Fonction // Classe // Package
L'étape suivante consiste à s'assurer que le clip s'arrête sur la première photo. Pour ce faire, ajoutez simplement un Arrêtez() commande à l'intérieur du fonction publique Main ()
fonction publique Main (): void stop (); //Une fonction
L'étape suivante consiste à ajouter des écouteurs d'événements. Ceux-ci vont à l'intérieur fonction publique Main (), et en dessous de la Arrêtez(); commande que vous venez d'ajouter. Vous devez avoir un écouteur d'événement pour les deux boutons; btn_back et btn_fore, alors commencez par en créer un pour le bouton de retour:
btn_back.addEventListener (MouseEvent.CLICK, onClickBackground);
Créez maintenant un autre écouteur d'événement pour le bouton suivant. Vous devez simplement changer le nom du bouton et le nom de la fonction:
btn_fore.addEventListener (MouseEvent.CLICK, onForeBackground);
Tout d'abord, je référence le nom du bouton btn_back. Ensuite, j'ajoute l'écouteur d'événement via .addEventListener. Entre parenthèses, MouseEvent.CLICK est simplement en lui disant d'écouter pour un clic sur le bouton. Enfin, nous lui disons que, lorsque le bouton est cliqué, il devrait appeler onClickBackground () -- nous allons créer cette fonction ensuite.
Maintenant, comme nous avons utilisé des événements de souris, nous devons placer une instruction d'importation en haut avec les autres instructions pour que Flash comprenne ce que c'est. Ajoutez cette ligne sous les autres importations:
import flash.events.MouseEvent;
Votre code devrait maintenant ressembler à ceci:
package import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events.MouseEvent; public class Main étend MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; fonction publique Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground); // Fonction // Classe // Package
Enfin, deux fonctions publiques doivent être créées pour indiquer aux boutons que nous avons créés quoi faire. Ajoutez-les à l'intérieur du Classe publique principale étend MovieClip, mais en dessous de la fonction publique Main (): void.
Les noms des fonctions doivent correspondre aux noms des écouteurs d'événement. Donc dans ce cas onClickBackground, et onClickForeground:
fonction publique onClickBackground (evt: MouseEvent): void gotoAndStop (2); fonction publique onClickForeground (evt: MouseEvent): void gotoAndStop (1);
À l'intérieur de la fonction, nous devons indiquer à Flash quelle image aller lorsque le bouton est cliqué. La méthode la plus simple consiste à utiliser gotoAndStop (). Le nombre entre parenthèses indique le numéro de la trame vers laquelle Flash ira. Ajoutez simplement le nombre 2 pour le onClickBackground fonction, et le nombre 1 pour le onClickForeground une fonction.
Un exemple complet de code est présenté ci-dessous pour vous aider à comprendre le code ActionScript complet:
package import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events.MouseEvent; public class Main étend MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; fonction publique Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground); // Function fonction publique onClickBackground (evt: MouseEvent): void gotoAndStop (2); fonction publique onClickForeground (evt: MouseEvent): void gotoAndStop (1); // Classe // Package
La seule chose qui reste à faire maintenant est de tester le film. Allez donc dans Contrôle> Tester le film> Tester (ou appuyez sur Ctrl + Entrée). Cela devrait fonctionner parfaitement! Maintenant, tout ce qui reste à faire est de le publier et de le partager sur le Web.!
Vous avez maintenant créé une animation photo de style Lytro! Ceci est juste un exemple d'utilisation de cette technique pour imiter les images de caméra Lytro. Utilisez cette technique pour créer vos propres compositions et effets pour votre portfolio, votre site Web ou votre blog.!
Pour aller plus loin, vous pouvez créer vos propres effets et transitions entre les images pour donner à votre projet une touche personnelle..
Merci de votre lecture et j'espère que vous avez apprécié ce tutoriel. Laissez-moi savoir ce que vous pensez! Voyons maintenant les vôtres. Pop un lien dans les commentaires ci-dessous!
Accentsconagua