Guide d'utilisation Annuler

Utiliser des expressions pour créer des listes déroulantes dans les modèles d’animations graphiques

  1. Guide de lʼutilisateur dʼAfter Effects
  2. Versions Beta
    1. Présentation du programme Beta
    2. Accueil After Effects Beta
    3. Fonctionnalités de la version Beta
      1. Panneau Propriétés (Beta)
  3. Prise en main
    1. Prise en main dʼAfter Effects
    2. Nouveautés dʼAfter Effects
    3. Notes de mise à jour | After Effects
    4. Configuration requise pour After Effects
    5. Raccourcis clavier dans After Effects
    6. Formats de fichier pris en charge | After Effects
    7. Recommandations matérielles
    8. After Effects pour puce Apple
    9. Planification et configuration
    10. Configuration et installation
  4. Espaces de travail
    1. Eléments généraux de lʼinterface utilisateur
    2. Familiarisation avec lʼinterface dʼAfter Effects
    3. Workflows
    4. Espaces de travail, panneaux et visualiseurs
  5. Projets et compositions
    1. Projets
    2. Notions de base relatives aux compositions
    3. Précomposition, imbrication et prérendu
    4. Affichage dʼinformations détaillées sur les performances avec le Profileur de composition
    5. Moteur de rendu de composition CINEMA 4D
  6. Importation de métrage
    1. Préparation et importation dʼimages fixes
    2. Importation à partir dʼAfter Effects et dʼAdobe Premiere Pro
    3. Importation et interprétation vidéo et audio
    4. Préparation et importation de fichiers images 3D
    5. Importation et interprétation de métrages
    6. Utilisation des métrages
    7. Détecter les points de montage à l’aide de la détection de montage de scène
    8. Métadonnées XMP
  7. Texte et images
    1. Texte
      1. Mise en forme des caractères et panneau Caractère
      2. Effets de texte
      3. Création et modification des calques de texte
      4. Mise en forme des paragraphes et panneau Paragraphe
      5. Extrusion de calques de texte et de forme
      6. Animation de texte
      7. Exemples et ressources dʼanimation de texte
      8. Modèles Live Text
    2. Animations graphiques
      1. Utilisation de modèles dʼanimations graphiques dans After Effects
      2. Utilisation des expressions pour créer des listes déroulantes dans les modèles dʼanimations graphiques
      3. Utilisation des propriétés essentielles pour créer des modèles dʼanimations graphiques
      4. Remplacement d’images et de vidéos dans les modèles dʼanimations graphiques et les propriétés essentielles
  8. Dessin, peinture et tracés
    1. Présentation des calques de forme, des tracés et des images vectorielles
    2. Outils de peinture : Pinceau, Cloner et Gomme
    3. Comment effiler les contours de forme
    4. Attributs de forme, opérations de peinture et opérations de tracé pour les calques de forme
    5. Utilisation de lʼeffet de forme Décaler les tracés pour modifier des formes
    6. Création de formes
    7. Création de masques
    8. Suppression dʼobjets de vos vidéos avec le panneau Remplissage dʼaprès le contenu
    9. Roto-pinceau et Améliorer le cache
  9. Calques, marqueurs et caméra
    1. Sélection et disposition de calques
    2. Modes de fusion et styles de calques
    3. Calques 3D
    4. Propriétés du calque
    5. Création de calques
    6. Gestion des calques
    7. Repères de calque et repères de composition
    8. Caméras, lumières et points ciblés
  10. Animation, images clés, suivi de cible et incrustations
    1. Animation
      1. Principes de base de l’animation
      2. Animation avec les outils Marionnette
      3. Gestion et animation de tracés de forme et de masques
      4. Animation de formes Sketch et Capture à lʼaide dʼAfter Effects
      5. Outils dʼanimation divers
      6. Utilisation dʼanimations orientées données
    2. Image clé
      1. Interpolation des images clés
      2. Définition, sélection et suppression dʼimages clés
      3. Modification, déplacement et copie dʼimages clés
    3. Suivi de cible
      1. Suivi et stabilisation du mouvement
      2. Suivi du visage
      3. Suivi de masque
      4. Référence de masque
      5. Vitesse
      6. Extension temporelle et remappage temporel
      7. Code temporel et unités temporelles
    4. Masquage
      1. Incrustations
      2. Effets de masquage
  11. Transparence et montage
    1. Présentation et ressources du montage et de la transparence
    2. Couches alpha, masques et caches
  12. Réglage de la couleur
    1. Principes de base de la couleur
    2. Utilisation de lʼextension Thèmes Adobe Color
    3. Gestion des couleurs
    4. Effets de correction colorimétrique
  13. Effets et animations prédéfinies
    1. Présentation des effets et animations prédéfinies
    2. Liste dʼeffets
    3. Effets de simulation
    4. Effets esthétiques
    5. Effets audio
    6. Effets de déformation
    7. Effets de perspective
    8. Effets de couches
    9. Effets de rendu
    10. Effets de transition
    11. Effet Réparation dʼobturateur déroulant
    12. Effets de flou et de netteté
    13. Effets de couches 3D
    14. Effets Utilité
    15. Effets de cache
    16. Effets de bruit et de grain
    17. Effet Conservation des détails-Amélioration
    18. Effets obsolètes
  14. Expressions et automatisation
    1. Expression
      1. Principes de base des expressions
      2. Compréhension du langage dʼexpression
      3. Utilisation des options pour expressions
      4. Différences de syntaxe entre le moteur dʼexpressions JavaScript et lʼancien moteur dʼexpressions ExtendScript
      5. Modification des expressions
      6. Erreurs dans les expressions
      7. Utilisation de lʼéditeur dʼexpressions
      8. Utilisation d’expressions pour accéder aux propriétés du texte et les modifier
      9. Référence au langage dʼexpression
      10. Exemples dʼexpressions
    2. Automatisation
      1. Automatisation
      2. Scripts
  15. Vidéo immersive, VR et 3D
    1. Création dʼenvironnements VR dans After Effects
    2. Application d’effets de vidéo immersive
    3. Outils de composition pour les vidéos VR/360
    4. Suivi du mouvement de la caméra 3D
    5. Utilisation de lʼespace de conception 3D
    6. Widgets de transformation 3D
    7. En faire plus avec l’animation 3D
    8. Aperçu des modifications apportées aux conceptions 3D en temps réel avec le moteur en temps réel
    9. Ajout de Responsive Design à vos images
  16. Vues et prévisualisations
    1. Prévisualisation
    2. Prévisualisation vidéo à lʼaide de Mercury Transmit
    3. Modification et utilisation des vues
  17. Rendu et exportation
    1. Notions de base relatives au rendu et à lʼexportation
    2. Exportation dʼun projet After Effects en tant que projet Adobe Premiere Pro
    3. Conversion de films
    4. Rendu multi-images
    5. Rendu automatisé et rendu en réseau
    6. Rendu et exportation dʼimages fixes et de séquences dʼimages fixes
    7. Utilisation du codec GoPro CineForm dans After Effects
  18. Utilisation dʼautres applications
    1. Dynamic Link et After Effects
    2. Utilisation dʼAfter Effects et dʼautres applications
    3. Synchronisation des paramètres dans After Effects
    4. Bibliothèques Creative Cloud dans After Effects
    5. Plug-ins
    6. CINEMA 4D et Cineware
  19. Collaboration : Frame.io et Projets d’équipe
    1. Collaboration dans Premiere Pro et After Effects
    2. Frame.io
      1. Installation et activation de Frame.io
      2. Utilisation de Frame.io avec Premiere Pro et After Effects
      3. Foire aux questions
    3. Projets dʼéquipe
      1. Prise en main des projets d’équipe
      2. Créer un projet d’équipe
      3. Collaborer sur les projets d’équipe
  20. Mémoire, stockage et performances
    1. Mémoire et stockage
    2. Amélioration des performances
    3. Préférences
    4. Configuration requise du GPU et du pilote GPU pour After Effects

Créez des modèles d’animations graphiques avec des listes déroulantes qui permettent aux utilisateurs de les personnaliser dans Premiere Pro.

Option de menu déroulant

Lorsque vous créez un modèle d’animations graphiques (MOGRT), vous pouvez conserver ses propriétés flexibles et permettre aux éditeurs de le personnaliser dans Premiere Pro. Vous pouvez y parvenir en créant des curseurs et des cases à cocher. Vous pouvez également les créer à l’aide de listes déroulantes comportant différentes options.

La création de listes déroulantes est avantageuse dans la mesure où elle offre plus d’options de menu et facilite l’expérience de montage des éditeurs dans Premiere Pro. Vous pouvez enregistrer ces paramètres d’options de liste déroulante en tant que modèle et les utiliser plus tard pour différents projets et compositions.

Différentes options de texte affichées lors de l’utilisation des listes déroulantes dans After Effects
Différentes options de texte affichées lors de l’utilisation des listes déroulantes dans After Effects

Pourquoi créer des listes déroulantes

Vous pouvez mettre à disposition des curseurs et des cases à cocher comme options de montage aux éditeurs de Premiere Pro, mais ils peuvent parfois être moins intuitifs et plus chronophages. Dans de tels cas, des listes déroulantes peuvent s’avérer utiles. Utilisez-les pour permettre à un éditeur Premiere Pro de choisir parmi :

 Une sélection de thèmes de couleur : par exemple, vous pouvez ajouter une liste déroulante pour un groupe de couleurs que vous souhaitez utiliser pour un titre de film.

 Différentes positions ou conceptions : par exemple, ajoutez une liste déroulante pour la position d’un tiers inférieur comme gauche ou droite.

 Des options d’animation : par exemple, ajoutez une liste déroulante pour sélectionner différentes durées d’animation.

 Des options de texte ou de ressources : par exemple, ajoutez une liste déroulante pour les différents jours de la semaine. Cela évite de retaper le texte source, et réduit également le risque d’erreurs en post-production.

Configurer une option de liste déroulante

Utilisez l’effet Option de menu déroulant pour créer des listes déroulantes. Pour comprendre les rouages de cette fonctionnalité, suivez les étapes suivantes :

  1. Création d’une composition.
    Cliquez sur l’icône de composition en bas du panneau de projets ou sélectionnez Nouvelle composition sur l’écran d’accueil.

  2. Pour ajouter un calque de texte, sélectionnez Calque > Nouveau > Texte et saisissez le texte que vous souhaitez ajouter. Pour cet exemple, écrivons « Matin ».

  3. Ouvrez le panneau Effets et paramètres prédéfinis et recherchez Couleur de fond, et déposez-la sur le calque de texte.

  4. Une fois tous les calques en place, dans le panneau Effets et paramètres prédéfinis, recherchez Option de menu déroulant et déposez-le sur les calques. Vous pouvez également y accéder à partir de Effet > Options pour expressions > Option de menu déroulant.

    Dans le panneau Montage, ouvrez les propriétés du calque de texte et maintenez enfoncée la touche Alt en cliquant sur l’icône du chronomètre à côté de Texte source.

    Dans le champ de texte d’expression, copiez le fragment d’expression suivant qui modifie le texte source :

    var x = effect("Jours de la semaine")("Menu").value;

    if ( x === 1 ) {
    "Matin";
    } else if ( x === 2 ) {
    "Soir";

    } else if ( x === 3 ) {

    "Nuit";

    }

    Utilisez l’outil de sélection et liez le menu déroulant, nommé Jours de la semaine, à la propriété Texte source.

    Dans le panneau Options d’effet, cliquez sur Modifier. L’option de menu déroulant comporte trois éléments par défaut : Élément 1, Élément 2, Élément 3. Utilisez ces éléments pour nommer vos options de menu. Vous pouvez également ajouter d’autres options au menu à l’aide de l’icône + -. 

  5. Ajoutez un autre menu déroulant et renommez-le Couleur. Ensuite, ouvrez le calque de couleur de fond et maintenez enfoncée la touche Alt en cliquant sur la propriété Couleur. Pour modifier la couleur du texte, dans le champ d’expression, copiez le texte suivant :

    dropDownIndex = effect("Couleurs disponibles")("Menu").value;

    switch ( dropDownIndex )
    {
    case 1: hexToRgb("FF3211");
    break;
    case 2: hexToRgb("CC1234");
    break;
    default: hexToRgb("BBB001")
    };

    Utilisez l’outil de sélection et liez le menu déroulant à la propriété Couleur. Nommez ce menu déroulant Couleurs disponibles. Vous pouvez changer la couleur en fonction du tableau de couleur situé à côté de la propriété de couleur. 

  6. Pour connecter les deux propriétés du menu déroulant entre elles, utilisez l’outil de sélection Couleurs disponibles et liez-les au menu déroulant Jours de la semaine. Le menu déroulant des couleurs disponibles fait référence au menu déroulant Jours de semaine, ce qui signifie que le jour de la semaine que vous sélectionnez modifie également la couleur du texte.

  7. Poursuivez et faites glisser ces menus déroulants dans le panneau Objets graphiques essentiels et utilisez-les pour créer des modèles d’animations graphiques.

Téléchargez cet exemple de fichier pour vous aider à démarrer la création d’un projet.

Telechargement

Exemples d’expressions pour les options de liste déroulante

Tout comme pour d’autres options pour expressions telles que les curseurs, les valeurs du menu sont désignées comme des index dans les expressions. Vous pouvez effectuer une copie depuis l’exemple d’expression ci-dessous dans le champ de texte d’expression pour obtenir des résultats différents avec le menu déroulant.

Remarque :

Les noms des éléments du menu lui-même ne sont pas lus par l’expression. Au lieu de cela, elle lit l’index, c’est-à-dire la position hiérarchique de l’élément de menu dans la liste.

Exemple 1 : définissez la couleur d’un calque et connectez-le aux éléments du menu dans l’option du menu déroulant

Exemple 2

dropDownIndex = thisComp.layer("Null 2").effect("Option de menu déroulant")("Menu").value;

switch ( dropDownIndex )
{
case 1: hexToRgb("FF4678");
break;
case 2: hexToRgb("CC1234");
break;
default: hexToRgb("BBB007")
};

Modification des couleurs à l’aide du fragment d’expression
Modification des couleurs à l’aide du fragment d’expression

dropDownIndex = thisComp.layer("Null 2").effect("Option de menu déroulant")("Menu").value;

switch ( dropDownIndex )
{
case 1: hexToRgb("FF3211");
break;
case 2: hexToRgb("CC1234");
break;
default: hexToRgb("BBB001")
};

Exemple 2 : utilisez le texte source avec une option de menu déroulant

Si vous avez un menu déroulant avec les éléments de menu suivants dans cet ordre :

  1. Lundi
  2. Mardi
  3. Mercredi

Lundi est l’index 1, mardi est l’index 2, tant qu’il est le deuxième élément de la liste. Si vous renommez mardi en autre chose, l’expression ne se brise pas puisqu’elle est toujours sur l’index 2.

Voici un exemple simple permettant d’utiliser du texte source avec un effet Option de menu déroulant :

x = comp("Nom du composant").layer("Nom du calque").effect("Option de menu déroulant")("Menu");

si (x == 1) {

text.sourceText = ("Lundi");

si (x == 2) {

text.sourceText = ("Mardi");

}

si (x == 3) { 

text.sourceText = ("Mercredi");

}

Exemple 3 : définissez le texte source d’un calque de texte et connectez-le aux éléments du menu dans l’option du menu déroulant

var listItems = [

"Agneaux",
"Chiots",
"Rien",
];
var dropDownValue = effect("Option de menu déroulant")("Menu").value;
listItems[ dropDownValue - 1 ];

 

var x = effect("Option de menu déroulant")("Menu").value;if ( x === 1 ) {
"Agneaux";
} else if ( x === 2 ) {
"Chiots";
} else {
"Rien";
}

 

x = effect("Option de menu déroulant")("Menu").value;
switch (x) {
case 1 : "chien";
break;
case 2 : "chat";
break;
default : "par défaut" }

Points à prendre en compte lors de l’utilisation des options de liste déroulante

  • Renommez toujours l’option de liste déroulante en quelque chose qui reflète au mieux le contenu.
  • Les options de menu dans l’effet Option de menu déroulant ne sont pas sensibles à la casse ou au texte. Cela signifie que, même si vous renommez les éléments du menu, l’expression ne se brise pas. Cependant, elles sont sensibles à la position, donc changer la position de l’option du menu brise l’expression.
  • Maintenez un équilibre entre les différents composants utilisés dans vos modèles d’animations graphiques. Dans les cas où il y a des plages, utilisez les curseurs, et dans les cas où il existe des options telles que oui ou non, optez pour les cases à cocher. 
  • Le menu déroulant auquel vous associez tous les autres menus déroulants devient le parent. Les menus déroulants de la composition font référence au menu parent et se comportent en conséquence.

Prise en charge du scripting pour l’option de menu déroulant

Property.setPropertyParameters()

Méthode :

app.project.item(index).layer(index).propertySpec.setPropertyParameters([param-array])

Description :

Définit les paramètres d’une propriété.

Remarques

  • L’effet Option de menu déroulant (nom correspondant : ADBE Dropdown Control) est la seule propriété qui permet de définir les paramètres. 
  • Une exception est créée à chaque fois que cette méthode échoue.
  • Pour vérifier si une propriété permet de définir le paramètre, vérifiez avec isDropdownEffect avant d’appeler cette méthode (voir Property.isDropdownEffect.)

Détails du paramètre :

param-array

Un ensemble de chaînes. Cette méthode remplacera l’ensemble d’éléments de menu existant par l’ensemble de chaînes fourni. 

Il existe quelques restrictions sur les chaînes spécifiées comme éléments de menu :

1.     Les chaînes d’éléments vides ne sont pas autorisées.

2.     Les chaînes d’éléments en double ne sont pas autorisées.

3.     Le caractère « | » n’est pas autorisé dans les chaînes d’éléments.

4.     Seules les chaînes sont autorisées.

5.     Les chaînes d’objets doivent être encodables en ASCII ou MultiByte dans la page de code actuelle. En d’autres termes, les chaînes d’objets doivent être fournies dans le script du système en cours d’exécution. Par exemple, spécifier les chaînes d’éléments en japonais pendant l’exécution du script sur un système anglais créera un effet déroulant avec des caractères illisibles dans les chaînes d’éléments. 

Remarque : la chaîne « (- » peut être spécifiée à partir des chaînes d’éléments. Ces caractères apparaissent comme des lignes séparatrices dans le menu déroulant. L’auteur doit se rappeler que les lignes séparatrices nécessiteront un index chacune. 

Exemple :

Dropdowneffect = Dropdowneffect.setPropertyParameters(["Lundi", "Mercredi", "Vendredi", "Dimanche"]);

La déclaration ci-dessus modifiera le menu déroulant pour avoir lundi, mercredi, vendredi et dimanche comme éléments. La propriété retournée est la propriété mise à jour et doit être utilisée pour toutes les situations à venir.

Renvoie :

La propriété mise à jour. L’utilisateur doit noter que la propriété objet sur laquelle cette méthode est appelée devient invalide en raison de l’implémentation interne. De ce fait, la propriété retournée doit être utilisée pour toutes les autres utilisations.

Property.isDropdownEffect

Méthode:

app.project.item(index).layer(index).propertySpec.isDropdownEffect

Description:

Renvoie true (vrai) si la propriété est un effet d’option de menu déroulant.

Exemples :

appliedEffect.property("Menu").isDropdownEffect  // renvoie true

appliedEffect.property("Color").isDropdownEffect  // renvoie false  

appliedEffect.property("Feather").isDropdownEffect  // renvoie false

Retour:

Booléen

Une question ou une idée ?

Si vous avez une question à poser ou une idée à partager, rejoignez notre communauté After Effects et n’hésitez pas à participer. Faites-nous part de vos impressions et présentez-nous vos modèles d’animations graphiques.

Logo Adobe

Accéder à votre compte