Construire une disposition semblable à une grille à l'aide d'expressions de base

La première chose que vous devriez garder à l'esprit est qu'il n'y a pas qu'une seule bonne façon de faire les choses. Lorsque vous travaillez avec des expressions, essayez d’acquérir des connaissances de base sur la syntaxe à l’aide du guide de référence ou sur Internet, pour pouvoir utiliser votre façon de penser et écrire le code avec vos propres connaissances. C'est une bonne façon d'apprendre en essayant, en faisant des erreurs et en trouvant les réponses à vos problèmes.


Étape 1


Dans cet exemple, j'ai décidé de construire la grille comme ceci:

C’est la partie la plus importante, où vous devez décider à quoi cela va ressembler, car toutes vos expressions dépendront de la structure des calques. Dans ce cas, vous pouvez vous rendre compte que la largeur du calque "A" plus la largeur du calque "B" sont égales à 1920 px ou à 100% de la largeur de la composition..

Étape 2


Commencez par choisir Calque / Nouveau / Solide ou utilisez la touche de raccourci: Commande + Y (Mac) ou Ctrl + Y (PC). Cela ouvrira la boîte de dialogue Paramètres solides. Allez-y et nommez-le "A" et cliquez sur OK. Vous n'avez pas à vous soucier de la couleur ou de la taille pour l'instant car nous allons utiliser des expressions pour le faire. Dans les fichiers de projet, vous réaliserez que j'ai utilisé des couches de forme. Pour cela, cela ne fait aucune différence. Si vous souhaitez utiliser des calques de forme, assurez-vous qu'aucun calque n'est sélectionné et double-cliquez sur l'icône de forme dans la barre d'outils. Il créera un calque de forme ayant exactement la même taille que le comp.


Étape 3


Répétez cette étape cinq fois de plus (ou avec des couches de solides ou de formes) en les nommant dans l’ordre alphabétique: "B", "C"? Nous devons maintenant repositionner les points d'ancrage afin que les expressions fonctionnent correctement. Disposez-les comme sur l'image:


Étape 4


Il est maintenant temps de mettre nos logiques au travail. Ce que nous voulons faire, c'est pouvoir créer une grille dans laquelle nous pouvons modifier la taille des cellules tout en maintenant un écart de taille fixe entre elles. Pour ce faire, nous devons rassembler quelques idées. Tout d’abord, il convient de garder à l’esprit que, comme je l’ai déjà dit, la couche "A" largeur + couche "B" largeur sera toujours égale à la largeur de la maquette qui, dans ce cas, est de 1920 px. De la même manière, la hauteur de la couche "A" plus la hauteur de la couche "C" ou de la couche "D" sera égale à la hauteur de la maquette, dans ce cas égale à 1080 px. Deuxièmement, pour contrôler les largeurs et les hauteurs, nous utiliserons les objets nuls avec l’effet Curseur utilisé, afin de pouvoir regrouper les commandes d’animation en quelques couches seulement. Nouvel / Null Object ou en appuyant sur Commande + Option + Maj + Y
(Mac) ou Ctrl + Maj + Alt + Y (PC). Nommez-le "SLIDER A B" et cliquez sur OK..



Étape 5


Maintenant, allez dans Effets / Contrôle d’expression / Contrôle du curseur et choisissez-le pour créer un contrôle du curseur que vous nommerez "WIDTH +". Répétez cette étape et nommez le deuxième curseur "WIDTH-". Vous utiliserez
"WIDTH +" pour contrôler la largeur du calque "A" et
"WIDTH-" pour contrôler la largeur du calque "B". Établissons un petit espace entre les deux couches en ajoutant une expression sur le curseur d'effet "LARGEUR", en maintenant la touche Alt + enfoncée, cliquez sur le chronomètre du curseur pour l'effet "LARGEUR-" dans le panneau Montage:


99.5-effect ("WIDTH +") ("Slider");




Lorsque la valeur du curseur passe de 0 à 100, cette expression gardera les couches "A" et "B" éloignées l’une de l’autre de 0,5% de la largeur de la composition..


Étape 7


Créez un autre objet Null et nommez-le "SLIDER A C D", appliquez l'effet Slider et nommez-le "HEIGHT +". Cette couche sera responsable des hauteurs "A", "C" et "D". Appliquez l'effet de contrôle de curseur une fois de plus et nommez-le.
"HEIGHT -" .Alors Alt + cliquez sur le chronomètre du curseur "HEIGHT-" et tapez l'expression qui gardera l'espace entre les cellules de la grille:


99.3-effect ("HEIGHT +") ("Slider");



Dans ce cas, nous établissons un écart de 0,7% afin de compenser le format de composition et de rendre les écarts verticaux et horizontaux identiques..


Étape 8


Tapons maintenant les expressions du calque "A". Sélectionnez le calque "A" et appuyez sur "S" sur le clavier. Cela montrera la propriété scale pour cette couche. Maintenez la touche "Alt" et cliquez sur le chronomètre de la balance. Cela activera les expressions pour la propriété scale. Tapez:


wscale = thisComp.layer ("SLIDER AB"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT +") ("Slider"); [wscale , hscale];



La première ligne créera une variable nommée "wscale" qui sera équivalente à la valeur imputée sur l'effet "WIDTH +" du curseur sur le calque "Slider AB". Le second calque définira la variable "hscale", qui sera égale à la valeur contenue dans le curseur "HEIGHT +" sur le calque "SLIDER ACD". La troisième ligne définit les variables sur les coordonnées x et y.


Étape 9


Créez un autre objet Null et nommez-le "SLIDER B E F", appliquez l'effet Slider et nommez-le "HEIGHT +". Cette couche sera responsable des hauteurs "A", "C" et "D". Appliquez l'effet de contrôle de curseur une fois de plus et nommez-le.
"HEIGHT -" .Alors Alt + cliquez sur le chronomètre du curseur "HEIGHT-" et tapez l'expression qui gardera l'espace entre les cellules de la grille:


99.3-effect ("HEIGHT +") ("Slider");



Tapons maintenant les expressions de la couche "B". Sélectionnez le calque "B" et appuyez sur "S" sur le clavier. Cela montrera la propriété scale pour cette couche. Maintenez la touche "Alt" et cliquez sur le chronomètre de la balance. Cela activera les expressions pour la propriété scale. Tapez:


wscale = thisComp.layer ("SLIDER AB"). effect ("WIDTH -") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT +") ("Slider"); [[ wscale, hscale];



À la fin de ces étapes, vous obtiendrez les couches "A" et "B" qui fonctionnent correctement.


Étape 10


Il est temps de réfléchir aux couches "C" et "D", "E" et "F". Maintenant, c'est la partie la plus délicate. Pour commencer cette étape, créons un autre objet Null, appelons-le "SLIDER C D" et appliquons deux fois l'effet Slider Control et nommons le premier.
"WIDTH +" et le second "WIDTH-". Ce calque va travailler pour définir les valeurs pour les largeurs des calques "C" et "D". Alt + cliquez sur le chronomètre pour l'effet "WIDTH-" et tapez:


99.5-effect ("WIDTH +") ("Slider");



Étape 11


Avec le calque "C" sélectionné, appuyez sur la touche "S" du clavier, puis appuyez sur la touche Alt + cliquez sur le chronomètre de la propriété d'échelle pour insérer une expression:


wscale = thisComp.layer ("SLIDER CD"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT -") ("Slider"); [[ wscale, hscale];


Ok, ce serait une hypothèse sur la façon dont ces deux couches seraient réparties à l'écran si et seulement si nous considérons que la largeur de la couche "C" plus la largeur de la couche "D" seraient égales à 100% de la largeur de la composition. Comme ce premisse n'est pas vrai, car nous dépendons de la valeur que nous obtenons du calque "SLIDER A B", nous devrions changer l'expression en:


wscale = thisComp.layer ("SLIDER CD"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT -") ("Slider"); (thisComp.layer ("A"). transform.scale [0] == 100) [wscale, hscale]; else [(thisComp.layer ("SLIDER AB"). effect ("WIDTH +") (" Slider ")) * thisComp.layer (" SLIDER CD "). Effect (" WIDTH + ") (" Slider ") / 100-.25, hscale];


Cela signifie maintenant que ce n’est que lorsque la propriété "x" de la couche "A" est égale à 100 que le résultat sera celui défini sur les variables wscale et hscale. Sinon, la coordonnée "x" sera définie en considérant l'espace défini sur l'effet "SLIDER A B" "WIDTH +". Sur la troisième ligne, nous nous référons à la coordonnée "x" en utilisant le nombre 0 entre les crochets. "0" correspondra à la coordonnée "x", "1" à la coordonnée "y" et "2" à la coordonnée "z". Lorsque vous comparez deux valeurs différentes de la ligne 3, condition "if", utilisez deux signes égaux "==".




Étape 12


Pour calculer la hauteur et la largeur du calque "D", alt + clic sur le chronomètre de la propriété d'échelle du calque et insérez le code:



wscale = thisComp.layer ("SLIDER CD"). effect ("WIDTH -") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT -") ("Slider"); if (thisComp.layer ("A"). transform.scale [0] == 100) [wscale, hscale]; else [(thisComp.layer ("SLIDER AB"). effect ("LARGE +") ( "Slider")) * (100-thisComp.layer ("SLIDER CD"). Effect ("WIDTH +") ("Slider")) / 100-.25, hscale];


Notez que sur la ligne 6, nous calculons les valeurs en utilisant simplement la valeur du curseur "WIDTH +". C'est parce que nous ne voulons pas utiliser la valeur de
"WIDTH-" car il inclut la taille de l'espace.



Étape 13


Terminé cette étape, vous remarquerez que quelque chose ne va pas. La couche "D" n'est pas positionnée correctement. Pour le positionner au bon endroit, nous devons insérer un code le connectant à la limite droite du calque "A". Donc, tapez ce code sur la propriété position:


x = thisComp.width * thisComp.layer ("A"). transform.scale [0] / 100; [x, 0];


Cette expression convertit simplement la taille de la couche "A" de pixels en pourcentage, afin de nous permettre d'utiliser cette valeur avec la propriété scale. Comme le point d'ancrage de ce calque se trouve dans le coin supérieur droit, cette expression placera le calque à la bonne position..



Il est temps de nous concentrer sur les calques "E" et "F". C’est essentiellement la même logique que nous utilisions auparavant avec les couches "C" et "D". Commencez à créer un nouvel objet Null et appelez-le "SLIDER E F". Appliquez deux fois l'effet Slider Control et nommez le premier.
"WIDTH +", et le second "WIDTH-". Alt + clic la propriété scale sur le calque "F".



Nous allons d'abord traiter avec la couche "F" car c'est celle située en bas à droite de la composition, et nous n'avons pas besoin d'insérer de code pour la position..


wscale = thisComp.layer ("SLIDER EF"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT -") ("Slider"); (thisComp.layer ("B"). transform.scale [0] == 100) [wscale, hscale]; else [(100-thisComp.layer ("SLIDER AB"). effect ("WIDTH +") ("Slider")) * thisComp.layer ("SLIDER EF"). Effect ("WIDTH +") ("Slider") / 100-.5, hscale];



N'oubliez pas de définir l'écart sur le curseur "Slider EF" "WIDTH-":


99.5-effect ("width =") ("Slider");


Étape 14


Aller au calque
"E". Sur la propriété scale, alt + click le chronomètre et tapez:


wscale = thisComp.layer ("SLIDER EF"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT -") ("Slider"); (thisComp.layer ("B"). transform.scale [0] == 100) [wscale, hscale]; else [(100-thisComp.layer ("SLIDER AB"). effect ("WIDTH +") ("Slider")) * (100-thisComp.layer ("SLIDER EF"). Effect ("WIDTH +") ("Slider")) / 100 à .5, hscale];



Étape 15


Maintenant, allez à la propriété position et tapez le code:


Bscalex = thisComp.width * thisComp.layer ("B"). Transform.scale [0] /100;x=thisComp.width-Bscalex; [x, thisComp.height];


Ce code obtiendra le calque "E" à la bonne position en calculant la largeur de la composition moins la valeur de la taille du calque "B".



Étape 16


Ok, maintenant la grille est prête. Il y a juste quelques choses que nous pouvons faire maintenant pour le rendre plus facile à utiliser, comme serrer les valeurs des curseurs.


Pour mieux visualiser les contrôles, j'ai créé d'autres objets nuls que j'ai nommés d'après le "trou" qu'ils représentent visuellement. Ensuite, j'ai inséré le code de serrage (limite la valeur entre deux autres valeurs) en définissant et en vérifiant son fonctionnement et fourni avec cet ensemble:



Objet nul "VERTICAL1": représente la première ligne verticale de gauche à droite de la grille. J'ai inséré ce code dans l'effet Slider Control que j'ai appliqué sur celui-ci:


pince (valeur, 1,99);


Objet nul "VERTICAL2": représente la deuxième ligne verticale de la grille. Insérer ce code:


pince (valeur, -1,100);


Objet nul "VERTICAL3": représente la troisième ligne verticale de la grille. Insérer ce code:


pince (valeur, 1,99);


Objet nul "HORIZONTAL1": représente la première ligne verticale du haut vers le bas de la grille. Insérer ce code:


pince (valeur, 1 100);


Objet nul "HORIZONTAL2": représente la deuxième ligne verticale du haut vers le bas de la grille. Insérer ce code:


pince (valeur, 1 100);



Associons-les maintenant aux curseurs "WIDTH +" et "HEIGHT +" afin que cela fonctionne. Faisons-le avec le fouet. Cela devrait ressembler à ceci:



Étape 17


Tout est réglé, il est temps d'insérer les images. Sélectionnez le numéro d'image 1 dans le panneau de projet. Cliquez dessus et faites-le glisser sous le calque "A" du panneau Montage. Choisissez Alpha Mat "A" dans le menu déroulant Track Matte. Répétez cette procédure pour les couches "B",
"C", "D", "E", "F", en plaçant la photo à votre guise. Dans mon cas je les ai mis comme l'image:



Étape 18


Pour créer un mouvement, je définis des images clés pour certaines des propriétés de position et d’échelle des couches d’image. Permet d'animer la grille. N'hésitez pas à animer comme bon vous semble, à définir des images clés et à tester le film.


Étape 19


J'ai ajouté quelques touches finales à la composition pour la rendre meilleure. J'ai d'abord créé un calque de réglage en choisissant Calque / Nouveau / Calque de réglage ou en cliquant sur Commande + Option + Y (Mac) / Ctrl + Alt + Y (PC), puis j'ai appliqué le filtre Flou rapide sous Effet / Flou et Netteté / Flou rapide. Vous pouvez le trouver plus simplement en saisissant le nom de l'effet dans le panneau Effets et paramètres prédéfinis. Réglez le flou sur 1,0.



Étape 20


Créez ensuite un solide noir, appliquez-y un masque ellipse en double-cliquant sur l'icône Masque Ellipse de la barre d'outils. Appuyez sur "MM" sur le clavier pour afficher les propriétés du masque ou sur "F" pour afficher uniquement la propriété Masque Feather et réglez-le sur 250. Si vous venez de révéler la propriété Masque Feather, appuyez sur "TT" sur le clavier pour afficher le Masque Opacité, puis définissez-la sur 80%. Choisissez Soustraire dans le menu déroulant Masque. Cela créera une vignette qui mettra davantage l'accent sur ce qui se passe au centre de l'écran..



Étape 21


En plus de tout, plaçons une texture de papier, appelée "bg". Positionnez-le comme vous le souhaitez et définissez le mode de calque sur Multiplier dans le menu déroulant..



Étape 22


Placez maintenant le logo AETUTS +. Créez une nouvelle composition, nommez-le LOGO et faites-y glisser l'image du logo. Sous ce calque, créez un solide noir et définissez son opacité sur 35%. Appliquez l'effet Ramp en choisissant Effect / Generate / Ramp et créez un dégradé du noir au blanc qui devrait ressembler à ceci:




Étape 23


Maintenant, pour l’insérer, dupliquez le calque "F" sur la grille "GRID" en le divisant en deux autour de 0; 00; 03; 13 en plaçant l’indicateur d’heure actuelle sur cette heure et en appuyant sur Commande + Maj + D (MAC) ou Ctrl + Maj + D (PC) sur le clavier. Placez la nouvelle composition créée
"LOGO" sous la couche divisée "F2". Définissez le cache de la piste sur Alpha Matte "F2" sur le calque "LOGO". Choisissez le mode AJOUTER. Positionnez-le et redimensionnez-le un peu pour centrer l'espace de la cellule de grille.





Étape 24


Etape suivante, créez une nouvelle composition, nommez-la AETUTS_EXPRESSIONS_TUTORIAL et cliquez sur OK. Ajoutez-y la composition de la grille. Appliquons des effets sonores. Glisser-déposer sur la composition du fichier
"Timesusp-Cosmic_D-190.wav". À l'heure 0; 00; 05; 16, insérez une image clé pour la propriété Niveaux audio. Laissez la valeur telle quelle, sautez à 0; 00; 05; 26 et changez la valeur à -48.00dB. Glissez et déposez à l’heure 0; 00; 02; 00 le deuxième fichier audio nommé
"Eerie_sp-Cosmic_D-191".



Conclusion


Maintenant, visionnez le film. Cliquez sur Maj + 0 (à partir du pavé numérique) pour en avoir un aperçu. Si vous le souhaitez, vous pouvez activer le flou de mouvement pour la composition. N'oubliez pas que si vous souhaitez que Motion Blur fonctionne, vous devez adapter le bouton Motion Blur aux calques sur lesquels vous souhaitez appliquer l'effet. Dans ce cas, lorsque nous utilisons des compositions imbriquées, nous devons également activer le bouton Flou directionnel dans la composition GRID et la composition Logo. Vous pouvez changer cela en modifiant les préférences et en activant les changements affectant les compositions imbriquées dans la catégorie Préférences générales. Ce type d’animation basée sur les expressions est utile lorsque vous avez beaucoup de travail répétitif au sein de votre projet et que vous souhaitez le simplifier en écrivant ce type de code. J'ai apporté quelques modifications finales pour que l'apparence soit la meilleure possible, comme vous pouvez le voir sur l'aperçu final du film et sur les fichiers du projet. J'ai utilisé celui-ci dans un grand projet où je devais animer beaucoup de photos sur différents sujets. Dans cet exemple, vous pouvez jouer beaucoup avec le minutage et la construction générale de l'image à l'écran. Essayez toujours des choses différentes!



Images Creative Commons: 1.jpg http://www.flickr.com/photos/aigle_dore/5854362904/sizes/l/in/photostream/
2.jpg http://www.flickr.com/photos/structures-nyc-photos/5601731544/sizes/o/in/photostream/
3.jpg http://www.flickr.com/photos/vincentjoly/3923658550/sizes/o/in/photostream/
4.jpg http://www.flickr.com/photos/twicepix/2181066232/sizes/o/in/photostream/
5.jpg http://www.flickr.com/photos/tsuda/235922699/sizes/o/in/photostream/
6.jpg http://www.flickr.com/photos/neilspicys/2348877473/sizes/o/in/photostream/
Sons téléchargés sur Flashkit Auteur: Cosmic Dreamer http://www.cosmcidreamer.be