Expressions/Introduction/Langage utilisé

Langage utilisé

Le langage des expressions est basé sur le langage de programmation JavaScript. On va donc au fil du temps devoir se familiariser avec sa syntaxe. Seulement une petite partie du JavaScript est utile lorsque l'on manipule des expressions dans After Effects, le JavaScript étant plutôt dévolu aux applications web.

Le JavaScript utilise des objets, des méthodes et des attributs. Dans le langage des expressions, les objets sont par exemple des calques ou des compositions (un objet peut aussi contenir un autre objet), les méthodes correspondent aux actions ou à la façon dont sont faites les actions et les attributs désignent les propriétés d'un objet, comme par exemple son opacité, sa position, sa durée ou encore son nom.

Les termes employés sont en anglais, on retrouve par exemple opacity pour désigner l'attribut opacité ou encore scale pour se référer à l'échelle du calque.

Il y a une certaine hiérarchie à respecter, dans le sens où l'on précise d'abord le nom de l'objet, puis les objets qui sont contenus dans cet objet (sous-objets), ensuite la propriété sur laquelle on souhaite effectuer une méthode, et pour finir la méthode elle-même. Ils doivent être séparés par un point ".". Par exemple si l'on écrit sur la propriété de rotation d'un calque "Blanc uni 1", l'expression

thisComp.layer("Blanc uni 1").rotation.wiggle(2,50)

thisComp désigne l'objet, en l'occurence un objet représentant la composition dans laquelle on travaille, layer("Blanc uni 1") désigne le sous-objet, en l'occurence il s'agit du calque "Blanc uni 1" ("layer" est le mot anglais pour calque), rotation représente la valeur de la propriété de rotation du calque et enfin wiggle(2,50) est la méthode. On reviendra en détail sur cette méthode.

En écrivant une expression sur une propriété d'un calque, After Effects considère par défaut que l'on se situe déjà au niveau hiérarchique de cette propriété. On pourra donc écrire l'expression précédente directement sous la forme

wiggle(2,50)

sans avoir à préciser que l'on se réfère à la composition actuelle, au calque "Blanc uni 1" et à la propriété de rotation. Néanmoins, si dans l'expression on fait référence à un autre calque, il faut préciser qu'il appartient à la composition dans laquelle on travaille (le sélecteur d'expressions ou "escargot" aidera à faire cela).

Les opérations

Les opérateurs +, -, *, /, comme dans n'importe quel langage informatique, peuvent être utilisés. La multiplication et la division priment sur les deux autres opérations, dans le sens où elles seront d'abord effectuées.

10 - 3 * 2

aura pour résultat 4, car le premier calcul est 3 * 2 = 6, puis le second donne 10 - 6 = 4. On peut changer l'ordre dans lequel sont effectuées les opérations en utilisant des parenthèses. Par exemple

(10 - 3) * 2

aura pour résultat 14 car la première opération calculée est 10 - 3 = 7 et ensuite 7 * 2 = 14.

La virgule est notée par un point "." et lorsque le nombre sera compris entre -1 et 1 on ne sera pas forcé d'écrire un 0 devant, on pourrait écrire par exemple

.5 * rotation

Personnellement je préfère toujours spécifier le zéro devant le point pour plus de clarté. À vous de voir la notation avec laquelle vous vous sentez le plus à l'aise.

Une autre opération est également disponible et sera utile pour la suite, il s'agit de l'opérateur modulo, noté "%". Il désigne le reste d'une division (euclidienne). Par exemple

14 % 4

vaudra 2 car 14 = 3 * 4 + 2. Cela fonctionne également avec des nombres qui ne sont pas entiers. Par exemple

3.5 % 2

vaudra 1.5 car 3.5 = 1 * 2 + 1.5. Notons que

15 % 5

donnera 0 car 15 est un multiple de 5 (15 = 3 * 5 + 0).

Les variables

Une variable peut être considérée comme un "stockeur", elle sert à garder en mémoire une valeur (qui peut être par exemple un nombre, une propriété, un objet, etc) qu'on lui aurait attribuée. Pour respecter la terminologie informatique, on parlera d'affecter une valeur à une variable.

Le nom des variables doit être différent des noms prédéfinis par After Effects. On ne nommera pas les variables time ou opacity par exemple, mais on choisira plutôt t ou op par exemple, pour désigner une variable se référant au temps ou à l'opacité.

Écrire par exemple

x = 4;

a pour conséquence de créer une variable qu'on a choisi d'appeler x et de lui affecter la valeur 4. Plus tard dans le calcul, si l'on utilise x, on fera alors référence à la valeur 4. On pourra également en tout temps modifier la valeur de cette affectation.

Vous avez sans doute remarqué qu'un point virgule ";" a été ajouté à la fin de la ligne. Cela signifie qu'il s'agit d'une instruction.

Les instructions

Lorsque l'on va être amené à écrire des expressions, on va écrire une suite d'instructions. La plupart des instructions seront des affectations, avec le nom d'une variable à gauche, le signe égal "=", et enfin la valeur affectée à la variable. De façon générale, toute instruction se termine par un point virgule ";". Néanmoins dans After Effects, la dernière instruction évaluée dans l'expression ne nécessite pas obligatoirement de point virgule, ni même de signe égal. After Effects considèrera toujours que la dernière instruction évaluée (qui ne sera pas forcément la dernière ligne) est une affectation de valeur à la propriété concernée par l'expression. Si l'on écrit sur la propriété d'opacité, l'expression

30

After Effects interprètera en interne l'affectation "opacity = 30". Personnellement je préfère toujours mettre un point virgule à la fin d'une instruction.

Instruction conditionnelle

Comme dans la plupart des langages, l'instruction conditionnelle "if/else" est autorisée dans le langage des expressions. Elle permet de créer un certain comportement si une condition est satisfaite, et un autre comportement si elle ne l'est pas. Sa syntaxe générale est la suivante: if(...) {.... ;} else {... ;} et son interprétation est la suivante. Si la condition entre parenthèses est satisfaite alors le premier bloc d'instructions (entre les premières accolades) sera évalué, dans le cas contraire ce sera le deuxième bloc (introduit par "else"). Pour plus de lisibilité j'écris en général une instruction "if/else" sur plusieurs lignes.

Regardons un petit exemple: supposons que l'on veuille que le calque soit parfaitement opaque (100%) lorsqu'il parcourt la moitié supérieure de la composition et que cette opacité soit de 20% quand le solide se trouve dans la partie inférieure. Pour réaliser cela, on va écrire l'expression suivante sur la propriété d'opacité (la position étant animée par 4 clés et la composition est de taille 160x120)

if (position[1] < 60)
{
   100;
}
else
{
   20;
}

On reviendra plus tard sur la signification exacte de position[1], sachons simplement pour le moment que cela désigne la position en y du calque (son ordonnée). À chaque image de l'animation, l'expression est évaluée. Si l'ordonnée du calque est inférieure à 60, l'opacité sera de 100. En revanche si cette condition n'est pas satisfaite (i.e., si l'ordonnée est supérieure ou égale à 60), une valeur de 20 sera affectée à son opacité. On obtient l'animation suivante

Comparaison et opérateurs logiques

Pour écrire des conditions plus élaborées dans une instruction "if/else", on va avoir besoin de nouveaux opérateurs. Le premier permet de savoir si deux valeurs sont égales ou non. Cet opérateur est noté "==". Si ces valeurs sont égales, le résultat du test est Vrai et le premier bloc d'instructions sera évalué, dans le contraire il est Faux et le deuxième bloc d'instructions sera évalué. Il existe son homologue pour tester si deux valeurs sont différentes, ou pas. Cet opérateur est noté "!=". Si les deux valeurs sont différentes, le résultat du test sera Vrai et le premier bloc sera évalué. Si ce n'est pas le cas, le résultat du test sera Faux et le deuxième bloc sera évalué. On peut aussi tester si plusieurs conditions à la fois sont satisfaites ou non et en conséquence appliquer tel ou tel bloc d'instructions. Il existe deux opérateurs de ce type. Le premier correspond au "et" logique et le second au "ou" logique, ils sont respectivement notés "&&" et "||". Il est également permis de les combiner.

Reprenons l'exemple ci-dessus. On souhaiterait maintenant que le solide change d'opacité dès lors qu'il change de cadran (haut/bas gauche/droite). Utilisons ces deux derniers opérateurs pour réaliser cela. On écrit l'expression suivante sur la propriéte d'opacité

x = position[0];
y = position[1];
if ((x < 80 && y < 60) || (x > 80 && y >60))
{
   100;
}
else
{
   20;
}

position[0] désigne la première coordonnée de la position (la position en x) et position[1] la deuxième coordonée (la position en y). On n'a modifié que la condition entre les parenthèses. L'opacité du calque sera de 100%: première possiblité, si l'abscisse du calque est inférieure à 80 et son ordonnée est inférieure à 60, deuxième possiblité, ou si son abscisse est supérieure à 80 et son ordonnée est supérieure à 60; sinon elle sera de 20%. Le calque sera ainsi entièrement opaque lorsqu'il se situera dans le cadran supérieur gauche et le cadran inférieur droit, et sera presque transparent dans les deux autres cadrans. L'animation obtenue est la suivante