Intégration de Scripts dans des Panneaux UI sous After Effects

Créer un panel d'execution de script
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtrisez After Effects CS6 / CC
Revoir le teaser Je m'abonne
Transcription

99,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

99,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

L'objectif de cette vidéo est de vous apprendre à :
- Intégrer des scripts dans des panneaux UI d'After Effects.
- Créer des interfaces personnalisées.
- Automatiser des tâches répétitives.

Découvrez comment intégrer des scripts dans des panneaux UI d'After Effects pour une utilisation simplifiée et personnalisée.

Cette leçon vous guide à travers le processus de création et d'intégration de scripts dans des panneaux UI sous Adobe After Effects. Vous apprendrez à placer correctement vos fichiers de script, à générer des panneaux interactifs, et à personnaliser l'interface de travail en fonction de vos besoins spécifiques. La leçon inclut également des explications détaillées sur la manipulation de variables et la création de boutons pour l'exécution de fonctions scriptées. En suivant ce cours, vous gagnerez en efficacité et en flexibilité dans l'utilisation de vos scripts, ce qui vous permettra de simplifier les tâches courantes et d'améliorer votre productivité.

Voir plus
Questions réponses
Pourquoi est-il important de placer les scripts dans le dossier 'Script UI Panels'?
Cela permet aux scripts d'être automatiquement chargés dans les panneaux UI d'After Effects, facilitant ainsi leur utilisation à chaque démarrage de l'application.
Quelle est la première étape pour créer un panneau UI dans After Effects?
La première étape consiste à placer le fichier JSX dans le dossier 'Script UI Panels' situé dans les fichiers du programme After Effects, afin qu'il soit reconnu par l'application.
Quel est le bénéfice principal d'utiliser des scripts pour personnaliser l'interface d'After Effects?
L'utilisation de scripts permet d'automatiser des tâches répétitives, d'améliorer l'efficacité de travail et de personnaliser l'interface selon les besoins spécifiques de l'utilisateur.
Maintenant que vous êtes devenu un as du script, on aimerait éventuellement dans After Effects pouvoir ici activer notre script non pas via fichier, script, etc. mais via directement un panneau qui serait ancré dans l'interface et donc qui serait totalement dépendant de votre espace de travail. Donc c'est tout à fait possible de créer une fonction en script qui va générer un panneau, sauf qu'il y a une contrainte bien spécifique, c'est que pour pouvoir afficher votre script dans un panneau, il ne faut pas que votre fichier de script soit situé n'importe où. Pour cela, il va falloir obligatoirement que votre fichier de script soit glissé dans le programme Adobe After Effects CS6 Support Files, Script, Script UI Panels. C'est dans ce dossier-là, ici, dans ce cheminement-là bien précis qu'il va falloir glisser votre script qui va ensuite automatiquement être appelé ici dans Fenêtre, tout en bas. Vous voyez que si je lance ce script-là, effectivement il me lance un script qui me permet, alors là je ne l'ai pas loadé au bon moment, je vais pouvoir loader ici cette information-là, comme ceci, mais je vais pouvoir comme ceci modifier à ma guise directement depuis le panneau. Je ne vais pas être obligé d'aller retourner dans le fichier texte pour modifier certaines données. Donc comment réaliser cela directement en code ? N'oubliez pas la première contrainte très importante, vous glissez bien le fichier JSX dans, ici, le dossier script qui se trouve dans Support Files de votre logiciel Adobe After Effects CS6, dans Script UI Panels. Ne le mettez pas dans Script, c'est bien ici qu'il faut le mettre. Donc une fois que vous avez procédé à ceci, on peut retourner dans Extend Script Toolkit. Ici, je repars de ma base, ici, de laquelle on est parti précédemment. Alors je vais l'enregistrer dans Script UI Panels. Je vais l'appeler Formation. Je vais l'enregistrer. Voilà. Donc là, je suis bien sur Formation. Et maintenant, toute modification que je vais réaliser ici va normalement affecter, ici, After Effects. Par contre, si maintenant, vous allez voir, je décide de fermer ce panneau et d'aller dans Fenêtres, je n'ai pas mon script qui apparaît ici. Le mien, je l'ai appelé Formation. Comment ça se fait ? Et bien, tout simplement, c'est au démarrage d'After Effects que les différents panneaux et presets, donc, sont loadés dans After Effects. Il vous faut donc, et vous n'avez pas le choix, fermer After Effects, relancer After Effects. Et c'est bien, vous allez voir, au démarrage, ici, vous avez tout ce qui est loadé. Au démarrage, que les scripts vont être loadés. Donc, on attend, on va relancer notre fichier script. Et maintenant, dans Fenêtres, on a bien Formation. Si je lance Formation à l'heure actuelle, il me lance le fameux script. Donc, c'est un moyen différent d'aller dans... Forcément, il me dit qu'il y a des problèmes. Voilà. C'est un moyen différent d'aller ici, dans Scripts, exécuter le fichier Scripts et aller chercher. Là, il est directement dans Scripts UI Panels. Donc, je vais pouvoir, ici, modifier, ici, l'interface pour générer un panneau et générer une interface totalement personnalisée. Donc, pour ça, il n'y a pas de secret. Il va falloir que vous fouillez un petit peu dans le Scripting Guide d'After Effects pour comprendre, ici, ce que je vais rédiger. En général, on écrit des scripts, on les conserve, et ensuite, on fait du compil-collé. À chaque fois, on ne repart pas du début. Là, pour l'instant, on n'a pas de compil-collé. Donc, on va créer une nouvelle fonction qui va s'appeler Create UI. Et, entre parenthèses, on va lui dire This OBJ. Donc, on va maintenant créer les fameux crochets. Et c'est à l'intérieur, ici, qu'on va créer toutes nos fonctions, on va dire, tout notre code qui va nous permettre de créer, à partir de là, ce que l'on appelle le détail de l'interface. Donc, la première chose qu'on va faire, c'est qu'on va créer, ici, une variable qui va s'appeler MyPanel, et qui va être la fameuse variable qu'on a vue au-dessus, This OBJ, comme ceci. On met un point-virgule. En toute fin, ici, on va lui dire de générer ce fameux panel. Donc, à ce moment-là, il faut lui dire Return MyPanel. Un point-virgule. Et c'est vraiment entre ces deux lignes, ici, qu'on va ensuite rentrer du code. Et à la toute fin, alors là, on n'a plus besoin, ici, de cette fonction, je vais mettre un double slash. Ça transforme, ici, ce que j'avais rédigé en commentaire. Dès que vous mettez un double slash, ça se transforme en vert, ça se transforme en rouge, ça se transforme en vert, ça se transforme en rouge, ça se transforme en vert. Dès que vous mettez un double slash, ça se transforme en vert. C'est un commentaire pour vous permettre d'annoter, comme bon vous semble, ici, vous voyez, j'avais commencé avec slash variable, cette fonction lance la lecture du fichier, etc., pour vous y retrouver plus rapidement, ou pour, si vous filez le script à un autre graphiste, lui permettre de faire les modifications, le cas échéant. Donc, une dernière chose, ici, ensuite, à bien indiquer, c'est qu'on va créer une dernière variable qui va s'appeler MyToolsPanel, et c'est là qu'on va lui dire qu'on va créer un lien vers la fameuse fonction de génération de l'interface, comme ceci. Donc là, encore une fois, je ne vais pas vous détailler tout le code, je ne vous apprends pas à programmer, je vous apprends ici à utiliser plutôt le code pour After Effects, ce qui est un petit peu différent. Donc, n'hésitez pas à potasser le scripting guide, tout ça est parfaitement écrit et classé par différentes catégories. Donc, à partir de là, maintenant, si je sauvegarde et que je vais maintenant lancer, ici, mon script de formation, il me génère un panneau comme ceci, que je vais pouvoir ancrer, d'ailleurs, hop, ici. Donc, maintenant, je vais le fermer. Donc, maintenant, ce panneau n'attend qu'une seule chose, c'est que je puisse lui rajouter certaines fonctionnalités, exactement comme je l'ai fait ici, c'est-à-dire, déjà, on va s'occuper d'inclure un cadre blanc, comme ceci. En réalité, on va créer un deuxième panneau dans ce grand panneau gris, avec la mention exécution du script. Donc, comment est-ce qu'on réalise ceci ? On va retourner dans l'Extend Script Toolkit, et on va rajouter, ici, la création d'une variable. On va créer, ici, une variable qui va s'appeler executionScriptPanel. Donc, on va réellement créer un panneau, comme ceci, et on va lui dire de créer sur MyPanel, et entre parenthèses, on va lui demander de créer un nouveau panneau. Donc, jusque-là, tout va bien, sauf que maintenant, il va falloir lui donner des dimensions, ça ne se fait pas de manière automatique. Donc, pour ça, il va falloir mettre entre crochets quatre valeurs bien précises. Moi, je vais d'abord les rentrer, après avoir fait quelques tests, et je vais vous montrer ensuite, directement, à quoi correspondent ces différentes valeurs. Et ensuite, séparé par une virgule, ici, on va lui mettre exactement ce qu'on aimerait voir mentionné dans ce fameux cadre. Donc, exécution du script, comme ceci. Donc, à partir du moment où on en est là, on rajoute un point virgule, ici, on sauvegarde, et on va aller voir ce qui se passe. On retourne ici, on lance formation, et effectivement, vous avez un cadre qui s'est affiché. Alors, on avait rentré comme valeurs 10, 20, 190 et 65. Alors, à quoi ça correspond ? Vous allez lui donner les fameuses limites par rapport, ici, à la taille du panneau sur lequel il est écrit exécution du script. 10, ça correspond à quoi ? Ça correspond, ici, au décalage par rapport au bord gauche du fameux panneau gris. Donc, on va, hop, à 10. Après, il faut lui indiquer le point le plus haut, ici, de ce panneau, et le plus à gauche. Donc, nous, on a mis 20. Donc, 20 par rapport à ici. Ça fait bien 10 depuis le côté gauche et 20 depuis le haut. Donc là, on a mis le point de départ. Ensuite, on a rentré la valeur 190 pour déterminer la longueur du panneau. Et ensuite, on a déterminé 65. 65, ça correspond à quoi ? Ça correspond à la valeur depuis le haut du panneau, ici, pour déterminer, ici, la taille globale. Donc, vous déterminez, ici, le point de départ, la largeur et le point d'arrivée. Et ça vous crée votre panneau. Donc, voilà les différentes valeurs qu'on a pu rentrer dans les différents attributs du code. Donc, on va retourner dans l'externe script Toolkilt et on va créer, maintenant, un bouton pour appeler, ici, le fameux script, du moins la fenêtre de navigation. Ici, maintenant, on va créer une nouvelle variable qu'on va appeler « executionButton », par exemple, comme ceci. Et là, cette fois-ci, on ne va plus lui dire « myPanel », mais maintenant qu'on a créé ce panneau-là, on va faire un Ctrl-C, Ctrl-V, on va lui dire « executionScriptPanel ». On va ajouter à ce panneau. J'ai fait une petite bêtise. Voilà, comme ceci. Et là, on va faire la même chose. On va lui donner un nom. Enfin, on va plutôt lui donner un attribut. Donc, qu'est-ce qu'on va rajouter ici ? Un bouton. Quelle taille au niveau de ce bouton ? De la même manière, en termes de crochet, on va lui dire 30, 10. Non, on va le faire beaucoup plus petit. On va lui dire 10, 10. En termes de largeur, 165. Et ensuite, en hauteur, 30. Et ce n'est pas fini. On va lui mettre du texte dessus. Donc, entre guillemets, on va mettre dessus « exécuter le script ». Voilà, comme ceci, point-virgule. Donc, normalement, là, on est pas mal. On va sauvegarder. On va aller voir ici ce que ça donne. Alors là, il faut toujours fermer ici le panneau et le relancer. C'est comme ça que ça se met à jour. Et effectivement, vous voyez que maintenant, on a créé un bouton qui, pour l'instant, ne sert absolument à rien. Mais vous voyez que maintenant, on a créé une zone totalement interactive. Donc, on va maintenant lier ce bouton à la fameuse fonction qui permet de lancer le script. On va retourner dans l'Extern Script Toolkit. Et ici maintenant, voilà, on va faire un petit peu de vent ici, comme ceci. Maintenant, on va, pour lui dire qu'il faut appeler la fameuse fonction qu'on avait laissée en bas « lecturefichier.txt », on va lui dire « exécution bouton.onclick est égale à lecturefichier.txt ». Donc, souvenez-vous, ça, c'est la fonction en question qu'on appelait tout à l'heure. Donc, à partir du moment où vous générez ce type de chose, normalement, ça devrait fonctionner. Écoutez, c'est ce qu'on va vérifier parce que là, vous avez bien stipulé que, quand vous cliquez sur le bouton, ça appelle la fonction « lecturefichier.txt ». Donc ça, on peut le supprimer. On sauvegarde bien. On retourne ici. On vire, on va fermer le groupe, comme ceci, voilà. On va rappeler maintenant notre fameux script. Et effectivement, vous voyez, quand on clique dessus, ça nous génère la fameuse fenêtre de navigation. On va lui dire « info.ba.txt », on valide. Et effectivement, il prend en compte les valeurs qu'il y a dans le fichier texte. Donc maintenant, vous avez toutes les cartes en main, avec un gros bouton qui s'appelle le « scripting guide » quand même, et avec l'aide d'Internet. Vous avez toutes les cartes en main pour générer ici des panneaux et surtout générer des scripts qui vont vous permettre de tout automatiser. Dans la partie qui suit, je vais vous montrer le script finalisé et commenté, et apporter quelques commentaires en live sur certaines parties du script.

Programme détaillé de la formation

Nos dernières formations After Effects
  • After effects - Atelier effet CC Repetile
    Découvrir
    L'effet "CC Repetile" est un outil puissant pour repousser les limites de votre créativité dans After Effects. Ce tutoriel vous guide à travers des techniques et astuces pour tirer le meilleur parti de cet effet, en vous aidant à enrichir vos compositions vidéo de manière unique et professionnelle.
    8min 3 leçons
  • After effects - Atelier effet Strech
    Découvrir
    L'effet "Stretch" est un outil essentiel pour étirer et manipuler les éléments visuels dans After Effects. Cette formation vous apprend à utiliser cet effet pour créer des animations uniques et des transitions fluides, ajoutant une nouvelle dimension à vos compositions vidéo.
    26min 13 leçons
  • After Effects - Atelier effet Displacement
    Découvrir
    L'effet "Displacement" est un outil puissant pour déformer les éléments visuels dans After Effects. Cette formation vous apprend à utiliser cet effet pour créer des distorsions dynamiques et des transitions saisissantes, ajoutant une nouvelle dimension à vos compositions vidéo.
    10min 4 leçons
  • After Effects - Atelier effet Echo
    Découvrir
    L'effet "Echo" est un outil intéressant pour ajouter des répétitions et des échos visuels dans After Effects. Cette formation vous montre comment utiliser cet effet pour créer des mouvements fluides et des effets de traînées, ajoutant une nouvelle dimension à vos compositions vidéo.
    10min 7 leçons
  • After Effects - Ateliers animations typographiques
    Découvrir
    Plongez dans le monde du motion design avec notre série d'ateliers pratiques sur After Effects, conçue pour vous initier aux techniques avancées d'animation typographique. En une heure de formation intensive, maîtrisez des outils clés tels que CC Repetile, Echo, et les techniques de Displacement et Stretch pour donner vie à vos textes.
    55min 27 leçons