Utiliser des expressions pour accéder aux propriétés du texte et les modifier

Utilisez des expressions pour contrôler le style de texte dans n’importe quelle expression de texte ou dans les modèles d’animations graphiques. Voici quelques petites choses que vous pouvez faire avec les expressions :

• Lier plusieurs titres et mettre tous leurs styles à jour en même temps (très utile pour concevoir des titres).
• Garder la police, la taille et le style synchronisés sur plusieurs calques de texte.
• Apporter des modifications globales aux propriétés du texte.
• Définissez les attributs de style des caractères individuels dans un calque de texte.

Une fois que vous avez défini cela pour un calque de texte, vous pouvez référencer les propriétés de ce calque de façon à appliquer facilement les modifications dans l’ensemble de la composition. Les expressions After Effects utilisent des propriétés pour lire (get) les valeurs de style de texte et les méthodes de fonction pour les écrire (set) dans le moteur d’expression. Cela vous permet de lier des styles de texte sur des calques de texte ou de définir des commandes pour qu’ils soient animés ou utilisés dans un modèle d’animations graphiques.

Avant de commencer à utiliser les expressions pour modifier les propriétés de texte

1. Définissez le moteur d’expressions sur Javascript en sélectionnant Paramètres du projet > Expressions > Moteur d’expressions > Javascript.
2. Ajoutez une expression à la propriété Texte source d’un calque de texte.
3. Dans le menu contextuel Langage d’expression, sélectionnez Texte > Propriétés > Propriétés de texte ou Texte > Style.

Attributs de texte disponibles

Les attributs de style de texte suivants peuvent être lus et définis à l’aide de l’objet style :

La propriété Texte source d’un calque de texte est interprétée dans les expressions comme une chaîne JavaScript. Le texte lui-même peut être lu avec sourceText, mais il doit être défini sur l’objet Style avec la méthode setText si les attributs de style sont modifiés. Consultez certains exemples.

Expressions pour les calques de texte contenant des paragraphes

Démarrer une nouvelle ligne de texte

Utilisez \r dans une expression de chaîne pour commencer une nouvelle ligne de texte. Par exemple, pour copier le texte original d’un calque sur le même calque et le répéter en majuscules sur une nouvelle ligne, utilisez l’expression suivante :

text.sourceText + “\r” + text.sourceText.toUpperCase()

Attributs de paragraphe disponibles 

Outre les attributs de style de texte, il existe également des attributs de paragraphe. Ces paramètres peuvent uniquement être appliqués à l’ensemble du calque Texte. Les attributs de paragraphe sont uniquement disponibles dans After Effects.

Menu d’expression de police PostScript

Lorsqu’ils font référence à des polices dans des expressions, ils doivent utiliser un « nom système » spécial (ou similaire). Il est recommandé d’insérer ce nom spécial à partir de la boîte de dialogue Texte > Police > Sélectionner une police pour éviter les erreurs d’expression.

• Ouvrez le menu contextuel Langage d’expression, puis sélectionnez Texte > Police. Cela fait apparaître une boîte de dialogue avec des menus déroulants pour sélectionner la police de caractères et la police à insérer dans l’expression.

Synchronisation des polices

Les polices auxquelles il est uniquement fait référence dans l’Éditeur d’expressions ne sont pas enregistrées en tant que polices utilisées par le projet. Pour vous assurer que toutes les polices référencées dans l’Éditeur d’expressions se synchronisent automatiquement ou remplissent la boîte de dialogue Résoudre les polices, utilisez toutes ces polices sur un calque, même si la source de calque utilisée est masquée.

Objet Style

Toutes les propriétés de style d’un calque de texte existent sur l’objet Style, auquel vous accédez sur la propriété Texte source à l’aide des éléments suivants :

// Utilisation du chemin complet vers la propriété Source Text
text.sourceText.style

// Utilisation du nom générique pour la propriété actuelle
thisProperty.style

L’utilisation du style en soi est identique à l’utilisation de l’un des deux exemples ci-dessus, ce qui peut être déroutant si les attributs de style de plusieurs calques de texte sont combinés.

Les attributs de style d’autres calques de texte peuvent également être lus. Utilisez le fouet de sélection pour créer un lien vers l’autre calque de texte au début du premier exemple illustré ci-dessus.

// Accès à l'objet style d'un calque de texte spécifique

thisComp.layer("Other Layer Name").text.sourceText.style;

Attributs de style de caractères individuels dans un calque de texte

Outre l’utilisation d’expressions de texte pour définir les attributs de style de l’ensemble du calque de texte, vous pouvez également définir des attributs de style de caractères individuels dans le calque. L’un des avantages de ce contrôle par caractère est le reformatage automatique du texte, tel que la mise à l’échelle des lettres, l’utilisation d’un exposant et l’utilisation d’une police différente, comme vous le feriez avec le style des sous-chaînes du panneau Caractère.

Exemples

Modifier la police pour certains mots

text.sourceText.style
.setFont("Montserrat-Light")
.setFont("Gigantic", 0, 6).setFont("Gigantic", 10, 6).setFont("Gigantic", 20)

Définir la première ligne d’un calque de texte sur gras et l’agrandir

text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(true, 0, 30)

Définir l’exposant pour les caractères

Pour utiliser la chaîne, ajoutez un calque de texte avec du texte « Première et deuxième positions » et appliquez le texte suivant au texte source.

textourceTexttyleetBaselineOption(“superscript”,1,2)etBaselineOption(“superscript”, 9, 2)

Combiner le style et le texte source

Pour renvoyer à la fois les valeurs du style et du texte source réel, vous devrez combiner les fonctions getStyleAt et setText. Vous trouverez ci-dessous deux exemples d’écriture de cette expression.

// Pour renvoyer les valeurs du style et du Source Text réel au moment donné (raccourci)

var sourceTextProperty = thisComp.layer("MAIN TEXT").text.sourceText;

var newStyle = sourceTextProperty.getStyleAt(0,0);

newStyle.setText(sourceTextProperty);

// Pour renvoyer les valeurs du style et du Source Text réel du calque précédent dans l'ordre d'empilement des calques

var sourceTextProperty = thisComp.layer(index - 1).text.sourceText;

var newStyle = sourceTextProperty.getStyleAt(0,0);

newStyle.setText(sourceTextProperty);

Polices déroulantes

Vous pouvez utiliser les menus déroulants pour contrôler les styles de texte, tels que le verrouillage des calques de texte sur des polices spécifiques. Ceci est utile pour les directives de marque, les modèles, MoGRTS, etc. :

// Pour verrouiller un calque de texte sur des polices spécifiques avec un contrôle de menu déroulant

var dropDownMenu = thisComp.layer("LayerName").effect("Dropdown Menu Control")("Menu");

switch (dropDownMenu.value) {

case 1 :

text.sourceText.style.setFont("Georgia");

break;

case 2 :

text.sourceText.style.setFont("Impact");

break;

default :

text.sourceText.style.setFont("Tahoma");

}

Calque de texte principal

Liez plusieurs calques de texte à un contrôleur de police principal pour contrôler le style de texte de plusieurs calques à la fois. Créez deux calques de texte et collez cette expression dans le texte source de l’un d’entre eux :

// Pour obtenir toutes les propriétés de texte d'un calque de texte

thisComp.layer("Text Layer 1").text.sourceText.style;

Il est possible d’obtenir le style à partir d’un calque de texte, mais remplacez des propriétés de texte spécifiques en ajoutant des valeurs avec les fonctions set. Vous trouverez ci-dessous deux exemples utilisant la couleur de remplissage et la taille de police.

// Pour obtenir toutes les propriétés de texte de « Calque de texte 1 » mais remplacer la couleur de remplissage et la taille de police par des valeurs codées en dur

var newStyle = thisComp.layer("Text Layer 1").text.sourceText.style;

newStyle.setFillColor(hexToRgb("FF0000")).setFontSize(100);

// Pour obtenir toutes les propriétés de texte de « Text Layer 1 » mais remplacer la couleur de remplissage et la taille de police par les propriétés de texte actuelles du calque

var newStyle = thisComp.layer("Text Layer 1").text.sourceText.style;

var currentFillColor = thisProperty.style.fillColor;

var currentFontSize = thisProperty.style.fontSize;

newStyle.setFillColor(currentFillColor).setFontSize(currentFontSize);

Exemples

Les exemples ci-dessous indiquent comment accéder aux valeurs de propriétés de texte et les utiliser à l’aide d’expressions.

Police

Voici des exemples d’accès à la police, à la taille de police, au faux gras, au faux italique, au suivi et à l’interlignage d’un calque de texte :

// Pour renvoyer le nom de la police du calque de texte lui-même
text.sourceText.style.font;

// Pour renvoyer le nom de la police qu'utilise un autre calque de texte
var otherLayer = thisComp.layer("Other Layer Name");

otherLayer.text.sourceText.style.font;

// Pour renvoyer la valeur de Taille de police du calque de texte lui-même
text.sourceText.style.fontSize;

// Pour renvoyer la valeur de Taille de police d'un autre calque de texte
var otherLayer = thisComp.layer("Other Layer Name");

otherLayer.text.sourceText.style.fontSize;

// Pour renvoyer une valeur booléenne indiquant si le texte d'un calque est en faux gras ou non (vrai ou faux)
text.sourceText.style.isFauxBold;

// Pour renvoyer une valeur booléenne indiquant si le texte d'un calque est en faux italique ou non (vrai ou faux)
text.sourceText.style.isFauxItalic;

// Pour renvoyer la valeur du suivi d'un calque de texte sous forme de nombre
text.sourceText.style.tracking;

// Pour renvoyer la valeur de l'interligne d'un calque de texte sous forme de nombre
text.sourceText.style.leading;

Remplissage

Voici des exemples d’accès à la couleur de remplissage et au remplissage d’un calque de texte :

// Pour renvoyer une valeur booléenne indiquant si un fond est appliqué au texte d'un calque (vrai ou faux)
text.sourceText.style.applyFill;

// Pour renvoyer la valeur de la couleur de fond d'un calque de texte
// Par défaut, cela renvoie un tableau des valeurs RGB sur une échelle de 0 à 1,0
text.sourceText.style.fillColor;

// Définir la couleur de fond d'un calque de texte avec setApplyFill et setFillColor
// Les valeurs setFillColor sont définies comme un tableau RGB sur une échelle entre 0 et 1,0
var newStyle = style.setApplyFill(true);

newStyle.setFillColor([1.0, 1.0, 1.0]);

// Définir la couleur de fond d'un calque de texte en substituant le tableau RGB 0 – 1,0 par hexToRGB pour définir les valeurs de couleur avec des valeurs hexadécimales
var newStyle = style.setApplyFill(true);

newStyle.setFillColor(hexToRgb("FFFFFF"));

Valeurs de remplissage RGB

// Pour renvoyer la valeur rouge (R) de la couleur de fond

text.sourceText.style.fillColor[0];

Contour

Voici des exemples d’accès au contour, à la couleur du contour et à l’épaisseur du contour d’un calque de texte :

// Pour renvoyer une valeur booléenne indiquant si un trait est appliqué au texte d'un calque (vrai ou faux)
text.sourceText.style.applyStroke;

// Pour renvoyer la valeur de la couleur de trait d'un calque de texte
// Par défaut, cela renvoie un tableau des valeurs RGB sur une échelle de 0 à 1,0
text.sourceText.style.strokeColor;

// Définir la couleur de trait d'un calque de texte avec setApplyStroke et setStrokeColor
// Les valeurs setStrokeColor sont définies comme un tableau RGB sur une échelle entre 0 et 1,0
var newStyle = style.setApplyStroke(true);

newStyle.setStrokeColor([1.0, 0.0, 0.0]);

// Définir la couleur de trait d'un calque de texte en substituant le tableau RGB 0 – 1,0 par hexToRGB pour définir les valeurs de couleur avec des valeurs hexadécimales
var newStyle = style.setApplyStroke(true);

newStyle.setStrokeColor(hexToRgb("FF0000"));

// Pour renvoyer la valeur de la largeur de trait d'un calque de texte sous forme de nombre
text.sourceText.style.strokeWidth;

Valeurs RVB du trait

// Pour renvoyer la valeur verte (G) de la couleur de trait

text.sourceText.style.strokeColor[1];

Fonction getStyleAt

Utilisez la fonction get pour renvoyer la valeur de style d’un caractère particulier à un moment précis. La valeur index doit être un nombre, l’index de la lettre ou du caractère dont le style est nécessaire. La valeur atTime doit également être un nombre, le délai dans la composition pour obtenir le style pour le cas où celui-ci serait encadré et changerait au fil du temps.

text.sourceText.getStyleAt(index, atTime);

// Obtient le style du premier caractère au début de la chronologie

text.sourceText.getStyleAt(0,0);

Fonctions Set

Fonctions set supplémentaires pouvant être utilisées individuellement ou en combinaison les unes avec les autres pour générer des styles au niveau des calques. Chacune de ces fonctions est appelée sur l’objet style d’une propriété de texte source :

// Définir la police utilisée sur Arial
style.setFont("ArialMT")

// Définir la taille de police sur 80
style.setFontSize(80);

// Activer le faux gras avec un Booléen
style.setFauxBold(vrai)

// Activer le faux Italique avec un Booléen
style.setFauxItalics(vrai)

// Activer Tout en majuscules avec un Booléen
style.setAllCaps(vrai)

// Activer Petites majuscules avec un Booléen
style.setSmallCaps(vrai)

// Définir le suivi comme un nombre
style.setTracking(10);

// Définir l'interligne comme un nombre
style.setLeading(10);

// Activer Interligne auto avec un Booléen
style.setAutoLeading(vrai);

// Définir le Décalage vertical comme un nombre
style.setBaselineShift(10);

// Définir la Largeur du trait comme un nombre
style.setStrokeWidth(10);

// Définir la première ligne d'un Calque de texte en gras et l'agrandir
text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(vrai, 0, 30)

// Définit l'exposant pour les caractères
text.sourceText.style.setBaselineOption("superscript",1,2).setBaselineOption("superscript", 9, 2)

Toutes les fonctions set pour les styles de texte peuvent être enchaînées afin de définir facilement plusieurs attributs sans avoir à déclarer un nouveau style à chaque fois, comme dans l’exemple suivant :

// Activer le fond, définir la couleur de fond, définir la référence, définir le suivi et activer Interligne auto

text.sourceText.style

.setApplyFill(vrai)

.setFillColor(hexToRgb("FFFFFF"))

.setBaselineShift(10)

.setTracking(25)

.setAutoLeading(vrai);

Utilisations supplémentaires des expressions sur le texte source

Ajouter un calque de texte à une composition et une expression à sa propriété Texte source permet un examen efficace des valeurs de propriétés d’autres calques. Par exemple, dans la propriété Texte source, l’expression suivante indique le nom et la valeur de la propriété Opacité du calque suivant dans l’ordre d’empilement des calques :

var nextLayer = thisComp.layer(index + 1);
nextLayer.name + "\rOpacité = " + nextLayer.opacity.value;

L’exemple suivant indique le nom du métrage utilisé comme source du calque d’image le plus élevé dans l’ordre d’empilement à l’instant en cours pour lequel l’option Vidéo est définie :

```json { "translatedText": [ "// Créer sourceFootageName comme chaîne vide
", " var sourceFootageName = \"\";
", "
", " // Parcourir tous les calques de la composition
", " for (var i = 1; i <= thisComp.numLayers; i++) {
", "
", " // Si i correspond à l'Index de ce calque, passer à la boucle suivante
", " if (i == index) {
", " continue;
", " }
", "
", " // Définir myLayer pour l'itération actuelle de la boucle
", " var myLayer = thisComp.layer(i);
", "
", " // Si myLayer n'a pas de vidéo ou n'est pas Principal, passer au calque/boucle suivant
", " if ( !myLayer.hasVideo || !myLayer.active ) {
", " continue;
", " }
", "
", " // Si myLayer est Principal au moment actuel
", " if ( myLayer.active ) {
", " try {
", " // Définir sourceFootageName sur le nom source de myLayer
", " sourceFootageName = myLayer.source.name;
", " } catch ( err ) {
", " // Si myLayer n'a pas de source,
", " // définir sourceFootageName sur le nom de myLayer
", " sourceFootageName = myLayer.name;
", " }
", "
", " // Arrêter la boucle
", " break;
", " }
", " }
", "
", " // Afficher le sourceFootageName
", " sourceFootageName;" ] } ```

Enregistrer les expressions en tant que paramètres prédéfinis

Sélectionnez la propriété de texte source sur laquelle sont ajoutées des expressions. Sélectionnez ensuite Animation > Enregistrer l’animation prédéfinie pour réutiliser les expressions dans d’autres projets. Les animations prédéfinies sont enregistrées dans le panneau Effets et paramètres prédéfinis.

Pour plus d’informations, voir Présentation des effets et animations prédéfinis.

En savoir plus sur les ressources dʼexpression