Guide d'utilisation Annuler

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

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.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?