Le langage utilisé



Le langage des expressions est basé sur le langage de programmation Javascript. Nous allons donc au fil du temps devoir nous familiariser avec sa syntaxe. Heureusement, seulement une petite partie du Javascript est utile lorsqu'on manipule des expressions dans After Effects, le Javascript étant plutôt dévolu aux applications web.

Si vous n'avez aucune notion de programmation, ce n'est pas grave, nous allons rappeler ici les notions essentielles et vous pouvez compléter cela par une recherche sur le web (les sites traitant de programmation sont très abondants et pour tous les niveaux).

Le Javascript utilise des objets, des méthodes et des attributs. Dans notre propos, les objets seront par exemple des calques ou des compositions (un objet peut aussi contenir un autre objet), les méthodes correspondront aux actions ou à la façon dont sont faites les actions et les attributs désigneront 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 retrouvera donc 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 " . ".

Par exemple si l'on écrit dans 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, "thisComp" est un objet d'After Effects représentant la composition dans laquelle on travaille,

"layer("Blanc uni 1")" désigne un sous-objet de "thisComp", 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,

"wiggle(2,50)" est la méthode. On reviendra en détail sur cette méthode. Sachons simplement pour le moment qu'elle fait trembler les valeurs de la propriété à laquelle elle est rattachée.

Heureusement pour nous, 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" de cette propriété. Donc on pourra directement écrire dans la propriété de rotation de notre calque l'expression 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 notre expression nous faisons référence à un autre calque, il faut préciser qu'il appartient à la composition dans laquelle nous travaillons (le sélecteur d'expressions ou "escargot" nous aidera à faire cela).


Les opérations


Comme on l'a mentionné dans la partie précédente, 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.

Nous pouvons changer l'ordre dans lequel sont effectuées les opérations en utilisant des parenthèses.

      (10 - 3)*2

nous donnera 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 le "0" devant, on écrira par exemple

      .5*rotation

pour indiquer "0,5*rotation". Personnellement, je préfère toujours laisser un "0" devant le point pour plus de clarté. A vous de voir la notation avec laquelle vous vous sentez le plus à l'aise, les deux (avec ou sans le zéro) sont bien entendu acceptées et désignent la même valeur.

Une autre opération est également disponible et nous 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.

      3.5%2

vaudra 1.5 car 3.5 = 1*2 + 1.5

Notons que

      15%5

aura pour valeur 0 car 15 est un multiple de 5, donc le reste de la division est nul, 15 = 3*5 + 0


Les variables


On aborde là une notion primordiale que ce soit dans le domaine informatique ou mathématique. La notion de variables.

Une variable peut être considérée comme un "stockeur", elle sert à garder en mémoire une valeur qu'on lui aurait attribuée. Pour respecter la terminologie informatique, on parlera d'affecter une valeur à une variable. Bien entendu, si l'on n'a pas besoin de cette valeur dans la suite du calcul, il ne sert pas à grand chose de l'affecter à une variable.

Le nom de nos variables doit être différent des noms prédéfinis par After Effects. Nous ne nommerons pas nos variables "time" ou "opacity" par exemple mais on pourra écrire "t" ou "op" pour désigner une variable se référant au temps ou à l'opacité.

Par exemple, écrire

      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'on a ajouté un ";" à la fin de la ligne. Cela signifie qu'il s'agit d'une "instruction".


Les instructions


Lorsque nous allons être amenés à écrire des expressions, nous allons écrire une suite d'instructions. La plupart des instructions seront des affectations, avec le nom d'une variable à gauche (on parle de "membre de gauche" en mathématique), le signe "=", et la valeur affectée à la variable dans le membre de droite.

De façon générale, toute instruction se termine par un ";". Néanmoins dans After Effects, la dernière instruction évaluée dans l'expression ne nécessite pas obligatoirement ce " ; ", ni même de signe " = ". En effet 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 nous écrivons sur la propriété d'opacité, l'expression

      30

After Effects considèrera l'affectation

      opacity = 30;

Personnellement je préfère toujours mettre un " ; " à la fin d'une instruction. Il serait tout à fait correct d'écrire par exemple sur la propriété d'opacité

      x = 4;
      y = 20*x;

le dernier ";" n'est pas nécessaire à vous de voir ce que vous préférez. Dans les deux cas cela attribuera la valeur 80 à l'opacité, puisque 80 est le résultat de la dernière instruction évaluée. J'en mettrai dorénavant.


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 {... ;}

Si la condition entre parenthèses est satisfaite alors After Effects évaluera le premier bloc d'instructions (entre les premières accolades), dans le cas contraire il évaluera le deuxième bloc d'instructions, introduit par le "else".

Pour plus de lisibilité j'écris toujours une instruction "if/else" sur plusieurs lignes, en revenant à la ligne après chaque accolade et après chaque instruction.

Regardons tout de suite cela sur un petit exemple. Supposons que nous voulons avoir notre solide 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 cet effet, nous allons écrire l'expression suivante dans la propriété d'opacité de notre calque (sa position étant animée par 4 clés et notre composition est de taille 160*120):

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

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

Nous obtenons l'animation suivante:




Comparaison et opérateurs logiques


Pour écrire des conditions plus élaborées dans notre "if/else", nous allons avoir besoin de nouveaux opérateurs.

Le premier nous permettra de savoir si deux valeurs sont égales ou non. Cet opérateur est noté "==". Si ces valeurs sont égales, le résultat du test sera Vrai et le premier bloc d'instructions sera évalué, dans le contraire il sera Faux et le deuxième bloc d'instructions sera évalué.
Il existe également 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é.

Nous pouvons 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 notre exemple ci-dessus. Nous voudrions 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. Nous écrivons l'expression suivante sur la propriéte d'opacité de notre calque:

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

Sachons simplement que "position[0]" désigne la pemière coordonnée de la position (abscisse) et "position[1]" sa deuxième (ordonnée).
Nous n'avons modifié que la condition du "if" entre les parenthèses.

L'opacité du solide 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%.

Notre calque sera ainsi entièrement opaque lorsqu'il se situera dans les cadrans supérieur gauche et inférieur droit, et sera presque transparent dans les deux autres cadrans. L'animation qu'on obtient est celle-ci:





Remarques importantes


Le langage Javascript est sensible à la casse (lettre minuscule/majuscule). La variable "x" et la variable "X" sont deux variables différentes.

Les expressions n'ont pas de "mémoire". Tout calcul effectué à une image est oublié à l'image suivante. Elles n'ont aucun moyen de stocker des valeurs quelque part et d'y accéder plus tard. Il existe des "astuces" pour y remédier mais cela n'est pas toujours facile à mettre en place et nécessite beaucoup de temps de calcul.